Design update

• Update borders for header and footer
• Removed separator between list groups
• Truncation on flat lists on search

src/components/searchbox/LinkReleaseContextMenu.vue

@@ -0,0 +1,286 @@
+<template>
+  <DropdownMenuRoot :open="open" @update:open="onOpenChange">
+    <DropdownMenuTrigger as-child>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none fixed size-0"
+        :style="{ left: `${position.x}px`, top: `${position.y}px` }"
+      />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :collision-padding="8"
+        :class="contentClass"
+        @open-auto-focus.prevent="focusSearch"
+        @close-auto-focus.prevent
+      >
+        <DropdownMenuLabel
+          v-if="headerLabel"
+          class="block shrink-0 truncate px-3 py-1.5 text-xs font-medium text-muted-foreground uppercase"
+        >
+          {{ headerLabel }}
+        </DropdownMenuLabel>
+        <div class="shrink-0 px-1 py-1.5">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :placeholder="t('contextMenu.Search')"
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onRootSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+
+        <div :class="scrollClass">
+          <template v-if="trimmedQuery">
+            <DropdownMenuItem
+              v-for="match in searchResults"
+              :key="`${match.category.key}:${match.node.name}`"
+              :class="itemClass"
+              @select="selectNode(match.node)"
+            >
+              <i
+                :class="cn(match.category.icon, 'size-4 shrink-0 opacity-80')"
+              />
+              <span class="min-w-0 flex-1 truncate">
+                <span class="text-muted-foreground">
+                  {{ t(match.category.labelKey) }}:
+                </span>
+                <span>{{ match.node.display_name }}</span>
+              </span>
+            </DropdownMenuItem>
+            <div
+              v-if="searchResults.length === 0"
+              class="px-3 py-2 text-sm text-muted-foreground"
+            >
+              {{ t('g.noResults') }}
+            </div>
+          </template>
+
+          <template v-else>
+            <template v-if="suggestions.length">
+              <DropdownMenuLabel
+                class="block truncate px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Most Relevant') }}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                v-for="nodeDef in suggestions"
+                :key="nodeDef.name"
+                :class="itemClass"
+                @select="selectNode(nodeDef)"
+              >
+                <span class="min-w-0 flex-1 truncate">
+                  {{ nodeDef.display_name }}
+                </span>
+              </DropdownMenuItem>
+            </template>
+
+            <template v-if="categories.length">
+              <DropdownMenuLabel
+                class="block truncate px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Compatible Nodes') }}
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                v-for="category in categories"
+                :key="category.key"
+                :category
+                :item-class="itemClass"
+                :content-class="contentClass"
+                :scroll-class="scrollClass"
+                @select="selectNode"
+              />
+            </template>
+          </template>
+        </div>
+
+        <template v-if="!trimmedQuery">
+          <DropdownMenuSeparator
+            class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+          />
+          <DropdownMenuItem
+            :class="cn(itemClass, 'shrink-0')"
+            @select="addReroute"
+          >
+            <i class="icon-[lucide--git-fork] size-4 shrink-0 opacity-80" />
+            <span class="flex-1 truncate">
+              {{ t('contextMenu.Add Reroute') }}
+            </span>
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from 'reka-ui'
+import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import {
+  buildLinkReleaseNodeCategories,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type {
+  LinkReleaseContext,
+  LinkReleaseNodeMatch
+} from './linkReleaseMenuModel'
+
+const { context } = defineProps<{ context: LinkReleaseContext | null }>()
+
+const emit = defineEmits<{
+  selectNode: [nodeDef: ComfyNodeDefImpl]
+  addReroute: []
+  dismiss: []
+}>()
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const open = ref(false)
+const position = ref({ x: 0, y: 0 })
+const searchInput = ref<HTMLInputElement>()
+const query = ref('')
+let actionTaken = false
+
+const contentClass =
+  'z-1700 flex max-h-[80vh] min-w-[260px] max-w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const scrollClass = 'min-h-0 overflow-y-auto scrollbar-custom'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+const headerLabel = computed(() =>
+  context ? getLinkReleaseHeaderLabel(context) : ''
+)
+
+const trimmedQuery = computed(() => query.value.trim())
+
+const typeFilter = computed(() => {
+  if (!context) return null
+  const svc = nodeDefStore.nodeSearchService
+  return {
+    filterDef: context.isFromOutput
+      ? svc.inputTypeFilter
+      : svc.outputTypeFilter,
+    value: context.dataType
+  }
+})
+
+const compatibleNodes = computed<ComfyNodeDefImpl[]>(() => {
+  if (!typeFilter.value) return []
+  return nodeDefStore.nodeSearchService.searchNode('', [typeFilter.value], {
+    limit: 500
+  })
+})
+
+const defaultNodeDefs = computed<ComfyNodeDefImpl[]>(() => {
+  if (!context?.dataType) return []
+  const table = context.isFromOutput
+    ? LiteGraph.slot_types_default_out
+    : LiteGraph.slot_types_default_in
+  const types = table?.[context.dataType] ?? []
+  return types
+    .map((type) => nodeDefStore.allNodeDefsByName[type])
+    .filter((nodeDef): nodeDef is ComfyNodeDefImpl => Boolean(nodeDef))
+})
+
+const suggestions = computed(() =>
+  getLinkReleaseSuggestions(defaultNodeDefs.value)
+)
+const categories = computed(() =>
+  buildLinkReleaseNodeCategories(compatibleNodes.value)
+)
+
+const searchResults = computed<LinkReleaseNodeMatch[]>(() =>
+  searchLinkReleaseNodes(categories.value, trimmedQuery.value)
+)
+
+function selectNode(nodeDef: ComfyNodeDefImpl) {
+  actionTaken = true
+  emit('selectNode', nodeDef)
+  hide()
+}
+
+function addReroute() {
+  actionTaken = true
+  emit('addReroute')
+  hide()
+}
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function focusFirstItem(target: HTMLElement) {
+  const menu = target.closest<HTMLElement>('[role="menu"]')
+  menu
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onRootSearchKeydown(event: KeyboardEvent) {
+  // Let Reka close the menu natively on Escape.
+  if (event.key === 'Escape') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstItem(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter' && trimmedQuery.value) {
+    const first = searchResults.value[0]
+    if (first) selectNode(first.node)
+  }
+}
+
+function show(event: MouseEvent) {
+  actionTaken = false
+  query.value = ''
+  position.value = { x: event.clientX, y: event.clientY }
+  void nextTick(() => {
+    open.value = true
+  })
+}
+
+function hide() {
+  open.value = false
+}
+
+function onOpenChange(value: boolean) {
+  open.value = value
+  if (value) return
+  if (!actionTaken) emit('dismiss')
+  actionTaken = false
+}
+
+defineExpose({ show, hide })
+</script>

src/components/searchbox/LinkReleaseNodeSubmenu.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import {
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const contentClass =
+  'z-1700 flex max-h-[80vh] min-w-[260px] flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const scrollClass = 'min-h-0 overflow-y-auto scrollbar-custom'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+function node(name: string, display_name = name): ComfyNodeDefImpl {
+  return { name, display_name } as ComfyNodeDefImpl
+}
+
+const category: LinkReleaseNodeCategory = {
+  key: 'comfy',
+  labelKey: 'contextMenu.Comfy Nodes',
+  icon: 'icon-[lucide--box]',
+  nodes: [
+    node('KSampler'),
+    node('VAEDecode', 'VAE Decode'),
+    node('VAEEncode', 'VAE Encode'),
+    node('CLIPTextEncode', 'CLIP Text Encode'),
+    node('LoadImage', 'Load Image'),
+    node('SaveImage', 'Save Image'),
+    node('EmptyLatentImage', 'Empty Latent Image')
+  ]
+}
+
+const meta: Meta<typeof LinkReleaseNodeSubmenu> = {
+  title: 'Components/Searchbox/LinkReleaseNodeSubmenu',
+  component: LinkReleaseNodeSubmenu
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function renderAnchored(side: 'left' | 'right'): Story['render'] {
+  return () => ({
+    components: {
+      DropdownMenuRoot,
+      DropdownMenuTrigger,
+      DropdownMenuPortal,
+      DropdownMenuContent,
+      DropdownMenuLabel,
+      LinkReleaseNodeSubmenu
+    },
+    setup() {
+      const anchorStyle =
+        side === 'right'
+          ? 'position: fixed; top: 64px; right: 16px;'
+          : 'position: fixed; top: 64px; left: 16px;'
+      return {
+        anchorStyle,
+        contentClass,
+        scrollClass,
+        itemClass,
+        category,
+        side
+      }
+    },
+    template: `
+      <div style="height: 480px;">
+        <DropdownMenuRoot default-open>
+          <DropdownMenuTrigger as-child>
+            <button :style="anchorStyle" class="rounded-md border border-interface-menu-stroke bg-interface-menu-surface px-3 py-1.5 text-sm text-base-foreground">
+              Compatible Nodes
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              :class="contentClass"
+              :side="side === 'right' ? 'bottom' : 'bottom'"
+              :align="side === 'right' ? 'end' : 'start'"
+              :side-offset="4"
+            >
+              <DropdownMenuLabel class="block truncate px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase">
+                Compatible Nodes
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                :category="category"
+                :item-class="itemClass"
+                :content-class="contentClass"
+                :scroll-class="scrollClass"
+              />
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+      </div>
+    `
+  })
+}
+
+/** Anchored near the LEFT edge: the submenu opens to the RIGHT (normal). */
+export const OpensRight: Story = { render: renderAnchored('left') }
+
+/**
+ * Anchored near the RIGHT edge: with no room on the right, Floating UI flips the
+ * submenu to the LEFT, landing flush against the parent menu's left edge.
+ */
+export const FlipsLeft: Story = { render: renderAnchored('right') }

src/components/searchbox/LinkReleaseNodeSubmenu.vue

@@ -0,0 +1,148 @@
+<template>
+  <DropdownMenuSub v-model:open="open">
+    <DropdownMenuSubTrigger :class="triggerClass">
+      <i :class="cn(category.icon, 'size-4 shrink-0 opacity-80')" />
+      <span class="flex-1 truncate">{{ t(category.labelKey) }}</span>
+      <span
+        class="rounded-full bg-interface-menu-keybind-surface-default px-1.5 text-xs text-muted-foreground"
+      >
+        {{ category.nodes.length }}
+      </span>
+      <i class="icon-[lucide--chevron-right] size-4 shrink-0 opacity-60" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <!--
+        Opens to the right of the trigger; when there's no room, Floating UI
+        flips it to the LEFT. Because submenus default to prioritize-position
+        (offset -> flip -> shift), the flipped panel lands flush against the
+        parent menu's left edge by its OWN width (no PrimeVue-style overlap that
+        shifts by the parent item width). side-offset is negative so it overlaps
+        the parent edge by 2px to bridge the hover gap, and collision-padding
+        keeps an 8px viewport margin so it flips before touching the edge
+        (mirrors DockFilterMenu's SUB_OVERLAP / M).
+      -->
+      <DropdownMenuSubContent
+        :class="contentClass"
+        side="right"
+        align="start"
+        :side-offset="-2"
+        :align-offset="-5"
+        :collision-padding="8"
+        @open-auto-focus.prevent="focusSearch"
+      >
+        <div class="shrink-0 p-2">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :placeholder="
+                t('g.searchPlaceholder', { subject: t(category.labelKey) })
+              "
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+        <div :class="scrollClass">
+          <DropdownMenuItem
+            v-for="nodeDef in filteredNodes"
+            :key="nodeDef.name"
+            :class="itemClass"
+            @select="emit('select', nodeDef)"
+          >
+            <span class="min-w-0 flex-1 truncate">
+              {{ nodeDef.display_name }}
+            </span>
+          </DropdownMenuItem>
+          <div
+            v-if="filteredNodes.length === 0"
+            class="px-3 py-2 text-sm text-muted-foreground"
+          >
+            {{ t('g.noResults') }}
+          </div>
+        </div>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import { filterNodesByName } from './linkReleaseMenuModel'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const { category, itemClass, contentClass, scrollClass } = defineProps<{
+  category: LinkReleaseNodeCategory
+  itemClass: string
+  contentClass: string
+  scrollClass: string
+}>()
+
+const emit = defineEmits<{
+  select: [nodeDef: ComfyNodeDefImpl]
+}>()
+
+const { t } = useI18n()
+
+const open = ref(false)
+const query = ref('')
+const searchInput = ref<HTMLInputElement>()
+
+const triggerClass = computed(() =>
+  cn(itemClass, 'data-[state=open]:bg-interface-menu-component-surface-hovered')
+)
+
+const filteredNodes = computed(() =>
+  filterNodesByName(category.nodes, query.value)
+)
+
+watch(open, (isOpen) => {
+  if (!isOpen) query.value = ''
+})
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function focusFirstNode(target: HTMLElement) {
+  const panel = target.closest<HTMLElement>('[role="menu"]')
+  panel
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onSearchKeydown(event: KeyboardEvent) {
+  // Let Reka handle submenu/menu navigation keys natively.
+  if (event.key === 'Escape' || event.key === 'ArrowLeft') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstNode(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter') {
+    const first = filteredNodes.value[0]
+    if (first) emit('select', first)
+  }
+}
+</script>

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -52,6 +52,13 @@
         />
       </template>
     </Dialog>
+    <LinkReleaseContextMenu
+      ref="linkReleaseMenu"
+      :context="linkReleaseContext"
+      @select-node="connectNodeFromMenu"
+      @add-reroute="addRerouteFromMenu"
+      @dismiss="reset"
+    />
   </div>
 </template>
 
@@ -63,7 +70,11 @@ import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
 import type { Point } from '@/lib/litegraph/src/interfaces'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphNode,
+  LiteGraph,
+  isNodeSlot
+} from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
@@ -81,11 +92,12 @@ import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import type { RootCategoryId } from '@/components/searchbox/v2/rootCategories'
 
+import LinkReleaseContextMenu from './LinkReleaseContextMenu.vue'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
 import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 
 let triggerEvent: CanvasPointerEvent | null = null
-let listenerController: AbortController | null = null
 let disconnectOnReset = false
 
 const settingStore = useSettingStore()
@@ -108,6 +120,8 @@ const enableNodePreview = computed(
     windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
 )
 const defaultRootFilter = ref<RootCategoryId | null>(null)
+const linkReleaseMenu = ref<InstanceType<typeof LinkReleaseContextMenu>>()
+const linkReleaseContext = ref<LinkReleaseContext | null>(null)
 watch(visible, (isVisible) => {
   if (!isVisible) return
   defaultRootFilter.value = !canvasStore.canvas?.graph?.nodes?.length
@@ -139,13 +153,16 @@ function closeDialog() {
   visible.value = false
 }
 
-function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
-  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+function connectNewNode(
+  nodeDef: ComfyNodeDefImpl,
+  options: { ghost?: boolean; dragEvent?: MouseEvent } = {}
+) {
+  const { ghost = false, dragEvent } = options
   const node = withNodeAddSource('search_modal', () =>
     litegraphService.addNodeOnGraph(
       nodeDef,
       { pos: getNewNodeLocation() },
-      { ghost: useSearchBoxV2.value && followCursor, dragEvent }
+      { ghost, dragEvent }
     )
   )
   if (!node) return
@@ -160,6 +177,14 @@ function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+}
+
+function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
+  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+  connectNewNode(nodeDef, {
+    ghost: useSearchBoxV2.value && followCursor,
+    dragEvent
+  })
   window.requestAnimationFrame(closeDialog)
 }
 
@@ -212,62 +237,38 @@ function showContextMenu(e: CanvasPointerEvent) {
   const firstLink = getFirstLink()
   if (!firstLink) return
 
-  const { node, fromSlot, toType } = firstLink
-  const commonOptions = {
-    e,
-    allow_searchbox: true,
-    showSearchBox: () => {
-      cancelResetOnContextClose()
-      showSearchBox(e)
-    }
+  const { fromSlot, toType } = firstLink
+  linkReleaseContext.value = {
+    dataType: fromSlot.type?.toString() ?? '',
+    slotName: fromSlot.name ?? '',
+    isFromOutput: toType === 'input'
   }
-  const afterRerouteId = firstLink.fromReroute?.id
-  const connectionOptions =
-    toType === 'input'
-      ? { nodeFrom: node, slotFrom: fromSlot, afterRerouteId }
-      : { nodeTo: node, slotTo: fromSlot, afterRerouteId }
-
-  const canvas = canvasStore.getCanvas()
-  const menu = canvas.showConnectionMenu({
-    ...connectionOptions,
-    ...commonOptions
-  })
-
-  if (!menu) {
-    console.warn('No menu was returned from showConnectionMenu')
-    return
-  }
-
   triggerEvent = e
-  listenerController = new AbortController()
-  const { signal } = listenerController
-  const options = { once: true, signal }
+  linkReleaseMenu.value?.show(e)
+}
 
-  // Connect the node after it is created via context menu
-  useEventListener(
-    canvas.canvas,
-    'connect-new-default-node',
-    (createEvent) => {
-      if (!(createEvent instanceof CustomEvent))
-        throw new Error('Invalid event')
+function connectNodeFromMenu(nodeDef: ComfyNodeDefImpl) {
+  connectNewNode(nodeDef)
+  reset()
+}
 
-      const node: unknown = createEvent.detail?.node
-      if (!(node instanceof LGraphNode)) throw new Error('Invalid node')
-
-      disconnectOnReset = false
-      createEvent.preventDefault()
-      canvas.linkConnector.connectToNode(node, e)
-    },
-    options
-  )
-
-  // Reset when the context menu is closed
-  const cancelResetOnContextClose = useEventListener(
-    menu.controller.signal,
-    'abort',
-    reset,
-    options
-  )
+function addRerouteFromMenu() {
+  const firstLink = getFirstLink()
+  const node = firstLink?.node
+  if (
+    firstLink &&
+    triggerEvent &&
+    node instanceof LGraphNode &&
+    isNodeSlot(firstLink.fromSlot)
+  ) {
+    node.connectFloatingReroute(
+      [triggerEvent.canvasX, triggerEvent.canvasY],
+      firstLink.fromSlot,
+      firstLink.fromReroute?.id
+    )
+    useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+  }
+  reset()
 }
 
 // Disable litegraph's default behavior of release link and search box.
@@ -343,8 +344,6 @@ function handleDroppedOnCanvas(e: CustomEvent<CanvasPointerEvent>) {
 
 // Resets litegraph state
 function reset() {
-  listenerController?.abort()
-  listenerController = null
   triggerEvent = null
 
   const canvas = canvasStore.getCanvas()

src/components/searchbox/linkReleaseMenuModel.test.ts

@@ -0,0 +1,188 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+import {
+  buildLinkReleaseNodeCategories,
+  filterNodesByName,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
+
+function coreNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function customNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.CustomNodes },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function partnerNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: true
+  } as ComfyNodeDefImpl
+}
+
+const ksampler = coreNode('KSampler')
+const vaeDecode = coreNode('VAEDecode', 'VAE Decode')
+const rerouteNode = coreNode('Reroute')
+
+function createContext(
+  overrides: Partial<LinkReleaseContext> = {}
+): LinkReleaseContext {
+  return {
+    dataType: 'MODEL',
+    slotName: 'model',
+    isFromOutput: true,
+    ...overrides
+  }
+}
+
+describe('getLinkReleaseHeaderLabel', () => {
+  it('combines slot name and data type', () => {
+    const label = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'model', dataType: 'MODEL' })
+    )
+    expect(label).toBe('model | MODEL')
+  })
+
+  it('falls back to whichever value is present', () => {
+    const onlyType = getLinkReleaseHeaderLabel(
+      createContext({ slotName: '', dataType: 'IMAGE' })
+    )
+    const onlyName = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'clip', dataType: '' })
+    )
+    expect(onlyType).toBe('IMAGE')
+    expect(onlyName).toBe('clip')
+  })
+})
+
+describe('getLinkReleaseSuggestions', () => {
+  it('excludes the Reroute node', () => {
+    const suggestions = getLinkReleaseSuggestions([rerouteNode, vaeDecode])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+
+  it('preserves the incoming order of remaining nodes', () => {
+    const suggestions = getLinkReleaseSuggestions([vaeDecode, ksampler])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode', 'KSampler'])
+  })
+})
+
+describe('buildLinkReleaseNodeCategories', () => {
+  it('groups nodes by source into comfy, extensions and partner buckets', () => {
+    const ext = customNode('ExtNode', 'Ext Node')
+    const partner = partnerNode('PartnerNode', 'Partner Node')
+
+    const categories = buildLinkReleaseNodeCategories([ksampler, ext, partner])
+    const byKey = Object.fromEntries(categories.map((c) => [c.key, c]))
+
+    expect(byKey.comfy.nodes.map((n) => n.name)).toContain('KSampler')
+    expect(byKey.extensions.nodes.map((n) => n.name)).toContain('ExtNode')
+    expect(byKey.partner.nodes.map((n) => n.name)).toContain('PartnerNode')
+  })
+
+  it('omits empty buckets', () => {
+    const categories = buildLinkReleaseNodeCategories([ksampler])
+    expect(categories.map((c) => c.key)).toEqual(['comfy'])
+  })
+
+  it('orders buckets comfy, extensions, partner', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      partnerNode('P'),
+      customNode('E'),
+      coreNode('C')
+    ])
+    expect(categories.map((c) => c.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('sorts nodes alphabetically by display name within a bucket', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      coreNode('B'),
+      coreNode('A')
+    ])
+    expect(categories[0].nodes.map((n) => n.display_name)).toEqual(['A', 'B'])
+  })
+
+  it('classifies api-category nodes as partner', () => {
+    const apiNode = {
+      name: 'ApiThing',
+      display_name: 'Api Thing',
+      nodeSource: { type: NodeSourceType.Core },
+      api_node: false,
+      category: 'api node/openai'
+    } as ComfyNodeDefImpl
+
+    const categories = buildLinkReleaseNodeCategories([apiNode])
+    expect(categories.map((c) => c.key)).toEqual(['partner'])
+  })
+})
+
+describe('filterNodesByName', () => {
+  it('returns all nodes when query is blank', () => {
+    expect(filterNodesByName([ksampler, vaeDecode], '  ')).toHaveLength(2)
+  })
+
+  it('matches display name case-insensitively', () => {
+    const result = filterNodesByName([ksampler, vaeDecode], 'vae')
+    expect(result.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+})
+
+describe('searchLinkReleaseNodes', () => {
+  const categories = buildLinkReleaseNodeCategories([
+    coreNode('LoadImage', 'Load Image'),
+    customNode('ImageBlend', 'Image Blend'),
+    partnerNode('ImageGen', 'Image Gen'),
+    coreNode('KSampler')
+  ])
+
+  it('returns no matches for a blank query', () => {
+    expect(searchLinkReleaseNodes(categories, '   ')).toEqual([])
+  })
+
+  it('flattens matching nodes across categories, tagged with their category', () => {
+    const matches = searchLinkReleaseNodes(categories, 'image')
+    expect(matches.map((m) => m.node.name)).toEqual([
+      'LoadImage',
+      'ImageBlend',
+      'ImageGen'
+    ])
+    expect(matches.map((m) => m.category.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('matches display name case-insensitively', () => {
+    const matches = searchLinkReleaseNodes(categories, 'ksampler')
+    expect(matches.map((m) => m.node.name)).toEqual(['KSampler'])
+    expect(matches[0].category.key).toBe('comfy')
+  })
+
+  it('returns an empty list when nothing matches', () => {
+    expect(searchLinkReleaseNodes(categories, 'zzz')).toEqual([])
+  })
+})

src/components/searchbox/linkReleaseMenuModel.ts

@@ -0,0 +1,141 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+export interface LinkReleaseContext {
+  /** The data type of the slot the link was dragged from (e.g. "MODEL"). */
+  dataType: string
+  /** The name of the slot the link was dragged from (e.g. "model"). */
+  slotName: string
+  /**
+   * Whether the released link originates from an output slot, meaning the new
+   * node will be connected to via one of its inputs.
+   */
+  isFromOutput: boolean
+}
+
+type LinkReleaseCategoryKey = 'comfy' | 'extensions' | 'partner'
+
+export interface LinkReleaseNodeCategory {
+  key: LinkReleaseCategoryKey
+  /** i18n key for the group heading. */
+  labelKey: string
+  /** Iconify class shown beside the group label. */
+  icon: string
+  /** Nodes in the group, sorted alphabetically by display name. */
+  nodes: ComfyNodeDefImpl[]
+}
+
+const CATEGORY_META: Record<
+  LinkReleaseCategoryKey,
+  { labelKey: string; icon: string }
+> = {
+  comfy: { labelKey: 'contextMenu.Comfy Nodes', icon: 'icon-[lucide--box]' },
+  extensions: {
+    labelKey: 'contextMenu.Extensions',
+    icon: 'icon-[lucide--puzzle]'
+  },
+  partner: {
+    labelKey: 'contextMenu.Partner Nodes',
+    icon: 'icon-[lucide--handshake]'
+  }
+}
+
+const CATEGORY_ORDER: LinkReleaseCategoryKey[] = [
+  'comfy',
+  'extensions',
+  'partner'
+]
+
+export function getLinkReleaseHeaderLabel(context: LinkReleaseContext): string {
+  const { slotName, dataType } = context
+  if (slotName && dataType) return `${slotName} | ${dataType}`
+  return slotName || dataType
+}
+
+function classifyNode(node: ComfyNodeDefImpl): LinkReleaseCategoryKey {
+  if (node.api_node || node.category?.startsWith('api node')) return 'partner'
+  if (
+    node.nodeSource.type === NodeSourceType.Core ||
+    node.nodeSource.type === NodeSourceType.Essentials
+  ) {
+    return 'comfy'
+  }
+  return 'extensions'
+}
+
+function byDisplayName(a: ComfyNodeDefImpl, b: ComfyNodeDefImpl): number {
+  return a.display_name.localeCompare(b.display_name)
+}
+
+/**
+ * Group slot-compatible nodes into source buckets for the cascading menu.
+ * Empty buckets are omitted and each bucket's nodes are sorted by display name.
+ */
+export function buildLinkReleaseNodeCategories(
+  compatibleNodes: ComfyNodeDefImpl[]
+): LinkReleaseNodeCategory[] {
+  const buckets: Record<LinkReleaseCategoryKey, ComfyNodeDefImpl[]> = {
+    comfy: [],
+    extensions: [],
+    partner: []
+  }
+
+  for (const node of compatibleNodes) {
+    buckets[classifyNode(node)].push(node)
+  }
+
+  return CATEGORY_ORDER.filter((key) => buckets[key].length > 0).map((key) => ({
+    key,
+    labelKey: CATEGORY_META[key].labelKey,
+    icon: CATEGORY_META[key].icon,
+    nodes: [...buckets[key]].sort(byDisplayName)
+  }))
+}
+
+/** Quick-add suggestions for the released slot, excluding the Reroute node. */
+export function getLinkReleaseSuggestions(
+  defaultNodeDefs: ComfyNodeDefImpl[]
+): ComfyNodeDefImpl[] {
+  return defaultNodeDefs.filter((nodeDef) => nodeDef.name !== 'Reroute')
+}
+
+/** Case-insensitive filter of a node list by display name. */
+export function filterNodesByName(
+  nodes: ComfyNodeDefImpl[],
+  query: string
+): ComfyNodeDefImpl[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return nodes
+  return nodes.filter((nodeDef) =>
+    nodeDef.display_name.toLowerCase().includes(trimmed)
+  )
+}
+
+/** A node surfaced by the root flat-value search, tagged with its category. */
+export interface LinkReleaseNodeMatch {
+  category: LinkReleaseNodeCategory
+  node: ComfyNodeDefImpl
+}
+
+/**
+ * Flat-value search across every category submenu: when the root search has
+ * text we surface matching nodes inline (tagged with their category) so a node
+ * can be picked straight from the root without first drilling into a submenu.
+ * Results preserve category order, then per-category display-name order.
+ */
+export function searchLinkReleaseNodes(
+  categories: LinkReleaseNodeCategory[],
+  query: string
+): LinkReleaseNodeMatch[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return []
+  const matches: LinkReleaseNodeMatch[] = []
+  for (const category of categories) {
+    for (const node of category.nodes) {
+      if (node.display_name.toLowerCase().includes(trimmed)) {
+        matches.push({ category, node })
+      }
+    }
+  }
+  return matches
+}

src/lib/litegraph/src/litegraph.ts

@@ -170,6 +170,7 @@ export type { TWidgetType, TWidgetValue, IWidgetOptions } from './types/widgets'
 export {
   findUsedSubgraphIds,
   getDirectSubgraphIds,
+  isNodeSlot,
   isSubgraphInput,
   isSubgraphOutput
 } from './subgraph/subgraphUtils'

src/locales/en/main.json

@@ -593,6 +593,12 @@
     "Bypass": "Bypass",
     "Copy (Clipspace)": "Copy (Clipspace)",
     "Add Node": "Add Node",
+    "Add Reroute": "Add Reroute",
+    "Most Relevant": "Most Relevant",
+    "Comfy Nodes": "Comfy Nodes",
+    "Extensions": "Extensions",
+    "Partner Nodes": "Partner Nodes",
+    "Compatible Nodes": "Compatible Nodes",
     "Add Group": "Add Group",
     "Manage Group Nodes": "Manage Group Nodes",
     "Add Group For Selected Nodes": "Add Group For Selected Nodes",

src/services/litegraphService.ts

@@ -21,6 +21,7 @@ import {
   SubgraphNode,
   createBounds
 } from '@/lib/litegraph/src/litegraph'
+import { overlapBounding } from '@/lib/litegraph/src/measure'
 import type {
   CreateNodeOptions,
   GraphAddOptions,
@@ -944,9 +945,39 @@ export const useLitegraphService = () => {
     if (!graph || !node) return null
 
     graph.add(node, addOptions)
+    if (!addOptions?.ghost) {
+      resolveOverlap(node, graph)
+      centerOnNewNode(node)
+    }
     return node
   }
 
+  const OVERLAP_GAP = 20
+  const OVERLAP_MAX_ITER = 100
+
+  function resolveOverlap(
+    node: LGraphNode,
+    graph: { nodes: LGraphNode[] }
+  ): void {
+    node.updateArea()
+    let iter = 0
+    while (
+      iter++ < OVERLAP_MAX_ITER &&
+      graph.nodes.some(
+        (n) =>
+          n.id !== node.id && overlapBounding(node.boundingRect, n.boundingRect)
+      )
+    ) {
+      node.pos[1] += node.size[1] + OVERLAP_GAP
+      node.updateArea()
+    }
+  }
+
+  function centerOnNewNode(node: LGraphNode): void {
+    node.updateArea()
+    app.canvas?.animateToBounds(node.boundingRect, { zoom: 0 })
+  }
+
   function getCanvasCenter(): Point {
     const dpi = Math.max(window.devicePixelRatio ?? 1, 1)
     const visibleArea = app.canvas?.ds?.visible_area