test: replace fixme E2E tests with unit tests for tab-switch output preservation

- Delete nodeOutputPreservation.spec.ts (test.fixme tests that can't run in CI)
- Add unit tests simulating ChangeTracker store/restore cycle:
  snapshot → reset → restore preserves outputs and previews

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

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled, synchronize]
+    types: [labeled]
   workflow_dispatch:
 
 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
   dispatch:
     # 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.
+    # For pull_request events, only dispatch when the 'preview' label is added.
     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'))))
+       github.event.label.name == 'preview')
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

docs/release-process.md

@@ -1,62 +0,0 @@
-# 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                          |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.2",
+  "version": "1.42.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

src/components/TopMenuSection.vue

@@ -34,7 +34,17 @@
             </Button>
           </div>
 
-          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
+          <div
+            ref="actionbarContainerRef"
+            :class="
+              cn(
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                hasAnyError
+                  ? 'border-destructive-background-hover'
+                  : 'border-interface-stroke'
+              )
+            "
+          >
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
@@ -45,7 +55,6 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
-              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -61,7 +70,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[comfy--send] size-4" />
+              <i class="icon-[lucide--share-2] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>
@@ -114,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLocalStorage, useMutationObserver } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -136,7 +145,6 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -160,7 +168,6 @@ const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const executionErrorStore = useExecutionErrorStore()
-const actionBarButtonStore = useActionBarButtonStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
@@ -175,43 +182,6 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-/**
- * Whether the actionbar container has any visible docked buttons
- * (excluding ComfyActionbar, which uses position:fixed when floating
- * and does not contribute to the container's visual layout).
- */
-const hasDockedButtons = computed(() => {
-  if (actionBarButtonStore.buttons.length > 0) return true
-  if (hasLegacyContent.value) return true
-  if (isLoggedIn.value && !isIntegratedTabBar.value) return true
-  if (isDesktop && !isIntegratedTabBar.value) return true
-  if (isCloud && flags.workflowSharingEnabled) return true
-  if (!isRightSidePanelOpen.value) return true
-  return false
-})
-const isActionbarContainerEmpty = computed(
-  () => isActionbarFloating.value && !hasDockedButtons.value
-)
-const actionbarContainerClass = computed(() => {
-  const base =
-    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
-
-  if (isActionbarContainerEmpty.value) {
-    return cn(
-      base,
-      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
-      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
-      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-    )
-  }
-
-  const borderClass =
-    !isActionbarFloating.value && hasAnyError.value
-      ? 'border-destructive-background-hover'
-      : 'border-interface-stroke'
-
-  return cn(base, 'px-2', borderClass)
-})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
@@ -263,25 +233,6 @@ const rightSidePanelTooltipConfig = computed(() =>
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
-const hasLegacyContent = ref(false)
-
-function checkLegacyContent() {
-  const el = legacyCommandsContainerRef.value
-  if (!el) {
-    hasLegacyContent.value = false
-    return
-  }
-  // Mirror the CSS: [&:not(:has(*>*:not(:empty)))]:hidden
-  hasLegacyContent.value =
-    el.querySelector(':scope > * > *:not(:empty)') !== null
-}
-
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
-  childList: true,
-  subtree: true,
-  characterData: true
-})
-
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'

src/components/actionbar/ComfyActionbar.vue

@@ -119,14 +119,9 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const {
-  topMenuContainer,
-  queueOverlayExpanded = false,
-  hasAnyError = false
-} = defineProps<{
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
   topMenuContainer?: HTMLElement | null
   queueOverlayExpanded?: boolean
-  hasAnyError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -440,12 +435,7 @@ const panelClass = computed(() =>
     isDragging.value && 'pointer-events-none select-none',
     isDocked.value
       ? 'static border-none bg-transparent p-0'
-      : [
-          'fixed shadow-interface',
-          hasAnyError
-            ? 'border-destructive-background-hover'
-            : 'border-interface-stroke'
-        ]
+      : 'fixed shadow-interface'
   )
 )
 </script>

src/components/builder/AppBuilder.vue

@@ -8,7 +8,6 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -28,7 +27,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
@@ -53,15 +52,18 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return node ? { nodeId, widgetName, node, widget } : null
+      const node = resolveNode(nodeId)
+      if (!node) return null
+      const widget = node.widgets?.find((w) => w.name === widgetName)
+      return { nodeId, widgetName, node, widget }
     })
     .filter((item): item is NonNullable<typeof item> => item !== null)
 )
 
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    const node = resolveNode(nodeId)
+    const widget = node?.widgets?.find((w) => w.name === widgetName)
     if (!node || !widget) {
       return {
         nodeId,
@@ -106,7 +108,7 @@ function getHovered(
 
 function getBounding(nodeId: NodeId, widgetName?: string) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  const node = app.rootGraph.getNodeById(nodeId)
   if (!node) return
 
   const titleOffset =
@@ -119,6 +121,7 @@ function getBounding(nodeId: NodeId, widgetName?: string) {
       left: `${node.pos[0]}px`,
       top: `${node.pos[1] - titleOffset}px`
     }
+  const widget = node.widgets?.find((w) => w.name === widgetName)
   if (!widget) return
 
   const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
@@ -157,16 +160,12 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
-  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
+  if (!isSelectInputsMode.value) return
 
-  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
-  const storeName = isPromotedWidgetView(widget)
-    ? widget.sourceWidgetName
-    : widget.name
   const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
+    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
   )
-  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
+  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 

src/components/common/Dialogue.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{ title?: string; to?: string | HTMLElement }>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <DialogRoot v-slot="{ close }">
-    <DialogTrigger as-child>
-      <slot name="button" />
-    </DialogTrigger>
-    <DialogPortal :to>
-      <DialogOverlay
-        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
-      />
-      <DialogContent
-        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
-      >
-        <div
-          v-if="title"
-          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
-        >
-          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
-          <DialogClose as-child>
-            <Button
-              :aria-label="t('g.close')"
-              size="icon"
-              variant="muted-textonly"
-            >
-              <i class="icon-[lucide--x]" />
-            </Button>
-          </DialogClose>
-        </div>
-        <slot :close />
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>

src/components/common/SearchBox.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
+
+const meta: GenericMeta<typeof SearchBox> = {
+  title: 'Components/Input/SearchBox',
+  component: SearchBox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Toggle border prop'
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the search box'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Search...',
+    showBorder: false,
+    size: 'md'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SearchBox },
+    setup() {
+      const searchText = ref('')
+      return { searchText, args }
+    },
+    template: `
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
+      </div>
+    `
+  })
+}
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: false
+  }
+}
+
+export const MediumSize: Story = {
+  ...Default,
+  args: {
+    size: 'md',
+    showBorder: false
+  }
+}
+
+export const LargeSize: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: false
+  }
+}
+
+export const LargeSizeWithBorder: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: true
+  }
+}

src/components/common/SearchBox.test.ts

@@ -0,0 +1,193 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      templateWidgets: {
+        sort: {
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  }
+})
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(SearchBox, {
+      props: {
+        modelValue: '',
+        ...props
+      },
+      global: {
+        plugins: [i18n]
+      }
+    })
+  }
+
+  describe('debounced search functionality', () => {
+    it('should debounce search input by 300ms', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type search query
+      await input.setValue('test')
+
+      // Model should not update immediately
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 299ms (just before debounce delay)
+      await vi.advanceTimersByTimeAsync(299)
+      await nextTick()
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 1ms more (reaching 300ms)
+      await vi.advanceTimersByTimeAsync(1)
+      await nextTick()
+
+      // Model should now be updated
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test'])
+    })
+
+    it('should reset debounce timer on each keystroke', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type first character
+      await input.setValue('t')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type second character (should reset timer)
+      await input.setValue('te')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type third character (should reset timer again)
+      await input.setValue('tes')
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      // Should not have emitted yet (only 200ms passed since last keystroke)
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance final 100ms to reach 300ms
+      await vi.advanceTimersByTimeAsync(100)
+      await nextTick()
+
+      // Should now emit with final value
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
+    })
+
+    it('should only emit final value after rapid typing', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Simulate rapid typing
+      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
+      for (const term of searchTerms) {
+        await input.setValue(term)
+        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
+      }
+      await nextTick()
+
+      // Should not have emitted yet
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Complete the debounce delay
+      await vi.advanceTimersByTimeAsync(350)
+      await nextTick()
+
+      // Should emit only once with final value
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
+    })
+
+    describe('bidirectional model sync', () => {
+      it('should sync external model changes to internal state', async () => {
+        const wrapper = createWrapper({ modelValue: 'initial' })
+        const input = wrapper.find('input')
+
+        expect(input.element.value).toBe('initial')
+
+        // Update model externally
+        await wrapper.setProps({ modelValue: 'external update' })
+        await nextTick()
+
+        // Internal state should sync
+        expect(input.element.value).toBe('external update')
+      })
+    })
+
+    describe('placeholder', () => {
+      it('should use custom placeholder when provided', () => {
+        const wrapper = createWrapper({ placeholder: 'Custom search...' })
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Custom search...')
+        expect(input.attributes('aria-label')).toBe('Custom search...')
+      })
+
+      it('should use default placeholder when not provided', () => {
+        const wrapper = createWrapper()
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Search...')
+        expect(input.attributes('aria-label')).toBe('Search...')
+      })
+    })
+
+    describe('autofocus', () => {
+      it('should focus input when autofocus is true', async () => {
+        const wrapper = createWrapper({ autofocus: true })
+        await nextTick()
+
+        const input = wrapper.find('input')
+        const inputElement = input.element as HTMLInputElement
+
+        // Note: In JSDOM, focus() doesn't actually set document.activeElement
+        // We can only verify that the focus method exists and doesn't throw
+        expect(inputElement.focus).toBeDefined()
+      })
+
+      it('should not autofocus when autofocus is false', () => {
+        const wrapper = createWrapper({ autofocus: false })
+        const input = wrapper.find('input')
+
+        expect(document.activeElement).not.toBe(input.element)
+      })
+    })
+
+    describe('click to focus', () => {
+      it('should focus input when wrapper is clicked', async () => {
+        const wrapper = createWrapper()
+        const wrapperDiv = wrapper.find('[class*="flex"]')
+
+        await wrapperDiv.trigger('click')
+        await nextTick()
+
+        // Input should receive focus
+        const input = wrapper.find('input').element as HTMLInputElement
+        expect(input.focus).toBeDefined()
+      })
+    })
+  })
+})

src/components/common/SearchBox.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
+        customClass,
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      :class="
+        cn(
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
+          isLarge ? 'pl-11' : 'pl-8'
+        )
+      "
+      :aria-label="placeholder"
+    />
+    <Button
+      v-if="filterIcon"
+      size="icon"
+      variant="textonly"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
+      @click="$emit('showFilter', $event)"
+    >
+      <i :class="filterIcon" />
+    </Button>
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      :class="cn('clear-button absolute', isLarge ? 'left-2' : 'left-0')"
+      variant="textonly"
+      size="icon"
+      @click="modelValue = ''"
+    >
+      <i class="icon-[lucide--x] size-4" />
+    </Button>
+  </div>
+  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+    <SearchFilterChip
+      v-for="filter in filters"
+      :key="filter.id"
+      :text="filter.text"
+      :badge="filter.badge"
+      :badge-class="filter.badgeClass"
+      @remove="$emit('removeFilter', filter)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" generic="TFilter extends SearchFilter">
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { computed, ref } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
+const {
+  placeholder = 'Search...',
+  icon = 'pi pi-search',
+  debounceTime = 300,
+  filterIcon,
+  filters = [],
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: customClass
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  filterIcon?: string
+  filters?: TFilter[]
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const isLarge = computed(() => size === 'lg')
+
+const emit = defineEmits<{
+  (e: 'search', value: string, filters: TFilter[]): void
+  (e: 'showFilter', event: Event): void
+  (e: 'removeFilter', filter: TFilter): void
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref()
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
+
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn(
+      'box-border rounded-sm border border-solid border-border-default p-2',
+      isLarge.value ? 'h-10' : 'h-8'
+    )
+  }
+
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
+</script>
+
+<style scoped>
+:deep(.p-inputtext) {
+  --p-form-field-padding-x: 0.625rem;
+}
+</style>

src/components/common/SearchBoxV2.test.ts

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SearchBoxV2 from './SearchBoxV2.vue'
+
+vi.mock('@vueuse/core', () => ({
+  watchDebounced: vi.fn(() => vi.fn())
+}))
+
+describe('SearchBoxV2', () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          clear: 'Clear',
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  })
+
+  function mountComponent(props = {}) {
+    return mount(SearchBoxV2, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          ComboboxRoot: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxAnchor: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxInput: {
+            template:
+              '<input :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+            props: ['placeholder', 'modelValue', 'autoFocus']
+          }
+        }
+      },
+      props: {
+        modelValue: '',
+        ...props
+      }
+    })
+  }
+
+  it('uses i18n placeholder when no placeholder prop provided', () => {
+    const wrapper = mountComponent()
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Search...')
+  })
+
+  it('uses custom placeholder when provided', () => {
+    const wrapper = mountComponent({
+      placeholder: 'Custom placeholder'
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Custom placeholder')
+  })
+
+  it('shows search icon when search term is empty', () => {
+    const wrapper = mountComponent({ modelValue: '' })
+    expect(wrapper.find('i.icon-\\[lucide--search\\]').exists()).toBe(true)
+  })
+
+  it('shows clear button when search term is not empty', () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('clears search term when clear button is clicked', async () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    const clearButton = wrapper.find('button')
+    await clearButton.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
+  })
+
+  it('applies large size classes when size is lg', () => {
+    const wrapper = mountComponent({ size: 'lg' })
+    expect(wrapper.html()).toContain('size-5')
+  })
+
+  it('applies medium size classes when size is md', () => {
+    const wrapper = mountComponent({ size: 'md' })
+    expect(wrapper.html()).toContain('size-4')
+  })
+})

src/components/common/SearchBoxV2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-auto flex-col gap-2">
+    <ComboboxRoot :ignore-filter="true" :open="false">
+      <ComboboxAnchor
+        :class="
+          cn(
+            'relative flex w-full cursor-text items-center',
+            'rounded-lg bg-comfy-input text-comfy-input-foreground',
+            showBorder &&
+              'box-border border border-solid border-border-default',
+            sizeClasses,
+            className
+          )
+        "
+      >
+        <i
+          v-if="!searchTerm"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
+        />
+        <Button
+          v-else
+          class="absolute left-2"
+          variant="textonly"
+          size="icon"
+          :aria-label="$t('g.clear')"
+          @click="clearSearch"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </Button>
+
+        <ComboboxInput
+          ref="inputRef"
+          v-model="searchTerm"
+          :class="
+            cn(
+              'size-full border-none bg-transparent text-sm outline-none',
+              inputPadding
+            )
+          "
+          :placeholder="placeholderText"
+          :auto-focus="autofocus"
+        />
+      </ComboboxAnchor>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+import { watchDebounced } from '@vueuse/core'
+import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  debounceTime = 300,
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const searchTerm = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+const isLarge = computed(() => size === 'lg')
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+const sizeClasses = computed(() => {
+  if (showBorder) {
+    return isLarge.value ? 'h-10 p-2' : 'h-8 p-2'
+  }
+  return isLarge.value ? 'h-12 px-4 py-2' : 'h-10 px-4 py-2'
+})
+
+const iconClass = computed(() => (isLarge.value ? 'size-5' : 'size-4'))
+const inputPadding = computed(() => (isLarge.value ? 'pl-8' : 'pl-6'))
+
+function clearSearch() {
+  searchTerm.value = ''
+}
+
+watchDebounced(
+  searchTerm,
+  (value: string) => {
+    emit('search', value)
+  },
+  { debounce: debounceTime }
+)
+</script>

src/components/common/VirtualGrid.test.ts

@@ -155,93 +155,6 @@ describe('VirtualGrid', () => {
     wrapper.unmount()
   })
 
-  it('emits approach-end for single-column list when scrolled near bottom', async () => {
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        maxColumns: 1,
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    // Scroll near the end: 50 items * 48px = 2400px total
-    // viewRows = ceil(600/48) = 13, buffer = 1
-    // Need toCol >= items.length - cols*bufferRows = 50 - 1 = 49
-    // toCol = (offsetRows + bufferRows + viewRows) * cols
-    // offsetRows = floor(scrollY / 48)
-    // Need (offsetRows + 1 + 13) * 1 >= 49 → offsetRows >= 35
-    // scrollY = 35 * 48 = 1680
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
-  })
-
-  it('does not emit approach-end without maxColumns in single-column layout', async () => {
-    // Demonstrates the bug: without maxColumns=1, cols is calculated
-    // from width/itemWidth (400/200 = 2), causing incorrect row math
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    // Same scroll position as the passing test
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
-    // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
-    // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
-  })
-
   it('forces cols to maxColumns when maxColumns is finite', async () => {
     mockedWidth.value = 100
     mockedHeight.value = 200

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,10 +14,10 @@
     </template>
 
     <template #header>
-      <SearchInput
+      <SearchBox
         v-model="searchQuery"
         size="lg"
-        class="max-w-96 flex-1"
+        class="max-w-[384px]"
         autofocus
       />
     </template>
@@ -389,7 +389,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -155,7 +155,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { KeybindingImpl } from '@/platform/keybindings/keybinding'

src/components/error/ErrorOverlay.vue

@@ -50,9 +50,7 @@
             {{ t('g.dismiss') }}
           </Button>
           <Button variant="secondary" size="lg" @click="seeErrors">
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ t('errorOverlay.seeErrors') }}
           </Button>
         </div>
       </div>
@@ -71,8 +69,6 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-defineProps<{ appMode?: boolean }>()
-
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -98,7 +94,6 @@ function dismiss() {
 }
 
 function seeErrors() {
-  canvasStore.linearMode = false
   if (canvasStore.canvas) {
     canvasStore.canvas.deselectAll()
     canvasStore.updateSelectedItems()

src/components/input/MultiSelect.vue

@@ -93,12 +93,13 @@
       #header
     >
       <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
+        <SearchBox
           v-if="showSearchBox"
           v-model="searchQuery"
           :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
+          :show-order="true"
+          :show-border="true"
+          :place-holder="searchPlaceholder"
         />
         <div
           v-if="showSelectedCount || showClearButton"
@@ -181,7 +182,7 @@ 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 SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

src/components/maskeditor/BrushSettingsPanel.vue

@@ -72,12 +72,12 @@
         />
       </div>
       <SliderControl
-        v-model="brushSizeSliderValue"
+        v-model="brushSize"
         class="flex-1"
         label=""
-        :min="0"
-        :max="1"
-        :step="0.001"
+        :min="1"
+        :max="250"
+        :step="1"
       />
     </div>
 
@@ -182,26 +182,6 @@ const brushSize = computed({
   set: (value: number) => store.setBrushSize(value)
 })
 
-const rawSliderValue = ref<number | null>(null)
-
-const brushSizeSliderValue = computed({
-  get: () => {
-    if (rawSliderValue.value !== null) {
-      const cachedSize = Math.round(Math.pow(250, rawSliderValue.value))
-      if (cachedSize === brushSize.value) {
-        return rawSliderValue.value
-      }
-    }
-
-    return Math.log(brushSize.value) / Math.log(250)
-  },
-  set: (value: number) => {
-    rawSliderValue.value = value
-    const size = Math.round(Math.pow(250, value))
-    store.setBrushSize(size)
-  }
-})
-
 const brushOpacity = computed({
   get: () => store.brushSettings.opacity,
   set: (value: number) => store.setBrushOpacity(value)

src/components/queue/job/JobFilterActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-w-0 items-center gap-2">
-    <SearchInput
+    <SearchBox
       v-if="showSearch"
       :model-value="searchQuery"
       class="min-w-0 flex-1"
@@ -116,7 +116,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,5 +1,5 @@
-import { computed, reactive, ref, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }
 
 export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
+  searchQuery: Ref<string>,
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = toValue(searchQuery).trim()
+    const query = searchQuery.value.trim()
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -18,8 +18,6 @@
       class="flex-1"
       :items="assetItems"
       :grid-style="listGridStyle"
-      :max-columns="1"
-      :default-item-height="48"
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">
@@ -35,7 +33,7 @@
             tabindex="0"
             :aria-label="
               t('assetBrowser.ariaLabel.assetCard', {
-                name: getAssetDisplayName(item.asset),
+                name: item.asset.name,
                 type: getAssetMediaType(item.asset)
               })
             "
@@ -46,7 +44,7 @@
               )
             "
             :preview-url="getAssetPreviewUrl(item.asset)"
-            :preview-alt="getAssetDisplayName(item.asset)"
+            :preview-alt="item.asset.name"
             :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
             :is-video-preview="isVideoAsset(item.asset)"
             :primary-text="getAssetPrimaryText(item.asset)"
@@ -135,12 +133,8 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
-function getAssetDisplayName(asset: AssetItem): string {
-  return asset.display_name || asset.name
-}
-
 function getAssetPrimaryText(asset: AssetItem): string {
-  return truncateFilename(getAssetDisplayName(asset))
+  return truncateFilename(asset.name)
 }
 
 function getAssetMediaType(asset: AssetItem) {

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -569,7 +569,7 @@ const handleZoomClick = (asset: AssetItem) => {
     const dialogStore = useDialogStore()
     dialogStore.showDialog({
       key: 'asset-3d-viewer',
-      title: asset.display_name || asset.name,
+      title: asset.name,
       component: Load3dViewerContent,
       props: {
         modelUrl: asset.preview_url || ''

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           class="workflows-search-box"
@@ -146,7 +146,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -22,7 +22,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           :placeholder="
@@ -56,7 +56,7 @@
 import { Divider } from 'primevue'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -86,40 +86,18 @@
       </template>
       <template #header>
         <div class="px-2 2xl:px-4">
-          <div class="flex items-center gap-1">
-            <SearchInput
-              ref="searchBoxRef"
-              v-model="searchQuery"
-              data-testid="node-library-search"
-              class="node-lib-search-box"
-              :placeholder="
-                $t('g.searchPlaceholder', { subject: $t('g.nodes') })
-              "
-              @search="handleSearch"
-            />
-            <Button
-              variant="textonly"
-              size="icon"
-              class="filter-button shrink-0"
-              :aria-label="$t('g.filter')"
-              @click="(e: Event) => searchFilter?.toggle(e)"
-            >
-              <i class="pi pi-filter" />
-            </Button>
-          </div>
-          <div
-            v-if="filters?.length"
-            class="search-filters flex flex-wrap gap-2 pt-2"
-          >
-            <SearchFilterChip
-              v-for="filter in filters"
-              :key="filter.id"
-              :text="filter.text"
-              :badge="filter.badge"
-              :badge-class="filter.badgeClass"
-              @remove="onRemoveFilter(filter)"
-            />
-          </div>
+          <SearchBox
+            ref="searchBoxRef"
+            v-model:model-value="searchQuery"
+            data-testid="node-library-search"
+            class="node-lib-search-box"
+            :placeholder="$t('g.searchPlaceholder', { subject: $t('g.nodes') })"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
+          />
 
           <Popover ref="searchFilter" class="ml-[-13px]">
             <NodeSearchFilter @add-filter="onAddFilter" />
@@ -177,9 +155,8 @@ import {
 } from 'vue'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchFilterChip from '@/components/common/SearchFilterChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'

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

@@ -69,7 +69,7 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
   }
 }))
 
-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
+vi.mock('@/components/common/SearchBoxV2.vue', () => ({
   default: {
     name: 'SearchBox',
     template: '<input data-testid="search-box" />',

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -3,7 +3,7 @@
     <template #header>
       <TabsRoot v-model="selectedTab" class="flex flex-col">
         <div class="flex items-center justify-between gap-2 px-2 pb-2 2xl:px-4">
-          <SearchInput
+          <SearchBox
             ref="searchBoxRef"
             v-model="searchQuery"
             :placeholder="$t('g.search') + '...'"
@@ -180,7 +180,7 @@ import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBoxV2.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
@@ -253,7 +253,7 @@ const filterOptions = ref<Record<NodeCategoryId, boolean>>({
 
 const { t } = useI18n()
 
-const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
   essentials: [],

src/components/ui/ZoomPane.vue

@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {
 
 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0 && e.button !== 1) return
+  if (e.button !== 0) return
 
   const zoomPaneEl = zoomPane.value
   if (!zoomPaneEl) return

src/components/ui/search-input/SearchInput.test.ts

@@ -1,202 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, watch } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SearchInput from './SearchInput.vue'
-
-vi.mock('@vueuse/core', () => ({
-  watchDebounced: vi.fn((source, cb, opts) => {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    return watch(source, (val: string) => {
-      if (timer) clearTimeout(timer)
-      timer = setTimeout(() => cb(val), opts?.debounce ?? 300)
-    })
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        clear: 'Clear',
-        searchPlaceholder: 'Search...'
-      }
-    }
-  }
-})
-
-describe('SearchInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.useRealTimers()
-  })
-
-  function mountComponent(props = {}) {
-    return mount(SearchInput, {
-      global: {
-        plugins: [i18n],
-        stubs: {
-          ComboboxRoot: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxAnchor: {
-            template: '<div @click="$emit(\'click\')"><slot /></div>',
-            emits: ['click']
-          },
-          ComboboxInput: {
-            template:
-              '<input :placeholder="placeholder" :value="modelValue" :autofocus="autoFocus || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ['placeholder', 'modelValue', 'autoFocus']
-          }
-        }
-      },
-      props: {
-        modelValue: '',
-        ...props
-      }
-    })
-  }
-
-  describe('debounced search', () => {
-    it('should debounce search input by 300ms', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('test')
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(299)
-      await nextTick()
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(1)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toEqual([['test']])
-    })
-
-    it('should reset debounce timer on each keystroke', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('t')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('te')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('tes')
-      await vi.advanceTimersByTimeAsync(200)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(100)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeTruthy()
-      expect(wrapper.emitted('search')?.[0]).toEqual(['tes'])
-    })
-
-    it('should only emit final value after rapid typing', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
-      for (const term of searchTerms) {
-        await input.setValue(term)
-        await vi.advanceTimersByTimeAsync(50)
-      }
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(350)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toHaveLength(1)
-      expect(wrapper.emitted('search')?.[0]).toEqual(['search'])
-    })
-  })
-
-  describe('model sync', () => {
-    it('should sync external model changes to internal state', async () => {
-      const wrapper = mountComponent({ modelValue: 'initial' })
-      const input = wrapper.find('input')
-
-      expect(input.element.value).toBe('initial')
-
-      await wrapper.setProps({ modelValue: 'external update' })
-      await nextTick()
-
-      expect(input.element.value).toBe('external update')
-    })
-  })
-
-  describe('placeholder', () => {
-    it('should use custom placeholder when provided', () => {
-      const wrapper = mountComponent({ placeholder: 'Custom search...' })
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Custom search...')
-    })
-
-    it('should use i18n placeholder when not provided', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Search...')
-    })
-  })
-
-  describe('autofocus', () => {
-    it('should pass autofocus prop to ComboboxInput', () => {
-      const wrapper = mountComponent({ autofocus: true })
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeDefined()
-    })
-
-    it('should not autofocus by default', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeUndefined()
-    })
-  })
-
-  describe('focus method', () => {
-    it('should expose focus method via ref', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.vm.focus).toBeDefined()
-    })
-  })
-
-  describe('clear button', () => {
-    it('shows search icon when value is empty', () => {
-      const wrapper = mountComponent({ modelValue: '' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(false)
-    })
-
-    it('shows clear button when value is not empty', () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(true)
-    })
-
-    it('clears value when clear button is clicked', async () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      const clearButton = wrapper.find('button')
-      await clearButton.trigger('click')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
-    })
-  })
-})

src/components/ui/search-input/SearchInput.vue

@@ -1,15 +1,11 @@
 <template>
-  <ComboboxRoot
-    :ignore-filter="true"
-    :open="false"
-    :disabled="disabled"
-    :class="className"
-  >
+  <ComboboxRoot :ignore-filter="true" :open="false" :disabled="disabled">
     <ComboboxAnchor
       :class="
         cn(
           searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50'
+          disabled && 'pointer-events-none opacity-50',
+          className
         )
       "
       @click="focus"

src/components/ui/slider/Slider.stories.ts

@@ -1,77 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { computed, ref, toRefs } from 'vue'
-
-import Slider from './Slider.vue'
-
-interface StoryArgs extends ComponentPropsAndSlots<typeof Slider> {
-  disabled: boolean
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' }
-  },
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false
-  },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div class="w-72"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}

src/components/widget/SampleModelSelector.vue

@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchInput v-model="searchQuery" size="lg" class="max-w-96 flex-1" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -130,7 +130,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -8,7 +8,7 @@ import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
@@ -68,7 +68,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
   components: {
     BaseModalLayout,
     LeftSidePanel,
-    SearchInput,
+    SearchBox,
     MultiSelect,
     SingleSelect,
     Button,
@@ -186,7 +186,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"
@@ -309,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
 
         <!-- Header -->
         <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
             class="max-w-[384px]"
             size="lg"
             :modelValue="searchQuery"

src/extensions/core/imageCompare.ts

@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { NodeOutputWith } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
@@ -28,6 +29,7 @@ useExtensionService().registerExtension({
 
       const toUrl = (record: Record<string, string>) => {
         const params = new URLSearchParams(record)
+        appendCloudResParam(params, record.filename)
         return api.apiURL(`/view?${params}${rand}`)
       }
 

src/locales/en/main.json

@@ -3180,7 +3180,6 @@
     "cancelThisRun": "Cancel this run",
     "deleteAllAssets": "Delete all assets from this run",
     "hasCreditCost": "Requires additional credits",
-    "viewGraph": "View node graph",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3225,19 +3224,6 @@
       "outputPlaceholder": "Output nodes will show up here",
       "outputRequiredPlaceholder": "At least one node is required"
     },
-    "error": {
-      "header": "This app encountered an error",
-      "log": "Error Logs",
-      "mobileFixable": "Check {0} for errors",
-      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
-      "promptVisitGraph": "View the node graph to see the full error.",
-      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
-      "goto": "Show errors in graph",
-      "github": "submit a GitHub issue",
-      "guide": "troubleshooting guide",
-      "support": "contact our support",
-      "promptShow": "Show error report"
-    },
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"

src/platform/assets/components/AssetBrowserModal.vue

@@ -26,12 +26,12 @@
         class="flex w-full items-center justify-between gap-2"
         @click.self="focusedAsset = null"
       >
-        <SearchInput
+        <SearchBox
           v-model="searchQuery"
           :autofocus="true"
           size="lg"
           :placeholder="$t('g.searchPlaceholder', { subject: '' })"
-          class="max-w-lg flex-1"
+          class="max-w-96"
         />
         <Button
           v-if="isUploadButtonEnabled"
@@ -88,7 +88,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'

src/platform/assets/components/AssetCard.vue

@@ -186,7 +186,7 @@ const tooltipDelay = computed<number>(() =>
 
 const { isLoading, error } = useImage({
   src: asset.preview_url ?? '',
-  alt: asset.display_name || asset.name
+  alt: asset.name
 })
 
 function handleSelect() {

src/platform/assets/components/MediaAssetCard.vue

@@ -5,7 +5,7 @@
     :aria-label="
       asset
         ? $t('assetBrowser.ariaLabel.assetCard', {
-            name: asset.display_name || asset.name,
+            name: asset.name,
             type: fileKind
           })
         : $t('assetBrowser.ariaLabel.loadingAsset')
@@ -225,7 +225,7 @@ const canInspect = computed(() => isPreviewableMediaType(fileKind.value))
 
 // Get filename without extension
 const fileName = computed(() => {
-  return getFilenameDetails(asset?.display_name || asset?.name || '').filename
+  return getFilenameDetails(asset?.name || '').filename
 })
 
 // Adapt AssetItem to legacy AssetMeta format for existing components
@@ -234,9 +234,8 @@ const adaptedAsset = computed(() => {
   return {
     id: asset.id,
     name: asset.name,
-    display_name: asset.display_name,
     kind: fileKind.value,
-    src: asset.thumbnail_url || asset.preview_url || '',
+    src: asset.preview_url || '',
     size: asset.size,
     tags: asset.tags || [],
     created_at: asset.created_at,

src/platform/assets/components/MediaAssetFilterBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center gap-3">
-    <SearchInput
+    <SearchBox
       :model-value="searchQuery"
       :placeholder="
         $t('g.searchPlaceholder', { subject: $t('sideToolbar.labels.assets') })
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'
 
 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'

src/platform/assets/components/MediaImageTop.vue

@@ -6,7 +6,7 @@
     <img
       v-if="!error"
       :src="asset.src"
-      :alt="asset.display_name || asset.name"
+      :alt="asset.name"
       class="size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     />
     <div
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 
 const { state, error, isReady } = useImage({
   src: asset.src ?? '',
-  alt: asset.display_name || asset.name
+  alt: asset.name
 })
 
 whenever(

src/platform/assets/composables/media/assetMappers.ts

@@ -39,14 +39,12 @@ export function mapTaskOutputToAssetItem(
   return {
     id: taskItem.jobId,
     name: output.filename,
-    display_name: output.display_name,
     size: 0,
     created_at: taskItem.executionStartTimestamp
       ? new Date(taskItem.executionStartTimestamp).toISOString()
       : new Date().toISOString(),
     tags: ['output'],
-    thumbnail_url: output.previewUrl,
-    preview_url: output.url,
+    preview_url: output.previewUrl,
     user_metadata: metadata
   }
 }
@@ -64,7 +62,6 @@ export function mapInputFileToAssetItem(
   directory: 'input' | 'output' = 'input'
 ): AssetItem {
   const params = new URLSearchParams({ filename, type: directory })
-  const preview_url = api.apiURL(`/view?${params}`)
   appendCloudResParam(params, filename)
 
   return {
@@ -73,7 +70,6 @@ export function mapInputFileToAssetItem(
     size: 0,
     created_at: new Date().toISOString(),
     tags: [directory],
-    thumbnail_url: api.apiURL(`/view?${params}`),
-    preview_url
+    preview_url: api.apiURL(`/view?${params}`)
   }
 }

src/platform/assets/composables/useMediaAssetActions.ts

@@ -68,7 +68,7 @@ export function useMediaAssetActions() {
     if (!targetAsset) return
 
     try {
-      const filename = targetAsset.display_name || targetAsset.name
+      const filename = targetAsset.name
       // Prefer preview_url (already includes subfolder) with getAssetUrl as fallback
       const downloadUrl = targetAsset.preview_url || getAssetUrl(targetAsset)
 
@@ -109,7 +109,7 @@ export function useMediaAssetActions() {
 
     try {
       assets.forEach((asset) => {
-        const filename = asset.display_name || asset.name
+        const filename = asset.name
         const downloadUrl = asset.preview_url || getAssetUrl(asset)
         downloadFile(downloadUrl, filename)
       })

src/platform/assets/schemas/assetSchema.ts

@@ -9,9 +9,7 @@ const zAsset = z.object({
   mime_type: z.string().nullish(),
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),
-  display_name: z.string().optional(),
   preview_url: z.string().optional(),
-  thumbnail_url: z.string().optional(),
   created_at: z.string().optional(),
   updated_at: z.string().optional(),
   is_immutable: z.boolean().optional(),

src/platform/assets/utils/outputAssetUtil.test.ts

@@ -20,7 +20,6 @@ type OutputOverrides = Partial<{
   subfolder: string
   nodeId: string
   url: string
-  display_name: string
 }>
 
 function createOutput(overrides: OutputOverrides = {}): ResultItemImpl {
@@ -33,8 +32,7 @@ function createOutput(overrides: OutputOverrides = {}): ResultItemImpl {
   }
   return {
     ...merged,
-    previewUrl: merged.url,
-    display_name: merged.display_name
+    previewUrl: merged.url
   } as ResultItemImpl
 }
 
@@ -127,48 +125,6 @@ describe('resolveOutputAssetItems', () => {
     ])
   })
 
-  it('propagates display_name from output to asset item', async () => {
-    const output = createOutput({
-      filename: 'abc123hash.png',
-      nodeId: '1',
-      url: 'https://example.com/abc123hash.png',
-      display_name: 'ComfyUI_00001_.png'
-    })
-    const metadata: OutputAssetMetadata = {
-      jobId: 'job-dn',
-      nodeId: '1',
-      subfolder: 'sub',
-      outputCount: 1,
-      allOutputs: [output]
-    }
-
-    const results = await resolveOutputAssetItems(metadata)
-
-    expect(results).toHaveLength(1)
-    expect(results[0].name).toBe('abc123hash.png')
-    expect(results[0].display_name).toBe('ComfyUI_00001_.png')
-  })
-
-  it('omits display_name when not present in output', async () => {
-    const output = createOutput({
-      filename: 'file.png',
-      nodeId: '1',
-      url: 'https://example.com/file.png'
-    })
-    const metadata: OutputAssetMetadata = {
-      jobId: 'job-nodn',
-      nodeId: '1',
-      subfolder: 'sub',
-      outputCount: 1,
-      allOutputs: [output]
-    }
-
-    const results = await resolveOutputAssetItems(metadata)
-
-    expect(results).toHaveLength(1)
-    expect(results[0].display_name).toBeUndefined()
-  })
-
   it('keeps root outputs with empty subfolders', async () => {
     const output = createOutput({
       filename: 'root.png',

src/platform/assets/utils/outputAssetUtil.ts

@@ -69,12 +69,10 @@ function mapOutputsToAssetItems({
     items.push({
       id: `${jobId}-${outputKey}`,
       name: output.filename,
-      display_name: output.display_name,
       size: 0,
       created_at: createdAtValue,
       tags: ['output'],
-      thumbnail_url: output.previewUrl,
-      preview_url: output.url,
+      preview_url: output.previewUrl,
       user_metadata: {
         jobId,
         nodeId: output.nodeId,

src/platform/cloud/onboarding/onboardingCloudRoutes.ts

@@ -31,19 +31,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         path: 'signup',
         name: 'cloud-signup',
         component: () =>
-          import('@/platform/cloud/onboarding/CloudSignupView.vue'),
-        beforeEnter: async (to, _from, next) => {
-          if (!to.query.switchAccount) {
-            const { useCurrentUser } =
-              await import('@/composables/auth/useCurrentUser')
-            const { isLoggedIn } = useCurrentUser()
-
-            if (isLoggedIn.value) {
-              return next({ name: 'cloud-user-check' })
-            }
-          }
-          next()
-        }
+          import('@/platform/cloud/onboarding/CloudSignupView.vue')
       },
       {
         path: 'forgot-password',

src/platform/remote/comfyui/jobs/jobTypes.ts

@@ -23,8 +23,7 @@ const zPreviewOutput = z.object({
   subfolder: z.string(),
   type: resultItemType,
   nodeId: z.string(),
-  mediaType: z.string(),
-  display_name: z.string().optional()
+  mediaType: z.string()
 })
 
 /**

src/platform/settings/components/ExtensionPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="extension-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.extensions') })"
     />
@@ -92,7 +92,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'

src/platform/settings/components/SettingDialog.vue

@@ -7,7 +7,7 @@
 
     <template #leftPanel>
       <div class="px-3">
-        <SearchInput
+        <SearchBox
           v-model:model-value="searchQuery"
           size="md"
           :placeholder="$t('g.searchSettings') + '...'"
@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import NavItem from '@/components/widget/nav/NavItem.vue'

src/platform/workflow/sharing/components/AssetSectionList.vue

@@ -46,10 +46,7 @@
                 onThumbnailError($event.name, $event.previewUrl)
               "
             />
-            <span
-              v-tooltip="buildTooltipConfig(item.name)"
-              class="truncate text-xs text-base-foreground"
-            >
+            <span class="truncate text-xs text-base-foreground">
               {{ item.name }}
             </span>
             <span
@@ -77,7 +74,6 @@ import ShareAssetThumbnail from '@/platform/workflow/sharing/components/ShareAss
 import { useAssetSections } from '@/platform/workflow/sharing/composables/useAssetSections'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 const { items } = defineProps<{
   items: AssetInfo[]

src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue

@@ -32,7 +32,7 @@
           v-if="uiConfig.showSearch && !isSingleSeatPlan"
           class="flex items-start gap-2"
         >
-          <SearchInput
+          <SearchBox
             v-model="searchQuery"
             :placeholder="$t('g.search')"
             size="lg"
@@ -367,7 +367,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'

src/renderer/extensions/linearMode/LinearControls.vue

@@ -10,7 +10,6 @@ import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
@@ -30,7 +29,7 @@ import { useQueueSettingsStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const executionErrorStore = useExecutionErrorStore()
@@ -64,41 +63,21 @@ useEventListener(
 )
 
 const mappedSelections = computed(() => {
-  let unprocessedInputs = appModeStore.selectedInputs.flatMap(
-    ([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return widget ? ([[node, widget]] as const) : []
-    }
-  )
+  let unprocessedInputs = [...appModeStore.selectedInputs]
+  //FIXME strict typing here
   const processedInputs: ReturnType<typeof nodeToNodeData>[] = []
   while (unprocessedInputs.length) {
-    const [node] = unprocessedInputs[0]
-    const inputGroup = takeWhile(unprocessedInputs, ([n]) => n === node).map(
-      ([, widget]) => widget
-    )
+    const nodeId = unprocessedInputs[0][0]
+    const inputGroup = takeWhile(
+      unprocessedInputs,
+      ([id]) => id === nodeId
+    ).map(([, widgetName]) => widgetName)
     unprocessedInputs = unprocessedInputs.slice(inputGroup.length)
-    //FIXME: hide widget if owning node bypassed
+    const node = resolveNode(nodeId)
     if (node?.mode !== LGraphEventMode.ALWAYS) continue
 
     const nodeData = nodeToNodeData(node)
-    remove(nodeData.widgets ?? [], (vueWidget) => {
-      if (vueWidget.slotMetadata?.linked) return true
-
-      if (!node.isSubgraphNode())
-        return !inputGroup.some((w) => w.name === vueWidget.name)
-
-      const storeNodeId = vueWidget.storeNodeId?.split(':')?.[1] ?? ''
-      return !inputGroup.some(
-        (subWidget) =>
-          isPromotedWidgetView(subWidget) &&
-          subWidget.sourceNodeId == storeNodeId &&
-          subWidget.sourceWidgetName === vueWidget.storeName
-      )
-    })
-    for (const widget of nodeData.widgets ?? []) {
-      widget.slotMetadata = undefined
-      widget.nodeId = String(node.id)
-    }
+    remove(nodeData.widgets ?? [], (w) => !inputGroup.includes(w.name))
     processedInputs.push(nodeData)
   }
   return processedInputs
@@ -128,6 +107,8 @@ function getDropIndicator(node: LGraphNode) {
 function nodeToNodeData(node: LGraphNode) {
   const dropIndicator = getDropIndicator(node)
   const nodeData = extractVueNodeData(node)
+  remove(nodeData.widgets ?? [], (w) => w.slotMetadata?.linked ?? false)
+  for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined
 
   return {
     ...nodeData,

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -15,9 +15,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
-import MobileError from '@/renderer/extensions/linearMode/MobileError.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -33,7 +31,6 @@ const canvasStore = useCanvasStore()
 const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 const { isLoggedIn } = useCurrentUser()
-const executionErrorStore = useExecutionErrorStore()
 const { t } = useI18n()
 const { commandIdToMenuItem } = useMenuItemStore()
 const queueStore = useQueueStore()
@@ -43,7 +40,7 @@ const { toggle: toggleFullscreen } = useFullscreen(undefined, {
   autoExit: true
 })
 
-const activeIndex = ref(1)
+const activeIndex = ref(2)
 const sliderPaneRef = useTemplateRef('sliderPaneRef')
 const sliderWidth = computed(() => sliderPaneRef.value?.offsetWidth)
 
@@ -195,11 +192,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
         >
-          <MobileError
-            v-if="executionErrorStore.isErrorOverlayOpen"
-            @navigate-controls="activeIndex = 0"
-          />
-          <LinearPreview v-else mobile @navigate-controls="activeIndex = 0" />
+          <LinearPreview mobile />
         </div>
         <AssetsSidebarTab
           class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
@@ -220,11 +213,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div class="relative size-4">
           <i :class="cn('size-4', icon)" />
           <div
-            v-if="index === 1 && executionErrorStore.isErrorOverlayOpen"
-            class="absolute -top-1 -right-1 size-2 rounded-full bg-error"
-          />
-          <div
-            v-else-if="
+            v-if="
               index === 1 &&
               (queueStore.runningTasks.length > 0 ||
                 queueStore.pendingTasks.length > 0)

src/renderer/extensions/linearMode/MobileError.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Dialogue from '@/components/common/Dialogue.vue'
-import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
-import Button from '@/components/ui/button/Button.vue'
-import { useAppMode } from '@/composables/useAppMode'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { buildSupportUrl } from '@/platform/support/config'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-
-defineEmits<{ navigateControls: [] }>()
-
-const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const { setMode } = useAppMode()
-const executionErrorStore = useExecutionErrorStore()
-const { buildDocsUrl, staticUrls } = useExternalLink()
-const { allErrorGroups } = useErrorGroups('', t)
-const { copyToClipboard } = useCopyToClipboard()
-
-const guideUrl = buildDocsUrl('troubleshooting/overview', {
-  includeLocale: true
-})
-const supportUrl = buildSupportUrl()
-
-const inputNodeIds = computed(() => {
-  const ids = new Set()
-  for (const [id] of appModeStore.selectedInputs) ids.add(String(id))
-  return ids
-})
-
-const accessibleNodeErrors = computed(() =>
-  Object.keys(executionErrorStore.lastNodeErrors ?? {}).filter((k) =>
-    inputNodeIds.value.has(k)
-  )
-)
-const accessibleErrors = computed(() =>
-  accessibleNodeErrors.value.flatMap((k) =>
-    executionErrorStore.lastNodeErrors![k].errors.flatMap((error) => {
-      const { extra_info } = error
-      if (!extra_info) return []
-
-      const selectedInput = appModeStore.selectedInputs.find(
-        ([id, name]) => id == k && extra_info.input_name === name
-      )
-      if (!selectedInput) return []
-
-      return [`${selectedInput[1]}: ${error.message}`]
-    })
-  )
-)
-const allErrors = computed(() =>
-  allErrorGroups.value.flatMap((group) => {
-    if (group.type !== 'execution') return [group.title]
-
-    return group.cards.flatMap((c) =>
-      c.errors.map((e) =>
-        e.details
-          ? `${c.title} (${e.details}): ${e.message}`
-          : `${c.title}: ${e.message}`
-      )
-    )
-  })
-)
-
-function copy(obj: unknown) {
-  copyToClipboard(JSON.stringify(obj))
-}
-</script>
-<template>
-  <section class="flex h-full flex-col items-center justify-center gap-2 px-4">
-    <i class="icon-[lucide--circle-alert] size-6 bg-error" />
-    {{ t('linearMode.error.header') }}
-    <div class="p-1 text-muted-foreground">
-      <i18n-t
-        v-if="accessibleErrors.length"
-        keypath="linearMode.error.mobileFixable"
-      >
-        <Button @click="$emit('navigateControls')">
-          {{ t('linearMode.mobileControls') }}
-        </Button>
-      </i18n-t>
-      <div v-else class="text-center">
-        <p v-text="t('linearMode.error.requiresGraph')" />
-        <p v-text="t('linearMode.error.promptVisitGraph')" />
-        <p class="*:text-muted-foreground">
-          <i18n-t keypath="linearMode.error.getHelp">
-            <a
-              :href="guideUrl"
-              target="_blank"
-              v-text="t('linearMode.error.guide')"
-            />
-            <a
-              :href="staticUrls.githubIssues"
-              target="_blank"
-              v-text="t('linearMode.error.github')"
-            />
-            <a
-              :href="supportUrl"
-              target="_blank"
-              v-text="t('linearMode.error.support')"
-            />
-          </i18n-t>
-        </p>
-        <Dialogue :title="t('linearMode.error.log')">
-          <template #button>
-            <Button variant="textonly">
-              {{ t('linearMode.error.promptShow') }}
-              <i class="icon-[lucide--chevron-right] size-5" />
-            </Button>
-          </template>
-          <template #default="{ close }">
-            <article class="flex flex-col gap-2 p-4">
-              <section class="flex max-h-[60vh] flex-col gap-2 overflow-y-auto">
-                <div
-                  v-for="error in allErrors"
-                  :key="error"
-                  class="w-full rounded-lg bg-secondary-background p-2 text-muted-foreground"
-                  v-text="error"
-                />
-              </section>
-              <div class="flex items-center justify-end gap-4">
-                <Button variant="muted-textonly" size="lg" @click="close">
-                  {{ t('g.close') }}
-                </Button>
-                <Button size="lg" @click="copy(allErrors)">
-                  {{ t('importFailed.copyError') }}
-                  <i class="icon-[lucide--copy]" />
-                </Button>
-              </div>
-            </article>
-          </template>
-        </Dialogue>
-      </div>
-    </div>
-    <div
-      v-if="accessibleErrors.length"
-      class="my-8 w-full rounded-lg bg-secondary-background text-muted-foreground"
-    >
-      <ul>
-        <li
-          v-for="error in accessibleErrors"
-          :key="error"
-          class="before:content"
-          v-text="error"
-        />
-      </ul>
-    </div>
-    <div class="flex gap-2">
-      <Button
-        variant="textonly"
-        size="lg"
-        @click="executionErrorStore.dismissErrorOverlay()"
-      >
-        {{ t('g.dismiss') }}
-      </Button>
-      <Button variant="textonly" size="lg" @click="setMode('graph')">
-        {{ t('linearMode.viewGraph') }}
-      </Button>
-      <Button
-        v-if="accessibleErrors.length"
-        size="lg"
-        @click="copy(accessibleErrors)"
-      >
-        {{ t('importFailed.copyError') }}
-        <i class="icon-[lucide--copy]" />
-      </Button>
-    </div>
-  </section>
-</template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -4,7 +4,6 @@ import {
   useInfiniteScroll,
   useResizeObserver
 } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
 import type { ComponentPublicInstance } from 'vue'
 import {
   computed,
@@ -27,13 +26,11 @@ import type {
 import OutputPreviewItem from '@/renderer/extensions/linearMode/OutputPreviewItem.vue'
 import { useOutputHistory } from '@/renderer/extensions/linearMode/useOutputHistory'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useAppModeStore } from '@/stores/appModeStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const { outputs, allOutputs, selectFirstHistory, mayBeActiveWorkflowPending } =
   useOutputHistory()
-const { hasOutputs } = storeToRefs(useAppModeStore())
 const queueStore = useQueueStore()
 const store = useLinearOutputStore()
 const workflowStore = useWorkflowStore()
@@ -159,10 +156,8 @@ watch(
     const inProgress = store.activeWorkflowInProgressItems
     if (inProgress.length > 0) {
       store.selectAsLatest(`slot:${inProgress[0].id}`)
-    } else if (hasOutputs.value) {
-      selectFirstHistory()
     } else {
-      store.selectAsLatest(null)
+      selectFirstHistory()
     }
   },
   { immediate: true }
@@ -185,13 +180,13 @@ watch(
       : undefined
 
     if (!sv || sv.kind !== 'history') {
-      if (hasOutputs.value) selectFirstHistory()
+      selectFirstHistory()
       return
     }
 
     const wasFirst = sv.assetId === oldAssets[0]?.id
     if (wasFirst || !newAssets.some((a) => a.id === sv.assetId)) {
-      if (hasOutputs.value) selectFirstHistory()
+      selectFirstHistory()
     }
   }
 )

src/renderer/extensions/linearMode/useOutputHistory.test.ts

@@ -219,7 +219,6 @@ describe(useOutputHistory, () => {
     })
 
     it('returns outputs from metadata allOutputs when count matches', () => {
-      useAppModeStore().selectedOutputs.push('1')
       const results = [makeResult('a.png'), makeResult('b.png')]
       const asset = makeAsset('a1', 'job-1', {
         allOutputs: results,
@@ -256,7 +255,7 @@ describe(useOutputHistory, () => {
       expect(outputs[0].filename).toBe('b.png')
     })
 
-    it('returns empty when no output nodes are selected', () => {
+    it('returns all outputs when no output nodes are selected', () => {
       const results = [makeResult('a.png', '1'), makeResult('b.png', '2')]
       const asset = makeAsset('a1', 'job-1', {
         allOutputs: results,
@@ -266,7 +265,7 @@ describe(useOutputHistory, () => {
       const { allOutputs } = useOutputHistory()
       const outputs = allOutputs(asset)
 
-      expect(outputs).toHaveLength(0)
+      expect(outputs).toHaveLength(2)
     })
 
     it('returns consistent filtered outputs across repeated calls', () => {
@@ -289,7 +288,6 @@ describe(useOutputHistory, () => {
     })
 
     it('returns in-progress outputs for pending resolve jobs', () => {
-      useAppModeStore().selectedOutputs.push('1')
       pendingResolveRef.value = new Set(['job-1'])
       inProgressItemsRef.value = [
         {
@@ -316,7 +314,6 @@ describe(useOutputHistory, () => {
     })
 
     it('fetches full job detail for multi-output jobs', async () => {
-      useAppModeStore().selectedOutputs.push('1')
       jobDetailResults.set('job-1', {
         outputs: {
           '1': {
@@ -345,7 +342,6 @@ describe(useOutputHistory, () => {
 
   describe('watchEffect resolve loop', () => {
     it('resolves pending jobs when history outputs load', async () => {
-      useAppModeStore().selectedOutputs.push('1')
       const results = [makeResult('a.png')]
       const asset = makeAsset('a1', 'job-1', {
         allOutputs: results,
@@ -364,7 +360,6 @@ describe(useOutputHistory, () => {
     })
 
     it('does not select first history when a selection exists', async () => {
-      useAppModeStore().selectedOutputs.push('1')
       const results = [makeResult('a.png')]
       const asset = makeAsset('a1', 'job-1', {
         allOutputs: results,

src/renderer/extensions/linearMode/useOutputHistory.ts

@@ -65,7 +65,7 @@ export function useOutputHistory(): {
 
   function filterByOutputNodes(items: ResultItemImpl[]): ResultItemImpl[] {
     const nodeIds = appModeStore.selectedOutputs
-    if (!nodeIds.length) return []
+    if (!nodeIds.length) return items
     return items.filter((r) =>
       nodeIds.some((id) => String(id) === String(r.nodeId))
     )

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue

@@ -1,13 +1,6 @@
 <template>
   <WidgetLayoutField :widget="widget">
-    <div
-      :class="
-        cn(
-          WidgetInputBaseClass,
-          'flex items-center gap-2 pr-2 pl-3 not-disabled:hover:bg-component-node-widget-background-hovered'
-        )
-      "
-    >
+    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
       <Slider
         :model-value="[modelValue]"
         v-bind="filteredProps"

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

@@ -1,115 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it, vi } from 'vitest'
-import { defineComponent, h } from 'vue'
-
-import FormDropdown from './FormDropdown.vue'
-import type { FormDropdownItem } from './types'
-
-function createItem(id: string, name: string): FormDropdownItem {
-  return { id, preview_url: '', name, label: name }
-}
-
-const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
-
-vi.mock('@/platform/updates/common/toastStore', () => ({
-  useToastStore: () => ({
-    addAlert: vi.fn()
-  })
-}))
-
-const MockFormDropdownMenu = defineComponent({
-  name: 'FormDropdownMenu',
-  props: {
-    items: { type: Array as () => FormDropdownItem[], default: () => [] },
-    isSelected: { type: Function, default: undefined },
-    filterOptions: { type: Array, default: () => [] },
-    sortOptions: { type: Array, default: () => [] },
-    maxSelectable: { type: Number, default: 1 },
-    disabled: { type: Boolean, default: false },
-    showOwnershipFilter: { type: Boolean, default: false },
-    ownershipOptions: { type: Array, default: () => [] },
-    showBaseModelFilter: { type: Boolean, default: false },
-    baseModelOptions: { type: Array, default: () => [] }
-  },
-  setup() {
-    return () => h('div', { class: 'mock-menu' })
-  }
-})
-
-function mountDropdown(items: FormDropdownItem[]) {
-  return mount(FormDropdown, {
-    props: { items },
-    global: {
-      plugins: [PrimeVue, i18n],
-      stubs: {
-        FormDropdownInput: true,
-        Popover: { template: '<div><slot /></div>' },
-        FormDropdownMenu: MockFormDropdownMenu
-      }
-    }
-  })
-}
-
-function getMenuItems(
-  wrapper: ReturnType<typeof mountDropdown>
-): FormDropdownItem[] {
-  return wrapper
-    .findComponent(MockFormDropdownMenu)
-    .props('items') as FormDropdownItem[]
-}
-
-describe('FormDropdown', () => {
-  describe('filteredItems updates when items prop changes', () => {
-    it('updates displayed items when items prop changes', async () => {
-      const wrapper = mountDropdown([
-        createItem('input-0', 'video1.mp4'),
-        createItem('input-1', 'video2.mp4')
-      ])
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(2)
-
-      await wrapper.setProps({
-        items: [
-          createItem('output-0', 'rendered1.mp4'),
-          createItem('output-1', 'rendered2.mp4')
-        ]
-      })
-      await flushPromises()
-
-      const menuItems = getMenuItems(wrapper)
-      expect(menuItems).toHaveLength(2)
-      expect(menuItems[0].name).toBe('rendered1.mp4')
-    })
-
-    it('updates when items change but IDs stay the same', async () => {
-      const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await flushPromises()
-
-      await wrapper.setProps({ items: [createItem('1', 'beta')] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)[0].name).toBe('beta')
-    })
-
-    it('updates when switching between empty and non-empty items', async () => {
-      const wrapper = mountDropdown([])
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(0)
-
-      await wrapper.setProps({ items: [createItem('1', 'video.mp4')] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(1)
-      expect(getMenuItems(wrapper)[0].name).toBe('video.mp4')
-
-      await wrapper.setProps({ items: [] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(0)
-    })
-  })
-})

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computedAsync, refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -102,16 +101,9 @@ const maxSelectable = computed(() => {
   return 1
 })
 
-const debouncedSearchQuery = refDebounced(searchQuery, 250, { maxWait: 1000 })
+const itemsKey = computed(() => items.map((item) => item.id).join('|'))
 
-const filteredItems = computedAsync(async (onCancel) => {
-  let cleanupFn: (() => void) | undefined
-  onCancel(() => cleanupFn?.())
-  const result = await searcher(debouncedSearchQuery.value, items, (cb) => {
-    cleanupFn = cb
-  })
-  return result
-}, [])
+const filteredItems = ref<FormDropdownItem[]>([])
 
 const defaultSorter = computed<SortOption['sorter']>(() => {
   const sorter = sortOptions.find((option) => option.id === 'default')?.sorter
@@ -179,6 +171,21 @@ function handleSelection(item: FormDropdownItem, index: number) {
     closeDropdown()
   }
 }
+
+async function customSearcher(
+  query: string,
+  onCleanup: (cleanupFn: () => void) => void
+) {
+  let isCleanup = false
+  let cleanupFn: undefined | (() => void)
+  onCleanup(() => {
+    isCleanup = true
+    cleanupFn?.()
+  })
+  await searcher(query, items, (cb) => (cleanupFn = cb)).then((results) => {
+    if (!isCleanup) filteredItems.value = results
+  })
+}
 </script>
 
 <template>
@@ -226,9 +233,11 @@ function handleSelection(item: FormDropdownItem, index: number) {
         :show-base-model-filter
         :base-model-options
         :disabled
+        :searcher="customSearcher"
         :items="sortedItems"
         :is-selected="internalIsSelected"
         :max-selectable
+        :update-key="itemsKey"
         @close="closeDropdown"
         @item-click="handleSelection"
       />

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
 import { computed } from 'vue'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -20,6 +20,11 @@ interface Props {
   isSelected: (item: FormDropdownItem, index: number) => boolean
   filterOptions: FilterOption[]
   sortOptions: SortOption[]
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
+  updateKey?: MaybeRefOrGetter<unknown>
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -31,6 +36,8 @@ const {
   isSelected,
   filterOptions,
   sortOptions,
+  searcher,
+  updateKey,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -111,6 +118,8 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
       v-model:ownership-selected="ownershipSelected"
       v-model:base-model-selected="baseModelSelected"
       :sort-options
+      :searcher
+      :update-key
       :show-ownership-filter
       :ownership-options
       :show-base-model-filter

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 import Popover from 'primevue/popover'
 import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -17,7 +19,12 @@ import type { LayoutMode, SortOption } from './types'
 const { t } = useI18n()
 
 defineProps<{
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
   sortOptions: SortOption[]
+  updateKey?: MaybeRefOrGetter<unknown>
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -101,6 +108,8 @@ function toggleBaseModelSelection(item: FilterOption) {
   <div class="text-secondary flex gap-2 px-4">
     <FormSearchInput
       v-model="searchQuery"
+      :searcher
+      :update-key
       :class="
         cn(
           actionButtonStyle,

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

@@ -109,15 +109,8 @@ function createMockNode(comfyClass = 'TestNode'): LGraphNode {
 
   // Spy on the addWidget method
   vi.spyOn(node, 'addWidget').mockImplementation(
-    (type, name, value, callback, options = {}) => {
-      const normalizedOptions =
-        typeof options === 'string' ? { property: options } : options
-      const widget = createMockWidget({
-        type,
-        name,
-        value,
-        options: normalizedOptions
-      })
+    (type, name, value, callback) => {
+      const widget = createMockWidget({ type, name, value })
       // Store the callback function on the widget for testing
       if (typeof callback === 'function') {
         widget.callback = callback
@@ -327,7 +320,7 @@ describe('useComboWidget', () => {
           HASH_FILENAME,
           expect.any(Function),
           expect.objectContaining({
-            values: [], // Empty initially, populated via dynamic getter
+            values: [], // Empty initially, populated dynamically by Proxy
             getOptionLabel: expect.any(Function)
           })
         )
@@ -335,23 +328,6 @@ describe('useComboWidget', () => {
       }
     )
 
-    it('should keep the original options object for cloud input mappings', () => {
-      mockDistributionState.isCloud = true
-
-      const constructor = useComboWidget()
-      const mockNode = createMockNode('LoadImage')
-      const inputSpec = createMockInputSpec({
-        name: 'image',
-        options: [HASH_FILENAME]
-      })
-
-      const widget = constructor(mockNode, inputSpec)
-      const addWidgetCall = vi.mocked(mockNode.addWidget).mock.calls[0]
-      const options = addWidgetCall[4]
-
-      expect(widget.options).toBe(options)
-    })
-
     it("should format option labels using store's getInputName function", () => {
       mockDistributionState.isCloud = true
       mockGetInputName.mockReturnValue('Beautiful Sunset.png')

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -44,29 +44,6 @@ const NODE_PLACEHOLDER_MAP: Record<string, string> = {
   LoadAudio: 'widgets.uploadSelect.placeholderAudio'
 }
 
-const bindDynamicValuesOption = (
-  widget: IBaseWidget,
-  getValues: () => unknown
-) => {
-  const options = widget.options
-  let fallbackValues = Array.isArray(options.values)
-    ? options.values
-    : ([] as unknown[])
-
-  Object.defineProperty(options, 'values', {
-    configurable: true,
-    enumerable: true,
-    get: () => {
-      const values = getValues()
-      if (values === undefined || values === null) return fallbackValues
-      return values
-    },
-    set: (values: unknown[]) => {
-      fallbackValues = Array.isArray(values) ? values : fallbackValues
-    }
-  })
-}
-
 const addMultiSelectWidget = (
   node: LGraphNode,
   inputSpec: ComboInputSpec
@@ -156,16 +133,22 @@ const createInputMappingWidget = (
     })
   }
 
-  bindDynamicValuesOption(widget, () =>
-    assetsStore.inputAssets
-      .filter(
-        (asset) =>
-          getMediaTypeFromFilename(asset.name) ===
-          NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
-      )
-      .map((asset) => asset.asset_hash)
-      .filter((hash): hash is string => !!hash)
-  )
+  const origOptions = widget.options
+  widget.options = new Proxy(origOptions, {
+    get(target, prop) {
+      if (prop !== 'values') {
+        return target[prop as keyof typeof target]
+      }
+      return assetsStore.inputAssets
+        .filter(
+          (asset) =>
+            getMediaTypeFromFilename(asset.name) ===
+            NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
+        )
+        .map((asset) => asset.asset_hash)
+        .filter((hash): hash is string => !!hash)
+    }
+  })
 
   if (inputSpec.control_after_generate) {
     if (!isComboWidget(widget)) {
@@ -227,7 +210,15 @@ const addComboWidget = (
     })
     if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
 
-    bindDynamicValuesOption(widget, () => remoteWidget.getValue())
+    const origOptions = widget.options
+    widget.options = new Proxy(origOptions, {
+      get(target, prop) {
+        // Assertion: Proxy handler passthrough
+        return prop !== 'values'
+          ? target[prop as keyof typeof target]
+          : remoteWidget.getValue()
+      }
+    })
   }
 
   if (inputSpec.control_after_generate) {

src/schemas/apiSchema.ts

@@ -19,8 +19,7 @@ export type CustomNodesI18n = z.infer<typeof zCustomNodesI18n>
 const zResultItem = z.object({
   filename: z.string().optional(),
   subfolder: z.string().optional(),
-  type: resultItemType.optional(),
-  display_name: z.string().optional()
+  type: resultItemType.optional()
 })
 export type ResultItem = z.infer<typeof zResultItem>
 const zOutputs = z

src/scripts/app.ts

@@ -208,11 +208,6 @@ export class ComfyApp {
     return this.rootGraphInternal!
   }
 
-  /** Whether the root graph has been initialized. Safe to check without triggering error logs. */
-  get isGraphReady(): boolean {
-    return !!this.rootGraphInternal
-  }
-
   canvas!: LGraphCanvas
   dragOverNode: LGraphNode | null = null
   readonly canvasElRef = shallowRef<HTMLCanvasElement>()
@@ -1830,6 +1825,7 @@ export class ComfyApp {
     )
     if (missingNodeTypes.length) {
       this.showMissingNodesError(missingNodeTypes.map((t) => t.class_type))
+      return
     }
 
     const ids = Object.keys(apiData)

src/services/jobOutputCache.test.ts

@@ -255,35 +255,6 @@ describe('jobOutputCache', () => {
       expect(video?.mediaType).toBe('video')
     })
 
-    it('preserves display_name from output items', async () => {
-      const { getPreviewableOutputsFromJobDetail } =
-        await import('@/services/jobOutputCache')
-      const jobDetail: JobDetail = {
-        id: 'job-display-name',
-        status: 'completed',
-        create_time: Date.now(),
-        priority: 0,
-        outputs: {
-          'node-1': {
-            images: [
-              {
-                filename: 'abc123hash.png',
-                subfolder: '',
-                type: 'output',
-                display_name: 'ComfyUI_00001_.png'
-              }
-            ]
-          }
-        }
-      }
-
-      const result = getPreviewableOutputsFromJobDetail(jobDetail)
-
-      expect(result).toHaveLength(1)
-      expect(result[0].filename).toBe('abc123hash.png')
-      expect(result[0].display_name).toBe('ComfyUI_00001_.png')
-    })
-
     it('filters non-previewable outputs and non-object items', async () => {
       const { getPreviewableOutputsFromJobDetail } =
         await import('@/services/jobOutputCache')

src/stores/assetsStore.ts

@@ -70,7 +70,7 @@ function mapHistoryToAssets(historyItems: JobListItem[]): AssetItem[] {
 
     assetItem.user_metadata = {
       ...assetItem.user_metadata,
-      outputCount: task.outputsCount ?? task.previewableOutputs.length,
+      outputCount: task.previewableOutputs.length,
       allOutputs: task.previewableOutputs
     }
 

src/stores/executionErrorStore.ts

@@ -238,7 +238,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
   /** Graph node IDs (as strings) that have errors in the current graph scope. */
   const activeGraphErrorNodeIds = computed<Set<string>>(() => {
     const ids = new Set<string>()
-    if (!app.isGraphReady) return ids
+    if (!app.rootGraph) return ids
 
     // Fall back to rootGraph when currentGraph hasn't been initialized yet
     const activeGraph = canvasStore.currentGraph ?? app.rootGraph
@@ -287,7 +287,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   const activeMissingNodeGraphIds = computed<Set<string>>(() => {
     const ids = new Set<string>()
-    if (!app.isGraphReady) return ids
+    if (!app.rootGraph) return ids
 
     const activeGraph = canvasStore.currentGraph ?? app.rootGraph
 
@@ -357,7 +357,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   /** True if the node has errors inside it at any nesting depth. */
   function isContainerWithInternalError(node: LGraphNode): boolean {
-    if (!app.isGraphReady) return false
+    if (!app.rootGraph) return false
     const execId = getExecutionIdByNode(app.rootGraph, node)
     if (!execId) return false
     return errorAncestorExecutionIds.value.has(execId)
@@ -365,15 +365,15 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   /** True if the node has a missing node inside it at any nesting depth. */
   function isContainerWithMissingNode(node: LGraphNode): boolean {
-    if (!app.isGraphReady) return false
+    if (!app.rootGraph) return false
     const execId = getExecutionIdByNode(app.rootGraph, node)
     if (!execId) return false
     return missingAncestorExecutionIds.value.has(execId)
   }
 
   watch(lastNodeErrors, () => {
-    if (!app.isGraphReady) return
     const rootGraph = app.rootGraph
+    if (!rootGraph) return
 
     clearAllNodeErrorFlags(rootGraph)
 

src/stores/nodeOutputStore.test.ts

@@ -221,6 +221,327 @@ describe('nodeOutputStore getPreviewParam', () => {
   })
 })
 
+describe('nodeOutputStore snapshotOutputs / restoreOutputs', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+  })
+
+  it('should round-trip outputs through snapshot and restore', () => {
+    const store = useNodeOutputStore()
+
+    // Set input previews via execution path
+    const inputOutput = createMockOutputs([
+      { filename: 'example.png', subfolder: '', type: 'input' }
+    ])
+    store.setNodeOutputsByExecutionId('3', inputOutput)
+
+    const execOutput = createMockOutputs([
+      { filename: 'ComfyUI_00001.png', subfolder: '', type: 'temp' }
+    ])
+    store.setNodeOutputsByExecutionId('4', execOutput)
+
+    // Snapshot
+    const snapshot = store.snapshotOutputs()
+
+    // Clear everything
+    store.resetAllOutputsAndPreviews()
+    expect(Object.keys(app.nodeOutputs)).toHaveLength(0)
+    expect(Object.keys(store.nodeOutputs)).toHaveLength(0)
+
+    // Restore from snapshot
+    store.restoreOutputs(snapshot)
+
+    expect(app.nodeOutputs['3']).toStrictEqual(inputOutput)
+    expect(app.nodeOutputs['4']).toStrictEqual(execOutput)
+    expect(store.nodeOutputs['3']).toStrictEqual(inputOutput)
+    expect(store.nodeOutputs['4']).toStrictEqual(execOutput)
+  })
+
+  it('should preserve outputs across a simulated tab switch cycle', () => {
+    const store = useNodeOutputStore()
+
+    // Tab A: execution produces outputs for two nodes
+    const outputA1 = createMockOutputs([
+      { filename: 'ComfyUI_00001.png', subfolder: '', type: 'temp' }
+    ])
+    const outputA2 = createMockOutputs([
+      { filename: 'example.png', subfolder: '', type: 'input' }
+    ])
+    store.setNodeOutputsByExecutionId('1', outputA1)
+    store.setNodeOutputsByExecutionId('3', outputA2)
+
+    // --- Switch away: store() then clean ---
+    const tabASnapshot = store.snapshotOutputs()
+    store.resetAllOutputsAndPreviews()
+
+    expect(Object.keys(store.nodeOutputs)).toHaveLength(0)
+    expect(Object.keys(app.nodeOutputs)).toHaveLength(0)
+
+    // Tab B: fresh empty workflow (no outputs)
+    const tabBSnapshot = store.snapshotOutputs()
+    expect(Object.keys(tabBSnapshot)).toHaveLength(0)
+
+    // --- Switch back to Tab A: store Tab B then restore Tab A ---
+    store.resetAllOutputsAndPreviews()
+    store.restoreOutputs(tabASnapshot)
+
+    // Tab A's outputs should be fully restored
+    expect(store.nodeOutputs['1']).toStrictEqual(outputA1)
+    expect(store.nodeOutputs['3']).toStrictEqual(outputA2)
+    expect(app.nodeOutputs['1']).toStrictEqual(outputA1)
+    expect(app.nodeOutputs['3']).toStrictEqual(outputA2)
+
+    // New execution should still work after restore
+    const newOutput = createMockOutputs([{ filename: 'new.png' }])
+    store.setNodeOutputsByExecutionId('5', newOutput)
+    expect(store.nodeOutputs['5']).toStrictEqual(newOutput)
+  })
+
+  it('should keep tab outputs independent across multiple switches', () => {
+    const store = useNodeOutputStore()
+
+    // Tab A: execute
+    const outputA = createMockOutputs([{ filename: 'tab_a.png' }])
+    store.setNodeOutputsByExecutionId('1', outputA)
+    const snapshotA = store.snapshotOutputs()
+
+    // Switch to Tab B
+    store.resetAllOutputsAndPreviews()
+    const outputB = createMockOutputs([{ filename: 'tab_b.png' }])
+    store.setNodeOutputsByExecutionId('1', outputB)
+    const snapshotB = store.snapshotOutputs()
+
+    // Switch back to Tab A
+    store.resetAllOutputsAndPreviews()
+    store.restoreOutputs(snapshotA)
+
+    expect(store.nodeOutputs['1']?.images?.[0]?.filename).toBe('tab_a.png')
+
+    // Switch back to Tab B
+    const snapshotA2 = store.snapshotOutputs()
+    store.resetAllOutputsAndPreviews()
+    store.restoreOutputs(snapshotB)
+
+    expect(store.nodeOutputs['1']?.images?.[0]?.filename).toBe('tab_b.png')
+
+    // And back to Tab A again - still correct
+    store.resetAllOutputsAndPreviews()
+    store.restoreOutputs(snapshotA2)
+
+    expect(store.nodeOutputs['1']?.images?.[0]?.filename).toBe('tab_a.png')
+  })
+
+  it('should return a deep clone from snapshotOutputs', () => {
+    const store = useNodeOutputStore()
+
+    const output = createMockOutputs([{ filename: 'a.png' }])
+    store.setNodeOutputsByExecutionId('1', output)
+
+    const snapshot = store.snapshotOutputs()
+
+    // Mutate the snapshot
+    snapshot['1'].images![0].filename = 'mutated.png'
+    snapshot['99'] = createMockOutputs([{ filename: 'new.png' }])
+
+    // Store should be unchanged
+    expect(store.nodeOutputs['1']?.images?.[0]?.filename).toBe('a.png')
+    expect(app.nodeOutputs['1']?.images?.[0]?.filename).toBe('a.png')
+    expect(store.nodeOutputs['99']).toBeUndefined()
+  })
+})
+
+describe('nodeOutputStore resetAllOutputsAndPreviews', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+  })
+
+  it('should clear all outputs and previews for multiple nodes', () => {
+    const store = useNodeOutputStore()
+
+    store.setNodeOutputsByExecutionId(
+      '1',
+      createMockOutputs([{ filename: 'a.png' }])
+    )
+    store.setNodeOutputsByExecutionId(
+      '2',
+      createMockOutputs([{ filename: 'b.png' }])
+    )
+    store.setNodeOutputsByExecutionId(
+      '3',
+      createMockOutputs([{ filename: 'c.png', type: 'input' }])
+    )
+
+    expect(Object.keys(store.nodeOutputs)).toHaveLength(3)
+    expect(Object.keys(app.nodeOutputs)).toHaveLength(3)
+
+    store.resetAllOutputsAndPreviews()
+
+    expect(Object.keys(store.nodeOutputs)).toHaveLength(0)
+    expect(Object.keys(app.nodeOutputs)).toHaveLength(0)
+    expect(Object.keys(app.nodePreviewImages)).toHaveLength(0)
+  })
+})
+
+describe('nodeOutputStore restoreOutputs + execution interaction', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+  })
+
+  it('should allow execution to update outputs after restore', () => {
+    const store = useNodeOutputStore()
+
+    // Simulate tab restore with existing input preview
+    const inputOutput = createMockOutputs([
+      { filename: 'uploaded.png', subfolder: '', type: 'input' }
+    ])
+    const savedOutputs: Record<string, ExecutedWsMessage['output']> = {
+      '3': inputOutput
+    }
+    store.restoreOutputs(savedOutputs)
+
+    expect(store.nodeOutputs['3']).toStrictEqual(inputOutput)
+
+    // Simulate execution sending new output for a different node
+    const execOutput = createMockOutputs([
+      { filename: 'ComfyUI_00001.png', subfolder: '', type: 'temp' }
+    ])
+    store.setNodeOutputsByExecutionId('4', execOutput)
+
+    // Both should be present
+    expect(store.nodeOutputs['3']).toStrictEqual(inputOutput)
+    expect(store.nodeOutputs['4']).toStrictEqual(execOutput)
+    expect(app.nodeOutputs['3']).toStrictEqual(inputOutput)
+    expect(app.nodeOutputs['4']).toStrictEqual(execOutput)
+  })
+
+  it('should overwrite existing output when execution sends new data for same node', () => {
+    const store = useNodeOutputStore()
+
+    // Restore with input preview
+    const inputOutput = createMockOutputs([
+      { filename: 'uploaded.png', subfolder: '', type: 'input' }
+    ])
+    store.restoreOutputs({ '3': inputOutput })
+
+    // Execution sends new output for the same node (non-merge)
+    const execOutput = createMockOutputs([
+      { filename: 'result.png', subfolder: '', type: 'temp' }
+    ])
+    store.setNodeOutputsByExecutionId('3', execOutput)
+
+    // On current main (without PR #9123 guard), execution overwrites
+    expect(store.nodeOutputs['3']).toStrictEqual(execOutput)
+    expect(app.nodeOutputs['3']).toStrictEqual(execOutput)
+  })
+})
+
+describe('nodeOutputStore merge mode interactions', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+  })
+
+  it('should merge new images with existing input preview images', () => {
+    const store = useNodeOutputStore()
+
+    // Set initial input preview
+    const inputOutput = createMockOutputs([
+      { filename: 'uploaded.png', subfolder: '', type: 'input' }
+    ])
+    store.setNodeOutputsByExecutionId('3', inputOutput)
+
+    // Merge new execution images
+    const execOutput = createMockOutputs([
+      { filename: 'result.png', subfolder: '', type: 'temp' }
+    ])
+    store.setNodeOutputsByExecutionId('3', execOutput, { merge: true })
+
+    // Should have both images concatenated
+    expect(store.nodeOutputs['3']?.images).toHaveLength(2)
+    expect(app.nodeOutputs['3']?.images).toHaveLength(2)
+    expect(store.nodeOutputs['3']?.images?.[0]?.filename).toBe('uploaded.png')
+    expect(store.nodeOutputs['3']?.images?.[1]?.filename).toBe('result.png')
+  })
+
+  it('should not duplicate when merge is called with empty images array', () => {
+    const store = useNodeOutputStore()
+
+    // Set initial input preview
+    const inputOutput = createMockOutputs([
+      { filename: 'uploaded.png', subfolder: '', type: 'input' }
+    ])
+    store.setNodeOutputsByExecutionId('3', inputOutput)
+
+    // Merge with empty images
+    const emptyOutput = createMockOutputs([])
+    store.setNodeOutputsByExecutionId('3', emptyOutput, { merge: true })
+
+    // Images should remain from the merge (empty concat = same)
+    expect(store.nodeOutputs['3']?.images).toHaveLength(1)
+    expect(store.nodeOutputs['3']?.images?.[0]?.filename).toBe('uploaded.png')
+  })
+})
+
+describe('nodeOutputStore setNodeOutputs (widget path)', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+  })
+
+  it('should return early for empty string filename', () => {
+    const store = useNodeOutputStore()
+    const node = createMockNode({ id: 5 })
+
+    store.setNodeOutputs(node, '')
+
+    expect(store.nodeOutputs['5']).toBeUndefined()
+    expect(app.nodeOutputs['5']).toBeUndefined()
+  })
+
+  it('should return early for null node', () => {
+    const store = useNodeOutputStore()
+
+    store.setNodeOutputs(null as unknown as LGraphNode, 'test.png')
+
+    expect(Object.keys(store.nodeOutputs)).toHaveLength(0)
+  })
+
+  it('should set outputs for valid string filename', () => {
+    const store = useNodeOutputStore()
+    const node = createMockNode({ id: 5 })
+
+    store.setNodeOutputs(node, 'test.png')
+
+    expect(store.nodeOutputs['5']).toBeDefined()
+    expect(store.nodeOutputs['5']?.images).toHaveLength(1)
+    expect(store.nodeOutputs['5']?.images?.[0]?.filename).toBe('test.png')
+    expect(store.nodeOutputs['5']?.images?.[0]?.type).toBe('input')
+  })
+
+  it('should skip empty array of filenames after createOutputs', () => {
+    const store = useNodeOutputStore()
+    const node = createMockNode({ id: 5 })
+
+    store.setNodeOutputs(node, [])
+
+    expect(store.nodeOutputs['5']).toBeUndefined()
+    expect(app.nodeOutputs['5']).toBeUndefined()
+  })
+})
+
 describe('nodeOutputStore syncLegacyNodeImgs', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))

src/stores/nodeOutputStore.ts

@@ -10,6 +10,7 @@ import type {
   ResultItem,
   ResultItemType
 } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { clone } from '@/scripts/utils'
@@ -119,9 +120,11 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
 
     const rand = app.getRandParam()
     const previewParam = getPreviewParam(node, outputs)
+    const isImage = isImageOutputs(node, outputs)
 
     return outputs.images.map((image) => {
       const params = new URLSearchParams(image)
+      if (isImage) appendCloudResParam(params, image.filename)
       return api.apiURL(`/view?${params}${previewParam}${rand}`)
     })
   }

src/stores/queueStore.ts

@@ -37,7 +37,6 @@ interface ResultItemInit extends ResultItem {
   mediaType: string
   format?: string
   frame_rate?: number
-  display_name?: string
 }
 
 export class ResultItemImpl {
@@ -49,8 +48,6 @@ export class ResultItemImpl {
   // 'audio' | 'images' | ...
   mediaType: string
 
-  display_name?: string
-
   // VHS output specific fields
   format?: string
   frame_rate?: number
@@ -63,8 +60,6 @@ export class ResultItemImpl {
     this.nodeId = obj.nodeId
     this.mediaType = obj.mediaType
 
-    this.display_name = obj.display_name
-
     this.format = obj.format
     this.frame_rate = obj.frame_rate
   }

src/utils/litegraphUtil.ts

@@ -1,6 +1,5 @@
 import _ from 'es-toolkit/compat'
 
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { ColorOption, LGraph } from '@/lib/litegraph/src/litegraph'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import {
@@ -320,31 +319,6 @@ export function resolveNode(
   }
   return undefined
 }
-export function resolveNodeWidget(
-  nodeId: NodeId,
-  widgetName?: string,
-  graph: LGraph = app.rootGraph
-): [LGraphNode, IBaseWidget] | [LGraphNode] | [] {
-  const node = graph.getNodeById(nodeId)
-  if (!widgetName) return node ? [node] : []
-  if (node) {
-    const widget = node.widgets?.find((w) => w.name === widgetName)
-    return widget ? [node, widget] : []
-  }
-
-  for (const node of graph.nodes) {
-    if (!node.isSubgraphNode()) continue
-    const widget = node.widgets?.find(
-      (w) =>
-        isPromotedWidgetView(w) &&
-        w.sourceWidgetName === widgetName &&
-        w.sourceNodeId === nodeId
-    )
-    if (widget) return [node, widget]
-  }
-
-  return []
-}
 
 export function isLoad3dNode(node: LGraphNode) {
   return (

src/views/LinearView.vue

@@ -9,7 +9,6 @@ import { computed, useTemplateRef } from 'vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
 import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -157,7 +156,6 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         </div>
         <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
         <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
-        <div class="absolute top-4 right-4 z-20"><ErrorOverlay app-mode /></div>
       </SplitterPanel>
       <SplitterPanel
         v-if="hasRightPanel"