fix: load API format workflows with missing node types

## Summary
- Add Storybook stories for `Slider` component matching Figma design
system variants 1:1
- Stories at `Components/Slider`: **Default** and **Disabled**
- Add hover background
(`hover:bg-component-node-widget-background-hovered`) to
`WidgetInputNumberSlider` only

## Figma reference
[Comfy Design System —
Slider](https://www.figma.com/design/vALUV83vIdBzEsTJAhQgXq/Comfy-Design-System?node-id=2-9718&m=dev)

## Scope decisions
- **Hover**: Added to `WidgetInputNumberSlider.vue` only — other widgets
need separate verification before applying
- **Invalid**: Not implemented in `Slider.vue` — excluded until
component supports it

## Files changed
- `src/components/ui/slider/Slider.stories.ts` — new
-
`src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue`
— add hover background

## Test plan
- [ ] `pnpm storybook` — verify Default and Disabled render under
`Components/Slider`
- [ ] Hover background visible on slider widget in app (e.g. KSampler
`cfg` slider)
- [ ] Other widget inputs (text, textarea, select) unchanged
- [ ] `pnpm typecheck` — passes
- [ ] `pnpm lint` — passes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

.github/workflows/api-update-electron-api-types.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Update electron types

.github/workflows/api-update-manager-api-types.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/api-update-registry-api-types.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/cloud-dispatch-build.yaml

@@ -13,6 +13,8 @@ on:
     branches:
       - 'cloud/*'
       - 'main'
+  pull_request:
+    types: [labeled, synchronize]
   workflow_dispatch:
 
 permissions: {}
@@ -23,16 +25,38 @@ concurrency:
 
 jobs:
   dispatch:
-    # Fork guard: prevent forks from dispatching to the cloud repo
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    # Fork guard: prevent forks from dispatching to the cloud repo.
+    # For pull_request events, only dispatch for preview labels.
+    # - labeled: fires when a label is added; check the added label name.
+    # - synchronize: fires on push; check existing labels on the PR.
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      (github.event_name != 'pull_request' ||
+       (github.event.action == 'labeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
+       (github.event.action == 'synchronize' &&
+        (contains(github.event.pull_request.labels.*.name, 'preview') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
         id: payload
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
         run: |
+          if [ "${EVENT_NAME}" = "pull_request" ]; then
+            REF="${PR_HEAD_SHA}"
+            BRANCH="${PR_HEAD_REF}"
+          else
+            REF="${GITHUB_SHA}"
+            BRANCH="${GITHUB_REF_NAME}"
+          fi
           payload="$(jq -nc \
-            --arg ref "${GITHUB_SHA}" \
-            --arg branch "${GITHUB_REF_NAME}" \
+            --arg ref "${REF}" \
+            --arg branch "${BRANCH}" \
             '{ref: $ref, branch: $branch}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 

.github/workflows/pr-claude-review.yaml

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.github/workflows/pr-perf-report.yaml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version-file: '.nvmrc'
 
       - name: Download PR metadata
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
 
       - name: Read desktop-ui version
         id: get_version

.github/workflows/publish-desktop-ui.yaml

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - name: Install dependencies
         working-directory: frontend

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

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - name: Check version bump type
         id: check_version

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

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-npm-types.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-version-bump.yaml

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
 
       - name: Bump version
         id: bump-version

.github/workflows/version-bump-desktop-ui.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

.github/workflows/weekly-docs-check.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v24) and pnpm
+  - Node.js (see `.nvmrc`, currently v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,10 +1,7 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{
@@ -16,7 +13,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
     <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-6 text-neutral-300">
-      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+    <div class="flex grow flex-col gap-6 text-neutral-300">
+      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-center text-neutral-400 px-12">
+      <p class="px-12 text-center text-neutral-400">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <InputText
           v-model="installPath"
           :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,7 +23,7 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          class="border-0 bg-neutral-700 hover:bg-neutral-600"
           @click="browsePath"
         />
       </div>
@@ -33,7 +33,7 @@
         <Message
           v-if="pathError"
           severity="error"
-          class="whitespace-pre-line w-full"
+          class="w-full whitespace-pre-line"
         >
           {{ pathError }}
         </Message>

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -26,7 +26,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="h-full w-full object-contain px-4 pt-4 opacity-25"
+          class="size-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -52,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
+      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 z-10 col-span-full row-span-full text-[4rem] text-green-500 opacity-100 transition-opacity [text-shadow:0.25rem_0_0.5rem_black] group-hover/task-card:opacity-20"
     />
   </div>
 </template>

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="text-neutral-400 w-full text-center">
+      <p class="w-full text-center text-neutral-400">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,7 +45,8 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -55,6 +56,7 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
+const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -80,8 +82,7 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription'),
-    life: 10_000
+    detail: message ?? t('maintenance.error.defaultDescription')
   })
 }
 

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
-    <h1 class="font-inter font-semibold text-xl m-0 italic">
+  <div class="flex size-full flex-col justify-between rounded-lg p-6">
+    <h1 class="m-0 font-inter text-xl font-semibold italic">
       {{ $t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
     >
       <div class="relative m-8 text-center">
         <!-- Header -->
@@ -13,7 +13,7 @@
           <span>{{ $t('desktopUpdate.description') }}</span>
         </div>
 
-        <ProgressSpinner class="m-8 w-48 h-48" />
+        <ProgressSpinner class="m-8 size-48" />
 
         <!-- Console button -->
         <Button

apps/desktop-ui/src/views/InstallView.vue

@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="w-full h-full flex flex-col">
+    <div class="flex size-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -1,21 +1,21 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
+      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
     >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="w-full flex flex-wrap gap-4 items-center">
+        <div class="flex w-full flex-wrap items-center gap-4">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex gap-4 items-center">
+          <div class="flex items-center gap-4">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="block mb-1">
+              <strong class="mb-1 block">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="block mb-1">
+              <span class="mb-1 block">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
+          class="border-x-0 border-y border-solid border-neutral-700"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
+        <div class="flex flex-row justify-between gap-4">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"
@@ -189,8 +189,7 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue'),
-      life: 5_000
+      detail: t('maintenance.error.cannotContinue')
     })
   }
 }

apps/desktop-ui/src/views/MetricsConsentView.vue

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,7 +15,7 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,8 +72,7 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
-      life: 3000
+      detail: t('install.settings.errorUpdatingConsentDetail')
     })
   } finally {
     isUpdating.value = false

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -9,7 +9,7 @@
       />
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex flex-col gap-8 p-8 min-w-110">
+        <div class="flex min-w-110 flex-col gap-8 p-8">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-disc list-inside space-y-1 text-neutral-800">
+            <ul class="list-inside list-disc space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>

apps/desktop-ui/src/views/ServerStartView.vue

@@ -2,14 +2,14 @@
   <BaseViewTemplate dark>
     <div class="relative min-h-screen">
       <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
-        <div class="h-full w-full">
+      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
+        <div class="size-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +71,10 @@
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
         <div
           v-if="terminalVisible && isError"
-          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>

browser_tests/README.md

@@ -27,7 +27,8 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
+Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
+Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/viewport/default-viewport-saved-offscreen.json

@@ -36,14 +36,7 @@
       "properties": {
         "Node name for S&R": "CheckpointLoaderSimple",
         "cnr_id": "comfy-core",
-        "ver": "0.3.65",
-        "models": [
-          {
-            "name": "v1-5-pruned-emaonly-fp16.safetensors",
-            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
-            "directory": "checkpoints"
-          }
-        ]
+        "ver": "0.3.65"
       },
       "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     },

browser_tests/fixtures/ComfyPage.ts

@@ -25,11 +25,9 @@ import {
 import { Topbar } from './components/Topbar'
 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'
@@ -186,11 +184,9 @@ export class ComfyPage {
   public readonly contextMenu: ContextMenu
   public readonly toast: ToastHelper
   public readonly dragDrop: DragDropHelper
-  public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
-  public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -210,9 +206,7 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page
-      .getByTestId(TestIds.topbar.queueButton)
-      .getByRole('button', { name: 'Run' })
+    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
@@ -233,11 +227,9 @@ export class ComfyPage {
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
-    this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
-    this.queue = new QueueHelper(page)
   }
 
   get visibleToasts() {
@@ -438,7 +430,10 @@ export const comfyPageFixture = base.extend<{
         'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
-        'Comfy.VersionCompatibility.DisableWarnings': true
+        'Comfy.VersionCompatibility.DisableWarnings': true,
+        // Browser tests should opt into missing-model warnings explicitly so
+        // workflows do not render differently based on models present on disk.
+        'Comfy.Workflow.ShowMissingModelsWarning': false
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -172,6 +172,19 @@ export class VueNodeHelpers {
   async enterSubgraph(nodeId?: string): Promise<void> {
     const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
     const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
-    await editButton.click()
+
+    // The footer tab button extends below the node body (visible area),
+    // but its bounding box center overlaps the node body div.
+    // Click at the bottom 25% of the button which is the genuinely visible
+    // and unobstructed area outside the node body boundary.
+    const box = await editButton.boundingBox()
+    if (!box) {
+      throw new Error(
+        'subgraph-enter-button has no bounding box: element may be hidden or not in DOM'
+      )
+    }
+    await editButton.click({
+      position: { x: box.width / 2, y: box.height * 0.75 }
+    })
   }
 }

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

@@ -1,47 +0,0 @@
-import type { Page } from '@playwright/test'
-
-export class FeatureFlagHelper {
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Set feature flags via localStorage. Uses the `ff:` prefix
-   * that devFeatureFlagOverride.ts reads in dev mode.
-   * Call BEFORE comfyPage.setup() for flags needed at init time,
-   * or use page.evaluate() for runtime changes.
-   */
-  async setFlags(flags: Record<string, unknown>): Promise<void> {
-    await this.page.evaluate((flagMap: Record<string, unknown>) => {
-      for (const [key, value] of Object.entries(flagMap)) {
-        localStorage.setItem(`ff:${key}`, JSON.stringify(value))
-      }
-    }, flags)
-  }
-
-  async setFlag(name: string, value: unknown): Promise<void> {
-    await this.setFlags({ [name]: value })
-  }
-
-  async clearFlags(): Promise<void> {
-    await this.page.evaluate(() => {
-      const keysToRemove: string[] = []
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i)
-        if (key?.startsWith('ff:')) keysToRemove.push(key)
-      }
-      keysToRemove.forEach((k) => localStorage.removeItem(k))
-    })
-  }
-
-  /**
-   * Mock server feature flags via route interception on /api/features.
-   */
-  async mockServerFeatures(features: Record<string, unknown>): Promise<void> {
-    await this.page.route('**/api/features', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(features)
-      })
-    )
-  }
-}

browser_tests/fixtures/helpers/QueueHelper.ts

@@ -1,70 +0,0 @@
-import type { Page } from '@playwright/test'
-
-export class QueueHelper {
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Mock the /api/queue endpoint to return specific queue state.
-   */
-  async mockQueueState(
-    running: number = 0,
-    pending: number = 0
-  ): Promise<void> {
-    await this.page.route('**/api/queue', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queue_running: Array.from({ length: running }, (_, i) => [
-            i,
-            `running-${i}`,
-            {},
-            {},
-            []
-          ]),
-          queue_pending: Array.from({ length: pending }, (_, i) => [
-            i,
-            `pending-${i}`,
-            {},
-            {},
-            []
-          ])
-        })
-      })
-    )
-  }
-
-  /**
-   * Mock the /api/history endpoint with completed/failed job entries.
-   */
-  async mockHistory(
-    jobs: Array<{ promptId: string; status: 'success' | 'error' }>
-  ): Promise<void> {
-    const history: Record<string, unknown> = {}
-    for (const job of jobs) {
-      history[job.promptId] = {
-        prompt: [0, job.promptId, {}, {}, []],
-        outputs: {},
-        status: {
-          status_str: job.status === 'success' ? 'success' : 'error',
-          completed: job.status === 'success'
-        }
-      }
-    }
-    await this.page.route('**/api/history**', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(history)
-      })
-    )
-  }
-
-  /**
-   * Clear all route mocks set by this helper.
-   */
-  async clearMocks(): Promise<void> {
-    await this.page.unroute('**/api/queue')
-    await this.page.unroute('**/api/history**')
-  }
-}

browser_tests/fixtures/selectors.ts

@@ -33,6 +33,7 @@ export const TestIds = {
   },
   topbar: {
     queueButton: 'queue-button',
+    queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button'
   },
   nodeLibrary: {

browser_tests/helpers/actionbar.ts

@@ -29,8 +29,10 @@ class ComfyQueueButton {
   public readonly dropdownButton: Locator
   constructor(public readonly actionbar: ComfyActionbar) {
     this.root = actionbar.root.getByTestId(TestIds.topbar.queueButton)
-    this.primaryButton = this.root.locator('.p-splitbutton-button')
-    this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
+    this.primaryButton = this.root
+    this.dropdownButton = actionbar.root.getByTestId(
+      TestIds.topbar.queueModeMenuTrigger
+    )
   }
 
   public async toggleOptions() {

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -1,116 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('should open bottom panel via toggle button', async ({ comfyPage }) => {
-    const { bottomPanel } = comfyPage
-
-    await expect(bottomPanel.root).not.toBeVisible()
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-  })
-
-  test('should show Logs tab when terminal panel opens', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    const hasLogs = await logsTab.isVisible().catch(() => false)
-
-    if (hasLogs) {
-      await expect(logsTab).toBeVisible()
-    }
-  })
-
-  test('should close bottom panel via toggle button', async ({ comfyPage }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
-  })
-
-  test('should switch between shortcuts and terminal panels', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-    await expect(
-      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).toBeVisible()
-
-    await bottomPanel.toggleButton.click()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    const hasTerminalTabs = await logsTab.isVisible().catch(() => false)
-
-    if (hasTerminalTabs) {
-      await expect(logsTab).toBeVisible()
-      await expect(
-        comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-      ).not.toBeVisible()
-    }
-  })
-
-  test('should persist Logs tab content in bottom panel', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    const hasLogs = await logsTab.isVisible().catch(() => false)
-
-    if (hasLogs) {
-      await logsTab.click()
-
-      const xtermContainer = bottomPanel.root.locator('.xterm')
-      const hasXterm = await xtermContainer.isVisible().catch(() => false)
-
-      if (hasXterm) {
-        await expect(xtermContainer).toBeVisible()
-      }
-    }
-  })
-
-  test('should render xterm container in terminal panel', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    const hasLogs = await logsTab.isVisible().catch(() => false)
-
-    if (hasLogs) {
-      await logsTab.click()
-
-      const xtermScreen = bottomPanel.root.locator('.xterm, .xterm-screen')
-      const hasXterm = await xtermScreen
-        .first()
-        .isVisible()
-        .catch(() => false)
-
-      if (hasXterm) {
-        await expect(xtermScreen.first()).toBeVisible()
-      }
-    }
-  })
-})

browser_tests/tests/dialog.spec.ts

@@ -89,6 +89,17 @@ test.describe('Execution error', () => {
 })
 
 test.describe('Missing models warning', () => {
+  test('Should be disabled by default in browser tests', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
+    )
+    await expect(dialogTitle).not.toBeVisible()
+  })
+
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.ShowMissingModelsWarning',

browser_tests/tests/errorOverlaySeeErrors.spec.ts

@@ -1,88 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  async function triggerExecutionError(comfyPage: {
-    canvasOps: { disconnectEdge: () => Promise<void> }
-    page: Page
-    command: { executeCommand: (cmd: string) => Promise<void> }
-  }) {
-    await comfyPage.canvasOps.disconnectEdge()
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-  }
-
-  test('Error overlay appears on execution error', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="error-overlay"]')
-    ).toBeVisible()
-  })
-
-  test('Error overlay shows error message', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await expect(overlay).toHaveText(/\S/)
-  })
-
-  test('"See Errors" opens right side panel', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
-  })
-
-  test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-
-  test('"Dismiss" closes overlay without opening panel', async ({
-    comfyPage
-  }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /Dismiss/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-    await expect(
-      comfyPage.page.getByTestId('properties-panel')
-    ).not.toBeVisible()
-  })
-
-  test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /close/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-})

browser_tests/tests/errorsTab.spec.ts

@@ -1,148 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-async function triggerExecutionError(comfyPage: {
-  canvasOps: { disconnectEdge: () => Promise<void> }
-  page: Page
-  command: { executeCommand: (cmd: string) => Promise<void> }
-}) {
-  await comfyPage.canvasOps.disconnectEdge()
-  await comfyPage.page.keyboard.press('Escape')
-  await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-}
-
-test.describe('Errors tab in right side panel', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-  })
-
-  test('Errors tab appears after execution error', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    // Dismiss the error overlay
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /Dismiss/i }).click()
-
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.root).toBeVisible()
-    await expect(
-      propertiesPanel.root.getByRole('tab', { name: 'Errors' })
-    ).toBeVisible()
-  })
-
-  test('Error card shows locate button', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const locateButton = propertiesPanel.root.locator(
-      'button .icon-\\[lucide--locate\\]'
-    )
-    await expect(locateButton.first()).toBeVisible()
-  })
-
-  test('Clicking locate button focuses canvas', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const locateButton = propertiesPanel.root
-      .locator('button')
-      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--locate\\]') })
-      .first()
-    await locateButton.click()
-
-    await expect(comfyPage.canvas).toBeVisible()
-  })
-
-  test('Collapse all button collapses error groups', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const collapseButton = propertiesPanel.root.getByRole('button', {
-      name: 'Collapse all'
-    })
-
-    // The collapse toggle only appears when there are multiple groups.
-    // If only one group exists, this test verifies the button is not shown.
-    const count = await collapseButton.count()
-    if (count > 0) {
-      await collapseButton.click()
-      const expandButton = propertiesPanel.root.getByRole('button', {
-        name: 'Expand all'
-      })
-      await expect(expandButton).toBeVisible()
-    }
-  })
-
-  test('Search filters errors', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    // Search for a term that won't match any error
-    await propertiesPanel.searchBox.fill('zzz_nonexistent_zzz')
-
-    await expect(
-      propertiesPanel.root.locator('.icon-\\[lucide--locate\\]')
-    ).toHaveCount(0)
-
-    // Clear the search to restore results
-    await propertiesPanel.searchBox.fill('')
-
-    await expect(
-      propertiesPanel.root.locator('.icon-\\[lucide--locate\\]').first()
-    ).toBeVisible()
-  })
-
-  test('Errors tab shows error message text', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    // Error cards contain <p> elements with error messages
-    const errorMessage = propertiesPanel.root
-      .locator('.whitespace-pre-wrap')
-      .first()
-    await expect(errorMessage).toBeVisible()
-    await expect(errorMessage).not.toHaveText('')
-  })
-})

browser_tests/tests/floatingMenus.spec.ts

@@ -1,75 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-test.describe('Floating Canvas Menus', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-    await comfyPage.setup()
-  })
-
-  test('Floating menu is visible on canvas', async ({ comfyPage }) => {
-    const toggleLinkButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleLinkVisibilityButton
-    )
-    const toggleMinimapButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
-    await expect(toggleLinkButton).toBeVisible()
-    await expect(toggleMinimapButton).toBeVisible()
-  })
-
-  test('Link visibility toggle button is present', async ({ comfyPage }) => {
-    const button = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleLinkVisibilityButton
-    )
-    await expect(button).toBeVisible()
-    await expect(button).toBeEnabled()
-  })
-
-  test('Clicking link toggle changes link render mode', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.LinkRenderMode', 2)
-    const button = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleLinkVisibilityButton
-    )
-
-    await button.click()
-    await comfyPage.nextFrame()
-
-    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
-      return window.LiteGraph!.HIDDEN_LINK
-    })
-    expect(await comfyPage.settings.getSetting('Comfy.LinkRenderMode')).toBe(
-      hiddenLinkRenderMode
-    )
-  })
-
-  test('Zoom controls button shows percentage', async ({ comfyPage }) => {
-    const zoomButton = comfyPage.page.getByTestId('zoom-controls-button')
-    await expect(zoomButton).toBeVisible()
-    await expect(zoomButton).toContainText('%')
-  })
-
-  test('Fit view button is present and clickable', async ({ comfyPage }) => {
-    const fitViewButton = comfyPage.page
-      .locator('button')
-      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--focus\\]') })
-    await expect(fitViewButton).toBeVisible()
-    await fitViewButton.click()
-    await comfyPage.nextFrame()
-  })
-
-  test('Zoom controls popup opens on click', async ({ comfyPage }) => {
-    const zoomButton = comfyPage.page.getByTestId('zoom-controls-button')
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const zoomModal = comfyPage.page.getByText('Zoom To Fit')
-    await expect(zoomModal).toBeVisible()
-  })
-})

browser_tests/tests/focusMode.spec.ts

@@ -1,65 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Focus Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  test('Focus mode hides UI chrome', async ({ comfyPage }) => {
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-  })
-
-  test('Focus mode restores UI chrome', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.setFocusMode(false)
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-  })
-
-  test('Toggle focus mode command works', async ({ comfyPage }) => {
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-  })
-
-  test('Focus mode hides topbar', async ({ comfyPage }) => {
-    const topMenu = comfyPage.page.locator('.comfy-menu-button-wrapper')
-    await expect(topMenu).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-
-    await expect(topMenu).not.toBeVisible()
-  })
-
-  test('Canvas remains visible in focus mode', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-
-    await expect(comfyPage.canvas).toBeVisible()
-  })
-
-  test('Focus mode can be toggled multiple times', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.setFocusMode(false)
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-  })
-})

browser_tests/tests/interaction.spec.ts

@@ -819,16 +819,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
       const activeWorkflowName =
         await comfyPage.menu.workflowsTab.getActiveWorkflowName()
-      const workflowPathA = `${workflowA}.json`
-      const workflowPathB = `${workflowB}.json`
-
       expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowPathA, workflowPathB])
+        expect.arrayContaining([workflowA, workflowB])
       )
-      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
-        openWorkflows.indexOf(workflowPathB)
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
       )
-      expect(activeWorkflowName).toEqual(workflowPathB)
+      expect(activeWorkflowName).toEqual(workflowB)
     })
   })
 

browser_tests/tests/jobHistoryActions.spec.ts

@@ -1,96 +0,0 @@
-import type { Locator } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Job History Actions', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  async function openMoreOptionsPopover(comfyPage: {
-    page: { locator(sel: string): Locator }
-  }) {
-    const moreButton = comfyPage.page
-      .locator('.icon-\\[lucide--more-horizontal\\]')
-      .first()
-    await moreButton.click()
-  }
-
-  test('More options popover opens', async ({ comfyPage }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="docked-job-history-action"]')
-    ).toBeVisible()
-  })
-
-  test('Docked job history action is visible with text', async ({
-    comfyPage
-  }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    const action = comfyPage.page.locator(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await expect(action).toBeVisible()
-    await expect(action).not.toBeEmpty()
-  })
-
-  test('Show run progress bar action is visible', async ({ comfyPage }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="show-run-progress-bar-action"]')
-    ).toBeVisible()
-  })
-
-  test('Clear history action is visible', async ({ comfyPage }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="clear-history-action"]')
-    ).toBeVisible()
-  })
-
-  test('Clicking docked job history closes popover', async ({ comfyPage }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    const action = comfyPage.page.locator(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await expect(action).toBeVisible()
-    await action.click()
-
-    await expect(action).not.toBeVisible()
-  })
-
-  test('Clicking show run progress bar toggles check icon', async ({
-    comfyPage
-  }) => {
-    await openMoreOptionsPopover(comfyPage)
-
-    const action = comfyPage.page.locator(
-      '[data-testid="show-run-progress-bar-action"]'
-    )
-    const checkIcon = action.locator('.icon-\\[lucide--check\\]')
-    const hadCheck = await checkIcon.isVisible()
-
-    await action.click()
-
-    await openMoreOptionsPopover(comfyPage)
-
-    const checkIconAfter = comfyPage.page
-      .locator('[data-testid="show-run-progress-bar-action"]')
-      .locator('.icon-\\[lucide--check\\]')
-
-    if (hadCheck) {
-      await expect(checkIconAfter).not.toBeVisible()
-    } else {
-      await expect(checkIconAfter).toBeVisible()
-    }
-  })
-})

browser_tests/tests/linearMode.spec.ts

@@ -1,87 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
-
-test.describe('Linear Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setup()
-  })
-
-  async function enterAppMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    await comfyPage.page.evaluate(() => {
-      const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow
-      if (workflow) workflow.activeMode = 'app'
-    })
-    await comfyPage.nextFrame()
-  }
-
-  async function enterGraphMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    await comfyPage.page.evaluate(() => {
-      const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow
-      if (workflow) workflow.activeMode = 'graph'
-    })
-    await comfyPage.nextFrame()
-  }
-
-  test('Displays linear controls when app mode active', async ({
-    comfyPage
-  }) => {
-    await enterAppMode(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-run-button"]')
-    ).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Workflow info section visible', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-workflow-info"]')
-    ).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Returns to graph mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
-
-    await enterGraphMode(comfyPage)
-
-    await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).not.toBeVisible()
-  })
-
-  test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(comfyPage.canvas).not.toBeVisible()
-  })
-})

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -29,12 +29,27 @@ test.describe(
       // Currently opens missing nodes dialog which is outside scope of AVIF loading functionality
       // 'workflow.avif'
     ]
+    const filesWithUpload = new Set(['no_workflow.webp'])
+
     fileNames.forEach(async (fileName) => {
       test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
         comfyPage
       }) => {
+        const shouldUpload = filesWithUpload.has(fileName)
+        const uploadRequestPromise = shouldUpload
+          ? comfyPage.page.waitForRequest((req) =>
+              req.url().includes('/upload/')
+            )
+          : null
+
         await comfyPage.dragDrop.dragAndDropFile(`workflowInMedia/${fileName}`)
-        await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+
+        if (uploadRequestPromise) {
+          const request = await uploadRequestPromise
+          expect(request.url()).toContain('/upload/')
+        } else {
+          await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+        }
       })
     })
 

browser_tests/tests/minimapStatus.spec.ts

@@ -1,71 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-test.describe('Minimap Status', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-    await comfyPage.setup()
-  })
-
-  test('Minimap is visible when enabled', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
-    await expect(minimap).toBeVisible()
-  })
-
-  test('Minimap contains canvas and viewport elements', async ({
-    comfyPage
-  }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
-    await expect(minimap.locator('.minimap-canvas')).toBeVisible()
-    await expect(minimap.locator('.minimap-viewport')).toBeVisible()
-  })
-
-  test('Minimap toggle button exists in canvas menu', async ({ comfyPage }) => {
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
-    await expect(toggleButton).toBeVisible()
-  })
-
-  test('Minimap can be hidden via toggle', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
-
-    await expect(minimap).toBeVisible()
-    await toggleButton.click()
-    await comfyPage.nextFrame()
-    await expect(minimap).not.toBeVisible()
-  })
-
-  test('Minimap can be re-shown via toggle', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
-
-    await toggleButton.click()
-    await comfyPage.nextFrame()
-    await expect(minimap).not.toBeVisible()
-
-    await toggleButton.click()
-    await comfyPage.nextFrame()
-    await expect(minimap).toBeVisible()
-  })
-
-  test('Minimap persists across queue operations', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
-    await expect(minimap).toBeVisible()
-
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-    await comfyPage.nextFrame()
-
-    await expect(minimap).toBeVisible()
-  })
-})

browser_tests/tests/nodeLibraryEssentials.spec.ts

@@ -1,99 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  test('Node library opens via sidebar', async ({ comfyPage }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const sidebarContent = comfyPage.page.locator(
-      '.comfy-vue-side-bar-container'
-    )
-    await expect(sidebarContent).toBeVisible()
-  })
-
-  test('Essentials tab is visible in node library', async ({ comfyPage }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const essentialsTab = comfyPage.page.getByRole('tab', {
-      name: /essentials/i
-    })
-    await expect(essentialsTab).toBeVisible()
-  })
-
-  test('Clicking essentials tab shows essentials panel', async ({
-    comfyPage
-  }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const essentialsTab = comfyPage.page.getByRole('tab', {
-      name: /essentials/i
-    })
-    await essentialsTab.click()
-
-    const essentialCards = comfyPage.page.locator('[data-node-name]')
-    await expect(essentialCards.first()).toBeVisible()
-  })
-
-  test('Essential node cards are displayed', async ({ comfyPage }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const essentialsTab = comfyPage.page.getByRole('tab', {
-      name: /essentials/i
-    })
-    await essentialsTab.click()
-
-    const essentialCards = comfyPage.page.locator('[data-node-name]')
-    await expect(async () => {
-      expect(await essentialCards.count()).toBeGreaterThan(0)
-    }).toPass()
-  })
-
-  test('Essential node cards have node names', async ({ comfyPage }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const essentialsTab = comfyPage.page.getByRole('tab', {
-      name: /essentials/i
-    })
-    await essentialsTab.click()
-
-    const firstCard = comfyPage.page.locator('[data-node-name]').first()
-    await expect(firstCard).toBeVisible()
-
-    const nodeName = await firstCard.getAttribute('data-node-name')
-    expect(nodeName).toBeTruthy()
-    expect(nodeName!.length).toBeGreaterThan(0)
-  })
-
-  test('Node library can switch between all and essentials tabs', async ({
-    comfyPage
-  }) => {
-    const tabButton = comfyPage.page.locator('.node-library-tab-button')
-    await tabButton.click()
-
-    const essentialsTab = comfyPage.page.getByRole('tab', {
-      name: /essentials/i
-    })
-    const allNodesTab = comfyPage.page.getByRole('tab', {
-      name: /all nodes/i
-    })
-
-    await essentialsTab.click()
-    const essentialCards = comfyPage.page.locator('[data-node-name]')
-    await expect(essentialCards.first()).toBeVisible()
-
-    await allNodesTab.click()
-    await expect(essentialCards.first()).not.toBeVisible()
-  })
-})

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -1,140 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Node search box V2 extended', { tag: '@node' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.Action',
-      'search box'
-    )
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.ActionShift',
-      'search box'
-    )
-    await comfyPage.searchBoxV2.reload(comfyPage)
-  })
-
-  test('Double-click on empty canvas opens search', async ({ comfyPage }) => {
-    const { searchBoxV2 } = comfyPage
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-    await expect(searchBoxV2.dialog).toBeVisible()
-  })
-
-  test('Escape closes search box without adding node', async ({
-    comfyPage
-  }) => {
-    const { searchBoxV2 } = comfyPage
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
-    await searchBoxV2.input.fill('KSampler')
-    await expect(searchBoxV2.results.first()).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).not.toBeVisible()
-
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount)
-  })
-
-  test('Search clears when reopening', async ({ comfyPage }) => {
-    const { searchBoxV2 } = comfyPage
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
-    await searchBoxV2.input.fill('KSampler')
-    await expect(searchBoxV2.results.first()).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).not.toBeVisible()
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-    await expect(searchBoxV2.input).toHaveValue('')
-  })
-
-  test.describe('Category navigation', () => {
-    test('Category navigation updates results', async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.categoryButton('sampling').click()
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const samplingResults = await searchBoxV2.results.allTextContents()
-
-      await searchBoxV2.categoryButton('loaders').click()
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const loaderResults = await searchBoxV2.results.allTextContents()
-
-      expect(samplingResults).not.toEqual(loaderResults)
-    })
-  })
-
-  test.describe('Filter workflow', () => {
-    test('Filter chip removal restores results', async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      // Get unfiltered count
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const unfilteredCount = await searchBoxV2.results.count()
-
-      // Apply Input filter with MODEL type
-      await searchBoxV2.filterBarButton('Input').click()
-      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
-      await searchBoxV2.input.fill('MODEL')
-      await searchBoxV2.filterOptions
-        .filter({ hasText: 'MODEL' })
-        .first()
-        .click()
-
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const filteredCount = await searchBoxV2.results.count()
-      expect(filteredCount).toBeLessThanOrEqual(unfilteredCount)
-
-      // Remove filter by pressing Backspace with empty input
-      await searchBoxV2.input.fill('')
-      await comfyPage.page.keyboard.press('Backspace')
-
-      // Results should restore to unfiltered count
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const restoredCount = await searchBoxV2.results.count()
-      expect(restoredCount).toBeGreaterThanOrEqual(filteredCount)
-    })
-  })
-
-  test.describe('Keyboard navigation', () => {
-    test('ArrowUp on first item keeps first selected', async ({
-      comfyPage
-    }) => {
-      const { searchBoxV2 } = comfyPage
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.input.fill('KSampler')
-      const results = searchBoxV2.results
-      await expect(results.first()).toBeVisible()
-
-      // First result should be selected by default
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
-
-      // ArrowUp on first item should keep first selected
-      await comfyPage.page.keyboard.press('ArrowUp')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
-    })
-  })
-})

browser_tests/tests/queueNotificationBanners.spec.ts

@@ -1,82 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Queue Notification Banners', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  async function triggerExecutionError(comfyPage: {
-    canvasOps: { disconnectEdge(): Promise<void> }
-    page: { keyboard: { press(key: string): Promise<void> } }
-    command: { executeCommand(cmd: string): Promise<void> }
-    nextFrame(): Promise<void>
-  }) {
-    await comfyPage.canvasOps.disconnectEdge()
-    await comfyPage.nextFrame()
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-  }
-
-  test('Toast appears when prompt is queued', async ({ comfyPage }) => {
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-  })
-
-  test('Error toast appears on failed execution', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const errorToast = comfyPage.page.locator(
-      '.p-toast-message.p-toast-message-error'
-    )
-    await expect(errorToast.first()).toBeVisible()
-  })
-
-  test('Error toast contains error description', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const errorToast = comfyPage.page.locator(
-      '.p-toast-message.p-toast-message-error'
-    )
-    await expect(errorToast.first()).toBeVisible()
-    await expect(errorToast.first()).not.toHaveText('')
-  })
-
-  test('Toast close button dismisses individual toast', async ({
-    comfyPage
-  }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-
-    const closeButton = comfyPage.page.locator('.p-toast-close-button').first()
-    await closeButton.click()
-
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
-  })
-
-  test('Multiple toasts can stack', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-
-    await triggerExecutionError(comfyPage)
-    await expect(comfyPage.toast.visibleToasts).not.toHaveCount(0)
-
-    const count = await comfyPage.toast.getVisibleToastCount()
-    expect(count).toBeGreaterThanOrEqual(2)
-  })
-
-  test('All toasts can be cleared', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-
-    await comfyPage.toast.closeToasts()
-
-    expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
-  })
-})

browser_tests/tests/rerouteNode.spec.ts

@@ -13,9 +13,9 @@ test.describe('Reroute Node', { tag: ['@screenshot', '@node'] }, () => {
   })
 
   test('loads from inserted workflow', async ({ comfyPage }) => {
-    const workflowName = 'single_connected_reroute_node.json'
+    const workflowName = 'single_connected_reroute_node'
     await comfyPage.workflow.setupWorkflowsDirectory({
-      [workflowName]: 'links/single_connected_reroute_node.json'
+      [`${workflowName}.json`]: `links/${workflowName}.json`
     })
     await comfyPage.setup()
     await comfyPage.menu.topbar.triggerTopbarCommand(['New'])

browser_tests/tests/rightSidePanelTabs.spec.ts

@@ -1,113 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('Properties panel opens with workflow overview', async ({
-    comfyPage
-  }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.root).toBeVisible()
-    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
-  })
-
-  test('Properties panel shows node details on selection', async ({
-    comfyPage
-  }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-
-    await expect(propertiesPanel.panelTitle).toContainText('KSampler')
-  })
-
-  test('Node title input is editable', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await expect(propertiesPanel.panelTitle).toContainText('KSampler')
-
-    // Click on the title to enter edit mode
-    await propertiesPanel.panelTitle.click()
-    const titleInput = propertiesPanel.root.getByTestId('node-title-input')
-    await expect(titleInput).toBeVisible()
-
-    await titleInput.fill('My Custom Sampler')
-    await titleInput.press('Enter')
-
-    await expect(propertiesPanel.panelTitle).toContainText('My Custom Sampler')
-  })
-
-  test('Search box filters properties', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    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)
-  })
-
-  test('Collapse all / Expand all toggles sections', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    // Select multiple nodes so collapse toggle button appears
-    await comfyPage.nodeOps.selectNodes([
-      'KSampler',
-      'CLIP Text Encode (Prompt)'
-    ])
-
-    const collapseButton = propertiesPanel.root.getByRole('button', {
-      name: 'Collapse all'
-    })
-    await expect(collapseButton).toBeVisible()
-    await collapseButton.click()
-
-    const expandButton = propertiesPanel.root.getByRole('button', {
-      name: 'Expand all'
-    })
-    await expect(expandButton).toBeVisible()
-    await expandButton.click()
-
-    // After expanding, the button label switches back to "Collapse all"
-    await expect(collapseButton).toBeVisible()
-  })
-
-  test('Properties panel can be closed', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.root).toBeVisible()
-
-    // Click the properties button again to close
-    await comfyPage.actionbar.propertiesButton.click()
-    await expect(propertiesPanel.root).toBeHidden()
-  })
-})

browser_tests/tests/selectionRectangle.spec.ts

@@ -1,79 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('@canvas Selection Rectangle', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('Ctrl+A selects all nodes', async ({ comfyPage }) => {
-    const totalCount = await comfyPage.vueNodes.getNodeCount()
-    expect(totalCount).toBeGreaterThan(0)
-
-    await comfyPage.canvas.click({ position: { x: 10, y: 10 } })
-    await comfyPage.nextFrame()
-    await comfyPage.page.keyboard.press('Control+a')
-    await comfyPage.nextFrame()
-
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
-  })
-
-  test('Click empty space deselects all', async ({ comfyPage }) => {
-    await comfyPage.canvas.click({ position: { x: 10, y: 10 } })
-    await comfyPage.page.keyboard.press('Control+a')
-    await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBeGreaterThan(0)
-
-    await comfyPage.vueNodes.clearSelection()
-    await comfyPage.nextFrame()
-
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
-  })
-
-  test('Single click selects one node', async ({ comfyPage }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.nextFrame()
-
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
-  })
-
-  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
-
-    await comfyPage.page.getByText('Empty Latent Image').click({
-      modifiers: ['Control']
-    })
-    await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
-  })
-
-  test('Selected nodes have visual indicator', async ({ comfyPage }) => {
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.nextFrame()
-
-    await expect(checkpointNode).toHaveClass(/outline-node-component-outline/)
-  })
-
-  test('Drag-select rectangle selects multiple nodes', async ({
-    comfyPage
-  }) => {
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
-
-    await comfyPage.page.mouse.move(10, 400)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(800, 600, { steps: 10 })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBeGreaterThan(1)
-  })
-})

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -1,121 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
-    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.nextFrame()
-  })
-
-  test('bypass button toggles node bypass state', async ({ comfyPage }) => {
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-
-    // Click bypass button to bypass the node
-    await comfyPage.page.locator('[data-testid="bypass-button"]').click()
-    await comfyPage.nextFrame()
-
-    await expect(nodeRef).toBeBypassed()
-
-    // Re-select the node to show toolbox again
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-
-    // Click bypass button again to un-bypass
-    await comfyPage.page.locator('[data-testid="bypass-button"]').click()
-    await comfyPage.nextFrame()
-
-    await expect(nodeRef).not.toBeBypassed()
-  })
-
-  test('delete button removes selected node', async ({ comfyPage }) => {
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-
-    const initialCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
-    )
-
-    await comfyPage.page.locator('[data-testid="delete-button"]').click()
-    await comfyPage.nextFrame()
-
-    const newCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
-    )
-    expect(newCount).toBe(initialCount - 1)
-  })
-
-  test('info button opens properties panel', async ({ comfyPage }) => {
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.locator('[data-testid="info-button"]').click()
-    await comfyPage.nextFrame()
-
-    await expect(
-      comfyPage.page.locator('[data-testid="properties-panel"]')
-    ).toBeVisible()
-  })
-
-  test('refresh button is visible when node is selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-
-    await expect(
-      comfyPage.page.locator('[data-testid="refresh-button"]')
-    ).toBeVisible()
-  })
-
-  test('convert-to-subgraph button visible with multi-select', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    await comfyPage.nodeOps.selectNodes([
-      'KSampler',
-      'CLIP Text Encode (Prompt)'
-    ])
-    await comfyPage.nextFrame()
-
-    await expect(
-      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
-    ).toBeVisible()
-  })
-
-  test('delete button removes multiple selected nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    await comfyPage.nodeOps.selectNodes([
-      'KSampler',
-      'CLIP Text Encode (Prompt)'
-    ])
-    await comfyPage.nextFrame()
-
-    const initialCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
-    )
-
-    await comfyPage.page.locator('[data-testid="delete-button"]').click()
-    await comfyPage.nextFrame()
-
-    const newCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
-    )
-    expect(newCount).toBe(initialCount - 2)
-  })
-})

browser_tests/tests/settingsSidebar.spec.ts

@@ -1,57 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Settings Sidebar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  test('Settings button is visible in sidebar', async ({ comfyPage }) => {
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await expect(settingsButton).toBeVisible()
-  })
-
-  test('Clicking settings button opens settings dialog', async ({
-    comfyPage
-  }) => {
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await settingsButton.click()
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-  })
-
-  test('Settings dialog shows categories', async ({ comfyPage }) => {
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await settingsButton.click()
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await expect(comfyPage.settingDialog.categories.first()).toBeVisible()
-    expect(await comfyPage.settingDialog.categories.count()).toBeGreaterThan(0)
-  })
-
-  test('Settings dialog can be closed with Escape', async ({ comfyPage }) => {
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await settingsButton.click()
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(comfyPage.settingDialog.root).not.toBeVisible()
-  })
-
-  test('Settings search box is functional', async ({ comfyPage }) => {
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await settingsButton.click()
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await comfyPage.settingDialog.searchBox.fill('color')
-    await expect(comfyPage.settingDialog.searchBox).toHaveValue('color')
-  })
-
-  test('Settings dialog can navigate to About panel', async ({ comfyPage }) => {
-    const settingsButton = comfyPage.menu.sideToolbar.getByLabel(/settings/i)
-    await settingsButton.click()
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await comfyPage.settingDialog.goToAboutPanel()
-    await expect(comfyPage.page.locator('.about-container')).toBeVisible()
-  })
-})

browser_tests/tests/sidebar/workflows.spec.ts

@@ -21,14 +21,12 @@ test.describe('Workflows sidebar', () => {
 
   test('Can create new blank workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json'
-    ])
+    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
 
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      '*Unsaved Workflow (2).json'
+      '*Unsaved Workflow',
+      '*Unsaved Workflow (2)'
     ])
   })
 
@@ -41,37 +39,37 @@ test.describe('Workflows sidebar', () => {
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1.json', 'workflow2.json'])
+      expect.arrayContaining(['workflow1', 'workflow2'])
     )
   })
 
   test('Can duplicate workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1')
 
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1.json'])
+      expect.arrayContaining(['workflow1'])
     )
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1.json',
-      '*workflow1 (Copy).json'
+      'workflow1',
+      '*workflow1 (Copy)'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1.json',
-      '*workflow1 (Copy).json',
-      '*workflow1 (Copy) (2).json'
+      'workflow1',
+      '*workflow1 (Copy)',
+      '*workflow1 (Copy) (2)'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1.json',
-      '*workflow1 (Copy).json',
-      '*workflow1 (Copy) (2).json',
-      '*workflow1 (Copy) (3).json'
+      'workflow1',
+      '*workflow1 (Copy)',
+      '*workflow1 (Copy) (2)',
+      '*workflow1 (Copy) (3)'
     ])
   })
 
@@ -85,12 +83,12 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
     const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
 
-    await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
+    await tab.insertWorkflow(tab.getPersistedItem('workflow1'))
     await expect
       .poll(() => comfyPage.nodeOps.getNodeCount())
       .toEqual(originalNodeCount + 1)
 
-    await tab.getPersistedItem('workflow1.json').click()
+    await tab.getPersistedItem('workflow1').click()
     await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
   })
 
@@ -113,22 +111,22 @@ test.describe('Workflows sidebar', () => {
     const openedWorkflow = tab.getOpenedItem('foo/bar')
     await tab.renameWorkflow(openedWorkflow, 'foo/baz')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      'foo/baz.json'
+      '*Unsaved Workflow',
+      'foo/baz'
     ])
   })
 
   test('Can save workflow as', async ({ comfyPage }) => {
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow3')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
+      .toEqual(['*Unsaved Workflow', 'workflow3'])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow4')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
+      .toEqual(['*Unsaved Workflow', 'workflow3', 'workflow4'])
   })
 
   test('Exported workflow does not contain localized slot names', async ({
@@ -184,15 +182,15 @@ test.describe('Workflows sidebar', () => {
   })
 
   test('Can save workflow as with same name', async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
+    await comfyPage.menu.topbar.saveWorkflow('workflow5')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5.json'
+      'workflow5'
     ])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow5')
     await comfyPage.confirmDialog.click('overwrite')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5.json'
+      'workflow5'
     ])
   })
 
@@ -212,25 +210,25 @@ test.describe('Workflows sidebar', () => {
 
   test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
     const topbar = comfyPage.menu.topbar
-    await topbar.saveWorkflow('workflow1.json')
-    await topbar.saveWorkflowAs('workflow2.json')
+    await topbar.saveWorkflow('workflow1')
+    await topbar.saveWorkflowAs('workflow2')
     await comfyPage.nextFrame()
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow1.json', 'workflow2.json'])
+      .toEqual(['workflow1', 'workflow2'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow2.json')
+      .toEqual('workflow2')
 
-    await topbar.saveWorkflowAs('workflow1.json')
+    await topbar.saveWorkflowAs('workflow1')
     await comfyPage.confirmDialog.click('overwrite')
-    // The old workflow1.json should be deleted and the new one should be saved.
+    // The old workflow1 should be deleted and the new one should be saved.
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow2.json', 'workflow1.json'])
+      .toEqual(['workflow2', 'workflow1'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow1.json')
+      .toEqual('workflow1')
   })
 
   test('Does not report warning when switching between opened workflows', async ({
@@ -266,17 +264,15 @@ test.describe('Workflows sidebar', () => {
     )
     await closeButton.click()
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json'
+      '*Unsaved Workflow'
     ])
   })
 
   test('Can close saved workflow with command', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1')
     await comfyPage.command.executeCommand('Workspace.CloseWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json'
-    ])
+    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
   })
 
   test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
@@ -284,7 +280,7 @@ test.describe('Workflows sidebar', () => {
 
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18.json'
+    const filename = 'workflow18'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -295,14 +291,14 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json'
+      '*Unsaved Workflow'
     ])
   })
 
   test('Can delete workflows', async ({ comfyPage }) => {
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18.json'
+    const filename = 'workflow18'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -314,7 +310,7 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json'
+      '*Unsaved Workflow'
     ])
   })
 
@@ -326,13 +322,11 @@ test.describe('Workflows sidebar', () => {
     const { workflowsTab } = comfyPage.menu
     await workflowsTab.open()
 
-    await workflowsTab
-      .getPersistedItem('workflow1.json')
-      .click({ button: 'right' })
+    await workflowsTab.getPersistedItem('workflow1').click({ button: 'right' })
     await comfyPage.contextMenu.clickMenuItem('Duplicate')
     await expect
       .poll(() => workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow.json', '*workflow1 (Copy).json'])
+      .toEqual(['*Unsaved Workflow', '*workflow1 (Copy)'])
   })
 
   test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
@@ -344,7 +338,7 @@ test.describe('Workflows sidebar', () => {
 
     // Wait for workflow to appear in Browse section after sync
     const workflowItem =
-      comfyPage.menu.workflowsTab.getPersistedItem('workflow1.json')
+      comfyPage.menu.workflowsTab.getPersistedItem('workflow1')
     await expect(workflowItem).toBeVisible({ timeout: 3000 })
 
     const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
@@ -361,7 +355,7 @@ test.describe('Workflows sidebar', () => {
     }
 
     await comfyPage.page.dragAndDrop(
-      '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
+      '.comfyui-workflows-browse .node-label:has-text("workflow1")',
       '#graph-canvas',
       { targetPosition }
     )

browser_tests/tests/toastNotifications.spec.ts

@@ -1,70 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Toast Notifications', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  async function triggerExecutionError(comfyPage: {
-    canvasOps: { disconnectEdge(): Promise<void> }
-    page: { keyboard: { press(key: string): Promise<void> } }
-    command: { executeCommand(cmd: string): Promise<void> }
-    nextFrame(): Promise<void>
-  }) {
-    await comfyPage.canvasOps.disconnectEdge()
-    await comfyPage.nextFrame()
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-  }
-
-  test('Error toast appears on execution failure', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-  })
-
-  test('Toast shows correct error severity class', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const errorToast = comfyPage.page.locator(
-      '.p-toast-message.p-toast-message-error'
-    )
-    await expect(errorToast.first()).toBeVisible()
-  })
-
-  test('Toast can be dismissed via close button', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-
-    const closeButton = comfyPage.page.locator('.p-toast-close-button').first()
-    await closeButton.click()
-
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
-  })
-
-  test('All toasts cleared via closeToasts helper', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
-
-    await comfyPage.toast.closeToasts()
-
-    expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
-  })
-
-  test('Toast error count is accurate', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('.p-toast-message.p-toast-message-error').first()
-    ).toBeVisible()
-
-    const errorCount = await comfyPage.toast.getToastErrorCount()
-    expect(errorCount).toBeGreaterThanOrEqual(1)
-  })
-})

browser_tests/tests/vueNodes/nodeHeaderActions.spec.ts

@@ -1,69 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-
-test.describe('Vue Node Header Actions', { tag: '@node' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('Collapse button is visible on node header', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    await expect(vueNode.collapseButton).toBeVisible()
-  })
-
-  test('Clicking collapse button hides node body', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    await expect(vueNode.body).toBeVisible()
-
-    await vueNode.toggleCollapse()
-    await comfyPage.nextFrame()
-
-    await expect(vueNode.body).not.toBeVisible()
-  })
-
-  test('Clicking collapse button again expands node', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-    await vueNode.toggleCollapse()
-    await comfyPage.nextFrame()
-    await expect(vueNode.body).not.toBeVisible()
-
-    await vueNode.toggleCollapse()
-    await comfyPage.nextFrame()
-    await expect(vueNode.body).toBeVisible()
-  })
-
-  test('Double-click header enters title edit mode', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-    await vueNode.header.dblclick()
-    await expect(vueNode.titleInput).toBeVisible()
-  })
-
-  test('Title edit saves on Enter', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-    await vueNode.setTitle('My Custom Sampler')
-    expect(await vueNode.getTitle()).toBe('My Custom Sampler')
-  })
-
-  test('Title edit cancels on Escape', async ({ comfyPage }) => {
-    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-    await vueNode.setTitle('Renamed Sampler')
-    expect(await vueNode.getTitle()).toBe('Renamed Sampler')
-
-    await vueNode.header.dblclick()
-    await vueNode.titleInput.fill('This Should Be Cancelled')
-    await vueNode.titleInput.press('Escape')
-    await comfyPage.nextFrame()
-
-    expect(await vueNode.getTitle()).toBe('Renamed Sampler')
-  })
-})

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -22,8 +22,10 @@ test.describe('Vue Node Bypass', () => {
       await comfyPage.page.getByText('Load Checkpoint').click()
       await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
 
-      const checkpointNode =
-        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      const checkpointNode = comfyPage.page
+        .locator('[data-node-id]')
+        .filter({ hasText: 'Load Checkpoint' })
+        .getByTestId('node-inner-wrapper')
       await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
@@ -41,8 +43,14 @@ test.describe('Vue Node Bypass', () => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
 
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+    const checkpointNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'Load Checkpoint' })
+      .getByTestId('node-inner-wrapper')
+    const ksamplerNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'KSampler' })
+      .getByTestId('node-inner-wrapper')
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -3,7 +3,7 @@ import {
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
 
-const ERROR_CLASS = /border-node-stroke-error/
+const ERROR_CLASS = /ring-destructive-background/
 
 test.describe('Vue Node Error', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -18,9 +18,10 @@ test.describe('Vue Node Error', () => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
     // Expect error state on missing unknown node
-    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'UNKNOWN NODE'
-    })
+    const unknownNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'UNKNOWN NODE' })
+      .getByTestId('node-inner-wrapper')
     await expect(unknownNode).toHaveClass(ERROR_CLASS)
   })
 
@@ -31,7 +32,10 @@ test.describe('Vue Node Error', () => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
     await comfyPage.runButton.click()
 
-    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
+    const raiseErrorNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'Raise Error' })
+      .getByTestId('node-inner-wrapper')
     await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
   })
 })

browser_tests/tests/widgetCopyButton.spec.ts

@@ -1,84 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Widget copy button', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('Vue nodes render with widgets', async ({ comfyPage }) => {
-    const nodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(nodeCount).toBeGreaterThan(0)
-
-    const firstNode = comfyPage.vueNodes.nodes.first()
-    await expect(firstNode).toBeVisible()
-  })
-
-  test('Textarea widgets exist on nodes', async ({ comfyPage }) => {
-    const textareas = comfyPage.page.locator('[data-node-id] textarea')
-    await expect(textareas.first()).toBeVisible()
-    expect(await textareas.count()).toBeGreaterThan(0)
-  })
-
-  test('Copy button has correct aria-label', async ({ comfyPage }) => {
-    const copyButtons = comfyPage.page.locator(
-      '[data-node-id] button[aria-label]'
-    )
-    const count = await copyButtons.count()
-
-    if (count > 0) {
-      const button = copyButtons.filter({
-        has: comfyPage.page.locator('.icon-\\[lucide--copy\\]')
-      })
-      if ((await button.count()) > 0) {
-        await expect(button.first()).toHaveAttribute('aria-label', /copy/i)
-      }
-    }
-  })
-
-  test('Copy icon uses lucide copy class', async ({ comfyPage }) => {
-    const copyIcons = comfyPage.page.locator(
-      '[data-node-id] .icon-\\[lucide--copy\\]'
-    )
-    const count = await copyIcons.count()
-
-    if (count > 0) {
-      await expect(copyIcons.first()).toBeVisible()
-    }
-  })
-
-  test('Widget container has group class for hover', async ({ comfyPage }) => {
-    const textareas = comfyPage.page.locator('[data-node-id] textarea')
-    const count = await textareas.count()
-
-    if (count > 0) {
-      const container = textareas.first().locator('..')
-      await expect(container).toHaveClass(/group/)
-    }
-  })
-
-  test('Copy button exists within textarea widget group container', async ({
-    comfyPage
-  }) => {
-    const groupContainers = comfyPage.page.locator('[data-node-id] div.group')
-    const count = await groupContainers.count()
-
-    if (count > 0) {
-      const container = groupContainers.first()
-      await container.hover()
-      await comfyPage.nextFrame()
-
-      const copyButton = container.locator('button').filter({
-        has: comfyPage.page.locator('.icon-\\[lucide--copy\\]')
-      })
-      if ((await copyButton.count()) > 0) {
-        await expect(copyButton.first()).toHaveClass(/invisible/)
-      }
-    }
-  })
-})

docs/release-process.md

@@ -0,0 +1,62 @@
+# Release Process
+
+## Bump Types
+
+All releases use `release-version-bump.yaml`. Effects differ by bump type:
+
+| Bump       | Target     | Creates branches?                     | GitHub release               |
+| ---------- | ---------- | ------------------------------------- | ---------------------------- |
+| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
+| Patch      | `main`     | No                                    | Published, "latest"          |
+| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
+| Prerelease | any        | No                                    | Draft + prerelease           |
+
+**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
+and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
+bumps on `main` are convenience snapshots — no branches created.
+
+**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
+"latest" so `main` stays current.
+
+### Dual-homed commits
+
+When a minor bump happens, unreleased commits appear in both places:
+
+```
+v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
+                │
+                └── core/1.40
+```
+
+A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
+later ship as v1.40.2). Same commits, no divergence — the branch just prevents
+1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
+
+## Backporting
+
+1. Add `needs-backport` + version label to the merged PR
+2. `pr-backport.yaml` cherry-picks and creates a backport PR
+3. Conflicts produce a comment with details and an agent prompt
+
+## Publishing
+
+Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
+publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
+and npm (`@comfyorg/comfyui-frontend-types`).
+
+## Bi-weekly ComfyUI Integration
+
+`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
+branch has unreleased commits, it triggers a patch bump and drafts a PR to
+`Comfy-Org/ComfyUI` updating `requirements.txt`.
+
+## Workflows
+
+| Workflow                        | Purpose                                          |
+| ------------------------------- | ------------------------------------------------ |
+| `release-version-bump.yaml`     | Bump version, create Release PR                  |
+| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
+| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
+| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
+| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
+| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |

eslint.config.ts

@@ -127,7 +127,7 @@ export default defineConfig([
       // Off: may conflict with oxfmt formatting
       'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
       // Off: large batch change, enable and apply with `eslint --fix`
-      'better-tailwindcss/enforce-consistent-class-order': 'off',
+      'better-tailwindcss/enforce-consistent-class-order': 'error',
       'better-tailwindcss/enforce-canonical-classes': 'error',
       'better-tailwindcss/no-deprecated-classes': 'error'
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.12",
+  "version": "1.42.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,6 +195,9 @@
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },
+  "engines": {
+    "node": "24.x"
+  },
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <router-view />
-  <div
-    v-if="isLoading"
-    class="absolute inset-0 flex items-center justify-center"
-  >
-    <Loader size="lg" class="text-white" />
-  </div>
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +15,7 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="size-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
+    class="pointer-events-none absolute top-0 left-0 z-999 flex size-full flex-col"
   >
     <slot name="workflow-tabs" />
 
@@ -17,7 +17,7 @@
 
       <Splitter
         :key="splitterRefreshKey"
-        class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
+        class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
         :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
         state-storage="local"
         @resizestart="onResizestart"
@@ -30,10 +30,10 @@
           :class="
             sidebarLocation === 'left'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
@@ -60,7 +60,7 @@
           <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
-            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mx-1 mb-1 flex-1"
+            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
             layout="vertical"
             :pt:gutter="
               cn(
@@ -77,7 +77,7 @@
             </SplitterPanel>
             <SplitterPanel
               v-show="bottomPanelVisible && !focusMode"
-              class="bottom-panel border border-(--p-panel-border-color) max-w-full overflow-x-auto bg-comfy-menu-bg pointer-events-auto rounded-lg"
+              class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
             >
               <slot name="bottom-panel" />
             </SplitterPanel>
@@ -92,10 +92,10 @@
           :class="
             sidebarLocation === 'right'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE

src/components/MenuHamburger.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="fixed z-9999 flex flex-row no-drag top-0 right-0"
+    class="no-drag fixed top-0 right-0 z-9999 flex flex-row"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"