V2 Node Search (+ hidden Node Library changes) (#8987)

## Summary

Redesigned node search with categories

## Changes

- **What**: Adds a v2 search component, leaving the existing
implementation untouched
- It also brings onboard the incomplete node library & preview changes,
disabled and behind a hidden setting
- **Breaking**: Changes the 'default' value of the node search setting
to v2, adding v1 (legacy) as an option

## Screenshots (if applicable)




https://github.com/user-attachments/assets/2ab797df-58f0-48e8-8b20-2a1809e3735f

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8987-V2-Node-Search-hidden-Node-Library-changes-30c6d73d36508160902bcb92553f147c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Yourz <crazilou@vip.qq.com>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/components/common/BadgePill.test.ts

@@ -0,0 +1,89 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import BadgePill from './BadgePill.vue'
+
+describe('BadgePill', () => {
+  it('renders text content', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Test Badge' }
+    })
+    expect(wrapper.text()).toBe('Test Badge')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = mount(BadgePill, {
+      props: { icon: 'icon-[comfy--credits]', text: 'Credits' }
+    })
+    expect(wrapper.find('i.icon-\\[comfy--credits\\]').exists()).toBe(true)
+  })
+
+  it('applies iconClass to icon', () => {
+    const wrapper = mount(BadgePill, {
+      props: {
+        icon: 'icon-[comfy--credits]',
+        iconClass: 'text-amber-400'
+      }
+    })
+    const icon = wrapper.find('i')
+    expect(icon.classes()).toContain('text-amber-400')
+  })
+
+  it('uses default border color when no borderStyle', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Default' }
+    })
+    expect(wrapper.attributes('style')).toContain(
+      'border-color: var(--border-color)'
+    )
+  })
+
+  it('applies solid border color when borderStyle is a color', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Colored', borderStyle: '#f59e0b' }
+    })
+    expect(wrapper.attributes('style')).toContain('border-color: #f59e0b')
+  })
+
+  it('applies gradient border when borderStyle contains linear-gradient', () => {
+    const gradient = 'linear-gradient(90deg, #3186FF, #FABC12)'
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Gradient', borderStyle: gradient }
+    })
+    const element = wrapper.element as HTMLElement
+    expect(element.style.borderColor).toBe('transparent')
+    expect(element.style.backgroundOrigin).toBe('border-box')
+    expect(element.style.backgroundClip).toBe('padding-box, border-box')
+  })
+
+  it('applies filled style with background and text color', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Filled', borderStyle: '#f59e0b', filled: true }
+    })
+    const style = wrapper.attributes('style')
+    expect(style).toContain('border-color: #f59e0b')
+    expect(style).toContain('background-color: #f59e0b33')
+    expect(style).toContain('color: #f59e0b')
+  })
+
+  it('has foreground text when not filled', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Not Filled', borderStyle: '#f59e0b' }
+    })
+    expect(wrapper.classes()).toContain('text-foreground')
+  })
+
+  it('does not have foreground text class when filled', () => {
+    const wrapper = mount(BadgePill, {
+      props: { text: 'Filled', borderStyle: '#f59e0b', filled: true }
+    })
+    expect(wrapper.classes()).not.toContain('text-foreground')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(BadgePill, {
+      slots: { default: 'Slot Content' }
+    })
+    expect(wrapper.text()).toBe('Slot Content')
+  })
+})

src/components/common/BadgePill.vue

@@ -0,0 +1,54 @@
+<template>
+  <span
+    class="flex items-center gap-1 rounded border px-1.5 py-0.5 text-xxs"
+    :class="textColorClass"
+    :style="customStyle"
+  >
+    <i v-if="icon" :class="cn(icon, 'size-2.5', iconClass)" />
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { borderStyle, filled } = defineProps<{
+  text?: string
+  icon?: string
+  iconClass?: string
+  borderStyle?: string
+  filled?: boolean
+}>()
+
+const textColorClass = computed(() =>
+  borderStyle && filled ? '' : 'text-foreground'
+)
+
+const customStyle = computed(() => {
+  if (!borderStyle) {
+    return { borderColor: 'var(--border-color)' }
+  }
+
+  const isGradient = borderStyle.includes('linear-gradient')
+  if (isGradient) {
+    return {
+      borderColor: 'transparent',
+      backgroundImage: `linear-gradient(var(--base-background), var(--base-background)), ${borderStyle}`,
+      backgroundOrigin: 'border-box',
+      backgroundClip: 'padding-box, border-box'
+    }
+  }
+
+  if (filled) {
+    return {
+      borderColor: borderStyle,
+      backgroundColor: `${borderStyle}33`,
+      color: borderStyle
+    }
+  }
+
+  return { borderColor: borderStyle }
+})
+</script>

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-col gap-2 flex-auto">
+    <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 &&
+              'border border-solid border-border-default box-border',
+            sizeClasses,
+            className
+          )
+        "
+      >
+        <i
+          v-if="!searchTerm"
+          :class="cn('absolute left-4 pointer-events-none', 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/TextTicker.test.ts

@@ -0,0 +1,122 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TextTicker from './TextTicker.vue'
+
+function mockScrollWidth(el: HTMLElement, scrollWidth: number) {
+  Object.defineProperty(el, 'scrollWidth', {
+    value: scrollWidth,
+    configurable: true
+  })
+}
+
+describe(TextTicker, () => {
+  let rafCallbacks: ((time: number) => void)[]
+  let wrapper: ReturnType<typeof mount>
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    rafCallbacks = []
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      rafCallbacks.push(cb)
+      return rafCallbacks.length
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('renders slot content', () => {
+    wrapper = mount(TextTicker, {
+      slots: { default: 'Hello World' }
+    })
+    expect(wrapper.text()).toBe('Hello World')
+  })
+
+  it('scrolls on hover after delay', async () => {
+    wrapper = mount(TextTicker, {
+      slots: { default: 'Very long text that overflows' },
+      props: { speed: 100 }
+    })
+
+    const el = wrapper.element as HTMLElement
+    mockScrollWidth(el, 300)
+
+    await nextTick()
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    expect(rafCallbacks.length).toBe(0)
+
+    vi.advanceTimersByTime(350)
+    await nextTick()
+    expect(rafCallbacks.length).toBeGreaterThan(0)
+
+    rafCallbacks[0](performance.now() + 500)
+    expect(el.scrollLeft).toBeGreaterThan(0)
+  })
+
+  it('cancels delayed scroll on mouse leave before delay elapses', async () => {
+    wrapper = mount(TextTicker, {
+      slots: { default: 'Very long text that overflows' },
+      props: { speed: 100 }
+    })
+
+    mockScrollWidth(wrapper.element as HTMLElement, 300)
+
+    await nextTick()
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    vi.advanceTimersByTime(200)
+    await wrapper.trigger('mouseleave')
+    await nextTick()
+
+    vi.advanceTimersByTime(350)
+    await nextTick()
+    expect(rafCallbacks.length).toBe(0)
+  })
+
+  it('resets scroll position on mouse leave', async () => {
+    wrapper = mount(TextTicker, {
+      slots: { default: 'Very long text that overflows' },
+      props: { speed: 100 }
+    })
+
+    const el = wrapper.element as HTMLElement
+    mockScrollWidth(el, 300)
+
+    await nextTick()
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+    vi.advanceTimersByTime(350)
+    await nextTick()
+
+    rafCallbacks[0](performance.now() + 500)
+    expect(el.scrollLeft).toBeGreaterThan(0)
+
+    await wrapper.trigger('mouseleave')
+    await nextTick()
+
+    expect(el.scrollLeft).toBe(0)
+  })
+
+  it('does not scroll when content fits', async () => {
+    wrapper = mount(TextTicker, {
+      slots: { default: 'Short' }
+    })
+
+    await nextTick()
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+    vi.advanceTimersByTime(350)
+    await nextTick()
+
+    expect(rafCallbacks.length).toBe(0)
+  })
+})

src/components/common/TextTicker.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    ref="containerRef"
+    :class="
+      cn('overflow-hidden whitespace-nowrap', !isScrolling && 'text-ellipsis')
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementHover, useElementSize, useRafFn } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { speed = 70 } = defineProps<{
+  /** Scroll speed in pixels per second */
+  speed?: number
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const isHovered = useElementHover(containerRef, { delayEnter: 350 })
+const { width: containerWidth } = useElementSize(containerRef)
+const isScrolling = ref(false)
+let scrollStartTime = 0
+let overflowAmount = 0
+
+const { pause, resume } = useRafFn(
+  ({ timestamp }) => {
+    const el = containerRef.value
+    if (!el || overflowAmount <= 0) return pause()
+
+    const elapsed = timestamp - scrollStartTime
+    const duration = (overflowAmount / speed) * 1000
+    const progress = Math.min(elapsed / duration, 1)
+    el.scrollLeft = overflowAmount * progress
+
+    if (progress >= 1) pause()
+  },
+  { immediate: false }
+)
+
+function startScroll() {
+  const el = containerRef.value
+  if (!el) return
+
+  overflowAmount = el.scrollWidth - containerWidth.value
+  if (overflowAmount <= 0) return
+
+  isScrolling.value = true
+  scrollStartTime = performance.now()
+  resume()
+}
+
+function stopScroll() {
+  pause()
+  if (containerRef.value) {
+    containerRef.value.scrollLeft = 0
+  }
+  isScrolling.value = false
+}
+
+watch(isHovered, (hovered) => {
+  if (hovered) startScroll()
+  else stopScroll()
+})
+</script>

src/components/common/TreeExplorerV2.vue

@@ -0,0 +1,113 @@
+<template>
+  <ContextMenuRoot>
+    <TreeRoot
+      :expanded="[...expandedKeys]"
+      :items="root.children ?? []"
+      :get-key="(item) => item.key"
+      :get-children="
+        (item) => (item.children?.length ? item.children : undefined)
+      "
+      class="m-0 p-0 pb-6"
+    >
+      <TreeVirtualizer
+        v-slot="{ item }"
+        :estimate-size="36"
+        :text-content="(item) => item.value.label ?? ''"
+      >
+        <TreeExplorerV2Node
+          :item="
+            item as FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
+          "
+          @node-click="
+            (node: RenderedTreeExplorerNode<ComfyNodeDefImpl>, e: MouseEvent) =>
+              emit('nodeClick', node, e)
+          "
+        >
+          <template #folder="{ node }">
+            <slot name="folder" :node="node" />
+          </template>
+          <template #node="{ node }">
+            <slot name="node" :node="node" />
+          </template>
+        </TreeExplorerV2Node>
+      </TreeVirtualizer>
+    </TreeRoot>
+
+    <ContextMenuPortal v-if="showContextMenu">
+      <ContextMenuContent
+        class="z-[9999] min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
+      >
+        <ContextMenuItem
+          class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-highlight focus:bg-highlight"
+          @select="handleAddToFavorites"
+        >
+          <i
+            :class="
+              isCurrentNodeBookmarked
+                ? 'icon-[ph--star-fill]'
+                : 'icon-[lucide--star]'
+            "
+            class="size-4"
+          />
+          {{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<script setup lang="ts">
+import type { FlattenedItem } from 'reka-ui'
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  TreeRoot,
+  TreeVirtualizer
+} from 'reka-ui'
+import { computed, provide, ref } from 'vue'
+
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
+
+import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
+
+const { showContextMenu = false } = defineProps<{
+  root: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  showContextMenu?: boolean
+}>()
+
+const expandedKeys = defineModel<string[]>('expandedKeys', {
+  default: () => []
+})
+
+const emit = defineEmits<{
+  nodeClick: [
+    node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
+    event: MouseEvent
+  ]
+  addToFavorites: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+
+const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
+  null
+)
+provide(InjectKeyContextMenuNode, contextMenuNode)
+
+const nodeBookmarkStore = useNodeBookmarkStore()
+
+const isCurrentNodeBookmarked = computed(() => {
+  const node = contextMenuNode.value
+  if (!node?.data) return false
+  return nodeBookmarkStore.isBookmarked(node.data)
+})
+
+function handleAddToFavorites() {
+  if (contextMenuNode.value) {
+    emit('addToFavorites', contextMenuNode.value)
+  }
+}
+</script>

src/components/common/TreeExplorerV2Node.test.ts

@@ -0,0 +1,321 @@
+import { mount } from '@vue/test-utils'
+import type { FlattenedItem } from 'reka-ui'
+import { ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
+
+import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn().mockReturnValue('left')
+  })
+}))
+
+vi.mock('@/components/node/NodePreviewCard.vue', () => ({
+  default: { template: '<div />' }
+}))
+
+const mockStartDrag = vi.fn()
+const mockHandleNativeDrop = vi.fn()
+
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({
+    startDrag: mockStartDrag,
+    handleNativeDrop: mockHandleNativeDrop
+  })
+}))
+
+describe('TreeExplorerV2Node', () => {
+  function createMockItem(
+    type: 'node' | 'folder',
+    overrides: Record<string, unknown> = {}
+  ): FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>> {
+    const value = {
+      key: 'test-key',
+      label: 'Test Label',
+      type,
+      icon: 'pi pi-folder',
+      totalLeaves: 5,
+      ...overrides
+    } as RenderedTreeExplorerNode<ComfyNodeDefImpl>
+    return {
+      _id: 'test-id',
+      index: 0,
+      value,
+      level: 1,
+      hasChildren: type === 'folder',
+      bind: { value, level: 1 }
+    }
+  }
+
+  function createTreeItemStub() {
+    const handleToggle = vi.fn()
+    const handleSelect = vi.fn()
+    return {
+      handleToggle,
+      handleSelect,
+      stub: {
+        template: `<div data-testid="tree-item"><slot :isExpanded="false" :isSelected="false" :handleToggle="handleToggle" :handleSelect="handleSelect" /></div>`,
+        setup() {
+          return { handleToggle, handleSelect }
+        }
+      }
+    }
+  }
+
+  function mountComponent(
+    props: Record<string, unknown> = {},
+    options: {
+      provide?: Record<string, unknown>
+      treeItemStub?: ReturnType<typeof createTreeItemStub>
+    } = {}
+  ) {
+    const treeItemStub = options.treeItemStub ?? createTreeItemStub()
+    return {
+      wrapper: mount(TreeExplorerV2Node, {
+        global: {
+          stubs: {
+            TreeItem: treeItemStub.stub,
+            ContextMenuTrigger: {
+              name: 'ContextMenuTrigger',
+              template: '<div data-testid="context-menu-trigger"><slot /></div>'
+            },
+            Teleport: { template: '<div />' }
+          },
+          provide: {
+            ...options.provide
+          }
+        },
+        props: {
+          item: createMockItem('node'),
+          ...props
+        }
+      }),
+      treeItemStub
+    }
+  }
+
+  describe('handleClick', () => {
+    it('emits nodeClick event when clicked', async () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node')
+      })
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      await nodeDiv.trigger('click')
+
+      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(wrapper.emitted('nodeClick')?.[0]?.[0]).toMatchObject({
+        type: 'node',
+        label: 'Test Label'
+      })
+    })
+
+    it('calls handleToggle for folder items', async () => {
+      const treeItemStub = createTreeItemStub()
+      const { wrapper } = mountComponent(
+        { item: createMockItem('folder') },
+        { treeItemStub }
+      )
+
+      const folderDiv = wrapper.find('div.group\\/tree-node')
+      await folderDiv.trigger('click')
+
+      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(treeItemStub.handleToggle).toHaveBeenCalled()
+    })
+
+    it('does not call handleToggle for node items', async () => {
+      const treeItemStub = createTreeItemStub()
+      const { wrapper } = mountComponent(
+        { item: createMockItem('node') },
+        { treeItemStub }
+      )
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      await nodeDiv.trigger('click')
+
+      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(treeItemStub.handleToggle).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('context menu', () => {
+    it('renders ContextMenuTrigger when showContextMenu is true for nodes', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node'),
+        showContextMenu: true
+      })
+
+      expect(
+        wrapper.find('[data-testid="context-menu-trigger"]').exists()
+      ).toBe(true)
+    })
+
+    it('does not render ContextMenuTrigger for folder items', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('folder')
+      })
+
+      expect(
+        wrapper.find('[data-testid="context-menu-trigger"]').exists()
+      ).toBe(false)
+    })
+
+    it('sets contextMenuNode when contextmenu event is triggered', async () => {
+      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
+      const nodeItem = createMockItem('node')
+
+      const { wrapper } = mountComponent(
+        {
+          item: nodeItem,
+          showContextMenu: true
+        },
+        {
+          provide: {
+            [InjectKeyContextMenuNode as symbol]: contextMenuNode
+          }
+        }
+      )
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      await nodeDiv.trigger('contextmenu')
+
+      expect(contextMenuNode.value).toEqual(nodeItem.value)
+    })
+  })
+
+  describe('rendering', () => {
+    it('renders node icon for node type', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node')
+      })
+
+      expect(wrapper.find('i.icon-\\[comfy--node\\]').exists()).toBe(true)
+    })
+
+    it('renders folder icon for folder type', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('folder', { icon: 'icon-[lucide--folder]' })
+      })
+
+      expect(wrapper.find('i.icon-\\[lucide--folder\\]').exists()).toBe(true)
+    })
+
+    it('renders label text', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node', { label: 'My Node' })
+      })
+
+      expect(wrapper.text()).toContain('My Node')
+    })
+
+    it('renders chevron for folder with children', () => {
+      const { wrapper } = mountComponent({
+        item: {
+          ...createMockItem('folder'),
+          hasChildren: true
+        }
+      })
+
+      expect(wrapper.find('i.icon-\\[lucide--chevron-down\\]').exists()).toBe(
+        true
+      )
+    })
+  })
+
+  describe('drag and drop', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    it('sets draggable attribute on node items', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node')
+      })
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      expect(nodeDiv.attributes('draggable')).toBe('true')
+    })
+
+    it('does not set draggable on folder items', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('folder')
+      })
+
+      const folderDiv = wrapper.find('div.group\\/tree-node')
+      expect(folderDiv.attributes('draggable')).toBeUndefined()
+    })
+
+    it('calls startDrag with native mode on dragstart', async () => {
+      const mockData = { name: 'TestNode' }
+      const { wrapper } = mountComponent({
+        item: createMockItem('node', { data: mockData })
+      })
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      await nodeDiv.trigger('dragstart')
+
+      expect(mockStartDrag).toHaveBeenCalledWith(mockData, 'native')
+    })
+
+    it('does not call startDrag for folder items on dragstart', async () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('folder')
+      })
+
+      const folderDiv = wrapper.find('div.group\\/tree-node')
+      await folderDiv.trigger('dragstart')
+
+      expect(mockStartDrag).not.toHaveBeenCalled()
+    })
+
+    it('calls handleNativeDrop on dragend with drop coordinates', async () => {
+      const mockData = { name: 'TestNode' }
+      const { wrapper } = mountComponent({
+        item: createMockItem('node', { data: mockData })
+      })
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+
+      await nodeDiv.trigger('dragstart')
+
+      const dragEndEvent = new DragEvent('dragend', { bubbles: true })
+      Object.defineProperty(dragEndEvent, 'clientX', { value: 100 })
+      Object.defineProperty(dragEndEvent, 'clientY', { value: 200 })
+
+      await nodeDiv.element.dispatchEvent(dragEndEvent)
+      await wrapper.vm.$nextTick()
+
+      expect(mockHandleNativeDrop).toHaveBeenCalledWith(100, 200)
+    })
+
+    it('calls handleNativeDrop regardless of dropEffect', async () => {
+      const mockData = { name: 'TestNode' }
+      const { wrapper } = mountComponent({
+        item: createMockItem('node', { data: mockData })
+      })
+
+      const nodeDiv = wrapper.find('div.group\\/tree-node')
+
+      await nodeDiv.trigger('dragstart')
+      mockHandleNativeDrop.mockClear()
+
+      const dragEndEvent = new DragEvent('dragend', { bubbles: true })
+      Object.defineProperty(dragEndEvent, 'clientX', { value: 300 })
+      Object.defineProperty(dragEndEvent, 'clientY', { value: 400 })
+      Object.defineProperty(dragEndEvent, 'dataTransfer', {
+        value: { dropEffect: 'none' }
+      })
+
+      await nodeDiv.element.dispatchEvent(dragEndEvent)
+      await wrapper.vm.$nextTick()
+
+      expect(mockHandleNativeDrop).toHaveBeenCalledWith(300, 400)
+    })
+  })
+})

src/components/common/TreeExplorerV2Node.vue

@@ -0,0 +1,141 @@
+<template>
+  <TreeItem
+    v-slot="{ isExpanded, isSelected, handleToggle, handleSelect }"
+    :value="item.value"
+    :level="item.level"
+    as-child
+  >
+    <!-- Node with context menu -->
+    <ContextMenuTrigger v-if="item.value.type === 'node'" as-child>
+      <div
+        :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
+        :style="rowStyle"
+        draggable="true"
+        @click.stop="handleClick($event, handleToggle, handleSelect)"
+        @contextmenu="handleContextMenu"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
+      >
+        <i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
+        <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+          <slot name="node" :node="item.value">
+            {{ item.value.label }}
+          </slot>
+        </span>
+      </div>
+    </ContextMenuTrigger>
+
+    <!-- Folder -->
+    <div
+      v-else
+      :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
+      :style="rowStyle"
+      @click.stop="handleClick($event, handleToggle, handleSelect)"
+    >
+      <i
+        :class="cn(item.value.icon, 'size-4 shrink-0 text-muted-foreground')"
+      />
+      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+        <slot name="folder" :node="item.value">
+          {{ item.value.label }}
+        </slot>
+      </span>
+      <i
+        v-if="item.hasChildren"
+        :class="
+          cn(
+            'icon-[lucide--chevron-down] mr-4 size-4 shrink-0 text-muted-foreground transition-transform',
+            !isExpanded && '-rotate-90'
+          )
+        "
+      />
+    </div>
+  </TreeItem>
+
+  <Teleport
+    v-if="showPreview && item.value.type === 'node' && item.value.data"
+    to="body"
+  >
+    <div
+      :ref="(el) => (previewRef = el as HTMLElement)"
+      :style="nodePreviewStyle"
+    >
+      <NodePreviewCard :node-def="item.value.data as ComfyNodeDefImpl" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { FlattenedItem } from 'reka-ui'
+import { ContextMenuTrigger, TreeItem } from 'reka-ui'
+import { computed, inject } from 'vue'
+
+import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
+import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+const ROW_CLASS =
+  'group/tree-node flex cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input mx-2 rounded'
+
+const { item } = defineProps<{
+  item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
+}>()
+
+const emit = defineEmits<{
+  nodeClick: [
+    node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
+    event: MouseEvent
+  ]
+}>()
+
+const contextMenuNode = inject(InjectKeyContextMenuNode)
+
+const nodeDef = computed(() => item.value.data)
+
+const {
+  previewRef,
+  showPreview,
+  nodePreviewStyle,
+  handleMouseEnter: baseHandleMouseEnter,
+  handleMouseLeave,
+  handleDragStart: baseHandleDragStart,
+  handleDragEnd
+} = useNodePreviewAndDrag(nodeDef)
+
+const rowStyle = computed(() => ({
+  paddingLeft: `${8 + (item.level - 1) * 24}px`
+}))
+
+function handleClick(
+  e: MouseEvent,
+  handleToggle: () => void,
+  handleSelect: () => void
+) {
+  handleSelect()
+  if (item.value.type === 'folder') {
+    handleToggle()
+  }
+  emit('nodeClick', item.value, e)
+}
+
+function handleContextMenu() {
+  if (contextMenuNode) {
+    contextMenuNode.value = item.value
+  }
+}
+
+function handleMouseEnter(e: MouseEvent) {
+  if (item.value.type !== 'node') return
+  baseHandleMouseEnter(e)
+}
+
+function handleDragStart(e: DragEvent) {
+  if (item.value.type !== 'node' || !item.value.data) return
+  baseHandleDragStart(e)
+}
+</script>

src/components/node/NodePreviewCard.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="flex w-50 flex-col overflow-hidden rounded-2xl bg-(--base-background) border border-(--border-default)"
+  >
+    <div ref="previewContainerRef" class="overflow-hidden p-3">
+      <div ref="previewWrapperRef" class="origin-top-left scale-50">
+        <LGraphNodePreview :node-def="nodeDef" position="relative" />
+      </div>
+    </div>
+
+    <!-- Content Section -->
+    <div class="flex flex-col gap-2 p-3 pt-1">
+      <!-- Title -->
+      <h3 class="text-xs font-semibold text-foreground m-0">
+        {{ nodeDef.display_name }}
+      </h3>
+
+      <!-- Category Path -->
+      <p
+        v-if="showCategoryPath && nodeDef.category"
+        class="text-xs text-muted-foreground -mt-1"
+      >
+        {{ nodeDef.category.replaceAll('/', ' > ') }}
+      </p>
+
+      <!-- Badges -->
+      <div class="flex flex-wrap gap-2 empty:hidden">
+        <NodePricingBadge :node-def="nodeDef" />
+        <NodeProviderBadge :node-def="nodeDef" />
+      </div>
+
+      <!-- Description -->
+      <p
+        v-if="nodeDef.description"
+        class="text-[11px] font-normal leading-normal text-muted-foreground m-0"
+      >
+        {{ nodeDef.description }}
+      </p>
+
+      <!-- Divider -->
+      <div
+        v-if="(inputs.length > 0 || outputs.length > 0) && showInputsAndOutputs"
+        class="border-t border-border-default"
+      />
+
+      <!-- Inputs Section -->
+      <div
+        v-if="inputs.length > 0 && showInputsAndOutputs"
+        class="flex flex-col gap-1"
+      >
+        <h4
+          class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
+        >
+          {{ $t('nodeHelpPage.inputs') }}
+        </h4>
+        <div
+          v-for="input in inputs"
+          :key="input.name"
+          class="flex items-center justify-between gap-2 text-xxs"
+        >
+          <span class="shrink-0 text-foreground">{{ input.name }}</span>
+          <span class="min-w-0 truncate text-muted-foreground">{{
+            input.type
+          }}</span>
+        </div>
+      </div>
+
+      <!-- Outputs Section -->
+      <div
+        v-if="outputs.length > 0 && showInputsAndOutputs"
+        class="flex flex-col gap-1"
+      >
+        <h4
+          class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
+        >
+          {{ $t('nodeHelpPage.outputs') }}
+        </h4>
+        <div
+          v-for="output in outputs"
+          :key="output.name"
+          class="flex items-center justify-between gap-2 text-xxs"
+        >
+          <span class="shrink-0 text-foreground">{{ output.name }}</span>
+          <span class="min-w-0 truncate text-muted-foreground">{{
+            output.type
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import NodePricingBadge from '@/components/node/NodePricingBadge.vue'
+import NodeProviderBadge from '@/components/node/NodeProviderBadge.vue'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+const SCALE_FACTOR = 0.5
+const PREVIEW_CONTAINER_PADDING_PX = 24 // p-3 top + bottom (12px × 2)
+
+const {
+  nodeDef,
+  showInputsAndOutputs = true,
+  showCategoryPath = false
+} = defineProps<{
+  nodeDef: ComfyNodeDefImpl
+  showInputsAndOutputs?: boolean
+  showCategoryPath?: boolean
+}>()
+
+const previewContainerRef = ref<HTMLElement>()
+const previewWrapperRef = ref<HTMLElement>()
+
+useResizeObserver(previewWrapperRef, (entries) => {
+  const entry = entries[0]
+  if (entry && previewContainerRef.value) {
+    const scaledHeight = entry.contentRect.height * SCALE_FACTOR
+    previewContainerRef.value.style.height = `${scaledHeight + PREVIEW_CONTAINER_PADDING_PX}px`
+  }
+})
+
+const inputs = computed(() => {
+  if (!nodeDef.inputs) return []
+  return Object.entries(nodeDef.inputs)
+    .filter(([_, input]) => !input.hidden)
+    .map(([name, input]) => ({
+      name,
+      type: input.type
+    }))
+})
+
+const outputs = computed(() => {
+  if (!nodeDef.outputs) return []
+  return nodeDef.outputs.map((output) => ({
+    name: output.name,
+    type: output.type
+  }))
+})
+</script>

src/components/node/NodePricingBadge.vue

@@ -0,0 +1,43 @@
+<template>
+  <BadgePill
+    v-if="nodeDef.api_node"
+    v-show="priceLabel"
+    :text="priceLabel"
+    icon="icon-[comfy--credits]"
+    border-style="#f59e0b"
+    filled
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import BadgePill from '@/components/common/BadgePill.vue'
+import { evaluateNodeDefPricing } from '@/composables/node/useNodePricing'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+const { nodeDef } = defineProps<{
+  nodeDef: ComfyNodeDefImpl
+}>()
+
+const priceLabel = ref('')
+
+watch(
+  () => nodeDef.name,
+  (name) => {
+    if (!nodeDef.api_node) {
+      priceLabel.value = ''
+      return
+    }
+    const capturedName = name
+    evaluateNodeDefPricing(nodeDef)
+      .then((label) => {
+        if (nodeDef.name === capturedName) priceLabel.value = label
+      })
+      .catch((e) => {
+        console.error('[NodePricingBadge] pricing evaluation failed:', e)
+      })
+  },
+  { immediate: true }
+)
+</script>

src/components/node/NodeProviderBadge.vue

@@ -0,0 +1,26 @@
+<template>
+  <BadgePill
+    v-if="nodeDef.api_node && providerName"
+    :text="providerName"
+    :icon="getProviderIcon(providerName)"
+    :border-style="getProviderBorderStyle(providerName)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import BadgePill from '@/components/common/BadgePill.vue'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import {
+  getProviderBorderStyle,
+  getProviderIcon,
+  getProviderName
+} from '@/utils/categoryUtil'
+
+const { nodeDef } = defineProps<{
+  nodeDef: ComfyNodeDefImpl
+}>()
+
+const providerName = computed(() => getProviderName(nodeDef.category))
+</script>

src/components/searchbox/NodeSearchBox.vue

@@ -5,7 +5,7 @@
     <div
       v-if="enableNodePreview && hoveredSuggestion"
       class="comfy-vue-node-preview-container absolute top-[50px] left-[-375px] z-50 cursor-pointer"
-      @mousedown.stop="onAddNode(hoveredSuggestion!)"
+      @mousedown.stop="onAddNode(hoveredSuggestion!, $event)"
     >
       <NodePreview
         :key="hoveredSuggestion?.name || ''"
@@ -148,15 +148,19 @@ const search = (query: string) => {
   debouncedTrackSearch(query)
 }
 
-const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
+const emit = defineEmits<{
+  addFilter: [filter: FuseFilterWithValue<ComfyNodeDefImpl, string>]
+  removeFilter: [filter: FuseFilterWithValue<ComfyNodeDefImpl, string>]
+  addNode: [nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent]
+}>()
 
 // Track node selection and emit addNode event
-const onAddNode = (nodeDef: ComfyNodeDefImpl) => {
+function onAddNode(nodeDef: ComfyNodeDefImpl, event?: MouseEvent) {
   telemetry?.trackNodeSearchResultSelected({
     node_type: nodeDef.name,
     last_query: currentQuery.value
   })
-  emit('addNode', nodeDef)
+  emit('addNode', nodeDef, event)
 }
 
 let inputElement: HTMLInputElement | null = null

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -6,10 +6,13 @@
       :dismissable-mask="dismissable"
       :pt="{
         root: {
-          class: 'invisible-dialog-root',
-          role: 'search'
+          class: useSearchBoxV2
+            ? 'w-4/5 min-w-[32rem] max-w-[56rem] border-0 bg-transparent mt-[10vh] max-md:w-[95%] max-md:min-w-0 overflow-visible'
+            : 'invisible-dialog-root'
+        },
+        mask: {
+          class: useSearchBoxV2 ? 'items-start' : 'node-search-box-dialog-mask'
         },
-        mask: { class: 'node-search-box-dialog-mask' },
         transition: {
           enterFromClass: 'opacity-0 scale-75',
           // 100ms is the duration of the transition in the dialog component
@@ -21,7 +24,24 @@
       @hide="clearFilters"
     >
       <template #container>
+        <div v-if="useSearchBoxV2" role="search" class="relative">
+          <NodeSearchContent
+            :filters="nodeFilters"
+            @add-filter="addFilter"
+            @remove-filter="removeFilter"
+            @add-node="addNode"
+            @hover-node="hoveredNodeDef = $event"
+          />
+          <NodePreviewCard
+            v-if="hoveredNodeDef && enableNodePreview"
+            :key="hoveredNodeDef.name"
+            :node-def="hoveredNodeDef"
+            show-category-path
+            class="absolute top-0 left-full ml-3"
+          />
+        </div>
         <NodeSearchBox
+          v-else
           :filters="nodeFilters"
           @add-filter="addFilter"
           @remove-filter="removeFilter"
@@ -33,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useWindowSize } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'
@@ -52,6 +72,9 @@ import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
+import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
+
+import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 
 let triggerEvent: CanvasPointerEvent | null = null
@@ -62,8 +85,19 @@ const settingStore = useSettingStore()
 const searchBoxStore = useSearchBoxStore()
 const litegraphService = useLitegraphService()
 
-const { visible, newSearchBoxEnabled } = storeToRefs(searchBoxStore)
+const { visible, newSearchBoxEnabled, useSearchBoxV2 } =
+  storeToRefs(searchBoxStore)
 const dismissable = ref(true)
+const hoveredNodeDef = ref<ComfyNodeDefImpl | null>(null)
+const { width: windowWidth } = useWindowSize()
+// Minimum viewport width for the preview panel to fit beside the dialog
+const MIN_WIDTH_FOR_PREVIEW = 1320
+const enableNodePreview = computed(
+  () =>
+    useSearchBoxV2.value &&
+    settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview') &&
+    windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
+)
 function getNewNodeLocation(): Point {
   return triggerEvent
     ? [triggerEvent.canvasX, triggerEvent.canvasY]
@@ -74,9 +108,7 @@ function addFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
   const isDuplicate = nodeFilters.value.some(
     (f) => f.filterDef.id === filter.filterDef.id && f.value === filter.value
   )
-  if (!isDuplicate) {
-    nodeFilters.value.push(filter)
-  }
+  if (!isDuplicate) nodeFilters.value.push(filter)
 }
 function removeFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
   nodeFilters.value = nodeFilters.value.filter(
@@ -85,16 +117,20 @@ function removeFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
 }
 function clearFilters() {
   nodeFilters.value = []
+  hoveredNodeDef.value = null
 }
 function closeDialog() {
   visible.value = false
 }
 const canvasStore = useCanvasStore()
 
-function addNode(nodeDef: ComfyNodeDefImpl) {
-  const node = litegraphService.addNodeOnGraph(nodeDef, {
-    pos: getNewNodeLocation()
-  })
+function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
+  const node = litegraphService.addNodeOnGraph(
+    nodeDef,
+    { pos: getNewNodeLocation() },
+    { ghost: useSearchBoxV2.value, dragEvent }
+  )
+  if (!node) return
 
   if (disconnectOnReset && triggerEvent) {
     canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)

src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts

@@ -0,0 +1,260 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import NodeSearchCategorySidebar from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
+import {
+  createMockNodeDef,
+  setupTestPinia,
+  testI18n
+} from '@/components/searchbox/v2/__test__/testUtils'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => undefined),
+    set: vi.fn()
+  }))
+}))
+
+describe('NodeSearchCategorySidebar', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    setupTestPinia()
+  })
+
+  async function createWrapper(props = {}) {
+    const wrapper = mount(NodeSearchCategorySidebar, {
+      props: { selectedCategory: 'most-relevant', ...props },
+      global: { plugins: [testI18n] }
+    })
+    await nextTick()
+    return wrapper
+  }
+
+  async function clickCategory(
+    wrapper: ReturnType<typeof mount>,
+    text: string,
+    exact = false
+  ) {
+    const btn = wrapper
+      .findAll('button')
+      .find((b) => (exact ? b.text().trim() === text : b.text().includes(text)))
+    expect(btn, `Expected to find a button with text "${text}"`).toBeDefined()
+    await btn!.trigger('click')
+    await nextTick()
+  }
+
+  describe('preset categories', () => {
+    it('should render all preset categories', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'EssentialNode',
+          essentials_category: 'basic'
+        })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      expect(wrapper.text()).toContain('Most relevant')
+      expect(wrapper.text()).toContain('Favorites')
+      expect(wrapper.text()).toContain('Essentials')
+      expect(wrapper.text()).toContain('Custom')
+    })
+
+    it('should mark the selected preset category as selected', async () => {
+      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+
+      const mostRelevantBtn = wrapper.find(
+        '[data-testid="category-most-relevant"]'
+      )
+
+      expect(mostRelevantBtn.attributes('aria-current')).toBe('true')
+    })
+
+    it('should emit update:selectedCategory when preset is clicked', async () => {
+      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+
+      await clickCategory(wrapper, 'Favorites')
+
+      expect(wrapper.emitted('update:selectedCategory')).toBeTruthy()
+      expect(wrapper.emitted('update:selectedCategory')![0]).toEqual([
+        'favorites'
+      ])
+    })
+  })
+
+  describe('category tree', () => {
+    it('should render top-level categories from node definitions', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'loaders' }),
+        createMockNodeDef({ name: 'Node3', category: 'conditioning' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      expect(wrapper.text()).toContain('sampling')
+      expect(wrapper.text()).toContain('loaders')
+      expect(wrapper.text()).toContain('conditioning')
+    })
+
+    it('should emit update:selectedCategory when category is clicked', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      await clickCategory(wrapper, 'sampling')
+
+      expect(wrapper.emitted('update:selectedCategory')![0]).toEqual([
+        'sampling'
+      ])
+    })
+  })
+
+  describe('expand/collapse functionality', () => {
+    it('should expand category when clicked and show subcategories', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'sampling/basic' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      expect(wrapper.text()).not.toContain('advanced')
+
+      await clickCategory(wrapper, 'sampling')
+
+      expect(wrapper.text()).toContain('advanced')
+      expect(wrapper.text()).toContain('basic')
+    })
+
+    it('should collapse sibling category when another is expanded', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'image' }),
+        createMockNodeDef({ name: 'Node4', category: 'image/upscale' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      // Expand sampling
+      await clickCategory(wrapper, 'sampling', true)
+      expect(wrapper.text()).toContain('advanced')
+
+      // Expand image — sampling should collapse
+      await clickCategory(wrapper, 'image', true)
+
+      expect(wrapper.text()).toContain('upscale')
+      expect(wrapper.text()).not.toContain('advanced')
+    })
+
+    it('should emit update:selectedCategory when subcategory is clicked', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      // Expand sampling category
+      await clickCategory(wrapper, 'sampling', true)
+
+      // Click on advanced subcategory
+      await clickCategory(wrapper, 'advanced')
+
+      const emitted = wrapper.emitted('update:selectedCategory')!
+      expect(emitted[emitted.length - 1]).toEqual(['sampling/advanced'])
+    })
+  })
+
+  describe('category selection highlighting', () => {
+    it('should mark selected top-level category as selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper({ selectedCategory: 'sampling' })
+
+      expect(
+        wrapper
+          .find('[data-testid="category-sampling"]')
+          .attributes('aria-current')
+      ).toBe('true')
+    })
+
+    it('should emit selected subcategory when expanded', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+
+      // Expand and click subcategory
+      await clickCategory(wrapper, 'sampling', true)
+      await clickCategory(wrapper, 'advanced')
+
+      const emitted = wrapper.emitted('update:selectedCategory')!
+      expect(emitted[emitted.length - 1]).toEqual(['sampling/advanced'])
+    })
+  })
+
+  it('should support deeply nested categories (3+ levels)', async () => {
+    useNodeDefStore().updateNodeDefs([
+      createMockNodeDef({ name: 'Node1', category: 'api' }),
+      createMockNodeDef({ name: 'Node2', category: 'api/image' }),
+      createMockNodeDef({ name: 'Node3', category: 'api/image/BFL' })
+    ])
+    await nextTick()
+
+    const wrapper = await createWrapper()
+
+    // Only top-level visible initially
+    expect(wrapper.text()).toContain('api')
+    expect(wrapper.text()).not.toContain('image')
+    expect(wrapper.text()).not.toContain('BFL')
+
+    // Expand api
+    await clickCategory(wrapper, 'api', true)
+
+    expect(wrapper.text()).toContain('image')
+    expect(wrapper.text()).not.toContain('BFL')
+
+    // Expand image
+    await clickCategory(wrapper, 'image', true)
+
+    expect(wrapper.text()).toContain('BFL')
+
+    // Click BFL and verify emission
+    await clickCategory(wrapper, 'BFL', true)
+
+    const emitted = wrapper.emitted('update:selectedCategory')!
+    expect(emitted[emitted.length - 1]).toEqual(['api/image/BFL'])
+  })
+
+  it('should emit category without root/ prefix', async () => {
+    useNodeDefStore().updateNodeDefs([
+      createMockNodeDef({ name: 'Node1', category: 'sampling' })
+    ])
+    await nextTick()
+
+    const wrapper = await createWrapper()
+
+    await clickCategory(wrapper, 'sampling')
+
+    expect(wrapper.emitted('update:selectedCategory')![0][0]).toBe('sampling')
+  })
+})

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="flex min-h-0 flex-col overflow-y-auto py-2.5">
+    <!-- Preset categories -->
+    <div class="flex flex-col px-1">
+      <button
+        v-for="preset in topCategories"
+        :key="preset.id"
+        type="button"
+        :data-testid="`category-${preset.id}`"
+        :aria-current="selectedCategory === preset.id || undefined"
+        :class="categoryBtnClass(preset.id)"
+        @click="selectCategory(preset.id)"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
+
+    <!-- Source categories -->
+    <div class="my-2 flex flex-col border-y border-border-subtle px-1 py-2">
+      <button
+        v-for="preset in sourceCategories"
+        :key="preset.id"
+        type="button"
+        :data-testid="`category-${preset.id}`"
+        :aria-current="selectedCategory === preset.id || undefined"
+        :class="categoryBtnClass(preset.id)"
+        @click="selectCategory(preset.id)"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
+
+    <!-- Category tree -->
+    <div class="flex flex-col px-1">
+      <NodeSearchCategoryTreeNode
+        v-for="category in categoryTree"
+        :key="category.key"
+        :node="category"
+        :selected-category="selectedCategory"
+        :selected-collapsed="selectedCollapsed"
+        @select="selectCategory"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NodeSearchCategoryTreeNode, {
+  CATEGORY_SELECTED_CLASS,
+  CATEGORY_UNSELECTED_CLASS
+} from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import { nodeOrganizationService } from '@/services/nodeOrganizationService'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import type { TreeNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+const selectedCategory = defineModel<string>('selectedCategory', {
+  required: true
+})
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const topCategories = computed(() => [
+  { id: 'most-relevant', label: t('g.mostRelevant') },
+  { id: 'favorites', label: t('g.favorites') }
+])
+
+const hasEssentialNodes = computed(() =>
+  nodeDefStore.visibleNodeDefs.some(
+    (n) => n.nodeSource.type === NodeSourceType.Essentials
+  )
+)
+
+const sourceCategories = computed(() => {
+  const categories = []
+  if (hasEssentialNodes.value) {
+    categories.push({ id: 'essentials', label: t('g.essentials') })
+  }
+  categories.push({ id: 'custom', label: t('g.custom') })
+  return categories
+})
+
+const categoryTree = computed<CategoryNode[]>(() => {
+  const tree = nodeOrganizationService.organizeNodes(
+    nodeDefStore.visibleNodeDefs,
+    { groupBy: 'category' }
+  )
+
+  const stripRootPrefix = (key: string) => key.replace(/^root\//, '')
+
+  function mapNode(node: TreeNode): CategoryNode {
+    const children = node.children
+      ?.filter((child): child is TreeNode => !child.leaf)
+      .map(mapNode)
+    return {
+      key: stripRootPrefix(node.key as string),
+      label: node.label,
+      ...(children?.length ? { children } : {})
+    }
+  }
+
+  return (tree.children ?? [])
+    .filter((node): node is TreeNode => !node.leaf)
+    .map(mapNode)
+})
+
+function categoryBtnClass(id: string) {
+  return cn(
+    'cursor-pointer border-none bg-transparent rounded px-3 py-2.5 text-left text-sm transition-colors',
+    selectedCategory.value === id
+      ? CATEGORY_SELECTED_CLASS
+      : CATEGORY_UNSELECTED_CLASS
+  )
+}
+
+const selectedCollapsed = ref(false)
+
+function selectCategory(categoryId: string) {
+  if (selectedCategory.value === categoryId) {
+    selectedCollapsed.value = !selectedCollapsed.value
+  } else {
+    selectedCollapsed.value = false
+    selectedCategory.value = categoryId
+  }
+}
+</script>

src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue

@@ -0,0 +1,70 @@
+<template>
+  <button
+    type="button"
+    :data-testid="`category-${node.key}`"
+    :aria-current="selectedCategory === node.key || undefined"
+    :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
+    :class="
+      cn(
+        'w-full cursor-pointer rounded border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
+        selectedCategory === node.key
+          ? CATEGORY_SELECTED_CLASS
+          : CATEGORY_UNSELECTED_CLASS
+      )
+    "
+    @click="$emit('select', node.key)"
+  >
+    {{ node.label }}
+  </button>
+  <template v-if="isExpanded && node.children?.length">
+    <NodeSearchCategoryTreeNode
+      v-for="child in node.children"
+      :key="child.key"
+      :node="child"
+      :depth="depth + 1"
+      :selected-category="selectedCategory"
+      :selected-collapsed="selectedCollapsed"
+      @select="$emit('select', $event)"
+    />
+  </template>
+</template>
+
+<script lang="ts">
+export interface CategoryNode {
+  key: string
+  label: string
+  children?: CategoryNode[]
+}
+
+export const CATEGORY_SELECTED_CLASS =
+  'bg-secondary-background-hover font-semibold text-foreground'
+export const CATEGORY_UNSELECTED_CLASS =
+  'text-muted-foreground hover:bg-secondary-background-hover hover:text-foreground'
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  node,
+  depth = 0,
+  selectedCategory,
+  selectedCollapsed = false
+} = defineProps<{
+  node: CategoryNode
+  depth?: number
+  selectedCategory: string
+  selectedCollapsed?: boolean
+}>()
+
+defineEmits<{
+  select: [key: string]
+}>()
+
+const isExpanded = computed(() => {
+  if (selectedCategory === node.key) return !selectedCollapsed
+  return selectedCategory.startsWith(node.key + '/')
+})
+</script>

src/components/searchbox/v2/NodeSearchContent.test.ts

@@ -0,0 +1,729 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import NodeSearchCategorySidebar from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
+import NodeSearchContent from '@/components/searchbox/v2/NodeSearchContent.vue'
+import {
+  createMockNodeDef,
+  setupTestPinia,
+  testI18n
+} from '@/components/searchbox/v2/__test__/testUtils'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.NodeLibrary.Bookmarks.V2') return []
+      if (key === 'Comfy.NodeLibrary.BookmarksCustomization') return {}
+      return undefined
+    }),
+    set: vi.fn()
+  }))
+}))
+
+describe('NodeSearchContent', () => {
+  beforeEach(() => {
+    setupTestPinia()
+    vi.restoreAllMocks()
+  })
+
+  async function createWrapper(props = {}) {
+    const wrapper = mount(NodeSearchContent, {
+      props: { filters: [], ...props },
+      global: {
+        plugins: [testI18n],
+        stubs: {
+          NodeSearchListItem: {
+            template: '<div class="node-item">{{ nodeDef.display_name }}</div>',
+            props: [
+              'nodeDef',
+              'currentQuery',
+              'showDescription',
+              'showSourceBadge',
+              'hideBookmarkIcon'
+            ]
+          }
+        }
+      }
+    })
+    await nextTick()
+    return wrapper
+  }
+
+  async function setupFavorites(
+    nodes: Parameters<typeof createMockNodeDef>[0][]
+  ) {
+    useNodeDefStore().updateNodeDefs(nodes.map(createMockNodeDef))
+    vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(true)
+    const wrapper = await createWrapper()
+    await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+    await nextTick()
+    return wrapper
+  }
+
+  function getResultItems(wrapper: VueWrapper) {
+    return wrapper.findAll('[data-testid="result-item"]')
+  }
+
+  function getNodeItems(wrapper: VueWrapper) {
+    return wrapper.findAll('.node-item')
+  }
+
+  describe('category selection', () => {
+    it('should show top nodes when Most relevant is selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'FrequentNode',
+          display_name: 'Frequent Node'
+        }),
+        createMockNodeDef({ name: 'RareNode', display_name: 'Rare Node' })
+      ])
+
+      vi.spyOn(useNodeFrequencyStore(), 'topNodeDefs', 'get').mockReturnValue([
+        useNodeDefStore().nodeDefsByName['FrequentNode']
+      ])
+
+      const wrapper = await createWrapper()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Frequent Node')
+    })
+
+    it('should show only bookmarked nodes when Favorites is selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'BookmarkedNode',
+          display_name: 'Bookmarked Node'
+        }),
+        createMockNodeDef({
+          name: 'RegularNode',
+          display_name: 'Regular Node'
+        })
+      ])
+      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockImplementation(
+        (node: ComfyNodeDefImpl) => node.name === 'BookmarkedNode'
+      )
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Bookmarked')
+    })
+
+    it('should show empty state when no bookmarks exist', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', display_name: 'Node One' })
+      ])
+      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await nextTick()
+
+      expect(wrapper.text()).toContain('No results')
+    })
+
+    it('should show only non-Core nodes when Custom is selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'CoreNode',
+          display_name: 'Core Node',
+          python_module: 'nodes'
+        }),
+        createMockNodeDef({
+          name: 'CustomNode',
+          display_name: 'Custom Node',
+          python_module: 'custom_nodes.my_extension'
+        })
+      ])
+      await nextTick()
+
+      expect(useNodeDefStore().nodeDefsByName['CoreNode'].nodeSource.type).toBe(
+        NodeSourceType.Core
+      )
+      expect(
+        useNodeDefStore().nodeDefsByName['CustomNode'].nodeSource.type
+      ).toBe(NodeSourceType.CustomNodes)
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-custom"]').trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Custom Node')
+    })
+
+    it('should hide Essentials category when no essential nodes exist', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'RegularNode',
+          display_name: 'Regular Node'
+        })
+      ])
+
+      const wrapper = await createWrapper()
+      expect(wrapper.find('[data-testid="category-essentials"]').exists()).toBe(
+        false
+      )
+    })
+
+    it('should show only essential nodes when Essentials is selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'EssentialNode',
+          display_name: 'Essential Node',
+          essentials_category: 'basic'
+        }),
+        createMockNodeDef({
+          name: 'RegularNode',
+          display_name: 'Regular Node'
+        })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-essentials"]').trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Essential Node')
+    })
+
+    it('should include subcategory nodes when parent category is selected', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'KSampler',
+          display_name: 'KSampler',
+          category: 'sampling'
+        }),
+        createMockNodeDef({
+          name: 'LoadCheckpoint',
+          display_name: 'Load Checkpoint',
+          category: 'loaders'
+        }),
+        createMockNodeDef({
+          name: 'KSamplerAdvanced',
+          display_name: 'KSampler Advanced',
+          category: 'sampling/advanced'
+        })
+      ])
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-sampling"]').trigger('click')
+      await nextTick()
+
+      const texts = getNodeItems(wrapper).map((i) => i.text())
+      expect(texts).toHaveLength(2)
+      expect(texts).toContain('KSampler')
+      expect(texts).toContain('KSampler Advanced')
+    })
+  })
+
+  describe('search and category interaction', () => {
+    it('should override category to most-relevant when search query is active', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'KSampler',
+          display_name: 'KSampler',
+          category: 'sampling'
+        }),
+        createMockNodeDef({
+          name: 'LoadCheckpoint',
+          display_name: 'Load Checkpoint',
+          category: 'loaders'
+        })
+      ])
+
+      const wrapper = await createWrapper()
+      await wrapper.find('[data-testid="category-sampling"]').trigger('click')
+      await nextTick()
+
+      expect(getNodeItems(wrapper)).toHaveLength(1)
+
+      const input = wrapper.find('input[type="text"]')
+      await input.setValue('Load')
+      await nextTick()
+
+      const texts = getNodeItems(wrapper).map((i) => i.text())
+      expect(texts.some((t) => t.includes('Load Checkpoint'))).toBe(true)
+    })
+
+    it('should clear search query when category changes', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'TestNode', display_name: 'Test Node' })
+      ])
+
+      const wrapper = await createWrapper()
+
+      const input = wrapper.find('input[type="text"]')
+      await input.setValue('test query')
+      await nextTick()
+      expect((input.element as HTMLInputElement).value).toBe('test query')
+
+      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await nextTick()
+      expect((input.element as HTMLInputElement).value).toBe('')
+    })
+
+    it('should reset selected index when search query changes', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'Node1', display_name: 'Node One' },
+        { name: 'Node2', display_name: 'Node Two' }
+      ])
+
+      const input = wrapper.find('input[type="text"]')
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      expect(getResultItems(wrapper)[1].attributes('aria-selected')).toBe(
+        'true'
+      )
+
+      await input.setValue('Node')
+      await nextTick()
+      expect(getResultItems(wrapper)[0].attributes('aria-selected')).toBe(
+        'true'
+      )
+    })
+
+    it('should reset selected index when category changes', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'Node1', display_name: 'Node One' },
+        { name: 'Node2', display_name: 'Node Two' }
+      ])
+
+      const input = wrapper.find('input[type="text"]')
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      await wrapper
+        .find('[data-testid="category-most-relevant"]')
+        .trigger('click')
+      await nextTick()
+      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await nextTick()
+
+      expect(getResultItems(wrapper)[0].attributes('aria-selected')).toBe(
+        'true'
+      )
+    })
+  })
+
+  describe('keyboard and mouse interaction', () => {
+    it('should navigate results with ArrowDown/ArrowUp and clamp to bounds', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'Node1', display_name: 'Node One' },
+        { name: 'Node2', display_name: 'Node Two' },
+        { name: 'Node3', display_name: 'Node Three' }
+      ])
+
+      const input = wrapper.find('input[type="text"]')
+      const selectedIndex = () =>
+        getResultItems(wrapper).findIndex(
+          (r) => r.attributes('aria-selected') === 'true'
+        )
+
+      expect(selectedIndex()).toBe(0)
+
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      expect(selectedIndex()).toBe(1)
+
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      expect(selectedIndex()).toBe(2)
+
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+      expect(selectedIndex()).toBe(1)
+
+      // Navigate to first, then try going above — should clamp
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+      expect(selectedIndex()).toBe(0)
+
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+      expect(selectedIndex()).toBe(0)
+    })
+
+    it('should select current result with Enter key', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'TestNode', display_name: 'Test Node' }
+      ])
+
+      await wrapper
+        .find('input[type="text"]')
+        .trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('addNode')).toBeTruthy()
+      expect(wrapper.emitted('addNode')![0][0]).toMatchObject({
+        name: 'TestNode'
+      })
+    })
+
+    it('should select item on hover', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'Node1', display_name: 'Node One' },
+        { name: 'Node2', display_name: 'Node Two' }
+      ])
+
+      const results = getResultItems(wrapper)
+      await results[1].trigger('mouseenter')
+      await nextTick()
+
+      expect(results[1].attributes('aria-selected')).toBe('true')
+    })
+
+    it('should add node on click', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'TestNode', display_name: 'Test Node' }
+      ])
+
+      await getResultItems(wrapper)[0].trigger('click')
+      await nextTick()
+
+      expect(wrapper.emitted('addNode')![0][0]).toMatchObject({
+        name: 'TestNode'
+      })
+    })
+  })
+
+  describe('hoverNode emission', () => {
+    it('should emit hoverNode with the currently selected node', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'HoverNode', display_name: 'Hover Node' }
+      ])
+
+      const emitted = wrapper.emitted('hoverNode')!
+      expect(emitted[emitted.length - 1][0]).toMatchObject({
+        name: 'HoverNode'
+      })
+    })
+
+    it('should emit null hoverNode when no results', async () => {
+      const wrapper = await createWrapper()
+
+      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
+      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await nextTick()
+
+      const emitted = wrapper.emitted('hoverNode')!
+      expect(emitted[emitted.length - 1][0]).toBeNull()
+    })
+  })
+
+  describe('filter integration', () => {
+    it('should display active filters in the input area', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'ImageNode',
+          display_name: 'Image Node',
+          input: { required: { image: ['IMAGE', {}] } }
+        })
+      ])
+
+      const wrapper = await createWrapper({
+        filters: [
+          {
+            filterDef: useNodeDefStore().nodeSearchService.inputTypeFilter,
+            value: 'IMAGE'
+          }
+        ]
+      })
+
+      expect(
+        wrapper.findAll('[data-testid="filter-chip"]').length
+      ).toBeGreaterThan(0)
+    })
+  })
+
+  describe('chip removal', () => {
+    function createFilters(count: number) {
+      const types = ['IMAGE', 'LATENT', 'MODEL']
+      useNodeDefStore().updateNodeDefs(
+        types.slice(0, count).map((type) =>
+          createMockNodeDef({
+            name: `${type}Node`,
+            display_name: `${type} Node`,
+            input: {
+              required: { [type.toLowerCase()]: [type, {}] }
+            }
+          })
+        )
+      )
+      return types.slice(0, count).map((type) => ({
+        filterDef: useNodeDefStore().nodeSearchService.inputTypeFilter,
+        value: type
+      }))
+    }
+
+    it('should emit removeFilter on backspace', async () => {
+      const filters = createFilters(1)
+      const wrapper = await createWrapper({ filters })
+
+      const input = wrapper.find('input[type="text"]')
+      await input.trigger('keydown', { key: 'Backspace' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'Backspace' })
+      await nextTick()
+
+      expect(wrapper.emitted('removeFilter')).toHaveLength(1)
+      expect(wrapper.emitted('removeFilter')![0][0]).toMatchObject({
+        value: 'IMAGE'
+      })
+    })
+
+    it('should not interact with chips when no filters exist', async () => {
+      const wrapper = await createWrapper({ filters: [] })
+
+      const input = wrapper.find('input[type="text"]')
+      await input.trigger('keydown', { key: 'Backspace' })
+      await nextTick()
+
+      expect(wrapper.emitted('removeFilter')).toBeUndefined()
+    })
+
+    it('should remove chip when clicking its delete button', async () => {
+      const filters = createFilters(1)
+      const wrapper = await createWrapper({ filters })
+
+      const deleteBtn = wrapper.find('[data-testid="chip-delete"]')
+      await deleteBtn.trigger('click')
+      await nextTick()
+
+      expect(wrapper.emitted('removeFilter')).toHaveLength(1)
+      expect(wrapper.emitted('removeFilter')![0][0]).toMatchObject({
+        value: 'IMAGE'
+      })
+    })
+  })
+
+  describe('filter selection mode', () => {
+    function setupNodesWithTypes() {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'ImageNode',
+          display_name: 'Image Node',
+          input: { required: { image: ['IMAGE', {}] } },
+          output: ['IMAGE']
+        }),
+        createMockNodeDef({
+          name: 'LatentNode',
+          display_name: 'Latent Node',
+          input: { required: { latent: ['LATENT', {}] } },
+          output: ['LATENT']
+        }),
+        createMockNodeDef({
+          name: 'ModelNode',
+          display_name: 'Model Node',
+          input: { required: { model: ['MODEL', {}] } },
+          output: ['MODEL']
+        })
+      ])
+    }
+
+    function findFilterBarButton(wrapper: VueWrapper, label: string) {
+      return wrapper
+        .findAll('button[aria-pressed]')
+        .find((b) => b.text() === label)
+    }
+
+    async function enterFilterMode(wrapper: VueWrapper) {
+      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+      await nextTick()
+    }
+
+    function getFilterOptions(wrapper: VueWrapper) {
+      return wrapper.findAll('[data-testid="filter-option"]')
+    }
+
+    function getFilterOptionTexts(wrapper: VueWrapper) {
+      return getFilterOptions(wrapper).map(
+        (o) =>
+          o
+            .findAll('span')[0]
+            ?.text()
+            .replace(/^[•·]\s*/, '')
+            .trim() ?? ''
+      )
+    }
+
+    function hasSidebar(wrapper: VueWrapper) {
+      return wrapper.findComponent(NodeSearchCategorySidebar).exists()
+    }
+
+    it('should enter filter mode when a filter chip is selected', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+
+      expect(hasSidebar(wrapper)).toBe(true)
+
+      await enterFilterMode(wrapper)
+
+      expect(hasSidebar(wrapper)).toBe(false)
+      expect(getFilterOptions(wrapper).length).toBeGreaterThan(0)
+    })
+
+    it('should show available filter options sorted alphabetically', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      const texts = getFilterOptionTexts(wrapper)
+      expect(texts).toContain('IMAGE')
+      expect(texts).toContain('LATENT')
+      expect(texts).toContain('MODEL')
+      expect(texts).toEqual([...texts].sort())
+    })
+
+    it('should filter options when typing in filter mode', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      await wrapper.find('input[type="text"]').setValue('IMAGE')
+      await nextTick()
+
+      const texts = getFilterOptionTexts(wrapper)
+      expect(texts).toContain('IMAGE')
+      expect(texts).not.toContain('MODEL')
+    })
+
+    it('should show no results when filter query has no matches', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      await wrapper.find('input[type="text"]').setValue('NONEXISTENT_TYPE')
+      await nextTick()
+
+      expect(wrapper.text()).toContain('No results')
+    })
+
+    it('should emit addFilter when a filter option is clicked', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      const imageOption = getFilterOptions(wrapper).find((o) =>
+        o.text().includes('IMAGE')
+      )
+      await imageOption!.trigger('click')
+      await nextTick()
+
+      expect(wrapper.emitted('addFilter')![0][0]).toMatchObject({
+        filterDef: expect.objectContaining({ id: 'input' }),
+        value: 'IMAGE'
+      })
+    })
+
+    it('should exit filter mode after applying a filter', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      await getFilterOptions(wrapper)[0].trigger('click')
+      await nextTick()
+      await nextTick()
+
+      expect(hasSidebar(wrapper)).toBe(true)
+    })
+
+    it('should emit addFilter when Enter is pressed on selected option', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      await wrapper
+        .find('input[type="text"]')
+        .trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('addFilter')![0][0]).toMatchObject({
+        filterDef: expect.objectContaining({ id: 'input' }),
+        value: 'IMAGE'
+      })
+    })
+
+    it('should navigate filter options with ArrowDown/ArrowUp', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      const input = wrapper.find('input[type="text"]')
+
+      expect(getFilterOptions(wrapper)[0].attributes('aria-selected')).toBe(
+        'true'
+      )
+
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      expect(getFilterOptions(wrapper)[1].attributes('aria-selected')).toBe(
+        'true'
+      )
+
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+      expect(getFilterOptions(wrapper)[0].attributes('aria-selected')).toBe(
+        'true'
+      )
+    })
+
+    it('should toggle filter mode off when same chip is clicked again', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+      await nextTick()
+      await nextTick()
+
+      expect(hasSidebar(wrapper)).toBe(true)
+    })
+
+    it('should reset filter query when re-entering filter mode', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      const input = wrapper.find('input[type="text"]')
+      await input.setValue('IMAGE')
+      await nextTick()
+
+      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+      await nextTick()
+      await nextTick()
+
+      await enterFilterMode(wrapper)
+
+      expect((input.element as HTMLInputElement).value).toBe('')
+    })
+
+    it('should exit filter mode when cancel button is clicked', async () => {
+      setupNodesWithTypes()
+      const wrapper = await createWrapper()
+      await enterFilterMode(wrapper)
+
+      expect(hasSidebar(wrapper)).toBe(false)
+
+      const cancelBtn = wrapper.find('[data-testid="cancel-filter"]')
+      await cancelBtn.trigger('click')
+      await nextTick()
+      await nextTick()
+
+      expect(hasSidebar(wrapper)).toBe(true)
+    })
+  })
+})

src/components/searchbox/v2/NodeSearchContent.vue

@@ -0,0 +1,291 @@
+<template>
+  <div
+    ref="dialogRef"
+    class="flex max-h-[50vh] min-h-[400px] w-full flex-col overflow-hidden rounded-lg border border-interface-stroke bg-base-background"
+  >
+    <!-- Search input row -->
+    <NodeSearchInput
+      ref="searchInputRef"
+      v-model:search-query="searchQuery"
+      v-model:filter-query="filterQuery"
+      :filters="filters"
+      :active-filter="activeFilter"
+      @remove-filter="emit('removeFilter', $event)"
+      @cancel-filter="cancelFilter"
+      @navigate-down="onKeyDown"
+      @navigate-up="onKeyUp"
+      @select-current="onKeyEnter"
+    />
+
+    <!-- Filter header row -->
+    <div class="flex items-center">
+      <div class="shrink-0 px-3 py-2 text-sm text-muted-foreground">
+        {{ $t('g.filterBy') }}
+      </div>
+      <NodeSearchFilterBar
+        class="flex-1"
+        :active-chip-key="activeFilter?.key"
+        @select-chip="onSelectFilterChip"
+      />
+    </div>
+
+    <!-- Content area -->
+    <div class="flex min-h-0 flex-1 overflow-hidden">
+      <!-- Category sidebar (hidden in filter mode) -->
+      <NodeSearchCategorySidebar
+        v-if="!activeFilter"
+        v-model:selected-category="sidebarCategory"
+        class="w-52 shrink-0"
+      />
+
+      <!-- Filter options list (filter selection mode) -->
+      <NodeSearchFilterPanel
+        v-if="activeFilter"
+        ref="filterPanelRef"
+        v-model:query="filterQuery"
+        :chip="activeFilter"
+        @apply="onFilterApply"
+      />
+
+      <!-- Results list (normal mode) -->
+      <div
+        v-else
+        id="results-list"
+        role="listbox"
+        class="flex-1 overflow-y-auto py-2"
+      >
+        <div
+          v-for="(node, index) in displayedResults"
+          :id="`result-item-${index}`"
+          :key="node.name"
+          role="option"
+          data-testid="result-item"
+          :aria-selected="index === selectedIndex"
+          :class="
+            cn(
+              'flex cursor-pointer items-center px-4 h-14',
+              index === selectedIndex && 'bg-secondary-background-hover'
+            )
+          "
+          @click="emit('addNode', node, $event)"
+          @mouseenter="selectedIndex = index"
+        >
+          <NodeSearchListItem
+            :node-def="node"
+            :current-query="searchQuery"
+            show-description
+            :show-source-badge="effectiveCategory !== 'essentials'"
+            :hide-bookmark-icon="effectiveCategory === 'favorites'"
+          />
+        </div>
+        <div
+          v-if="displayedResults.length === 0"
+          class="px-4 py-8 text-center text-muted-foreground"
+        >
+          {{ $t('g.noResults') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import NodeSearchFilterBar from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import NodeSearchCategorySidebar from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
+import NodeSearchFilterPanel from '@/components/searchbox/v2/NodeSearchFilterPanel.vue'
+import NodeSearchInput from '@/components/searchbox/v2/NodeSearchInput.vue'
+import NodeSearchListItem from '@/components/searchbox/v2/NodeSearchListItem.vue'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { filters } = defineProps<{
+  filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+}>()
+
+const emit = defineEmits<{
+  addNode: [nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent]
+  addFilter: [filter: FuseFilterWithValue<ComfyNodeDefImpl, string>]
+  removeFilter: [filter: FuseFilterWithValue<ComfyNodeDefImpl, string>]
+  hoverNode: [nodeDef: ComfyNodeDefImpl | null]
+}>()
+
+const nodeDefStore = useNodeDefStore()
+const nodeFrequencyStore = useNodeFrequencyStore()
+const nodeBookmarkStore = useNodeBookmarkStore()
+
+const dialogRef = ref<HTMLElement>()
+const searchInputRef = ref<InstanceType<typeof NodeSearchInput>>()
+const filterPanelRef = ref<InstanceType<typeof NodeSearchFilterPanel>>()
+
+const searchQuery = ref('')
+const selectedCategory = ref('most-relevant')
+const selectedIndex = ref(0)
+
+// Filter selection mode
+const activeFilter = ref<FilterChip | null>(null)
+const filterQuery = ref('')
+
+function lockDialogHeight() {
+  if (dialogRef.value) {
+    dialogRef.value.style.height = `${dialogRef.value.offsetHeight}px`
+  }
+}
+
+function unlockDialogHeight() {
+  if (dialogRef.value) {
+    dialogRef.value.style.height = ''
+  }
+}
+
+function onSelectFilterChip(chip: FilterChip) {
+  if (activeFilter.value?.key === chip.key) {
+    cancelFilter()
+    return
+  }
+  lockDialogHeight()
+  activeFilter.value = chip
+  filterQuery.value = ''
+  nextTick(() => searchInputRef.value?.focus())
+}
+
+function onFilterApply(value: string) {
+  if (!activeFilter.value) return
+  emit('addFilter', { filterDef: activeFilter.value.filter, value })
+  activeFilter.value = null
+  filterQuery.value = ''
+  unlockDialogHeight()
+  nextTick(() => searchInputRef.value?.focus())
+}
+
+function cancelFilter() {
+  activeFilter.value = null
+  filterQuery.value = ''
+  unlockDialogHeight()
+  nextTick(() => searchInputRef.value?.focus())
+}
+
+// Node search
+const searchResults = computed(() => {
+  if (!searchQuery.value && filters.length === 0) {
+    return nodeFrequencyStore.topNodeDefs
+  }
+  return nodeDefStore.nodeSearchService.searchNode(searchQuery.value, filters, {
+    limit: 64
+  })
+})
+
+const effectiveCategory = computed(() =>
+  searchQuery.value ? 'most-relevant' : selectedCategory.value
+)
+
+const sidebarCategory = computed({
+  get: () => effectiveCategory.value,
+  set: (category: string) => {
+    selectedCategory.value = category
+    searchQuery.value = ''
+  }
+})
+
+function matchesFilters(node: ComfyNodeDefImpl): boolean {
+  return filters.every(({ filterDef, value }) => filterDef.matches(node, value))
+}
+
+const displayedResults = computed<ComfyNodeDefImpl[]>(() => {
+  const allNodes = nodeDefStore.visibleNodeDefs
+
+  let results: ComfyNodeDefImpl[]
+  switch (effectiveCategory.value) {
+    case 'most-relevant':
+      return searchResults.value
+    case 'favorites':
+      results = allNodes.filter((n) => nodeBookmarkStore.isBookmarked(n))
+      break
+    case 'essentials':
+      results = allNodes.filter(
+        (n) => n.nodeSource.type === NodeSourceType.Essentials
+      )
+      break
+    case 'custom':
+      results = allNodes.filter(
+        (n) =>
+          n.nodeSource.type !== NodeSourceType.Core &&
+          n.nodeSource.type !== NodeSourceType.Essentials
+      )
+      break
+    default:
+      results = allNodes.filter(
+        (n) =>
+          n.category === effectiveCategory.value ||
+          n.category.startsWith(effectiveCategory.value + '/')
+      )
+      break
+  }
+
+  return filters.length > 0 ? results.filter(matchesFilters) : results
+})
+
+const hoveredNodeDef = computed(
+  () => displayedResults.value[selectedIndex.value] ?? null
+)
+
+watch(
+  hoveredNodeDef,
+  (newVal) => {
+    emit('hoverNode', newVal)
+  },
+  { immediate: true }
+)
+
+watch([selectedCategory, searchQuery, () => filters], () => {
+  selectedIndex.value = 0
+})
+
+// Keyboard navigation
+function onKeyDown() {
+  if (activeFilter.value) {
+    filterPanelRef.value?.navigate(1)
+  } else {
+    navigateResults(1)
+  }
+}
+
+function onKeyUp() {
+  if (activeFilter.value) {
+    filterPanelRef.value?.navigate(-1)
+  } else {
+    navigateResults(-1)
+  }
+}
+
+function onKeyEnter() {
+  if (activeFilter.value) {
+    filterPanelRef.value?.selectCurrent()
+  } else {
+    selectCurrentResult()
+  }
+}
+
+function navigateResults(direction: number) {
+  const newIndex = selectedIndex.value + direction
+  if (newIndex >= 0 && newIndex < displayedResults.value.length) {
+    selectedIndex.value = newIndex
+    nextTick(() => {
+      dialogRef.value
+        ?.querySelector(`#result-item-${newIndex}`)
+        ?.scrollIntoView({ block: 'nearest' })
+    })
+  }
+}
+
+function selectCurrentResult() {
+  const node = displayedResults.value[selectedIndex.value]
+  if (node) emit('addNode', node)
+}
+</script>

src/components/searchbox/v2/NodeSearchFilterBar.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import NodeSearchFilterBar from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import {
+  createMockNodeDef,
+  setupTestPinia,
+  testI18n
+} from '@/components/searchbox/v2/__test__/testUtils'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => undefined),
+    set: vi.fn()
+  }))
+}))
+
+describe(NodeSearchFilterBar, () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    setupTestPinia()
+    useNodeDefStore().updateNodeDefs([
+      createMockNodeDef({
+        name: 'ImageNode',
+        input: { required: { image: ['IMAGE', {}] } },
+        output: ['IMAGE']
+      })
+    ])
+  })
+
+  async function createWrapper(props = {}) {
+    const wrapper = mount(NodeSearchFilterBar, {
+      props,
+      global: { plugins: [testI18n] }
+    })
+    await nextTick()
+    return wrapper
+  }
+
+  it('should render Input, Output, and Source filter chips', async () => {
+    const wrapper = await createWrapper()
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toBe('Input')
+    expect(buttons[1].text()).toBe('Output')
+    expect(buttons[2].text()).toBe('Source')
+  })
+
+  it('should mark active chip as pressed when activeChipKey matches', async () => {
+    const wrapper = await createWrapper({ activeChipKey: 'input' })
+
+    const inputBtn = wrapper.findAll('button').find((b) => b.text() === 'Input')
+    expect(inputBtn?.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('should not mark chips as pressed when activeChipKey does not match', async () => {
+    const wrapper = await createWrapper({ activeChipKey: null })
+
+    wrapper.findAll('button').forEach((btn) => {
+      expect(btn.attributes('aria-pressed')).toBe('false')
+    })
+  })
+
+  it('should emit selectChip with chip data when clicked', async () => {
+    const wrapper = await createWrapper()
+
+    const inputBtn = wrapper.findAll('button').find((b) => b.text() === 'Input')
+    await inputBtn?.trigger('click')
+
+    const emitted = wrapper.emitted('selectChip')!
+    expect(emitted[0][0]).toMatchObject({
+      key: 'input',
+      label: 'Input',
+      filter: expect.anything()
+    })
+  })
+})

src/components/searchbox/v2/NodeSearchFilterBar.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex items-center gap-2 px-2 py-1.5">
+    <button
+      v-for="chip in chips"
+      :key="chip.key"
+      type="button"
+      :aria-pressed="activeChipKey === chip.key"
+      :class="
+        cn(
+          'cursor-pointer rounded-md border px-3 py-1 text-sm transition-colors flex-auto border-secondary-background',
+          activeChipKey === chip.key
+            ? 'bg-secondary-background text-foreground'
+            : 'bg-transparent text-muted-foreground hover:border-base-foreground/60 hover:text-base-foreground/60'
+        )
+      "
+      @click="emit('selectChip', chip)"
+    >
+      {{ chip.label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import type { FuseFilter } from '@/utils/fuseUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+export interface FilterChip {
+  key: string
+  label: string
+  filter: FuseFilter<ComfyNodeDefImpl, string>
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { activeChipKey = null } = defineProps<{
+  activeChipKey?: string | null
+}>()
+
+const emit = defineEmits<{
+  selectChip: [chip: FilterChip]
+}>()
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const chips = computed<FilterChip[]>(() => {
+  const searchService = nodeDefStore.nodeSearchService
+  return [
+    {
+      key: 'input',
+      label: t('g.input'),
+      filter: searchService.inputTypeFilter
+    },
+    {
+      key: 'output',
+      label: t('g.output'),
+      filter: searchService.outputTypeFilter
+    },
+    {
+      key: 'source',
+      label: t('g.source'),
+      filter: searchService.nodeSourceFilter
+    }
+  ]
+})
+</script>

src/components/searchbox/v2/NodeSearchFilterPanel.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    id="filter-options-list"
+    ref="listRef"
+    role="listbox"
+    class="flex-1 overflow-y-auto py-2"
+  >
+    <div
+      v-for="(option, index) in options"
+      :id="`filter-option-${index}`"
+      :key="option"
+      role="option"
+      data-testid="filter-option"
+      :aria-selected="index === selectedIndex"
+      :class="
+        cn(
+          'cursor-pointer px-6 py-1.5',
+          index === selectedIndex && 'bg-secondary-background-hover'
+        )
+      "
+      @click="emit('apply', option)"
+      @mouseenter="selectedIndex = index"
+    >
+      <span class="text-base font-semibold text-foreground">
+        <span class="text-2xl mr-1" :style="{ color: getLinkTypeColor(option) }"
+          >&bull;</span
+        >
+        {{ option }}
+      </span>
+    </div>
+    <div
+      v-if="options.length === 0"
+      class="px-4 py-8 text-center text-muted-foreground"
+    >
+      {{ $t('g.noResults') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import { getLinkTypeColor } from '@/utils/litegraphUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { chip } = defineProps<{
+  chip: FilterChip
+}>()
+
+const query = defineModel<string>('query', { required: true })
+
+const emit = defineEmits<{
+  apply: [value: string]
+}>()
+
+const listRef = ref<HTMLElement>()
+const selectedIndex = ref(0)
+
+const options = computed(() => {
+  const { fuseSearch } = chip.filter
+  if (query.value) {
+    return fuseSearch.search(query.value).slice(0, 64)
+  }
+  return fuseSearch.data.slice().sort()
+})
+
+watch(query, () => {
+  selectedIndex.value = 0
+})
+
+function navigate(direction: number) {
+  const newIndex = selectedIndex.value + direction
+  if (newIndex >= 0 && newIndex < options.value.length) {
+    selectedIndex.value = newIndex
+    nextTick(() => {
+      listRef.value
+        ?.querySelector(`#filter-option-${newIndex}`)
+        ?.scrollIntoView({ block: 'nearest' })
+    })
+  }
+}
+
+function selectCurrent() {
+  const option = options.value[selectedIndex.value]
+  if (option) emit('apply', option)
+}
+
+defineExpose({ navigate, selectCurrent })
+</script>

src/components/searchbox/v2/NodeSearchInput.test.ts

@@ -0,0 +1,161 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import NodeSearchInput from '@/components/searchbox/v2/NodeSearchInput.vue'
+import {
+  setupTestPinia,
+  testI18n
+} from '@/components/searchbox/v2/__test__/testUtils'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  getLinkTypeColor: vi.fn((type: string) =>
+    type === 'IMAGE' ? '#64b5f6' : undefined
+  )
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(),
+    set: vi.fn()
+  }))
+}))
+
+function createFilter(
+  id: string,
+  value: string
+): FuseFilterWithValue<ComfyNodeDefImpl, string> {
+  return {
+    filterDef: {
+      id,
+      matches: vi.fn(() => true)
+    } as unknown as FuseFilter<ComfyNodeDefImpl, string>,
+    value
+  }
+}
+
+function createActiveFilter(label: string): FilterChip {
+  return {
+    key: label.toLowerCase(),
+    label,
+    filter: {
+      id: label.toLowerCase(),
+      matches: vi.fn(() => true)
+    } as unknown as FuseFilter<ComfyNodeDefImpl, string>
+  }
+}
+
+describe('NodeSearchInput', () => {
+  beforeEach(() => {
+    setupTestPinia()
+    vi.restoreAllMocks()
+  })
+
+  function createWrapper(
+    props: Partial<{
+      filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+      activeFilter: FilterChip | null
+      searchQuery: string
+      filterQuery: string
+    }> = {}
+  ) {
+    return mount(NodeSearchInput, {
+      props: {
+        filters: [],
+        activeFilter: null,
+        searchQuery: '',
+        filterQuery: '',
+        ...props
+      },
+      global: { plugins: [testI18n] }
+    })
+  }
+
+  it('should route input to searchQuery when no active filter', async () => {
+    const wrapper = createWrapper()
+    await wrapper.find('input').setValue('test search')
+
+    expect(wrapper.emitted('update:searchQuery')![0]).toEqual(['test search'])
+  })
+
+  it('should route input to filterQuery when active filter is set', async () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+    await wrapper.find('input').setValue('IMAGE')
+
+    expect(wrapper.emitted('update:filterQuery')![0]).toEqual(['IMAGE'])
+    expect(wrapper.emitted('update:searchQuery')).toBeUndefined()
+  })
+
+  it('should show filter label placeholder when active filter is set', () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+
+    expect(
+      (wrapper.find('input').element as HTMLInputElement).placeholder
+    ).toContain('input')
+  })
+
+  it('should show add node placeholder when no active filter', () => {
+    const wrapper = createWrapper()
+
+    expect(
+      (wrapper.find('input').element as HTMLInputElement).placeholder
+    ).toContain('Add a node')
+  })
+
+  it('should hide filter chips when active filter is set', () => {
+    const wrapper = createWrapper({
+      filters: [createFilter('input', 'IMAGE')],
+      activeFilter: createActiveFilter('Input')
+    })
+
+    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(0)
+  })
+
+  it('should show filter chips when no active filter', () => {
+    const wrapper = createWrapper({
+      filters: [createFilter('input', 'IMAGE')]
+    })
+
+    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(1)
+  })
+
+  it('should emit cancelFilter when cancel button is clicked', async () => {
+    const wrapper = createWrapper({
+      activeFilter: createActiveFilter('Input')
+    })
+
+    await wrapper.find('[data-testid="cancel-filter"]').trigger('click')
+
+    expect(wrapper.emitted('cancelFilter')).toHaveLength(1)
+  })
+
+  it('should emit selectCurrent on Enter', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('selectCurrent')).toHaveLength(1)
+  })
+
+  it('should emit navigateDown on ArrowDown', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+
+    expect(wrapper.emitted('navigateDown')).toHaveLength(1)
+  })
+
+  it('should emit navigateUp on ArrowUp', async () => {
+    const wrapper = createWrapper()
+
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+
+    expect(wrapper.emitted('navigateUp')).toHaveLength(1)
+  })
+})

src/components/searchbox/v2/NodeSearchInput.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="p-3">
+    <TagsInputRoot
+      :model-value="tagValues"
+      delimiter=""
+      class="flex cursor-text flex-wrap items-center gap-2 rounded-lg bg-secondary-background px-4 py-3"
+      @remove-tag="onRemoveTag"
+      @click="inputRef?.focus()"
+    >
+      <!-- Active filter label (filter selection mode) -->
+      <span
+        v-if="activeFilter"
+        class="inline-flex shrink-0 items-center gap-1 rounded-lg bg-base-background px-2 py-1 -my-1 text-sm opacity-80 text-foreground"
+      >
+        {{ activeFilter.label }}:
+        <button
+          type="button"
+          data-testid="cancel-filter"
+          class="cursor-pointer border-none bg-transparent text-muted-foreground hover:text-base-foreground rounded-full aspect-square"
+          :aria-label="$t('g.remove')"
+          @click="emit('cancelFilter')"
+        >
+          <i class="pi pi-times text-xs" />
+        </button>
+      </span>
+      <!-- Applied filter chips -->
+      <template v-if="!activeFilter">
+        <TagsInputItem
+          v-for="filter in filters"
+          :key="filterKey(filter)"
+          :value="filterKey(filter)"
+          data-testid="filter-chip"
+          class="inline-flex items-center gap-1 rounded-lg bg-base-background px-2 py-1 -my-1 data-[state=active]:ring-2 data-[state=active]:ring-primary"
+        >
+          <span class="text-sm opacity-80">
+            {{ t(`g.${filter.filterDef.id}`) }}:
+          </span>
+          <span :style="{ color: getLinkTypeColor(filter.value) }">
+            &bull;
+          </span>
+          <span class="text-sm">{{ filter.value }}</span>
+          <TagsInputItemDelete
+            as="button"
+            type="button"
+            data-testid="chip-delete"
+            :aria-label="$t('g.remove')"
+            class="ml-1 cursor-pointer border-none bg-transparent text-muted-foreground hover:text-base-foreground rounded-full aspect-square"
+          >
+            <i class="pi pi-times text-xs" />
+          </TagsInputItemDelete>
+        </TagsInputItem>
+      </template>
+      <TagsInputInput as-child>
+        <input
+          ref="inputRef"
+          v-model="inputValue"
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          :aria-expanded="true"
+          :aria-controls="activeFilter ? 'filter-options-list' : 'results-list'"
+          :aria-label="inputPlaceholder"
+          :placeholder="inputPlaceholder"
+          class="h-6 min-w-[min(300px,80vw)] flex-1 border-none bg-transparent text-foreground text-sm outline-none placeholder:text-muted-foreground"
+          @keydown.enter.prevent="emit('selectCurrent')"
+          @keydown.down.prevent="emit('navigateDown')"
+          @keydown.up.prevent="emit('navigateUp')"
+        />
+      </TagsInputInput>
+    </TagsInputRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputRoot
+} from 'reka-ui'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { getLinkTypeColor } from '@/utils/litegraphUtil'
+
+const { filters, activeFilter } = defineProps<{
+  filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+  activeFilter: FilterChip | null
+}>()
+
+const searchQuery = defineModel<string>('searchQuery', { required: true })
+const filterQuery = defineModel<string>('filterQuery', { required: true })
+
+const emit = defineEmits<{
+  removeFilter: [filter: FuseFilterWithValue<ComfyNodeDefImpl, string>]
+  cancelFilter: []
+  navigateDown: []
+  navigateUp: []
+  selectCurrent: []
+}>()
+
+const { t } = useI18n()
+const inputRef = ref<HTMLInputElement>()
+
+const inputValue = computed({
+  get: () => (activeFilter ? filterQuery.value : searchQuery.value),
+  set: (value: string) => {
+    if (activeFilter) {
+      filterQuery.value = value
+    } else {
+      searchQuery.value = value
+    }
+  }
+})
+
+const inputPlaceholder = computed(() =>
+  activeFilter
+    ? t('g.filterByType', { type: activeFilter.label.toLowerCase() })
+    : t('g.addNode')
+)
+
+const tagValues = computed(() => filters.map(filterKey))
+
+function filterKey(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
+  return `${filter.filterDef.id}:${filter.value}`
+}
+
+function onRemoveTag(tagValue: string) {
+  const filter = filters.find((f) => filterKey(f) === tagValue)
+  if (filter) emit('removeFilter', filter)
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+onMounted(() => {
+  focus()
+})
+
+defineExpose({ focus })
+</script>

src/components/searchbox/v2/NodeSearchListItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="option-container flex w-full cursor-pointer items-center justify-between overflow-hidden"
+  >
+    <div class="flex flex-col gap-0.5 overflow-hidden">
+      <div class="font-semibold text-foreground flex items-center gap-2">
+        <span v-if="isBookmarked && !hideBookmarkIcon">
+          <i class="pi pi-bookmark-fill mr-1 text-sm" />
+        </span>
+        <span v-html="highlightQuery(nodeDef.display_name, currentQuery)" />
+        <span v-if="showIdName">&nbsp;</span>
+        <span
+          v-if="showIdName"
+          class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+          v-html="highlightQuery(nodeDef.name, currentQuery)"
+        />
+
+        <NodePricingBadge :node-def="nodeDef" />
+        <NodeProviderBadge v-if="nodeDef.api_node" :node-def="nodeDef" />
+      </div>
+      <div
+        v-if="showDescription"
+        class="flex items-center gap-1 text-[11px] text-muted-foreground"
+      >
+        <span
+          v-if="
+            showSourceBadge &&
+            nodeDef.nodeSource.type !== NodeSourceType.Core &&
+            nodeDef.nodeSource.type !== NodeSourceType.Unknown
+          "
+          class="inline-flex shrink-0 rounded border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
+        >
+          {{ nodeDef.nodeSource.displayText }}
+        </span>
+        <TextTicker v-if="nodeDef.description">
+          {{ nodeDef.description }}
+        </TextTicker>
+      </div>
+      <div
+        v-else-if="showCategory"
+        class="option-category truncate text-sm font-light text-muted"
+      >
+        {{ nodeDef.category.replaceAll('/', ' > ') }}
+      </div>
+    </div>
+    <div v-if="!showDescription" class="flex items-center gap-1">
+      <span
+        v-if="nodeDef.deprecated"
+        class="rounded bg-red-500/20 px-1.5 py-0.5 text-xs text-red-400"
+      >
+        {{ $t('g.deprecated') }}
+      </span>
+      <span
+        v-if="nodeDef.experimental"
+        class="rounded bg-blue-500/20 px-1.5 py-0.5 text-xs text-blue-400"
+      >
+        {{ $t('g.experimental') }}
+      </span>
+      <span
+        v-if="nodeDef.dev_only"
+        class="rounded bg-cyan-500/20 px-1.5 py-0.5 text-xs text-cyan-400"
+      >
+        {{ $t('g.devOnly') }}
+      </span>
+      <span
+        v-if="showNodeFrequency && nodeFrequency > 0"
+        class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+      >
+        {{ formatNumberWithSuffix(nodeFrequency, { roundToInt: true }) }}
+      </span>
+      <span
+        v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
+        class="rounded bg-secondary-background px-2 py-0.5 text-sm text-muted-foreground"
+      >
+        {{ nodeDef.nodeSource.displayText }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import TextTicker from '@/components/common/TextTicker.vue'
+import NodePricingBadge from '@/components/node/NodePricingBadge.vue'
+import NodeProviderBadge from '@/components/node/NodeProviderBadge.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import { formatNumberWithSuffix, highlightQuery } from '@/utils/formatUtil'
+
+const {
+  nodeDef,
+  currentQuery,
+  showDescription = false,
+  showSourceBadge = false,
+  hideBookmarkIcon = false
+} = defineProps<{
+  nodeDef: ComfyNodeDefImpl
+  currentQuery: string
+  showDescription?: boolean
+  showSourceBadge?: boolean
+  hideBookmarkIcon?: boolean
+}>()
+
+const settingStore = useSettingStore()
+const showCategory = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
+)
+const showIdName = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
+)
+const showNodeFrequency = computed(() =>
+  settingStore.get('Comfy.NodeSearchBoxImpl.ShowNodeFrequency')
+)
+const nodeFrequencyStore = useNodeFrequencyStore()
+const nodeFrequency = computed(() =>
+  nodeFrequencyStore.getNodeFrequency(nodeDef)
+)
+
+const nodeBookmarkStore = useNodeBookmarkStore()
+const isBookmarked = computed(() => nodeBookmarkStore.isBookmarked(nodeDef))
+</script>
+
+<style scoped>
+:deep(.highlight) {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+  font-weight: 700;
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+</style>

src/components/searchbox/v2/__test__/testUtils.ts

@@ -0,0 +1,52 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+
+export function createMockNodeDef(
+  overrides: Partial<ComfyNodeDef> = {}
+): ComfyNodeDef {
+  return {
+    name: 'TestNode',
+    display_name: 'Test Node',
+    category: 'test',
+    python_module: 'nodes',
+    description: 'Test description',
+    input: {},
+    output: [],
+    output_is_list: [],
+    output_name: [],
+    output_node: false,
+    deprecated: false,
+    experimental: false,
+    ...overrides
+  }
+}
+
+export function setupTestPinia() {
+  setActivePinia(createTestingPinia({ stubActions: false }))
+}
+
+export const testI18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        addNode: 'Add a node...',
+        filterBy: 'Filter by:',
+        mostRelevant: 'Most relevant',
+        favorites: 'Favorites',
+        essentials: 'Essentials',
+        custom: 'Custom',
+        noResults: 'No results',
+        filterByType: 'Filter by {type}...',
+        input: 'Input',
+        output: 'Output',
+        source: 'Source',
+        search: 'Search'
+      }
+    }
+  }
+})

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

@@ -0,0 +1,132 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import NodeLibrarySidebarTabV2 from './NodeLibrarySidebarTabV2.vue'
+
+vi.mock('@vueuse/core', async () => {
+  const actual = await vi.importActual('@vueuse/core')
+  return {
+    ...actual,
+    useLocalStorage: vi.fn((_key: string, defaultValue: unknown) =>
+      ref(defaultValue)
+    )
+  }
+})
+
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({
+    isDragging: { value: false },
+    draggedNode: { value: null },
+    cursorPosition: { value: { x: 0, y: 0 } },
+    startDrag: vi.fn(),
+    cancelDrag: vi.fn(),
+    setupGlobalListeners: vi.fn(),
+    cleanupGlobalListeners: vi.fn()
+  })
+}))
+
+vi.mock('@/services/nodeOrganizationService', () => ({
+  DEFAULT_TAB_ID: 'essentials',
+  DEFAULT_SORTING_ID: 'alphabetical',
+  nodeOrganizationService: {
+    organizeNodesByTab: vi.fn(() => []),
+    getSortingStrategies: vi.fn(() => [])
+  }
+}))
+
+vi.mock('./nodeLibrary/AllNodesPanel.vue', () => ({
+  default: {
+    name: 'AllNodesPanel',
+    template: '<div data-testid="all-panel"><slot /></div>',
+    props: ['sections', 'expandedKeys', 'fillNodeInfo']
+  }
+}))
+
+vi.mock('./nodeLibrary/CustomNodesPanel.vue', () => ({
+  default: {
+    name: 'CustomNodesPanel',
+    template: '<div data-testid="custom-panel"><slot /></div>',
+    props: ['sections', 'expandedKeys']
+  }
+}))
+
+vi.mock('./nodeLibrary/EssentialNodesPanel.vue', () => ({
+  default: {
+    name: 'EssentialNodesPanel',
+    template: '<div data-testid="essential-panel"><slot /></div>',
+    props: ['root', 'expandedKeys']
+  }
+}))
+
+vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
+  default: {
+    name: 'NodeDragPreview',
+    template: '<div />'
+  }
+}))
+
+vi.mock('@/components/common/SearchBoxV2.vue', () => ({
+  default: {
+    name: 'SearchBox',
+    template: '<input data-testid="search-box" />',
+    props: ['modelValue', 'placeholder'],
+    setup() {
+      return { focus: vi.fn() }
+    },
+    expose: ['focus']
+  }
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+describe('NodeLibrarySidebarTabV2', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  function mountComponent() {
+    return mount(NodeLibrarySidebarTabV2, {
+      global: {
+        plugins: [createTestingPinia({ stubActions: false }), i18n],
+        components: {
+          TabsRoot,
+          TabsList,
+          TabsTrigger,
+          TabsContent
+        },
+        stubs: {
+          teleport: true
+        }
+      }
+    })
+  }
+
+  it('should render with tabs', () => {
+    const wrapper = mountComponent()
+
+    const triggers = wrapper.findAllComponents(TabsTrigger)
+    expect(triggers.length).toBe(3)
+  })
+
+  it('should render search box', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-testid="search-box"]').exists()).toBe(true)
+  })
+
+  it('should render only the selected panel', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-testid="essential-panel"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="all-panel"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="custom-panel"]').exists()).toBe(false)
+  })
+})

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -0,0 +1,348 @@
+<template>
+  <SidebarTabTemplate :title="$t('sideToolbar.nodes')">
+    <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">
+          <SearchBox
+            ref="searchBoxRef"
+            v-model="searchQuery"
+            :placeholder="$t('g.search') + '...'"
+            @search="handleSearch"
+          />
+          <DropdownMenuRoot>
+            <DropdownMenuTrigger as-child>
+              <button
+                :aria-label="$t('g.sort')"
+                class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
+              >
+                <i class="icon-[lucide--arrow-up-down] size-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent
+                class="z-[9999] min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
+                align="end"
+                :side-offset="4"
+              >
+                <DropdownMenuRadioGroup v-model="sortOrder">
+                  <DropdownMenuRadioItem
+                    v-for="option in sortingOptions"
+                    :key="option.id"
+                    :value="option.id"
+                    class="flex cursor-pointer items-center justify-end gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+                  >
+                    <DropdownMenuItemIndicator class="w-4">
+                      <i class="icon-[lucide--check] size-4" />
+                    </DropdownMenuItemIndicator>
+                    <span>{{ $t(option.label) }}</span>
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenuRoot>
+        </div>
+        <Separator decorative class="border border-dashed border-comfy-input" />
+        <!-- Tab list in header (fixed) -->
+        <TabsList
+          class="flex gap-4 border-b border-comfy-input bg-background p-4 justify-between"
+        >
+          <TabsTrigger
+            v-for="tab in tabs"
+            :key="tab.value"
+            :value="tab.value"
+            :class="
+              cn(
+                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
+                'text-sm text-foreground transition-colors',
+                selectedTab === tab.value
+                  ? 'bg-comfy-input font-bold'
+                  : 'bg-transparent font-normal'
+              )
+            "
+          >
+            {{ tab.label }}
+          </TabsTrigger>
+        </TabsList>
+      </TabsRoot>
+    </template>
+    <template #body>
+      <NodeDragPreview />
+      <!-- Tab content (scrollable) -->
+      <TabsRoot v-model="selectedTab" class="h-full">
+        <EssentialNodesPanel
+          v-if="selectedTab === 'essentials'"
+          v-model:expanded-keys="expandedKeys"
+          :root="renderedEssentialRoot"
+          @node-click="handleNodeClick"
+        />
+        <AllNodesPanel
+          v-if="selectedTab === 'all'"
+          v-model:expanded-keys="expandedKeys"
+          :sections="renderedSections"
+          :fill-node-info="fillNodeInfo"
+          @node-click="handleNodeClick"
+        />
+        <CustomNodesPanel
+          v-if="selectedTab === 'custom'"
+          v-model:expanded-keys="expandedKeys"
+          :sections="renderedCustomSections"
+          @node-click="handleNodeClick"
+        />
+      </TabsRoot>
+    </template>
+  </SidebarTabTemplate>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { useLocalStorage } from '@vueuse/core'
+import {
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  Separator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger
+} from 'reka-ui'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBoxV2.vue'
+import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
+import {
+  DEFAULT_SORTING_ID,
+  DEFAULT_TAB_ID,
+  nodeOrganizationService
+} from '@/services/nodeOrganizationService'
+import { getProviderIcon } from '@/utils/categoryUtil'
+import { sortedTree } from '@/utils/treeUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { SortingStrategyId, TabId } from '@/types/nodeOrganizationTypes'
+import type {
+  RenderedTreeExplorerNode,
+  TreeNode
+} from '@/types/treeExplorerTypes'
+
+import AllNodesPanel from './nodeLibrary/AllNodesPanel.vue'
+import CustomNodesPanel from './nodeLibrary/CustomNodesPanel.vue'
+import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
+import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
+import SidebarTabTemplate from './SidebarTabTemplate.vue'
+
+const selectedTab = useLocalStorage<TabId>(
+  'Comfy.NodeLibrary.Tab',
+  DEFAULT_TAB_ID
+)
+
+const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
+  'Comfy.NodeLibrary.SortByTab',
+  {
+    essentials: DEFAULT_SORTING_ID,
+    all: DEFAULT_SORTING_ID,
+    custom: 'alphabetical'
+  }
+)
+const sortOrder = computed({
+  get: () => sortOrderByTab.value[selectedTab.value],
+  set: (value) => {
+    sortOrderByTab.value = {
+      ...sortOrderByTab.value,
+      [selectedTab.value]: value
+    }
+  }
+})
+
+const sortingOptions = computed(() =>
+  nodeOrganizationService.getSortingStrategies().map((strategy) => ({
+    id: strategy.id,
+    label: strategy.label
+  }))
+)
+
+const { t } = useI18n()
+
+const searchBoxRef = ref()
+const searchQuery = ref('')
+const expandedKeysByTab = ref<Record<TabId, string[]>>({
+  essentials: [],
+  all: [],
+  custom: []
+})
+const expandedKeys = computed({
+  get: () => expandedKeysByTab.value[selectedTab.value],
+  set: (value) => {
+    expandedKeysByTab.value[selectedTab.value] = value
+  }
+})
+
+const nodeDefStore = useNodeDefStore()
+const { startDrag } = useNodeDragToCanvas()
+
+const filteredNodeDefs = computed(() => {
+  if (searchQuery.value.length === 0) {
+    return []
+  }
+  return nodeDefStore.nodeSearchService.searchNode(
+    searchQuery.value,
+    [],
+    { limit: 64 },
+    { matchWildcards: false }
+  )
+})
+
+const activeNodes = computed(() =>
+  filteredNodeDefs.value.length > 0
+    ? filteredNodeDefs.value
+    : nodeDefStore.visibleNodeDefs
+)
+
+const sections = computed(() => {
+  if (selectedTab.value !== 'all') return []
+  return nodeOrganizationService.organizeNodesByTab(activeNodes.value, 'all')
+})
+
+function getFolderIcon(node: TreeNode): string {
+  const firstLeaf = findFirstLeaf(node)
+  if (
+    firstLeaf?.key?.startsWith('root/api node') &&
+    firstLeaf.key.replace(`${node.key}/`, '') === firstLeaf.label
+  ) {
+    return getProviderIcon(node.label ?? '')
+  }
+  return 'icon-[lucide--folder]'
+}
+
+function findFirstLeaf(node: TreeNode): TreeNode | undefined {
+  if (node.leaf) return node
+  for (const child of node.children ?? []) {
+    const leaf = findFirstLeaf(child)
+    if (leaf) return leaf
+  }
+  return undefined
+}
+
+function fillNodeInfo(
+  node: TreeNode
+): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+  const children = node.children?.map(fillNodeInfo)
+  const totalLeaves = node.leaf
+    ? 1
+    : (children?.reduce((acc, child) => acc + child.totalLeaves, 0) ?? 0)
+
+  return {
+    key: node.key,
+    label: node.leaf ? node.data?.display_name : node.label,
+    leaf: node.leaf,
+    data: node.data,
+    icon: node.leaf ? 'icon-[comfy--node]' : getFolderIcon(node),
+    type: node.leaf ? 'node' : 'folder',
+    totalLeaves,
+    children
+  }
+}
+
+function applySorting(tree: TreeNode): TreeNode {
+  if (sortOrder.value === 'alphabetical') {
+    return sortedTree(tree, { groupLeaf: true })
+  }
+  return tree
+}
+
+const renderedSections = computed(() => {
+  return sections.value.map((section) => ({
+    title: section.title,
+    root: fillNodeInfo(applySorting(section.tree))
+  }))
+})
+
+const essentialSections = computed(() => {
+  if (selectedTab.value !== 'essentials') return []
+  return nodeOrganizationService.organizeNodesByTab(
+    activeNodes.value,
+    'essentials'
+  )
+})
+
+const renderedEssentialRoot = computed(() => {
+  const section = essentialSections.value[0]
+  return section
+    ? fillNodeInfo(applySorting(section.tree))
+    : fillNodeInfo({ key: 'root', label: '', children: [] })
+})
+
+const customSections = computed(() => {
+  if (selectedTab.value !== 'custom') return []
+  return nodeOrganizationService.organizeNodesByTab(activeNodes.value, 'custom')
+})
+
+const renderedCustomSections = computed(() => {
+  return customSections.value.map((section) => ({
+    title: section.title,
+    root: fillNodeInfo(applySorting(section.tree))
+  }))
+})
+
+function collectFolderKeys(node: TreeNode): string[] {
+  if (node.leaf) return []
+  const keys = [node.key]
+  for (const child of node.children ?? []) {
+    keys.push(...collectFolderKeys(child))
+  }
+  return keys
+}
+
+function handleNodeClick(node: RenderedTreeExplorerNode<ComfyNodeDefImpl>) {
+  if (node.type === 'node' && node.data) {
+    startDrag(node.data)
+  }
+  if (node.type === 'folder') {
+    const index = expandedKeys.value.indexOf(node.key)
+    if (index === -1) {
+      expandedKeys.value = [...expandedKeys.value, node.key]
+    } else {
+      expandedKeys.value = expandedKeys.value.filter((k) => k !== node.key)
+    }
+  }
+}
+
+async function handleSearch() {
+  await nextTick()
+
+  if (filteredNodeDefs.value.length === 0) {
+    expandedKeys.value = []
+    return
+  }
+
+  const allKeys: string[] = []
+  if (selectedTab.value === 'essentials') {
+    for (const section of essentialSections.value) {
+      allKeys.push(...collectFolderKeys(section.tree))
+    }
+  } else if (selectedTab.value === 'custom') {
+    for (const section of customSections.value) {
+      allKeys.push(...collectFolderKeys(section.tree))
+    }
+  } else {
+    for (const section of sections.value) {
+      allKeys.push(...collectFolderKeys(section.tree))
+    }
+  }
+  expandedKeys.value = allKeys
+}
+
+const tabs = computed(() => [
+  { value: 'essentials', label: t('sideToolbar.nodeLibraryTab.essentials') },
+  { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
+  { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
+])
+
+onMounted(() => {
+  searchBoxRef.value?.focus()
+})
+</script>

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="containerRef"
     :class="
       cn(
         'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col',
@@ -35,9 +36,17 @@
   </div>
 </template>
 
+<script lang="ts">
+import type { InjectionKey, Ref } from 'vue'
+
+export const SidebarContainerKey: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('SidebarContainer')
+</script>
+
 <script setup lang="ts">
 import ScrollPanel from 'primevue/scrollpanel'
 import Toolbar from 'primevue/toolbar'
+import { provide, ref } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
@@ -45,6 +54,9 @@ const props = defineProps<{
   title: string
   class?: string
 }>()
+
+const containerRef = ref<HTMLElement | null>(null)
+provide(SidebarContainerKey, containerRef)
 </script>
 
 <style scoped>

src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue

@@ -0,0 +1,77 @@
+<template>
+  <TabsContent value="all" class="flex-1 overflow-y-auto h-full">
+    <!-- Favorites section -->
+    <template v-if="hasFavorites">
+      <h3
+        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+      >
+        {{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
+      </h3>
+      <TreeExplorerV2
+        v-model:expanded-keys="expandedKeys"
+        :root="favoritesRoot"
+        @node-click="(node) => emit('nodeClick', node)"
+        @add-to-favorites="handleAddToFavorites"
+      />
+    </template>
+
+    <!-- Node sections -->
+    <div v-for="(section, index) in sections" :key="section.title ?? index">
+      <h3
+        v-if="section.title"
+        class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
+      >
+        {{ section.title }}
+      </h3>
+      <TreeExplorerV2
+        v-model:expanded-keys="expandedKeys"
+        :root="section.root"
+        @node-click="(node) => emit('nodeClick', node)"
+        @add-to-favorites="handleAddToFavorites"
+      />
+    </div>
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { TabsContent } from 'reka-ui'
+import { computed } from 'vue'
+
+import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type {
+  NodeLibrarySection,
+  RenderedTreeExplorerNode,
+  TreeNode
+} from '@/types/treeExplorerTypes'
+
+const { fillNodeInfo } = defineProps<{
+  sections: NodeLibrarySection[]
+  fillNodeInfo: (node: TreeNode) => RenderedTreeExplorerNode<ComfyNodeDefImpl>
+}>()
+
+const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
+
+const emit = defineEmits<{
+  nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+
+const nodeBookmarkStore = useNodeBookmarkStore()
+
+const hasFavorites = computed(
+  () => (nodeBookmarkStore.bookmarkedRoot.children?.length ?? 0) > 0
+)
+
+const favoritesRoot = computed(() =>
+  fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
+)
+
+function handleAddToFavorites(
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+) {
+  if (node.data) {
+    nodeBookmarkStore.toggleBookmark(node.data)
+  }
+}
+</script>

src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue

@@ -0,0 +1,63 @@
+<template>
+  <TabsContent value="custom" class="flex-1 flex flex-col h-full">
+    <div
+      v-for="(section, index) in sections"
+      :key="section.title ?? index"
+      class="flex-1 overflow-y-auto h-full"
+    >
+      <!-- Section header -->
+      <h3
+        v-if="section.title"
+        class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
+      >
+        {{ section.title }}
+      </h3>
+      <!-- Section tree -->
+      <TreeExplorerV2
+        v-model:expanded-keys="expandedKeys"
+        :root="section.root"
+        :show-context-menu="false"
+        @node-click="(node) => emit('nodeClick', node)"
+      />
+    </div>
+    <div class="flex-none py-3 border-t border-border-default text-center">
+      <Button
+        variant="secondary"
+        class="justify-start gap-3"
+        @click="handleOpenManager"
+      >
+        <i class="icon-[lucide--blocks] size-5 text-muted-foreground" />
+        {{ $t('g.manageExtensions') }}
+      </Button>
+    </div>
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { TabsContent } from 'reka-ui'
+
+import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type {
+  NodeLibrarySection,
+  RenderedTreeExplorerNode
+} from '@/types/treeExplorerTypes'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+
+defineProps<{
+  sections: NodeLibrarySection[]
+}>()
+
+const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
+
+const emit = defineEmits<{
+  nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+
+const managerState = useManagerState()
+
+async function handleOpenManager() {
+  await managerState.openManager()
+}
+</script>

src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts

@@ -0,0 +1,204 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import EssentialNodeCard from './EssentialNodeCard.vue'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn().mockReturnValue('left')
+  })
+}))
+
+const { mockStartDrag, mockHandleNativeDrop } = vi.hoisted(() => ({
+  mockStartDrag: vi.fn(),
+  mockHandleNativeDrop: vi.fn()
+}))
+
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({
+    startDrag: mockStartDrag,
+    handleNativeDrop: mockHandleNativeDrop
+  })
+}))
+
+vi.mock('@/components/node/NodePreviewCard.vue', () => ({
+  default: { template: '<div class="mock-preview" />' }
+}))
+
+describe('EssentialNodeCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  function createMockNode(
+    overrides: Partial<ComfyNodeDefImpl> = {}
+  ): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+    const data = {
+      name: 'TestNode',
+      display_name: 'Test Node',
+      ...overrides
+    } as ComfyNodeDefImpl
+
+    return {
+      key: 'test-key',
+      label: 'Test Node',
+      icon: 'icon-[comfy--node]',
+      type: 'node',
+      totalLeaves: 1,
+      data
+    }
+  }
+
+  function mountComponent(
+    node: RenderedTreeExplorerNode<ComfyNodeDefImpl> = createMockNode()
+  ) {
+    return mount(EssentialNodeCard, {
+      props: { node },
+      global: {
+        stubs: {
+          Teleport: true
+        }
+      }
+    })
+  }
+
+  describe('rendering', () => {
+    it('should display the node display_name', () => {
+      const wrapper = mountComponent(
+        createMockNode({ display_name: 'Load Image' })
+      )
+      expect(wrapper.text()).toContain('Load Image')
+    })
+
+    it('should set data-node-name attribute', () => {
+      const wrapper = mountComponent(
+        createMockNode({ display_name: 'Save Image' })
+      )
+      const card = wrapper.find('[data-node-name]')
+      expect(card.attributes('data-node-name')).toBe('Save Image')
+    })
+
+    it('should be draggable', () => {
+      const wrapper = mountComponent()
+      const card = wrapper.find('[draggable]')
+      expect(card.attributes('draggable')).toBe('true')
+    })
+  })
+
+  describe('icon generation', () => {
+    it('should use kebab-case of node name for icon', () => {
+      const wrapper = mountComponent(createMockNode({ name: 'LoadImage' }))
+      const icon = wrapper.find('i')
+      expect(icon.classes()).toContain('icon-[comfy--load-image]')
+    })
+
+    it('should use kebab-case for SaveImage', () => {
+      const wrapper = mountComponent(createMockNode({ name: 'SaveImage' }))
+      const icon = wrapper.find('i')
+      expect(icon.classes()).toContain('icon-[comfy--save-image]')
+    })
+
+    it('should use kebab-case for ImageCrop', () => {
+      const wrapper = mountComponent(createMockNode({ name: 'ImageCrop' }))
+      const icon = wrapper.find('i')
+      expect(icon.classes()).toContain('icon-[comfy--image-crop]')
+    })
+
+    it('should use kebab-case for complex node names', () => {
+      const wrapper = mountComponent(
+        createMockNode({ name: 'RecraftRemoveBackgroundNode' })
+      )
+      const icon = wrapper.find('i')
+      expect(icon.classes()).toContain(
+        'icon-[comfy--recraft-remove-background-node]'
+      )
+    })
+
+    it('should use default node icon when nodeDef has no name', () => {
+      const node: RenderedTreeExplorerNode<ComfyNodeDefImpl> = {
+        key: 'test-key',
+        label: 'Test',
+        icon: 'icon',
+        type: 'node',
+        totalLeaves: 1,
+        data: undefined
+      }
+      const wrapper = mountComponent(node)
+      const icon = wrapper.find('i')
+      expect(icon.classes()).toContain('icon-[comfy--node]')
+    })
+  })
+
+  describe('events', () => {
+    it('should emit click event when clicked', async () => {
+      const node = createMockNode()
+      const wrapper = mountComponent(node)
+
+      await wrapper.find('div').trigger('click')
+
+      expect(wrapper.emitted('click')).toBeTruthy()
+      expect(wrapper.emitted('click')?.[0]).toEqual([node])
+    })
+
+    it('should not emit click when nodeDef is undefined', async () => {
+      const node: RenderedTreeExplorerNode<ComfyNodeDefImpl> = {
+        key: 'test-key',
+        label: 'Test',
+        icon: 'icon',
+        type: 'node',
+        totalLeaves: 1,
+        data: undefined
+      }
+      const wrapper = mountComponent(node)
+
+      await wrapper.find('div').trigger('click')
+
+      expect(wrapper.emitted('click')).toBeFalsy()
+    })
+  })
+
+  describe('drag and drop', () => {
+    it('should call startDrag on dragstart', async () => {
+      const wrapper = mountComponent()
+      const card = wrapper.find('div')
+
+      await card.trigger('dragstart')
+
+      expect(mockStartDrag).toHaveBeenCalled()
+    })
+
+    it('should call handleNativeDrop on dragend', async () => {
+      const wrapper = mountComponent()
+      const card = wrapper.find('div')
+
+      await card.trigger('dragend')
+
+      expect(mockHandleNativeDrop).toHaveBeenCalled()
+    })
+  })
+
+  describe('hover preview', () => {
+    it('should show preview on mouseenter', async () => {
+      const wrapper = mountComponent()
+      const card = wrapper.find('div')
+
+      await card.trigger('mouseenter')
+
+      expect(wrapper.find('teleport-stub').exists()).toBe(true)
+    })
+
+    it('should hide preview after mouseleave', async () => {
+      const wrapper = mountComponent()
+      const card = wrapper.find('div')
+
+      await card.trigger('mouseenter')
+      expect(wrapper.find('teleport-stub').exists()).toBe(true)
+
+      await card.trigger('mouseleave')
+      expect(wrapper.find('teleport-stub').exists()).toBe(false)
+    })
+  })
+})

src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col items-center justify-center py-4 px-2 rounded-2xl cursor-pointer select-none transition-colors duration-150 box-content',
+        'bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border',
+        'aspect-square'
+      )
+    "
+    :data-node-name="nodeDef?.display_name"
+    draggable="true"
+    @click="handleClick"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="flex flex-1 items-center justify-center">
+      <i :class="cn(nodeIcon, 'size-14 text-muted-foreground')" />
+    </div>
+    <span
+      class="shrink-0 h-8 text-sm font-bold text-center text-foreground line-clamp-2 leading-4"
+    >
+      {{ nodeDef?.display_name }}
+    </span>
+  </div>
+
+  <Teleport v-if="showPreview" to="body">
+    <div
+      :ref="(el) => (previewRef = el as HTMLElement)"
+      :style="nodePreviewStyle"
+    >
+      <NodePreviewCard :node-def="nodeDef!" :show-inputs-and-outputs="false" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { kebabCase } from 'es-toolkit/string'
+import { computed, inject } from 'vue'
+
+import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
+import { SidebarContainerKey } from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+const { node } = defineProps<{
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+}>()
+
+const emit = defineEmits<{
+  click: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+
+const nodeDef = computed(() => node.data)
+
+const panelRef = inject(SidebarContainerKey, undefined)
+
+const {
+  previewRef,
+  showPreview,
+  nodePreviewStyle,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleDragStart,
+  handleDragEnd
+} = useNodePreviewAndDrag(nodeDef, { panelRef })
+
+const nodeIcon = computed(() => {
+  const nodeName = nodeDef.value?.name
+  const iconName = nodeName ? kebabCase(nodeName) : 'node'
+  return `icon-[comfy--${iconName}]`
+})
+
+function handleClick() {
+  if (!nodeDef.value) return
+  emit('click', node)
+}
+</script>

src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts

@@ -0,0 +1,207 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import EssentialNodesPanel from './EssentialNodesPanel.vue'
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn().mockReturnValue('left')
+  })
+}))
+
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({
+    startDrag: vi.fn(),
+    handleNativeDrop: vi.fn(),
+    cancelDrag: vi.fn()
+  })
+}))
+
+vi.mock('@/components/node/NodePreviewCard.vue', () => ({
+  default: { template: '<div />' }
+}))
+
+describe('EssentialNodesPanel', () => {
+  function createMockNode(
+    name: string
+  ): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+    return {
+      key: `node-${name}`,
+      label: name,
+      icon: 'icon-[comfy--node]',
+      type: 'node',
+      totalLeaves: 1,
+      data: {
+        name,
+        display_name: name
+      } as ComfyNodeDefImpl
+    }
+  }
+
+  function createMockFolder(
+    name: string,
+    children: RenderedTreeExplorerNode<ComfyNodeDefImpl>[]
+  ): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+    return {
+      key: `folder-${name}`,
+      label: name,
+      icon: 'icon-[lucide--folder]',
+      type: 'folder',
+      totalLeaves: children.length,
+      children
+    }
+  }
+
+  function createMockRoot(): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+    return {
+      key: 'root',
+      label: 'Root',
+      icon: '',
+      type: 'folder',
+      totalLeaves: 6,
+      children: [
+        createMockFolder('images', [
+          createMockNode('LoadImage'),
+          createMockNode('SaveImage')
+        ]),
+        createMockFolder('video', [
+          createMockNode('LoadVideo'),
+          createMockNode('SaveVideo')
+        ]),
+        createMockFolder('audio', [
+          createMockNode('LoadAudio'),
+          createMockNode('SaveAudio')
+        ])
+      ]
+    }
+  }
+
+  function mountComponent(
+    root = createMockRoot(),
+    expandedKeys: string[] = []
+  ) {
+    const WrapperComponent = {
+      template: `<EssentialNodesPanel :root="root" v-model:expandedKeys="keys" />`,
+      components: { EssentialNodesPanel },
+      setup() {
+        const keys = ref(expandedKeys)
+        return { root, keys }
+      }
+    }
+    return mount(WrapperComponent, {
+      global: {
+        stubs: {
+          Teleport: true,
+          TabsContent: {
+            template: '<div class="tabs-content"><slot /></div>'
+          },
+          CollapsibleRoot: {
+            template:
+              '<div class="collapsible-root" :data-state="open ? \'open\' : \'closed\'"><slot /></div>',
+            props: ['open'],
+            emits: ['update:open']
+          },
+          CollapsibleTrigger: {
+            template:
+              '<button class="collapsible-trigger" @click="$emit(\'click\')"><slot /></button>'
+          },
+          CollapsibleContent: {
+            template: '<div class="collapsible-content"><slot /></div>'
+          }
+        }
+      }
+    })
+  }
+
+  describe('folder rendering', () => {
+    it('should render all top-level folders', () => {
+      const wrapper = mountComponent()
+      const triggers = wrapper.findAll('.collapsible-trigger')
+      expect(triggers).toHaveLength(3)
+    })
+
+    it('should display folder labels', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('images')
+      expect(wrapper.text()).toContain('video')
+      expect(wrapper.text()).toContain('audio')
+    })
+  })
+
+  describe('default expansion', () => {
+    it('should expand all folders by default when expandedKeys is empty', async () => {
+      const wrapper = mountComponent(createMockRoot(), [])
+      await nextTick()
+      await flushPromises()
+      await nextTick()
+
+      const roots = wrapper.findAll('.collapsible-root')
+      expect(roots[0].attributes('data-state')).toBe('open')
+      expect(roots[1].attributes('data-state')).toBe('open')
+      expect(roots[2].attributes('data-state')).toBe('open')
+    })
+
+    it('should respect provided expandedKeys', async () => {
+      const wrapper = mountComponent(createMockRoot(), ['folder-audio'])
+      await nextTick()
+
+      const roots = wrapper.findAll('.collapsible-root')
+      expect(roots[0].attributes('data-state')).toBe('closed')
+      expect(roots[1].attributes('data-state')).toBe('closed')
+      expect(roots[2].attributes('data-state')).toBe('open')
+    })
+
+    it('should expand all provided keys', async () => {
+      const wrapper = mountComponent(createMockRoot(), [
+        'folder-images',
+        'folder-video',
+        'folder-audio'
+      ])
+      await nextTick()
+
+      const roots = wrapper.findAll('.collapsible-root')
+      expect(roots[0].attributes('data-state')).toBe('open')
+      expect(roots[1].attributes('data-state')).toBe('open')
+      expect(roots[2].attributes('data-state')).toBe('open')
+    })
+  })
+
+  describe('with single folder', () => {
+    it('should expand only one folder when there is only one', async () => {
+      const root: RenderedTreeExplorerNode<ComfyNodeDefImpl> = {
+        key: 'root',
+        label: 'Root',
+        icon: '',
+        type: 'folder',
+        totalLeaves: 2,
+        children: [
+          createMockFolder('images', [
+            createMockNode('LoadImage'),
+            createMockNode('SaveImage')
+          ])
+        ]
+      }
+
+      const wrapper = mountComponent(root, [])
+      await nextTick()
+      await flushPromises()
+      await nextTick()
+
+      const roots = wrapper.findAll('.collapsible-root')
+      expect(roots).toHaveLength(1)
+      expect(roots[0].attributes('data-state')).toBe('open')
+    })
+  })
+
+  describe('node cards', () => {
+    it('should render node cards for each node in expanded folders', () => {
+      const wrapper = mountComponent(createMockRoot(), ['folder-images'])
+      const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
+      expect(cards.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+})

src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue

@@ -0,0 +1,109 @@
+<template>
+  <TabsContent value="essentials" class="flex-1 overflow-y-auto px-3 h-full">
+    <div class="flex flex-col gap-2 pb-6">
+      <CollapsibleRoot
+        v-for="folder in folders"
+        :key="folder.key"
+        class="rounded-lg"
+        :open="expandedKeys.includes(folder.key)"
+        @update:open="toggleFolder(folder.key, $event)"
+      >
+        <CollapsibleTrigger
+          class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 px-1 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
+        >
+          <span class="uppercase">{{ folder.label }}</span>
+          <i
+            :class="
+              cn(
+                'icon-[lucide--chevron-up] size-4 transition-transform duration-200',
+                !expandedKeys.includes(folder.key) && '-rotate-180'
+              )
+            "
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent
+          class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+        >
+          <div
+            class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3"
+          >
+            <EssentialNodeCard
+              v-for="node in folder.children"
+              :key="node.key"
+              :node="node"
+              @click="emit('nodeClick', $event)"
+            />
+          </div>
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    </div>
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  TabsContent
+} from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+import EssentialNodeCard from './EssentialNodeCard.vue'
+
+const props = defineProps<{
+  root: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+}>()
+
+const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
+
+const emit = defineEmits<{
+  nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
+}>()
+
+function flattenLeaves(
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+): RenderedTreeExplorerNode<ComfyNodeDefImpl>[] {
+  if (node.type === 'node') return [node]
+  return node.children?.flatMap(flattenLeaves) ?? []
+}
+
+const folders = computed(() => {
+  const topFolders =
+    (props.root.children?.filter(
+      (child) => child.type === 'folder'
+    ) as RenderedTreeExplorerNode<ComfyNodeDefImpl>[]) ?? []
+
+  return topFolders.map((folder) => ({
+    ...folder,
+    children: flattenLeaves(folder)
+  }))
+})
+
+function toggleFolder(key: string, open: boolean) {
+  if (open) {
+    expandedKeys.value = [...expandedKeys.value, key]
+  } else {
+    expandedKeys.value = expandedKeys.value.filter((k) => k !== key)
+  }
+}
+
+const hasAutoExpanded = ref(false)
+
+watch(
+  folders,
+  (value) => {
+    if (!hasAutoExpanded.value && value.length > 0) {
+      hasAutoExpanded.value = true
+      if (expandedKeys.value.length === 0) {
+        expandedKeys.value = value.map((folder) => folder.key)
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>

src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue

@@ -0,0 +1,69 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isDragging && draggedNode && showPreview"
+      class="pointer-events-none fixed z-[10000]"
+      :style="{
+        left: `${previewPosition.x + 12}px`,
+        top: `${previewPosition.y + 12}px`
+      }"
+    >
+      <div class="origin-top-left scale-50 opacity-80">
+        <LGraphNodePreview :node-def="draggedNode" position="relative" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
+
+const {
+  isDragging,
+  draggedNode,
+  cursorPosition,
+  dragMode,
+  setupGlobalListeners,
+  cleanupGlobalListeners
+} = useNodeDragToCanvas()
+
+const nativeDragPosition = ref({ x: 0, y: 0 })
+
+const previewPosition = computed(() => {
+  if (dragMode.value === 'native') {
+    return nativeDragPosition.value
+  }
+  return cursorPosition.value
+})
+
+const showPreview = computed(() => {
+  if (dragMode.value === 'native') {
+    return nativeDragPosition.value.x > 0 || nativeDragPosition.value.y > 0
+  }
+  return true
+})
+
+function handleDrag(e: DragEvent) {
+  if (e.clientX === 0 && e.clientY === 0) return
+  nativeDragPosition.value = { x: e.clientX, y: e.clientY }
+}
+
+function handleDragEnd() {
+  nativeDragPosition.value = { x: 0, y: 0 }
+}
+
+onMounted(() => {
+  setupGlobalListeners()
+  document.addEventListener('drag', handleDrag)
+  document.addEventListener('dragend', handleDragEnd)
+})
+
+onUnmounted(() => {
+  cleanupGlobalListeners()
+  document.removeEventListener('drag', handleDrag)
+  document.removeEventListener('dragend', handleDragEnd)
+})
+</script>