[automated] Apply ESLint and Oxfmt fixes

fix: unexport FILE_INPUT_FIELDS and fix lint
- Remove export from FILE_INPUT_FIELDS (flagged by knip as unused export) - Extract EmptyFileInputNode interface to fix oxfmt line length Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 16:57:30 +00:00 · 2026-03-24 02:13:53 +00:00 · 2026-03-23 19:11:01 -07:00 · 2026-03-23 18:41:04 -07:00 · 2026-03-23 18:29:53 -07:00
17 changed files with 558 additions and 550 deletions
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -206,31 +206,6 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await expect(nav).toBeVisible() // Nav should be visible at tablet size
  })

-  test(
-    'select components in filter bar render correctly',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
-      await expect(comfyPage.templates.content).toBeVisible()
-
-      // Wait for filter bar select components to render
-      const dialog = comfyPage.page.getByRole('dialog')
-      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
-      await expect(sortBySelect).toBeVisible()
-
-      // Screenshot the filter bar containing MultiSelect and SingleSelect
-      const filterBar = sortBySelect.locator(
-        'xpath=ancestor::div[contains(@class, "justify-between")]'
-      )
-      await expect(filterBar).toHaveScreenshot(
-        'template-filter-bar-select-components.png',
-        {
-          mask: [comfyPage.page.locator('.p-toast')]
-        }
-      )
-    }
-  )
-
  test(
    'template cards descriptions adjust height dynamically',
    { tag: '@screenshot' },
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -47,46 +47,6 @@ test.describe('Vue Node Moving', () => {
    }
  )

-  test('should not move node when pointer moves less than drag threshold', async ({
-    comfyPage
-  }) => {
-    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
-
-    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
-      steps: 5
-    })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-
-    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
-    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
-    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
-
-    // The small movement should have selected the node, not dragged it
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
-  })
-
-  test('should move node when pointer moves beyond drag threshold', async ({
-    comfyPage
-  }) => {
-    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
-
-    // Move 50px — well beyond the 3px drag threshold
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
-      steps: 20
-    })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-
-    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(headerPos, afterPos)
-  })
-
  test(
    '@mobile should allow moving nodes by dragging on touch devices',
    { tag: '@screenshot' },
--- a/src/components/input/MultiSelect.test.ts
+++ b/src/components/input/MultiSelect.test.ts
@@ -1,60 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import MultiSelect from './MultiSelect.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        multiSelectDropdown: 'Multi-select dropdown',
-        noResultsFound: 'No results found',
-        search: 'Search',
-        clearAll: 'Clear all',
-        itemsSelected: 'Items selected'
-      }
-    }
-  }
-})
-
-describe('MultiSelect', () => {
-  function createWrapper() {
-    return mount(MultiSelect, {
-      attachTo: document.body,
-      global: {
-        plugins: [i18n]
-      },
-      props: {
-        modelValue: [],
-        label: 'Category',
-        options: [
-          { name: 'One', value: 'one' },
-          { name: 'Two', value: 'two' }
-        ]
-      }
-    })
-  }
-
-  it('keeps open-state border styling available while the dropdown is open', async () => {
-    const wrapper = createWrapper()
-
-    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
-
-    expect(trigger.classes()).toContain(
-      'data-[state=open]:border-node-component-border'
-    )
-    expect(trigger.attributes('aria-expanded')).toBe('false')
-
-    await trigger.trigger('click')
-    await nextTick()
-
-    expect(trigger.attributes('aria-expanded')).toBe('true')
-    expect(trigger.attributes('data-state')).toBe('open')
-
-    wrapper.unmount()
-  })
-})
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -1,215 +1,207 @@
 <template>
-  <ComboboxRoot
+  <!--
+    Note: Unlike SingleSelect, we don't need an explicit options prop because:
+    1. Our value template only shows a static label (not dynamic based on selection)
+    2. We display a count badge instead of actual selected labels
+    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
+    option-label="name" is required because our option template directly accesses option.name
+    max-selected-labels="0" is required to show count badge instead of selected item labels
+  -->
+  <MultiSelect
    v-model="selectedItems"
-    multiple
-    by="value"
-    :disabled
-    ignore-filter
-    :reset-search-term-on-select="false"
+    v-bind="{ ...$attrs, options: filteredOptions }"
+    option-label="name"
+    unstyled
+    :max-selected-labels="0"
+    :pt="{
+      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'relative inline-flex cursor-pointer select-none',
+          size === 'md' ? 'h-8' : 'h-10',
+          'rounded-lg bg-secondary-background text-base-foreground',
+          'transition-all duration-200 ease-in-out',
+          'hover:bg-secondary-background-hover',
+          'border-[2.5px] border-solid',
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus-within:border-base-foreground',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
+        )
+      }),
+      labelContainer: {
+        class: cn(
+          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
+      },
+      label: {
+        class: 'p-0'
+      },
+      dropdown: {
+        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
+      },
+      header: () => ({
+        class:
+          showSearchBox || showSelectedCount || showClearButton
+            ? 'block'
+            : 'hidden'
+      }),
+      // Overlay & list visuals unchanged
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg p-2',
+          'bg-base-background',
+          'text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      // Option row hover and focus tone
+      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
+          'hover:bg-secondary-background-hover',
+          // Add focus/highlight state for keyboard navigation
+          context?.focused &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      // Hide built-in checkboxes entirely via PT (no :deep)
+      pcHeaderCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      pcOptionCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      emptyMessage: {
+        class: 'px-3 pb-4 text-sm text-muted-foreground'
+      }
+    }"
+    :aria-label="label || t('g.multiSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
  >
-    <ComboboxAnchor as-child>
-      <ComboboxTrigger
-        v-bind="$attrs"
-        :aria-label="label || t('g.multiSelectDropdown')"
-        :class="
-          cn(
-            'relative inline-flex cursor-pointer items-center select-none',
-            size === 'md' ? 'h-8' : 'h-10',
-            'rounded-lg bg-secondary-background text-base-foreground',
-            'transition-all duration-200 ease-in-out',
-            'hover:bg-secondary-background-hover',
-            'border-[2.5px] border-solid border-transparent',
-            selectedCount > 0
-              ? 'border-base-foreground'
-              : 'focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
-            disabled &&
-              'cursor-default opacity-30 hover:bg-secondary-background'
-          )
-        "
-      >
+    <template
+      v-if="showSearchBox || showSelectedCount || showClearButton"
+      #header
+    >
+      <div class="flex flex-col px-2 pt-2 pb-0">
+        <SearchInput
+          v-if="showSearchBox"
+          v-model="searchQuery"
+          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
+          :placeholder="searchPlaceholder"
+          size="sm"
+        />
        <div
-          :class="
-            cn(
-              'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-              size === 'md' ? 'pl-3' : 'pl-4'
-            )
-          "
+          v-if="showSelectedCount || showClearButton"
+          class="mt-2 flex items-center justify-between"
        >
-          <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
-            {{ label }}
-          </span>
          <span
-            v-if="selectedCount > 0"
-            class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+            v-if="showSelectedCount"
+            class="px-1 text-sm text-base-foreground"
          >
-            {{ selectedCount }}
+            {{
+              selectedCount > 0
+                ? $t('g.itemsSelected', { selectedCount })
+                : $t('g.itemSelected', { selectedCount })
+            }}
          </span>
+          <Button
+            v-if="showClearButton"
+            variant="textonly"
+            size="md"
+            @click.stop="selectedItems = []"
+          >
+            {{ $t('g.clearAll') }}
+          </Button>
        </div>
-        <div
-          class="flex shrink-0 cursor-pointer items-center justify-center px-3"
-        >
-          <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-        </div>
-      </ComboboxTrigger>
-    </ComboboxAnchor>
+        <div class="my-4 h-px bg-border-default"></div>
+      </div>
+    </template>

-    <ComboboxPortal>
-      <ComboboxContent
-        position="popper"
-        :side-offset="8"
-        align="start"
+    <!-- Trigger value (keep text scale identical) -->
+    <template #value>
+      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+        {{ label }}
+      </span>
+      <span
+        v-if="selectedCount > 0"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+      >
+        {{ selectedCount }}
+      </span>
+    </template>
+
+    <!-- Chevron size identical to current -->
+    <template #dropdownicon>
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+    </template>
+
+    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
+    <template #option="slotProps">
+      <div
+        role="button"
+        class="flex cursor-pointer items-center gap-2"
        :style="popoverStyle"
-        :class="
-          cn(
-            'z-3000 overflow-hidden',
-            'rounded-lg p-2',
-            'bg-base-background text-base-foreground',
-            'border border-solid border-border-default',
-            'shadow-md',
-            'data-[state=closed]:animate-out data-[state=open]:animate-in',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2'
-          )
-        "
-        @focus-outside="preventFocusDismiss"
      >
        <div
-          v-if="showSearchBox || showSelectedCount || showClearButton"
-          class="flex flex-col px-2 pt-2 pb-0"
-        >
-          <div
-            v-if="showSearchBox"
-            :class="
-              cn(
-                'flex items-center gap-2 rounded-lg border border-solid border-border-default px-3 py-1.5',
-                (showSelectedCount || showClearButton) && 'mb-2'
-              )
-            "
-          >
-            <i
-              class="icon-[lucide--search] shrink-0 text-sm text-muted-foreground"
-            />
-            <ComboboxInput
-              v-model="searchQuery"
-              :placeholder="searchPlaceholder ?? t('g.search')"
-              class="w-full border-none bg-transparent text-sm outline-none"
-            />
-          </div>
-          <div
-            v-if="showSelectedCount || showClearButton"
-            class="mt-2 flex items-center justify-between"
-          >
-            <span
-              v-if="showSelectedCount"
-              class="px-1 text-sm text-base-foreground"
-            >
-              {{ $t('g.itemsSelected', { count: selectedCount }) }}
-            </span>
-            <Button
-              v-if="showClearButton"
-              variant="textonly"
-              size="md"
-              @click.stop="selectedItems = []"
-            >
-              {{ $t('g.clearAll') }}
-            </Button>
-          </div>
-          <div class="my-4 h-px bg-border-default" />
-        </div>
-
-        <ComboboxViewport
+          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
          :class="
-            cn(
-              'flex flex-col gap-0 p-0 text-sm',
-              'scrollbar-custom overflow-y-auto',
-              'min-w-(--reka-combobox-trigger-width)'
-            )
+            slotProps.selected
+              ? 'bg-primary-background'
+              : 'bg-secondary-background'
          "
-          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
        >
-          <ComboboxItem
-            v-for="opt in filteredOptions"
-            :key="opt.value"
-            :value="opt"
-            :class="
-              cn(
-                'group flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 outline-none',
-                'hover:bg-secondary-background-hover',
-                'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
-              )
-            "
-          >
-            <div
-              class="flex size-4 shrink-0 items-center justify-center rounded-sm transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background [&>span]:flex"
-            >
-              <ComboboxItemIndicator>
-                <i
-                  class="icon-[lucide--check] text-xs font-bold text-base-foreground"
-                />
-              </ComboboxItemIndicator>
-            </div>
-            <span>{{ opt.name }}</span>
-          </ComboboxItem>
-          <ComboboxEmpty class="px-3 pb-4 text-sm text-muted-foreground">
-            {{ $t('g.noResultsFound') }}
-          </ComboboxEmpty>
-        </ComboboxViewport>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+          <i
+            v-if="slotProps.selected"
+            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
+          />
+        </div>
+        <span>
+          {{ slotProps.option.name }}
+        </span>
+      </div>
+    </template>
+  </MultiSelect>
 </template>

 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { FocusOutsideEvent } from 'reka-ui'
-import {
-  ComboboxAnchor,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxItemIndicator,
-  ComboboxPortal,
-  ComboboxRoot,
-  ComboboxTrigger,
-  ComboboxViewport
-} from 'reka-ui'
-import { computed } from 'vue'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'

+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'

+type Option = SelectOption
+
 defineOptions({
  inheritAttrs: false
 })

-const {
-  label,
-  options = [],
-  size = 'lg',
-  disabled = false,
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder,
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<{
+interface Props {
  /** Input label shown on the trigger button */
  label?: string
-  /** Available options */
-  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
-  /** Disable the select */
-  disabled?: boolean
  /** Show search box in the panel header */
  showSearchBox?: boolean
  /** Show selected count text in the panel header */
@@ -224,9 +216,22 @@ const {
  popoverMinWidth?: string
  /** Maximum width of the popover (default: auto) */
  popoverMaxWidth?: string
-}>()
+  // Note: options prop is intentionally omitted.
+  // It's passed via $attrs to maximize PrimeVue API compatibility
+}
+const {
+  label,
+  size = 'lg',
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder = 'Search...',
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<Props>()

-const selectedItems = defineModel<SelectOption[]>({
+const selectedItems = defineModel<Option[]>({
  required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
@@ -234,16 +239,15 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)

-function preventFocusDismiss(event: FocusOutsideEvent) {
-  event.preventDefault()
-}
-
 const popoverStyle = usePopoverSizing({
  minWidth: popoverMinWidth,
  maxWidth: popoverMaxWidth
 })
+const attrs = useAttrs()
+const originalOptions = computed(() => (attrs.options as Option[]) || [])

-const fuseOptions: UseFuseOptions<SelectOption> = {
+// Use VueUse's useFuse for better reactivity and performance
+const fuseOptions: UseFuseOptions<Option> = {
  fuseOptions: {
    keys: ['name', 'value'],
    threshold: 0.3,
@@ -252,20 +256,23 @@ const fuseOptions: UseFuseOptions<SelectOption> = {
  matchAllWhenSearchEmpty: true
 }

-const { results } = useFuse(searchQuery, () => options, fuseOptions)
+const { results } = useFuse(searchQuery, originalOptions, fuseOptions)

+// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
  if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return options
+    return originalOptions.value
  }

+  // results.value already contains the search results from useFuse
  const searchResults = results.value.map(
-    (result: { item: SelectOption }) => result.item
+    (result: { item: Option }) => result.item
  )

+  // Include selected items that aren't in search results
  const selectedButNotInResults = selectedItems.value.filter(
    (item) =>
-      !searchResults.some((result: SelectOption) => result.value === item.value)
+      !searchResults.some((result: Option) => result.value === item.value)
  )

  return [...selectedButNotInResults, ...searchResults]
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -1,12 +1,21 @@
 <template>
-  <SelectRoot v-model="selectedItem" :disabled>
-    <SelectTrigger
-      v-bind="$attrs"
-      :aria-label="label || t('g.singleSelectDropdown')"
-      :aria-busy="loading || undefined"
-      :aria-invalid="invalid || undefined"
-      :class="
-        cn(
+  <!--
+    Note: We explicitly pass options here (not just via $attrs) because:
+    1. Our custom value template needs options to look up labels from values
+    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
+    3. We need to maintain the icon slot functionality in the value template
+    option-label="name" is required because our option template directly accesses option.name
+  -->
+  <Select
+    v-model="selectedItem"
+    v-bind="$attrs"
+    :options="options"
+    option-label="name"
+    option-value="value"
+    unstyled
+    :pt="{
+      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: cn(
          'relative inline-flex cursor-pointer items-center select-none',
          size === 'md' ? 'h-8' : 'h-10',
          'rounded-lg',
@@ -14,107 +23,121 @@
          'transition-all duration-200 ease-in-out',
          'hover:bg-secondary-background-hover',
          'border-[2.5px] border-solid',
-          invalid ? 'border-destructive-background' : 'border-transparent',
-          'focus:border-node-component-border focus:outline-none',
-          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
+          invalid
+            ? 'border-destructive-background'
+            : 'border-transparent focus-within:border-node-component-border',
+          props.disabled &&
+            'cursor-default opacity-30 hover:bg-secondary-background'
        )
-      "
-    >
+      }),
+      label: {
+        class: cn(
+          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
+          size === 'md' ? 'pl-3' : 'pl-4'
+        )
+      },
+      dropdown: {
+        class:
+          // Right chevron touch area
+          'flex shrink-0 items-center justify-center px-3 py-2'
+      },
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg p-2',
+          'bg-base-background text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: `max-height: min(${listMaxHeight}, 50vh)`,
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class:
+          // Same list tone/size as MultiSelect
+          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
+        class: cn(
+          // Row layout
+          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
+          'hover:bg-secondary-background-hover',
+          // Add focus state for keyboard navigation
+          context.focused && 'bg-secondary-background-hover',
+          // Selected state + check icon
+          context.selected &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      optionLabel: {
+        class: 'truncate'
+      },
+      optionGroupLabel: {
+        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
+      },
+      emptyMessage: {
+        class: 'px-3 py-2 text-sm text-muted-foreground'
+      }
+    }"
+    :aria-label="label || t('g.singleSelectDropdown')"
+    :aria-busy="loading || undefined"
+    :aria-invalid="invalid || undefined"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
+  >
+    <!-- Trigger value -->
+    <template #value="slotProps">
      <div
        :class="
-          cn(
-            'flex flex-1 items-center gap-2 overflow-hidden py-2',
-            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
-          )
+          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
        "
      >
        <i
          v-if="loading"
-          class="icon-[lucide--loader-circle] shrink-0 animate-spin text-muted-foreground"
+          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
        />
        <slot v-else name="icon" />
-        <SelectValue :placeholder="label" class="truncate" />
-      </div>
-      <div
-        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
-      >
-        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-      </div>
-    </SelectTrigger>
-
-    <SelectPortal>
-      <SelectContent
-        position="popper"
-        :side-offset="8"
-        align="start"
-        :style="optionStyle"
-        :class="
-          cn(
-            'z-3000 overflow-hidden',
-            'rounded-lg p-2',
-            'bg-base-background text-base-foreground',
-            'border border-solid border-border-default',
-            'shadow-md',
-            'min-w-(--reka-select-trigger-width)',
-            'data-[state=closed]:animate-out data-[state=open]:animate-in',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2'
-          )
-        "
-      >
-        <SelectViewport
-          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
-          class="scrollbar-custom w-full"
+        <span
+          v-if="slotProps.value !== null && slotProps.value !== undefined"
+          class="text-base-foreground"
        >
-          <SelectItem
-            v-for="opt in options"
-            :key="opt.value"
-            :value="opt.value"
-            :class="
-              cn(
-                'relative flex w-full cursor-pointer items-center justify-between select-none',
-                'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
-                'hover:bg-secondary-background-hover',
-                'focus:bg-secondary-background-hover',
-                'data-[state=checked]:bg-secondary-background-selected',
-                'data-[state=checked]:hover:bg-secondary-background-selected'
-              )
-            "
-          >
-            <SelectItemText class="truncate">
-              {{ opt.name }}
-            </SelectItemText>
-            <SelectItemIndicator
-              class="flex shrink-0 items-center justify-center"
-            >
-              <i
-                class="icon-[lucide--check] text-base-foreground"
-                aria-hidden="true"
-              />
-            </SelectItemIndicator>
-          </SelectItem>
-        </SelectViewport>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+          {{ getLabel(slotProps.value) }}
+        </span>
+        <span v-else class="text-base-foreground">
+          {{ label }}
+        </span>
+      </div>
+    </template>
+
+    <!-- Trigger caret (hidden when loading) -->
+    <template #dropdownicon>
+      <i
+        v-if="!loading"
+        class="icon-[lucide--chevron-down] text-muted-foreground"
+      />
+    </template>
+
+    <!-- Option row -->
+    <template #option="{ option, selected }">
+      <div
+        class="flex w-full items-center justify-between gap-3"
+        :style="optionStyle"
+      >
+        <span class="truncate">{{ option.name }}</span>
+        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+      </div>
+    </template>
+  </Select>
 </template>

 <script setup lang="ts">
-import {
-  SelectContent,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectPortal,
-  SelectRoot,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport
-} from 'reka-ui'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select from 'primevue/select'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

-import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'
@@ -129,12 +152,16 @@ const {
  size = 'lg',
  invalid = false,
  loading = false,
-  disabled = false,
  listMaxHeight = '28rem',
  popoverMinWidth,
  popoverMaxWidth
 } = defineProps<{
  label?: string
+  /**
+   * Required for displaying the selected item's label.
+   * Cannot rely on $attrs alone because we need to access options
+   * in getLabel() to map values to their display names.
+   */
  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
@@ -142,8 +169,6 @@ const {
  invalid?: boolean
  /** Show loading spinner instead of chevron */
  loading?: boolean
-  /** Disable the select */
-  disabled?: boolean
  /** Maximum height of the dropdown panel (default: 28rem) */
  listMaxHeight?: string
  /** Minimum width of the popover (default: auto) */
@@ -156,8 +181,26 @@ const selectedItem = defineModel<string | undefined>({ required: true })

 const { t } = useI18n()

-const optionStyle = usePopoverSizing({
-  minWidth: popoverMinWidth,
-  maxWidth: popoverMaxWidth
+/**
+ * Maps a value to its display label.
+ * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
+ * only the raw value. We need this to show the correct text when an item is selected.
+ */
+const getLabel = (val: string | null | undefined) => {
+  if (val == null) return label ?? ''
+  if (!options) return label ?? ''
+  const found = options.find((o) => o.value === val)
+  return found ? found.name : (label ?? '')
+}
+
+// Extract complex style logic from template
+const optionStyle = computed(() => {
+  if (!popoverMinWidth && !popoverMaxWidth) return undefined
+
+  const styles: string[] = []
+  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
+  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
+
+  return styles.join('; ')
 })
 </script>
--- a/src/composables/useClickDragGuard.test.ts
+++ b/src/composables/useClickDragGuard.test.ts
@@ -1,65 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  exceedsClickThreshold,
-  useClickDragGuard
-} from '@/composables/useClickDragGuard'
-
-describe('exceedsClickThreshold', () => {
-  it('returns false when distance is within threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 5)).toBe(false)
-  })
-
-  it('returns true when distance exceeds threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 5 }, 5)).toBe(true)
-  })
-
-  it('returns false when distance exactly equals threshold', () => {
-    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)).toBe(false)
-  })
-
-  it('handles negative deltas', () => {
-    expect(exceedsClickThreshold({ x: 10, y: 10 }, { x: 4, y: 2 }, 5)).toBe(
-      true
-    )
-  })
-})
-
-describe('useClickDragGuard', () => {
-  it('reports no drag when pointer has not moved', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
-  })
-
-  it('reports no drag when movement is within threshold', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 103, clientY: 204 })).toBe(false)
-  })
-
-  it('reports drag when movement exceeds threshold', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    expect(guard.wasDragged({ clientX: 106, clientY: 200 })).toBe(true)
-  })
-
-  it('returns false when no start has been recorded', () => {
-    const guard = useClickDragGuard(5)
-    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
-  })
-
-  it('returns false after reset', () => {
-    const guard = useClickDragGuard(5)
-    guard.recordStart({ clientX: 100, clientY: 200 })
-    guard.reset()
-    expect(guard.wasDragged({ clientX: 200, clientY: 300 })).toBe(false)
-  })
-
-  it('respects custom threshold', () => {
-    const guard = useClickDragGuard(3)
-    guard.recordStart({ clientX: 0, clientY: 0 })
-    expect(guard.wasDragged({ clientX: 3, clientY: 0 })).toBe(false)
-    expect(guard.wasDragged({ clientX: 4, clientY: 0 })).toBe(true)
-  })
-})
--- a/src/composables/useClickDragGuard.ts
+++ b/src/composables/useClickDragGuard.ts
@@ -1,41 +0,0 @@
-interface PointerPosition {
-  readonly x: number
-  readonly y: number
-}
-
-function squaredDistance(a: PointerPosition, b: PointerPosition): number {
-  const dx = a.x - b.x
-  const dy = a.y - b.y
-  return dx * dx + dy * dy
-}
-
-export function exceedsClickThreshold(
-  start: PointerPosition,
-  end: PointerPosition,
-  threshold: number
-): boolean {
-  return squaredDistance(start, end) > threshold * threshold
-}
-
-export function useClickDragGuard(threshold: number = 5) {
-  let start: PointerPosition | null = null
-
-  function recordStart(e: { clientX: number; clientY: number }) {
-    start = { x: e.clientX, y: e.clientY }
-  }
-
-  function wasDragged(e: { clientX: number; clientY: number }): boolean {
-    if (!start) return false
-    return exceedsClickThreshold(
-      start,
-      { x: e.clientX, y: e.clientY },
-      threshold
-    )
-  }
-
-  function reset() {
-    start = null
-  }
-
-  return { recordStart, wasDragged, reset }
-}
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,7 +1,5 @@
 import * as THREE from 'three'

-import { exceedsClickThreshold } from '@/composables/useClickDragGuard'
-
 import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
@@ -70,7 +68,9 @@ class Load3d {
  targetAspectRatio: number = 1
  isViewerMode: boolean = false

-  private rightMouseStart: { x: number; y: number } = { x: 0, y: 0 }
+  // Context menu tracking
+  private rightMouseDownX: number = 0
+  private rightMouseDownY: number = 0
  private rightMouseMoved: boolean = false
  private readonly dragThreshold: number = 5
  private contextMenuAbortController: AbortController | null = null
@@ -197,20 +197,18 @@ class Load3d {

    const mousedownHandler = (e: MouseEvent) => {
      if (e.button === 2) {
-        this.rightMouseStart = { x: e.clientX, y: e.clientY }
+        this.rightMouseDownX = e.clientX
+        this.rightMouseDownY = e.clientY
        this.rightMouseMoved = false
      }
    }

    const mousemoveHandler = (e: MouseEvent) => {
      if (e.buttons === 2) {
-        if (
-          exceedsClickThreshold(
-            this.rightMouseStart,
-            { x: e.clientX, y: e.clientY },
-            this.dragThreshold
-          )
-        ) {
+        const dx = Math.abs(e.clientX - this.rightMouseDownX)
+        const dy = Math.abs(e.clientY - this.rightMouseDownY)
+
+        if (dx > this.dragThreshold || dy > this.dragThreshold) {
          this.rightMouseMoved = true
        }
      }
@@ -219,13 +217,12 @@ class Load3d {
    const contextmenuHandler = (e: MouseEvent) => {
      if (this.isViewerMode) return

+      const dx = Math.abs(e.clientX - this.rightMouseDownX)
+      const dy = Math.abs(e.clientY - this.rightMouseDownY)
      const wasDragging =
        this.rightMouseMoved ||
-        exceedsClickThreshold(
-          this.rightMouseStart,
-          { x: e.clientX, y: e.clientY },
-          this.dragThreshold
-        )
+        dx > this.dragThreshold ||
+        dy > this.dragThreshold

      this.rightMouseMoved = false

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -278,7 +278,8 @@
    "clearAll": "Clear all",
    "copyURL": "Copy URL",
    "releaseTitle": "{package} {version} Release",
-    "itemsSelected": "No items selected | {count} item selected | {count} items selected",
+    "itemSelected": "{selectedCount} item selected",
+    "itemsSelected": "{selectedCount} items selected",
    "multiSelectDropdown": "Multi-select dropdown",
    "singleSelectDropdown": "Single-select dropdown",
    "progressCountOf": "of",
@@ -1888,7 +1889,9 @@
    "extensionFileHint": "This may be due to the following script",
    "promptExecutionError": "Prompt execution failed",
    "accessRestrictedTitle": "Access Restricted",
-    "accessRestrictedMessage": "Your account is not authorized for this feature."
+    "accessRestrictedMessage": "Your account is not authorized for this feature.",
+    "emptyFileInputTitle": "Missing File Inputs",
+    "emptyFileInputMessage": "The following nodes require a file to be selected: {nodeList}. Please upload or select files before running."
  },
  "apiNodesSignInDialog": {
    "title": "Sign In Required to Use API Nodes",
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog" size="sm">
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="md">
    <template #leftPanelHeaderTitle>
      <i class="icon-[lucide--settings]" />
      <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
@@ -12,7 +12,6 @@
          size="md"
          :placeholder="$t('g.searchSettings') + '...'"
          :debounce-time="128"
-          autofocus
          @search="handleSearch"
        />
      </div>
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -4,7 +4,6 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ImageLightbox from '@/components/common/ImageLightbox.vue'
-import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { cn } from '@/utils/tailwindUtil'

 defineOptions({ inheritAttrs: false })
@@ -31,17 +30,26 @@ const {

 const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
-const clickGuard = useClickDragGuard(5)
+const pointerStart = ref<{ x: number; y: number } | null>(null)
 const lightboxOpen = ref(false)

 function onPointerDown(e: PointerEvent) {
-  clickGuard.recordStart(e)
+  pointerStart.value = { x: e.clientX, y: e.clientY }
 }

 function onIndicatorClick(e: MouseEvent) {
-  const dragged = e.detail !== 0 && clickGuard.wasDragged(e)
-  clickGuard.reset()
-  if (dragged) return
+  if (e.detail !== 0) {
+    const start = pointerStart.value
+    if (start) {
+      const dx = e.clientX - start.x
+      const dy = e.clientY - start.y
+      if (dx * dx + dy * dy > 25) {
+        pointerStart.value = null
+        return
+      }
+    }
+  }
+  pointerStart.value = null
  dropIndicator?.onClick?.(e)
 }

--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -1,8 +1,7 @@
-import { onScopeDispose, toValue } from 'vue'
+import { onScopeDispose, ref, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'

 import { isMiddlePointerInput } from '@/base/pointerUtils'
-import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -29,7 +28,9 @@ export function useNodePointerInteractions(

  let hasDraggingStarted = false

-  const dragGuard = useClickDragGuard(3)
+  const startPosition = ref({ x: 0, y: 0 })
+
+  const DRAG_THRESHOLD = 3 // pixels

  function onPointerdown(event: PointerEvent) {
    if (forwardMiddlePointerIfNeeded(event)) return
@@ -56,7 +57,7 @@ export function useNodePointerInteractions(
      return
    }

-    dragGuard.recordStart(event)
+    startPosition.value = { x: event.clientX, y: event.clientY }

    safeDragStart(event, nodeId)
  }
@@ -84,7 +85,11 @@ export function useNodePointerInteractions(
    }
    // Check if we should start dragging (pointer moved beyond threshold)
    if (lmbDown && !layoutStore.isDraggingVueNodes.value) {
-      if (dragGuard.wasDragged(event)) {
+      const dx = event.clientX - startPosition.value.x
+      const dy = event.clientY - startPosition.value.y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance > DRAG_THRESHOLD) {
        layoutStore.isDraggingVueNodes.value = true
        handleNodeSelect(event, nodeId)
      }
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -146,6 +146,45 @@ import {

 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'

+const FILE_INPUT_FIELDS = {
+  LoadImage: 'image',
+  LoadAudio: 'audio',
+  Load3D: 'model_file',
+  LoadVideo: 'video'
+} as const
+
+function isEmptyFileValue(value: unknown): boolean {
+  if (Array.isArray(value)) return false // linked input from another node
+  if (typeof value === 'string') return value.trim() === ''
+  return value == null
+}
+
+interface EmptyFileInputNode {
+  nodeId: string
+  classType: string
+  title: string
+}
+
+export function findEmptyFileInputNodes(
+  output: ComfyApiWorkflow,
+  nodeIds?: Set<string>
+): EmptyFileInputNode[] {
+  const result: EmptyFileInputNode[] = []
+  for (const [nodeId, node] of Object.entries(output)) {
+    if (nodeIds && !nodeIds.has(nodeId)) continue
+    const field =
+      FILE_INPUT_FIELDS[node.class_type as keyof typeof FILE_INPUT_FIELDS]
+    if (field && isEmptyFileValue(node.inputs[field])) {
+      result.push({
+        nodeId,
+        classType: node.class_type,
+        title: node._meta?.title ?? node.class_type
+      })
+    }
+  }
+  return result
+}
+
 export function sanitizeNodeName(string: string) {
  let entityMap = {
    '&': '',
@@ -1615,6 +1654,25 @@ export class ComfyApp {
          const queuedWorkflow = useWorkspaceStore().workflow
            .activeWorkflow as ComfyWorkflow
          const p = await this.graphToPrompt(this.rootGraph)
+
+          const targetNodeIds = isPartialExecution
+            ? new Set(queueNodeIds!)
+            : undefined
+          const emptyFileInputNodes = findEmptyFileInputNodes(
+            p.output,
+            targetNodeIds
+          )
+          if (emptyFileInputNodes.length) {
+            const nodeList = emptyFileInputNodes
+              .map((n) => `#${n.nodeId} ${n.title}`)
+              .join(', ')
+            useDialogService().showErrorDialog(
+              new Error(t('errorDialog.emptyFileInputMessage', { nodeList })),
+              { title: t('errorDialog.emptyFileInputTitle') }
+            )
+            break
+          }
+
          const queuedNodes = collectAllNodes(this.rootGraph)
          try {
            api.authToken = comfyOrgAuthToken
--- a/src/scripts/findEmptyFileInputNodes.test.ts
+++ b/src/scripts/findEmptyFileInputNodes.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyApiWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { findEmptyFileInputNodes } from './app'
+
+function makeNode(
+  classType: string,
+  inputs: Record<string, unknown>,
+  title?: string
+) {
+  return {
+    class_type: classType,
+    inputs,
+    _meta: { title: title ?? classType }
+  }
+}
+
+describe('findEmptyFileInputNodes', () => {
+  it('detects LoadImage with empty image field', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: '' }),
+      '2': makeNode('KSampler', { seed: 42 })
+    }
+    expect(findEmptyFileInputNodes(output)).toEqual([
+      { nodeId: '1', classType: 'LoadImage', title: 'LoadImage' }
+    ])
+  })
+
+  it('detects multiple empty file input nodes', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: '' }, 'My Image'),
+      '2': makeNode('LoadAudio', { audio: '' }),
+      '3': makeNode('LoadVideo', { video: 'file.mp4' })
+    }
+    const result = findEmptyFileInputNodes(output)
+    expect(result).toHaveLength(2)
+    expect(result[0]).toEqual({
+      nodeId: '1',
+      classType: 'LoadImage',
+      title: 'My Image'
+    })
+    expect(result[1]).toEqual({
+      nodeId: '2',
+      classType: 'LoadAudio',
+      title: 'LoadAudio'
+    })
+  })
+
+  it('returns empty array when all file inputs are populated', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: 'photo.png' }),
+      '2': makeNode('Load3D', { model_file: 'model.glb' })
+    }
+    expect(findEmptyFileInputNodes(output)).toEqual([])
+  })
+
+  it('returns empty array when no file input nodes exist', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('KSampler', { seed: 42 }),
+      '2': makeNode('CLIPTextEncode', { text: 'hello' })
+    }
+    expect(findEmptyFileInputNodes(output)).toEqual([])
+  })
+
+  it('detects Load3D with empty model_file', () => {
+    const output: ComfyApiWorkflow = {
+      '5': makeNode('Load3D', { model_file: '' })
+    }
+    expect(findEmptyFileInputNodes(output)).toEqual([
+      { nodeId: '5', classType: 'Load3D', title: 'Load3D' }
+    ])
+  })
+
+  it('detects null file input values', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: null })
+    }
+    expect(findEmptyFileInputNodes(output)).toHaveLength(1)
+  })
+
+  it('detects undefined file input values', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: undefined })
+    }
+    expect(findEmptyFileInputNodes(output)).toHaveLength(1)
+  })
+
+  it('detects whitespace-only file input values', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: '   ' })
+    }
+    expect(findEmptyFileInputNodes(output)).toHaveLength(1)
+  })
+
+  it('skips linked inputs (array references to other nodes)', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: ['5', 0] })
+    }
+    expect(findEmptyFileInputNodes(output)).toEqual([])
+  })
+
+  it('filters to only specified node IDs when provided', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', { image: '' }),
+      '2': makeNode('LoadAudio', { audio: '' }),
+      '3': makeNode('KSampler', { seed: 42 })
+    }
+    const result = findEmptyFileInputNodes(output, new Set(['2', '3']))
+    expect(result).toEqual([
+      { nodeId: '2', classType: 'LoadAudio', title: 'LoadAudio' }
+    ])
+  })
+
+  it('detects missing file input field entirely', () => {
+    const output: ComfyApiWorkflow = {
+      '1': makeNode('LoadImage', {})
+    }
+    expect(findEmptyFileInputNodes(output)).toHaveLength(1)
+  })
+})
--- a/src/workbench/extensions/manager/components/ManagerProgressToast.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
@@ -135,7 +135,6 @@ whenever(() => !isExpanded.value, resetUserScrolling)

 function closeToast() {
  comfyManagerStore.resetTaskState()
-  isRestartCompleted.value = false
  isExpanded.value = false
 }

--- a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
@@ -3,7 +3,7 @@
    variant="primary"
    :size
    :disabled="isLoading || isInstalling"
-    @click.stop="installAllPacks"
+    @click="installAllPacks"
  >
    <i
      v-if="hasConflict && !isInstalling && !isLoading"
Author	SHA1	Message	Date
GitHub Action	def709cd7d	[automated] Apply ESLint and Oxfmt fixes	2026-03-24 02:13:53 +00:00
Matt Miller	e6a423c36e	fix: unexport FILE_INPUT_FIELDS and fix lint - Remove export from FILE_INPUT_FIELDS (flagged by knip as unused export) - Extract EmptyFileInputNode interface to fix oxfmt line length Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 19:11:01 -07:00
Matt Miller	1b6c2f0add	fix: address review findings for empty file input validation - Broaden check to catch null, undefined, and whitespace-only values - Skip linked inputs (array refs to upstream nodes) to avoid false positives - Scope validation to target nodes during partial execution - Use `as const` for FILE_INPUT_FIELDS - Add test coverage for edge cases (null, undefined, whitespace, linked inputs, partial execution filtering, missing fields) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 18:41:04 -07:00
Matt Miller	68c6a9d7e2	fix: block workflow queue when file input nodes have empty selections Prevents submitting workflows where LoadImage, LoadAudio, Load3D, or LoadVideo nodes have no file selected. Shows a localized error dialog listing the affected nodes instead of sending an invalid request. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-23 18:29:53 -07:00