[automated] Apply ESLint and Oxfmt fixes

- Add 'cloud' Playwright project for testing DISTRIBUTION=cloud builds
- Add build:cloud npm script (DISTRIBUTION=cloud vite build)
- Cloud project uses grep: /@cloud/ to run cloud-only tests
- Default chromium project uses grepInvert to exclude @cloud tests
- Add 2 example cloud-only tests (subscribe button, bottom panel toggle)
- Runtime toggle investigation: NOT feasible (breaks tree-shaking)
  → separate build approach chosen

Convention:
  test('feature works @cloud', ...) — cloud-only
  test('feature works @oss', ...) — OSS-only
  test('feature works', ...) — runs in both

Part of: Test Coverage Q2 Overhaul (UTIL-07)

browser_tests/fixtures/selectors.ts

@@ -51,7 +51,8 @@ export const TestIds = {
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    saveButton: 'save-workflow-button',
+    subscribeButton: 'topbar-subscribe-button'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'
@@ -74,9 +75,7 @@ export const TestIds = {
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button',
-    formDropdownMenu: 'form-dropdown-menu',
-    formDropdownTrigger: 'form-dropdown-trigger'
+    subgraphEnterButton: 'subgraph-enter-button'
   },
   builder: {
     ioItem: 'builder-io-item',

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -4,7 +4,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
 
 /**
  * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -144,12 +143,15 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     const dropdownButton = imageRow.locator('button:has(> span)').first()
     await dropdownButton.click()
 
-    const menu = comfyPage.page
-      .getByTestId(TestIds.widgets.formDropdownMenu)
+    // The unstyled PrimeVue Popover renders with role="dialog".
+    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
+    const popover = comfyPage.page
+      .getByRole('dialog')
+      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
       .first()
-    await expect(menu).toBeVisible({ timeout: 5000 })
+    await expect(popover).toBeVisible({ timeout: 5000 })
 
-    const isInViewport = await menu.evaluate((el) => {
+    const isInViewport = await popover.evaluate((el) => {
       const rect = el.getBoundingClientRect()
       return (
         rect.top >= 0 &&
@@ -160,7 +162,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     })
     expect(isInViewport).toBe(true)
 
-    const isClipped = await menu.evaluate(isClippedByAnyAncestor)
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
     expect(isClipped).toBe(false)
   })
 })

browser_tests/tests/cloud.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+test.describe('Cloud distribution UI @cloud', () => {
+  test('subscribe button is attached in cloud mode @cloud', async ({
+    comfyPage
+  }) => {
+    const subscribeButton = comfyPage.page.getByTestId(
+      TestIds.topbar.subscribeButton
+    )
+    await expect(subscribeButton).toBeAttached()
+  })
+
+  test('bottom panel toggle is hidden in cloud mode @cloud', async ({
+    comfyPage
+  }) => {
+    const sideToolbar = comfyPage.page.getByTestId(TestIds.sidebar.toolbar)
+    await expect(sideToolbar).toBeVisible()
+
+    // In cloud mode, the bottom panel toggle button should not be rendered
+    const bottomPanelToggle = sideToolbar.getByRole('button', {
+      name: /bottom panel|terminal/i
+    })
+    await expect(bottomPanelToggle).toHaveCount(0)
+  })
+})

browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts

@@ -1,116 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
-
-test.describe(
-  'FormDropdown positioning in Vue nodes',
-  { tag: ['@widget', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test('dropdown menu appears directly below the trigger', async ({
-      comfyPage
-    }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      await expect(node).toBeVisible()
-
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      const triggerBox = await trigger.first().boundingBox()
-      const menuBox = await menu.boundingBox()
-
-      expect(triggerBox).toBeTruthy()
-      expect(menuBox).toBeTruthy()
-
-      // Menu top should be near the trigger bottom (within 20px tolerance for padding)
-      expect(menuBox!.y).toBeGreaterThanOrEqual(
-        triggerBox!.y + triggerBox!.height - 5
-      )
-      expect(menuBox!.y).toBeLessThanOrEqual(
-        triggerBox!.y + triggerBox!.height + 20
-      )
-
-      // Menu left should be near the trigger left (within 10px tolerance)
-      expect(menuBox!.x).toBeGreaterThanOrEqual(triggerBox!.x - 10)
-      expect(menuBox!.x).toBeLessThanOrEqual(triggerBox!.x + 10)
-    })
-
-    test('dropdown menu appears correctly at different zoom levels', async ({
-      comfyPage
-    }) => {
-      for (const zoom of [0.75, 1.5]) {
-        // Set zoom via canvas
-        await comfyPage.page.evaluate((scale) => {
-          const canvas = window.app!.canvas
-          canvas.ds.scale = scale
-          canvas.setDirty(true, true)
-        }, zoom)
-        await comfyPage.nextFrame()
-
-        const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-        await expect(node).toBeVisible()
-
-        const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-        await trigger.first().click()
-
-        const menu = comfyPage.page.getByTestId(
-          TestIds.widgets.formDropdownMenu
-        )
-        await expect(menu).toBeVisible({ timeout: 5000 })
-
-        const triggerBox = await trigger.first().boundingBox()
-        const menuBox = await menu.boundingBox()
-
-        expect(triggerBox).toBeTruthy()
-        expect(menuBox).toBeTruthy()
-
-        // Menu top should still be near trigger bottom regardless of zoom
-        expect(menuBox!.y).toBeGreaterThanOrEqual(
-          triggerBox!.y + triggerBox!.height - 5
-        )
-        expect(menuBox!.y).toBeLessThanOrEqual(
-          triggerBox!.y + triggerBox!.height + 20 * zoom
-        )
-
-        // Close dropdown before next iteration
-        await comfyPage.page.keyboard.press('Escape')
-        await expect(menu).not.toBeVisible()
-      }
-    })
-
-    test('dropdown closes on outside click', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      // Click outside the node
-      await comfyPage.page.mouse.click(10, 10)
-      await expect(menu).not.toBeVisible()
-    })
-
-    test('dropdown closes on Escape key', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      await comfyPage.page.keyboard.press('Escape')
-      await expect(menu).not.toBeVisible()
-    })
-  }
-)

package.json

@@ -8,6 +8,7 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",

playwright.config.ts

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

src/main.ts

@@ -67,7 +67,14 @@ Sentry.init({
   replaysOnErrorSampleRate: 0,
   // Only set these for non-cloud builds
   ...(isCloud
-    ? {}
+    ? {
+        integrations: [
+          // Disable event target wrapping to reduce overhead on high-frequency
+          // DOM events (pointermove, mousemove, wheel). Sentry still captures
+          // errors via window.onerror and unhandledrejection.
+          Sentry.browserApiErrorsIntegration({ eventTarget: false })
+        ]
+      }
     : {
         integrations: [],
         autoSessionTracking: false,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

@@ -41,6 +41,11 @@ const MockFormDropdownInput = {
     '<button class="mock-dropdown-trigger" @click="$emit(\'select-click\', $event)">Open</button>'
 }
 
+const MockPopover = {
+  name: 'Popover',
+  template: '<div><slot /></div>'
+}
+
 interface MountDropdownOptions {
   searcher?: (
     query: string,
@@ -60,17 +65,13 @@ function mountDropdown(
       plugins: [PrimeVue, i18n],
       stubs: {
         FormDropdownInput: MockFormDropdownInput,
+        Popover: MockPopover,
         FormDropdownMenu: MockFormDropdownMenu
       }
     }
   })
 }
 
-async function openDropdown(wrapper: ReturnType<typeof mountDropdown>) {
-  await wrapper.find('.mock-dropdown-trigger').trigger('click')
-  await flushPromises()
-}
-
 function getMenuItems(
   wrapper: ReturnType<typeof mountDropdown>
 ): FormDropdownItem[] {
@@ -86,7 +87,7 @@ describe('FormDropdown', () => {
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(2)
 
@@ -105,7 +106,7 @@ describe('FormDropdown', () => {
 
     it('updates when items change but IDs stay the same', async () => {
       const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       await wrapper.setProps({ items: [createItem('1', 'beta')] })
       await flushPromises()
@@ -115,7 +116,7 @@ describe('FormDropdown', () => {
 
     it('updates when switching between empty and non-empty items', async () => {
       const wrapper = mountDropdown([])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(0)
 
@@ -153,10 +154,7 @@ describe('FormDropdown', () => {
     await flushPromises()
 
     expect(searcher).not.toHaveBeenCalled()
-
-    await openDropdown(wrapper)
-
-    expect(searcher).toHaveBeenCalled()
+    expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['3', '4'])
   })
 
   it('runs filtering when dropdown opens', async () => {
@@ -171,7 +169,8 @@ describe('FormDropdown', () => {
     )
     await flushPromises()
 
-    await openDropdown(wrapper)
+    await wrapper.find('.mock-dropdown-trigger').trigger('click')
+    await flushPromises()
 
     expect(searcher).toHaveBeenCalled()
     expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['keep'])

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computedAsync, onClickOutside, refDebounced } from '@vueuse/core'
-import type { CSSProperties } from 'vue'
-import { computed, inject, ref, useTemplateRef } from 'vue'
+import { computedAsync, refDebounced } from '@vueuse/core'
+import Popover from 'primevue/popover'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { cn } from '@/utils/tailwindUtil'
 
 import type {
   FilterOption,
@@ -17,7 +16,6 @@ import type {
 import FormDropdownInput from './FormDropdownInput.vue'
 import FormDropdownMenu from './FormDropdownMenu.vue'
 import { defaultSearcher, getDefaultSortOptions } from './shared'
-import { MENU_HEIGHT, MENU_WIDTH } from './types'
 import type { FormDropdownItem, LayoutMode, SortOption } from './types'
 
 interface Props {
@@ -53,6 +51,7 @@ interface Props {
 }
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -96,10 +95,8 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 const isOpen = defineModel<boolean>('isOpen', { default: false })
 
 const toastStore = useToastStore()
+const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
-const dropdownRef = useTemplateRef('dropdownRef')
-
-const shouldTeleport = inject(OverlayAppendToKey, undefined) === 'body'
 
 const maxSelectable = computed(() => {
   if (multiple === true) return Infinity
@@ -145,59 +142,18 @@ function internalIsSelected(item: FormDropdownItem, index: number): boolean {
   return isSelected(selected.value, item, index)
 }
 
-const MENU_HEIGHT_WITH_GAP = MENU_HEIGHT + 8
-const openUpward = ref(false)
-const fixedPosition = ref({ top: 0, left: 0 })
-
-const teleportStyle = computed<CSSProperties | undefined>(() => {
-  if (!shouldTeleport) return undefined
-  const pos = fixedPosition.value
-  return openUpward.value
-    ? {
-        position: 'fixed',
-        left: `${pos.left}px`,
-        bottom: `${window.innerHeight - pos.top}px`,
-        paddingBottom: '0.5rem'
-      }
-    : {
-        position: 'fixed',
-        left: `${pos.left}px`,
-        top: `${pos.top}px`,
-        paddingTop: '0.5rem'
-      }
-})
-
-function toggleDropdown() {
+const toggleDropdown = (event: Event) => {
   if (disabled) return
-  if (!isOpen.value && triggerRef.value) {
-    const rect = triggerRef.value.getBoundingClientRect()
-
-    const spaceBelow = window.innerHeight - rect.bottom
-    const spaceAbove = rect.top
-    openUpward.value =
-      spaceBelow < MENU_HEIGHT_WITH_GAP && spaceAbove > spaceBelow
-
-    if (shouldTeleport) {
-      fixedPosition.value = {
-        top: openUpward.value
-          ? Math.max(MENU_HEIGHT_WITH_GAP, rect.top)
-          : Math.min(rect.bottom, window.innerHeight - MENU_HEIGHT_WITH_GAP),
-        left: Math.min(rect.right, window.innerWidth - MENU_WIDTH)
-      }
-    }
+  if (popoverRef.value && triggerRef.value) {
+    popoverRef.value.toggle?.(event, triggerRef.value)
+    isOpen.value = !isOpen.value
   }
-  isOpen.value = !isOpen.value
 }
 
-function closeDropdown() {
-  isOpen.value = false
-}
-
-onClickOutside(triggerRef, closeDropdown, { ignore: [dropdownRef] })
-
-function handleEscape(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    closeDropdown()
+const closeDropdown = () => {
+  if (popoverRef.value) {
+    popoverRef.value.hide?.()
+    isOpen.value = false
   }
 }
 
@@ -236,7 +192,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
 </script>
 
 <template>
-  <div ref="triggerRef" class="relative" @keydown="handleEscape">
+  <div ref="triggerRef">
     <FormDropdownInput
       :files
       :is-open
@@ -251,41 +207,42 @@ function handleSelection(item: FormDropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
-    <Teleport to="body" :disabled="!shouldTeleport">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        :class="
-          cn(
-            'z-50 rounded-lg border-none bg-transparent p-0 shadow-lg',
-            !shouldTeleport && 'absolute left-0',
-            !shouldTeleport &&
-              (openUpward ? 'bottom-full pb-2' : 'top-full pt-2')
-          )
-        "
-        :style="teleportStyle"
-      >
-        <FormDropdownMenu
-          v-model:filter-selected="filterSelected"
-          v-model:layout-mode="layoutMode"
-          v-model:sort-selected="sortSelected"
-          v-model:search-query="searchQuery"
-          v-model:ownership-selected="ownershipSelected"
-          v-model:base-model-selected="baseModelSelected"
-          :filter-options
-          :sort-options
-          :show-ownership-filter
-          :ownership-options
-          :show-base-model-filter
-          :base-model-options
-          :disabled
-          :items="sortedItems"
-          :is-selected="internalIsSelected"
-          :max-selectable
-          @close="closeDropdown"
-          @item-click="handleSelection"
-        />
-      </div>
-    </Teleport>
+    <Popover
+      ref="popoverRef"
+      :dismissable="true"
+      :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
+      unstyled
+      :pt="{
+        root: {
+          class: 'absolute z-50'
+        },
+        content: {
+          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
+        }
+      }"
+      @hide="isOpen = false"
+    >
+      <FormDropdownMenu
+        v-model:filter-selected="filterSelected"
+        v-model:layout-mode="layoutMode"
+        v-model:sort-selected="sortSelected"
+        v-model:search-query="searchQuery"
+        v-model:ownership-selected="ownershipSelected"
+        v-model:base-model-selected="baseModelSelected"
+        :filter-options
+        :sort-options
+        :show-ownership-filter
+        :ownership-options
+        :show-base-model-filter
+        :base-model-options
+        :disabled
+        :items="sortedItems"
+        :is-selected="internalIsSelected"
+        :max-selectable
+        @close="closeDropdown"
+        @item-click="handleSelection"
+      />
+    </Popover>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -61,7 +61,6 @@ const theButtonStyle = computed(() =>
     "
   >
     <button
-      data-testid="form-dropdown-trigger"
       :class="
         cn(
           theButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -97,7 +97,6 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 
 <template>
   <div
-    data-testid="form-dropdown-menu"
     class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
   >
     <FormDropdownMenuFilter

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -28,10 +28,5 @@ export interface SortOption<TId extends string = string> {
 
 export type LayoutMode = 'list' | 'grid' | 'list-small'
 
-/** Height of FormDropdownMenu in pixels (matches h-[640px] in template). */
-export const MENU_HEIGHT = 640
-/** Width of FormDropdownMenu in pixels (matches w-103 = 26rem = 416px in template). */
-export const MENU_WIDTH = 412
-
 export const AssetKindKey: InjectionKey<ComputedRef<AssetKind | undefined>> =
   Symbol('assetKind')