expand node search box V2 e2e coverage

- extend search v2 fixtures
 - add additional tests
 - add data-testid for targeting elements
 - rework tests to work with new menu UI

browser_tests/fixtures/ComfyPage.ts

@@ -216,7 +216,7 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
-    this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
+    this.searchBoxV2 = new ComfyNodeSearchBoxV2(this)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -1,18 +1,25 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
 import type { ComfyPage } from '../ComfyPage'
 
 export class ComfyNodeSearchBoxV2 {
   readonly dialog: Locator
   readonly input: Locator
+  readonly filterSearch: Locator
   readonly results: Locator
   readonly filterOptions: Locator
+  readonly filterChips: Locator
+  readonly noResults: Locator
 
-  constructor(readonly page: Page) {
+  constructor(private comfyPage: ComfyPage) {
+    const page = comfyPage.page
     this.dialog = page.getByRole('search')
-    this.input = this.dialog.locator('input[type="text"]')
+    this.input = this.dialog.getByRole('combobox')
+    this.filterSearch = this.dialog.getByRole('textbox', { name: 'Search' })
     this.results = this.dialog.getByTestId('result-item')
     this.filterOptions = this.dialog.getByTestId('filter-option')
+    this.filterChips = this.dialog.getByTestId('filter-chip')
+    this.noResults = this.dialog.getByTestId('no-results')
   }
 
   categoryButton(categoryId: string): Locator {
@@ -23,7 +30,37 @@ export class ComfyNodeSearchBoxV2 {
     return this.dialog.getByRole('button', { name })
   }
 
-  async reload(comfyPage: ComfyPage) {
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  async applyTypeFilter(
+    filterName: 'Input' | 'Output',
+    typeName: string
+  ): Promise<void> {
+    await this.filterBarButton(filterName).click()
+    await this.filterOptions.first().waitFor({ state: 'visible' })
+    await this.filterSearch.fill(typeName)
+    await this.filterOptions.filter({ hasText: typeName }).first().click()
+    // Close the popover by clicking the trigger button again
+    await this.filterBarButton(filterName).click()
+    await this.filterOptions.first().waitFor({ state: 'hidden' })
+  }
+
+  async removeFilterChip(index: number = 0): Promise<void> {
+    await this.filterChips.nth(index).getByTestId('chip-delete').click()
+  }
+
+  async getResultCount(): Promise<number> {
+    await this.results.first().waitFor({ state: 'visible' })
+    return this.results.count()
+  }
+
+  async open(): Promise<void> {
+    await this.comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
+    await this.input.waitFor({ state: 'visible' })
+  }
+
+  async enableV2Search(): Promise<void> {
+    await this.comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'default'
+    )
   }
 }

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -1,6 +1,7 @@
 import type { Locator } from '@playwright/test'
 
 import type {
+  GraphAddOptions,
   LGraph,
   LGraphNode
 } from '../../../src/lib/litegraph/src/litegraph'
@@ -23,6 +24,12 @@ export class NodeOperationsHelper {
     })
   }
 
+  async getLinkCount(): Promise<number> {
+    return await this.page.evaluate(() => {
+      return window.app?.rootGraph?.links?.size ?? 0
+    })
+  }
+
   async getSelectedGraphNodesCount(): Promise<number> {
     return await this.page.evaluate(() => {
       return (
@@ -33,6 +40,45 @@ export class NodeOperationsHelper {
     })
   }
 
+  async getSelectedNodeIds(): Promise<NodeId[]> {
+    return await this.page.evaluate(() => {
+      const selected = window.app?.canvas?.selected_nodes
+      if (!selected) return []
+      return Object.keys(selected).map(Number)
+    })
+  }
+
+  /**
+   * Add a node to the graph by type.
+   * @param type - The node type (e.g. 'KSampler', 'VAEDecode')
+   * @param options - GraphAddOptions (ghost, skipComputeOrder). When ghost is
+   *   true and cursorPosition is provided, a synthetic MouseEvent is created
+   *   as the dragEvent.
+   * @param cursorPosition - Client coordinates for ghost placement dragEvent
+   */
+  async addNode(
+    type: string,
+    options?: Omit<GraphAddOptions, 'dragEvent'>,
+    cursorPosition?: Position
+  ): Promise<NodeReference> {
+    const id = await this.page.evaluate(
+      ([nodeType, opts, cursor]) => {
+        const node = window.LiteGraph!.createNode(nodeType)!
+        const addOpts: Record<string, unknown> = { ...opts }
+        if (opts?.ghost && cursor) {
+          addOpts.dragEvent = new MouseEvent('click', {
+            clientX: cursor.x,
+            clientY: cursor.y
+          })
+        }
+        window.app!.graph.add(node, addOpts as GraphAddOptions)
+        return node.id
+      },
+      [type, options ?? {}, cursorPosition ?? null] as const
+    )
+    return new NodeReference(id, this.comfyPage)
+  }
+
   /** Reads from `window.app.graph` (the root workflow graph). */
   async getNodeCount(): Promise<number> {
     return await this.page.evaluate(() => window.app!.graph.nodes.length)

browser_tests/fixtures/selectors.ts

@@ -28,10 +28,15 @@ export const TestIds = {
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
+    errorOverlaySeeErrors: 'error-overlay-see-errors',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    errorCardFindOnGithub: 'error-card-find-on-github',
+    errorCardCopy: 'error-card-copy',
     about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    whatsNewSection: 'whats-new-section',
+    missingNodePacksGroup: 'error-group-missing-node',
+    missingModelsGroup: 'error-group-missing-model'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -76,6 +81,10 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
+  },
+  errors: {
+    imageLoadError: 'error-loading-image',
+    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -101,3 +110,4 @@ export type TestIdValue =
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/tests/dialog.spec.ts

@@ -28,7 +28,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
   })
 
@@ -42,11 +42,13 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
 
     // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     const missingNodeCard = comfyPage.page.getByTestId(
@@ -75,7 +77,9 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     await expect(errorOverlay).toBeVisible()
 
     // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify MissingNodeCard is rendered in the errors tab
@@ -165,17 +169,19 @@ test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
       TestIds.dialogs.errorOverlay
     )
     await expect(errorOverlay).toBeVisible()
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByRole('button', {
-      name: 'Find on GitHub'
-    })
+    const findOnGithubButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorCardFindOnGithub
+    )
     await expect(findOnGithubButton).toBeVisible()
 
     // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByRole('button', { name: 'Copy' })
+    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
     await expect(copyButton).toBeVisible()
   })
 })
@@ -204,7 +210,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -220,7 +226,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -231,13 +237,10 @@ test.describe('Missing models in Error Tab', () => {
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).not.toBeVisible()
+    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
   })
 
   // Flaky test after parallelization

browser_tests/tests/interaction.spec.ts

@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     )
   })
 
+  const generateUniqueFilename = (extension = '') =>
+    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
   test.describe('Restore all open workflows on reload', () => {
     let workflowA: string
     let workflowB: string
 
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
@@ -829,6 +829,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     })
   })
 
+  test.describe('Restore workflow tabs after browser restart', () => {
+    let workflowA: string
+    let workflowB: string
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage fallback pointers to be written
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
+
+      // Simulate browser restart: clear sessionStorage (lost on close)
+      // but keep localStorage (survives browser restart)
+      await comfyPage.page.evaluate(() => {
+        sessionStorage.clear()
+      })
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      // Wait for both restored tabs to render (localStorage fallback is async)
+      await expect(
+        comfyPage.page.locator('.workflow-tabs .workflow-label', {
+          hasText: workflowA
+        })
+      ).toBeVisible()
+
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowA, workflowB])
+      )
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
+      )
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+  })
+
   test('Auto fit view after loading workflow', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.EnableWorkflowViewRestore',

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -23,18 +23,14 @@ async function addGhostAtCenter(comfyPage: ComfyPage) {
   await comfyPage.page.mouse.move(centerX, centerY)
   await comfyPage.nextFrame()
 
-  const nodeId = await comfyPage.page.evaluate(
-    ([clientX, clientY]) => {
-      const node = window.LiteGraph!.createNode('VAEDecode')!
-      const event = new MouseEvent('click', { clientX, clientY })
-      window.app!.graph.add(node, { ghost: true, dragEvent: event })
-      return node.id
-    },
-    [centerX, centerY] as const
+  const nodeRef = await comfyPage.nodeOps.addNode(
+    'VAEDecode',
+    { ghost: true },
+    { x: centerX, y: centerY }
   )
   await comfyPage.nextFrame()
 
-  return { nodeId, centerX, centerY }
+  return { nodeId: nodeRef.id, centerX, centerY }
 }
 
 function getNodeById(comfyPage: ComfyPage, nodeId: number | string) {
@@ -82,7 +78,6 @@ for (const mode of ['litegraph', 'vue'] as const) {
         },
         [centerX, centerY] as const
       )
-      await comfyPage.nextFrame()
 
       expect(Math.abs(result.diffX)).toBeLessThan(5)
       expect(Math.abs(result.diffY)).toBeLessThan(5)
@@ -158,5 +153,53 @@ for (const mode of ['litegraph', 'vue'] as const) {
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
     })
+
+    test('moving ghost onto existing node and clicking places correctly', async ({
+      comfyPage
+    }) => {
+      // Get existing KSampler node from the default workflow
+      const [ksamplerRef] =
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      const ksamplerPos = await ksamplerRef.getPosition()
+      const ksamplerSize = await ksamplerRef.getSize()
+      const targetX = Math.round(ksamplerPos.x + ksamplerSize.width / 2)
+      const targetY = Math.round(ksamplerPos.y + ksamplerSize.height / 2)
+
+      // Start ghost placement away from the existing node
+      const startX = 50
+      const startY = 50
+      await comfyPage.page.mouse.move(startX, startY, { steps: 20 })
+      await comfyPage.nextFrame()
+
+      const ghostRef = await comfyPage.nodeOps.addNode(
+        'VAEDecode',
+        { ghost: true },
+        { x: startX, y: startY }
+      )
+      await comfyPage.nextFrame()
+
+      // Move ghost onto the existing node
+      await comfyPage.page.mouse.move(targetX, targetY, { steps: 20 })
+      await comfyPage.nextFrame()
+
+      // Click to finalize — on top of the existing node
+      await comfyPage.page.mouse.click(targetX, targetY)
+      await comfyPage.nextFrame()
+
+      // Ghost should be placed (no longer ghost)
+      const ghostResult = await getNodeById(comfyPage, ghostRef.id)
+      expect(ghostResult).not.toBeNull()
+      expect(ghostResult!.ghost).toBe(false)
+
+      // Ghost node should have moved from its start position toward where we clicked
+      const ghostPos = await ghostRef.getPosition()
+      expect(
+        Math.abs(ghostPos.x - startX) > 20 || Math.abs(ghostPos.y - startY) > 20
+      ).toBe(true)
+
+      // Existing node should NOT be selected
+      const selectedIds = await comfyPage.nodeOps.getSelectedNodeIds()
+      expect(selectedIds).not.toContain(ksamplerRef.id)
+    })
   })
 }

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -5,8 +5,7 @@ import {
 
 test.describe('Node search box V2', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.searchBoxV2.enableV2Search()
     await comfyPage.settings.setSetting(
       'Comfy.LinkRelease.Action',
       'search box'
@@ -15,15 +14,13 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.searchBoxV2.reload(comfyPage)
   })
 
   test('Can open search and add node', async ({ comfyPage }) => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+    await searchBoxV2.open()
 
     await searchBoxV2.input.fill('KSampler')
     await expect(searchBoxV2.results.first()).toBeVisible()
@@ -39,8 +36,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+    await searchBoxV2.open()
 
     // Default results should be visible without typing
     await expect(searchBoxV2.results.first()).toBeVisible()
@@ -54,17 +50,16 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
   })
 
   test.describe('Category navigation', () => {
-    test('Favorites shows only bookmarked nodes', async ({ comfyPage }) => {
+    test('Bookmarked filter shows only bookmarked nodes', async ({
+      comfyPage
+    }) => {
       const { searchBoxV2 } = comfyPage
       await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
         'KSampler'
       ])
-      await searchBoxV2.reload(comfyPage)
+      await searchBoxV2.open()
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.categoryButton('favorites').click()
+      await searchBoxV2.filterBarButton('Bookmarked').click()
 
       await expect(searchBoxV2.results).toHaveCount(1)
       await expect(searchBoxV2.results.first()).toContainText('KSampler')
@@ -75,8 +70,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
       await searchBoxV2.categoryButton('sampling').click()
 
@@ -90,8 +84,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     test('Can filter by input type via filter bar', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
       // Click "Input" filter chip in the filter bar
       await searchBoxV2.filterBarButton('Input').click()
@@ -100,7 +93,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       await expect(searchBoxV2.filterOptions.first()).toBeVisible()
 
       // Type to narrow and select MODEL
-      await searchBoxV2.input.fill('MODEL')
+      await searchBoxV2.filterSearch.fill('MODEL')
       await searchBoxV2.filterOptions
         .filter({ hasText: 'MODEL' })
         .first()
@@ -119,8 +112,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       const { searchBoxV2 } = comfyPage
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
       await searchBoxV2.input.fill('KSampler')
       const results = searchBoxV2.results

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -5,8 +5,7 @@ import {
 
 test.describe('Node search box V2 extended', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.searchBoxV2.enableV2Search()
     await comfyPage.settings.setSetting(
       'Comfy.LinkRelease.Action',
       'search box'
@@ -15,13 +14,12 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.searchBoxV2.reload(comfyPage)
   })
 
   test('Double-click on empty canvas opens search', async ({ comfyPage }) => {
     const { searchBoxV2 } = comfyPage
 
-    await comfyPage.canvasOps.doubleClick()
+    await comfyPage.page.mouse.dblclick(200, 200, { delay: 5 })
     await expect(searchBoxV2.input).toBeVisible()
     await expect(searchBoxV2.dialog).toBeVisible()
   })
@@ -32,8 +30,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+    await searchBoxV2.open()
 
     await searchBoxV2.input.fill('KSampler')
     await expect(searchBoxV2.results.first()).toBeVisible()
@@ -45,29 +42,43 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     expect(newCount).toBe(initialCount)
   })
 
-  test('Search clears when reopening', async ({ comfyPage }) => {
+  test('Reopening search after Enter has no persisted state', async ({
+    comfyPage
+  }) => {
     const { searchBoxV2 } = comfyPage
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
+    await searchBoxV2.open()
     await searchBoxV2.input.fill('KSampler')
     await expect(searchBoxV2.results.first()).toBeVisible()
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).not.toBeVisible()
 
+    await searchBoxV2.open()
+    await expect(searchBoxV2.input).toHaveValue('')
+    await expect(searchBoxV2.filterChips).toHaveCount(0)
+  })
+
+  test('Reopening search after Escape has no persisted state', async ({
+    comfyPage
+  }) => {
+    const { searchBoxV2 } = comfyPage
+
+    await searchBoxV2.open()
+    await searchBoxV2.input.fill('KSampler')
+    await expect(searchBoxV2.results.first()).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(searchBoxV2.input).not.toBeVisible()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+    await searchBoxV2.open()
     await expect(searchBoxV2.input).toHaveValue('')
+    await expect(searchBoxV2.filterChips).toHaveCount(0)
   })
 
   test.describe('Category navigation', () => {
     test('Category navigation updates results', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
       await searchBoxV2.categoryButton('sampling').click()
       await expect(searchBoxV2.results.first()).toBeVisible()
@@ -85,59 +96,270 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     test('Filter chip removal restores results', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
-      // Record initial result text for comparison
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const unfilteredResults = await searchBoxV2.results.allTextContents()
+      // Search first to get a result set below the 64-item cap
+      await searchBoxV2.input.fill('Load')
+      const unfilteredCount = await searchBoxV2.getResultCount()
 
       // Apply Input filter with MODEL type
-      await searchBoxV2.filterBarButton('Input').click()
-      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
-      await searchBoxV2.input.fill('MODEL')
-      await searchBoxV2.filterOptions
-        .filter({ hasText: 'MODEL' })
-        .first()
-        .click()
-
-      // Verify filter chip appeared and results changed
-      const filterChip = searchBoxV2.dialog.locator(
-        '[data-testid="filter-chip"]'
-      )
-      await expect(filterChip).toBeVisible()
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const filteredResults = await searchBoxV2.results.allTextContents()
-      expect(filteredResults).not.toEqual(unfilteredResults)
+      await searchBoxV2.applyTypeFilter('Input', 'MODEL')
+      await expect(searchBoxV2.filterChips.first()).toBeVisible()
+      const filteredCount = await searchBoxV2.getResultCount()
+      expect(filteredCount).not.toBe(unfilteredCount)
 
       // Remove filter by clicking the chip delete button
-      await filterChip.getByTestId('chip-delete').click()
+      await searchBoxV2.removeFilterChip()
 
-      // Filter chip should be removed
-      await expect(filterChip).not.toBeVisible()
-      await expect(searchBoxV2.results.first()).toBeVisible()
+      // Filter chip should be removed and count restored
+      await expect(searchBoxV2.filterChips).toHaveCount(0)
+      const restoredCount = await searchBoxV2.getResultCount()
+      expect(restoredCount).toBe(unfilteredCount)
     })
   })
 
-  test.describe('Keyboard navigation', () => {
-    test('ArrowUp on first item keeps first selected', async ({
+  test.describe('Link release', () => {
+    test('Link release opens search with pre-applied type filter', async ({
       comfyPage
     }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
+      await comfyPage.canvasOps.disconnectEdge()
       await expect(searchBoxV2.input).toBeVisible()
 
+      // disconnectEdge pulls a CLIP link - should have a filter chip
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      await expect(searchBoxV2.filterChips.first()).toContainText('CLIP')
+    })
+
+    test('Link release auto-connects added node', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const nodeCountBefore = await comfyPage.nodeOps.getGraphNodesCount()
+      const linkCountBefore = await comfyPage.nodeOps.getLinkCount()
+
+      await comfyPage.canvasOps.disconnectEdge()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      // Search for a node that accepts CLIP input and select it
+      await searchBoxV2.input.fill('CLIP Text Encode')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(searchBoxV2.input).not.toBeVisible()
+
+      // A new node should have been added and auto-connected
+      const nodeCountAfter = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(nodeCountAfter).toBe(nodeCountBefore + 1)
+
+      const linkCountAfter = await comfyPage.nodeOps.getLinkCount()
+      expect(linkCountAfter).toBe(linkCountBefore)
+    })
+  })
+
+  test.describe('Filter combinations', () => {
+    test('Output type filter filters results', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      // Search first so both counts use the search service path
+      await searchBoxV2.input.fill('Load')
+      const unfilteredCount = await searchBoxV2.getResultCount()
+
+      await searchBoxV2.applyTypeFilter('Output', 'IMAGE')
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      const filteredCount = await searchBoxV2.getResultCount()
+
+      expect(filteredCount).not.toBe(unfilteredCount)
+    })
+
+    test('Multiple type filters (Input + Output) narrows results', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.applyTypeFilter('Input', 'MODEL')
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      const singleFilterCount = await searchBoxV2.getResultCount()
+
+      await searchBoxV2.applyTypeFilter('Output', 'LATENT')
+      await expect(searchBoxV2.filterChips).toHaveCount(2)
+      const dualFilterCount = await searchBoxV2.getResultCount()
+
+      expect(dualFilterCount).toBeLessThan(singleFilterCount)
+    })
+
+    test('Root filter + search query narrows results', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      // Search without root filter
+      await searchBoxV2.input.fill('Sampler')
+      const unfilteredCount = await searchBoxV2.getResultCount()
+
+      // Apply Comfy root filter on top of search
+      await searchBoxV2.filterBarButton('Comfy').click()
+      const filteredCount = await searchBoxV2.getResultCount()
+
+      // Root filter should narrow or maintain the result set
+      expect(filteredCount).toBeLessThan(unfilteredCount)
+      expect(filteredCount).toBeGreaterThan(0)
+    })
+
+    test('Root filter + category selection', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      // Click "Comfy" root filter
+      await searchBoxV2.filterBarButton('Comfy').click()
+      const comfyCount = await searchBoxV2.getResultCount()
+
+      // Under root filter, categories are prefixed (e.g. comfy/sampling)
+      await searchBoxV2.categoryButton('comfy/sampling').click()
+      const comfySamplingCount = await searchBoxV2.getResultCount()
+
+      expect(comfySamplingCount).toBeLessThan(comfyCount)
+    })
+  })
+
+  test.describe('Category sidebar', () => {
+    test('Category tree expand and collapse', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      // Click a parent category to expand it
+      const samplingBtn = searchBoxV2.categoryButton('sampling')
+      await samplingBtn.click()
+
+      // Look for subcategories (e.g. sampling/custom_sampling)
+      const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
+      await expect(subcategory).toBeVisible()
+
+      // Click sampling again to collapse
+      await samplingBtn.click()
+      await expect(subcategory).not.toBeVisible()
+    })
+
+    test('Subcategory narrows results to subset', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      // Select parent category
+      await searchBoxV2.categoryButton('sampling').click()
+      const parentCount = await searchBoxV2.getResultCount()
+
+      // Select subcategory
+      const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
+      await expect(subcategory).toBeVisible()
+      await subcategory.click()
+      const childCount = await searchBoxV2.getResultCount()
+
+      expect(childCount).toBeLessThan(parentCount)
+    })
+
+    test('Most relevant resets category filter', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      const defaultCount = await searchBoxV2.getResultCount()
+
+      // Select a category
+      await searchBoxV2.categoryButton('sampling').click()
+      const samplingCount = await searchBoxV2.getResultCount()
+      expect(samplingCount).not.toBe(defaultCount)
+
+      // Click "Most relevant" to reset
+      await searchBoxV2.categoryButton('most-relevant').click()
+      const resetCount = await searchBoxV2.getResultCount()
+      expect(resetCount).toBe(defaultCount)
+    })
+  })
+
+  test.describe('Search behavior', () => {
+    test('Click on result item adds node', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await searchBoxV2.open()
+
       await searchBoxV2.input.fill('KSampler')
-      const results = searchBoxV2.results
-      await expect(results.first()).toBeVisible()
+      await expect(searchBoxV2.results.first()).toBeVisible()
 
-      // First result should be selected by default
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      await searchBoxV2.results.first().click()
+      await expect(searchBoxV2.input).not.toBeVisible()
 
-      // ArrowUp on first item should keep first selected
-      await comfyPage.page.keyboard.press('ArrowUp')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(newCount).toBe(initialCount + 1)
+    })
+
+    test('Search narrows results progressively', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.input.fill('S')
+      const count1 = await searchBoxV2.getResultCount()
+
+      await searchBoxV2.input.fill('Sa')
+      const count2 = await searchBoxV2.getResultCount()
+
+      await searchBoxV2.input.fill('Sampler')
+      const count3 = await searchBoxV2.getResultCount()
+
+      expect(count2).toBeLessThan(count1)
+      expect(count3).toBeLessThan(count2)
+    })
+
+    test('No results shown for nonsensical query', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.input.fill('zzzxxxyyy_nonexistent_node')
+      await expect(searchBoxV2.noResults).toBeVisible()
+      await expect(searchBoxV2.results).toHaveCount(0)
+    })
+  })
+
+  test.describe('Filter chip interaction', () => {
+    test('Multiple filter chips displayed', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.applyTypeFilter('Input', 'MODEL')
+      await searchBoxV2.applyTypeFilter('Output', 'LATENT')
+
+      await expect(searchBoxV2.filterChips).toHaveCount(2)
+      await expect(searchBoxV2.filterChips.first()).toContainText('MODEL')
+      await expect(searchBoxV2.filterChips.nth(1)).toContainText('LATENT')
+    })
+  })
+
+  test.describe('Settings-driven behavior', () => {
+    test('Node ID name shown when setting enabled', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl.ShowIdName',
+        true
+      )
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.input.fill('VAE Decode')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+
+      const firstResult = searchBoxV2.results.first()
+      const idBadge = firstResult.getByTestId('node-id-badge')
+      await expect(idBadge).toBeVisible()
+      await expect(idBadge).toContainText('VAEDecode')
     })
   })
 })

browser_tests/tests/templates.spec.ts

@@ -206,6 +206,31 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
+  test(
+    'select components in filter bar render correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      // Wait for filter bar select components to render
+      const dialog = comfyPage.page.getByRole('dialog')
+      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      await expect(sortBySelect).toBeVisible()
+
+      // Screenshot the filter bar containing MultiSelect and SingleSelect
+      const filterBar = sortBySelect.locator(
+        'xpath=ancestor::div[contains(@class, "justify-between")]'
+      )
+      await expect(filterBar).toHaveScreenshot(
+        'template-filter-bar-select-components.png',
+        {
+          mask: [comfyPage.page.locator('.p-toast')]
+        }
+      )
+    }
+  )
+
   test(
     'template cards descriptions adjust height dynamically',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -47,6 +47,46 @@ test.describe('Vue Node Moving', () => {
     }
   )
 
+  test('should not move node when pointer moves less than drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
+    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
+
+    // The small movement should have selected the node, not dragged it
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('should move node when pointer moves beyond drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move 50px — well beyond the 3px drag threshold
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
+      steps: 20
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(headerPos, afterPos)
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

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

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
 
 test.describe('Vue Upload Widgets', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,14 @@ test.describe('Vue Upload Widgets', () => {
     ).not.toBeVisible()
 
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading image').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.imageLoadError).count()
+      )
       .toBeGreaterThan(0)
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading video').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.videoLoadError).count()
+      )
       .toBeGreaterThan(0)
   })
 })

packages/design-system/src/css/style.css

@@ -619,8 +619,6 @@
   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;
 }
 
 @utility scrollbar-hide {

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -200,6 +200,13 @@ describe('formatUtil', () => {
         '<span class="highlight">foo</span> bar <span class="highlight">foo</span>'
       )
     })
+
+    it('should highlight cross-word matches', () => {
+      const result = highlightQuery('convert image to mask', 'geto', false)
+      expect(result).toBe(
+        'convert ima<span class="highlight">ge to</span> mask'
+      )
+    })
   })
 
   describe('getFilenameDetails', () => {

packages/shared-frontend-utils/src/formatUtil.ts

@@ -74,10 +74,14 @@ export function highlightQuery(
     text = DOMPurify.sanitize(text)
   }
 
-  // Escape special regex characters in the query string
-  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  // Escape special regex characters, then join with optional
+  // whitespace so cross-word matches (e.g. "geto" → "imaGE TO") are
+  // highlighted correctly.
+  const pattern = Array.from(query)
+    .map((ch) => ch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('\\s*')
 
-  const regex = new RegExp(`(${escapedQuery})`, 'gi')
+  const regex = new RegExp(`(${pattern})`, 'gi')
   return text.replace(regex, '<span class="highlight">$1</span>')
 }
 

packages/tailwind-utils/src/index.ts

@@ -1,9 +1,17 @@
 import { clsx } from 'clsx'
 import type { ClassArray } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
 
 export type { ClassValue } from 'clsx'
 
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': ['text-xxs', 'text-xxxs']
+    }
+  }
+})
+
 export function cn(...inputs: ClassArray) {
   return twMerge(clsx(inputs))
 }

src/components/dialog/content/error/FindIssueButton.vue

@@ -19,10 +19,7 @@ const props = defineProps<{
 
 const queryString = computed(() => props.errorMessage + ' is:issue')
 
-/**
- * Open GitHub issues search and track telemetry.
- */
-const openGitHubIssues = () => {
+function openGitHubIssues() {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'error_dialog_find_existing_issues_clicked'
   })

src/components/error/ErrorOverlay.vue

@@ -49,7 +49,12 @@
           <Button variant="muted-textonly" size="unset" @click="dismiss">
             {{ t('g.dismiss') }}
           </Button>
-          <Button variant="secondary" size="lg" @click="seeErrors">
+          <Button
+            variant="secondary"
+            size="lg"
+            data-testid="error-overlay-see-errors"
+            @click="seeErrors"
+          >
             {{
               appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
             }}

src/components/input/MultiSelect.test.ts

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import MultiSelect from './MultiSelect.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        multiSelectDropdown: 'Multi-select dropdown',
+        noResultsFound: 'No results found',
+        search: 'Search',
+        clearAll: 'Clear all',
+        itemsSelected: 'Items selected'
+      }
+    }
+  }
+})
+
+describe('MultiSelect', () => {
+  function createWrapper() {
+    return mount(MultiSelect, {
+      attachTo: document.body,
+      global: {
+        plugins: [i18n]
+      },
+      props: {
+        modelValue: [],
+        label: 'Category',
+        options: [
+          { name: 'One', value: 'one' },
+          { name: 'Two', value: 'two' }
+        ]
+      }
+    })
+  }
+
+  it('keeps open-state border styling available while the dropdown is open', async () => {
+    const wrapper = createWrapper()
+
+    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
+
+    expect(trigger.classes()).toContain(
+      'data-[state=open]:border-node-component-border'
+    )
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+
+    await trigger.trigger('click')
+    await nextTick()
+
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(trigger.attributes('data-state')).toBe('open')
+
+    wrapper.unmount()
+  })
+})

src/components/input/MultiSelect.vue

@@ -1,207 +1,215 @@
 <template>
-  <!--
-    Note: Unlike SingleSelect, we don't need an explicit options prop because:
-    1. Our value template only shows a static label (not dynamic based on selection)
-    2. We display a count badge instead of actual selected labels
-    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    option-label="name" is required because our option template directly accesses option.name
-    max-selected-labels="0" is required to show count badge instead of selected item labels
-  -->
-  <MultiSelect
+  <ComboboxRoot
     v-model="selectedItems"
-    v-bind="{ ...$attrs, options: filteredOptions }"
-    option-label="name"
-    unstyled
-    :max-selected-labels="0"
-    :pt="{
-      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'relative inline-flex cursor-pointer select-none',
-          size === 'md' ? 'h-8' : 'h-10',
-          'rounded-lg bg-secondary-background text-base-foreground',
-          'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
-          'border-[2.5px] border-solid',
-          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
-          'focus-within:border-base-foreground',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
-        )
-      }),
-      labelContainer: {
-        class: cn(
-          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      label: {
-        class: 'p-0'
-      },
-      dropdown: {
-        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-      },
-      header: () => ({
-        class:
-          showSearchBox || showSelectedCount || showClearButton
-            ? 'block'
-            : 'hidden'
-      }),
-      // Overlay & list visuals unchanged
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background',
-          'text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      // Option row hover and focus tone
-      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
-          'hover:bg-secondary-background-hover',
-          // Add focus/highlight state for keyboard navigation
-          context?.focused &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      // Hide built-in checkboxes entirely via PT (no :deep)
-      pcHeaderCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      pcOptionCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      emptyMessage: {
-        class: 'px-3 pb-4 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.multiSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
+    multiple
+    by="value"
+    :disabled
+    ignore-filter
+    :reset-search-term-on-select="false"
   >
-    <template
-      v-if="showSearchBox || showSelectedCount || showClearButton"
-      #header
-    >
-      <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
-          v-if="showSearchBox"
-          v-model="searchQuery"
-          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
-        />
-        <div
-          v-if="showSelectedCount || showClearButton"
-          class="mt-2 flex items-center justify-between"
-        >
-          <span
-            v-if="showSelectedCount"
-            class="px-1 text-sm text-base-foreground"
-          >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
-          </span>
-          <Button
-            v-if="showClearButton"
-            variant="textonly"
-            size="md"
-            @click.stop="selectedItems = []"
-          >
-            {{ $t('g.clearAll') }}
-          </Button>
-        </div>
-        <div class="my-4 h-px bg-border-default"></div>
-      </div>
-    </template>
-
-    <!-- Trigger value (keep text scale identical) -->
-    <template #value>
-      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
-        {{ label }}
-      </span>
-      <span
-        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
-      >
-        {{ selectedCount }}
-      </span>
-    </template>
-
-    <!-- Chevron size identical to current -->
-    <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-    </template>
-
-    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-    <template #option="slotProps">
-      <div
-        role="button"
-        class="flex cursor-pointer items-center gap-2"
-        :style="popoverStyle"
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger
+        v-bind="$attrs"
+        :aria-label="label || t('g.multiSelectDropdown')"
+        :class="
+          cn(
+            'relative inline-flex cursor-pointer items-center select-none',
+            size === 'md' ? 'h-8' : 'h-10',
+            'rounded-lg bg-secondary-background text-base-foreground',
+            'transition-all duration-200 ease-in-out',
+            'hover:bg-secondary-background-hover',
+            'border-[2.5px] border-solid border-transparent',
+            selectedCount > 0
+              ? 'border-base-foreground'
+              : 'focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
+            disabled &&
+              'cursor-default opacity-30 hover:bg-secondary-background'
+          )
+        "
       >
         <div
-          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
           :class="
-            slotProps.selected
-              ? 'bg-primary-background'
-              : 'bg-secondary-background'
+            cn(
+              'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+              size === 'md' ? 'pl-3' : 'pl-4'
+            )
           "
         >
-          <i
-            v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
-          />
+          <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+            {{ label }}
+          </span>
+          <span
+            v-if="selectedCount > 0"
+            class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+          >
+            {{ selectedCount }}
+          </span>
         </div>
-        <span>
-          {{ slotProps.option.name }}
-        </span>
-      </div>
-    </template>
-  </MultiSelect>
+        <div
+          class="flex shrink-0 cursor-pointer items-center justify-center px-3"
+        >
+          <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+        </div>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="popoverStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+        @focus-outside="preventFocusDismiss"
+      >
+        <div
+          v-if="showSearchBox || showSelectedCount || showClearButton"
+          class="flex flex-col px-2 pt-2 pb-0"
+        >
+          <div
+            v-if="showSearchBox"
+            :class="
+              cn(
+                'flex items-center gap-2 rounded-lg border border-solid border-border-default px-3 py-1.5',
+                (showSelectedCount || showClearButton) && 'mb-2'
+              )
+            "
+          >
+            <i
+              class="icon-[lucide--search] shrink-0 text-sm text-muted-foreground"
+            />
+            <ComboboxInput
+              v-model="searchQuery"
+              :placeholder="searchPlaceholder ?? t('g.search')"
+              class="w-full border-none bg-transparent text-sm outline-none"
+            />
+          </div>
+          <div
+            v-if="showSelectedCount || showClearButton"
+            class="mt-2 flex items-center justify-between"
+          >
+            <span
+              v-if="showSelectedCount"
+              class="px-1 text-sm text-base-foreground"
+            >
+              {{ $t('g.itemsSelected', { count: selectedCount }) }}
+            </span>
+            <Button
+              v-if="showClearButton"
+              variant="textonly"
+              size="md"
+              @click.stop="selectedItems = []"
+            >
+              {{ $t('g.clearAll') }}
+            </Button>
+          </div>
+          <div class="my-4 h-px bg-border-default" />
+        </div>
+
+        <ComboboxViewport
+          :class="
+            cn(
+              'flex flex-col gap-0 p-0 text-sm',
+              'scrollbar-custom overflow-y-auto',
+              'min-w-(--reka-combobox-trigger-width)'
+            )
+          "
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+        >
+          <ComboboxItem
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            :value="opt"
+            :class="
+              cn(
+                'group flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 outline-none',
+                'hover:bg-secondary-background-hover',
+                'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background [&>span]:flex"
+            >
+              <ComboboxItemIndicator>
+                <i
+                  class="icon-[lucide--check] text-xs font-bold text-base-foreground"
+                />
+              </ComboboxItemIndicator>
+            </div>
+            <span>{{ opt.name }}</span>
+          </ComboboxItem>
+          <ComboboxEmpty class="px-3 pb-4 text-sm text-muted-foreground">
+            {{ $t('g.noResultsFound') }}
+          </ComboboxEmpty>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>
 
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
-import MultiSelect from 'primevue/multiselect'
-import { computed, useAttrs } from 'vue'
+import type { FocusOutsideEvent } from 'reka-ui'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport
+} from 'reka-ui'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
 
-type Option = SelectOption
-
 defineOptions({
   inheritAttrs: false
 })
 
-interface Props {
+const {
+  label,
+  options = [],
+  size = 'lg',
+  disabled = false,
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder,
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<{
   /** Input label shown on the trigger button */
   label?: string
+  /** Available options */
+  options?: SelectOption[]
   /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
   size?: 'lg' | 'md'
+  /** Disable the select */
+  disabled?: boolean
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -216,22 +224,9 @@ interface Props {
   popoverMinWidth?: string
   /** Maximum width of the popover (default: auto) */
   popoverMaxWidth?: string
-  // Note: options prop is intentionally omitted.
-  // It's passed via $attrs to maximize PrimeVue API compatibility
-}
-const {
-  label,
-  size = 'lg',
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder = 'Search...',
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<Props>()
+}>()
 
-const selectedItems = defineModel<Option[]>({
+const selectedItems = defineModel<SelectOption[]>({
   required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
@@ -239,15 +234,16 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
 
+function preventFocusDismiss(event: FocusOutsideEvent) {
+  event.preventDefault()
+}
+
 const popoverStyle = usePopoverSizing({
   minWidth: popoverMinWidth,
   maxWidth: popoverMaxWidth
 })
-const attrs = useAttrs()
-const originalOptions = computed(() => (attrs.options as Option[]) || [])
 
-// Use VueUse's useFuse for better reactivity and performance
-const fuseOptions: UseFuseOptions<Option> = {
+const fuseOptions: UseFuseOptions<SelectOption> = {
   fuseOptions: {
     keys: ['name', 'value'],
     threshold: 0.3,
@@ -256,23 +252,20 @@ const fuseOptions: UseFuseOptions<Option> = {
   matchAllWhenSearchEmpty: true
 }
 
-const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
+const { results } = useFuse(searchQuery, () => options, fuseOptions)
 
-// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
   if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return originalOptions.value
+    return options
   }
 
-  // results.value already contains the search results from useFuse
   const searchResults = results.value.map(
-    (result: { item: Option }) => result.item
+    (result: { item: SelectOption }) => result.item
   )
 
-  // Include selected items that aren't in search results
   const selectedButNotInResults = selectedItems.value.filter(
     (item) =>
-      !searchResults.some((result: Option) => result.value === item.value)
+      !searchResults.some((result: SelectOption) => result.value === item.value)
   )
 
   return [...selectedButNotInResults, ...searchResults]

src/components/input/SingleSelect.vue

@@ -1,21 +1,12 @@
 <template>
-  <!--
-    Note: We explicitly pass options here (not just via $attrs) because:
-    1. Our custom value template needs options to look up labels from values
-    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
-    3. We need to maintain the icon slot functionality in the value template
-    option-label="name" is required because our option template directly accesses option.name
-  -->
-  <Select
-    v-model="selectedItem"
-    v-bind="$attrs"
-    :options="options"
-    option-label="name"
-    option-value="value"
-    unstyled
-    :pt="{
-      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
+  <SelectRoot v-model="selectedItem" :disabled>
+    <SelectTrigger
+      v-bind="$attrs"
+      :aria-label="label || t('g.singleSelectDropdown')"
+      :aria-busy="loading || undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
           'relative inline-flex cursor-pointer items-center select-none',
           size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg',
@@ -23,121 +14,107 @@
           'transition-all duration-200 ease-in-out',
           'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          invalid
-            ? 'border-destructive-background'
-            : 'border-transparent focus-within:border-node-component-border',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
+          invalid ? 'border-destructive-background' : 'border-transparent',
+          'focus:border-node-component-border focus:outline-none',
+          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
         )
-      }),
-      label: {
-        class: cn(
-          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      dropdown: {
-        class:
-          // Right chevron touch area
-          'flex shrink-0 items-center justify-center px-3 py-2'
-      },
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: `max-height: min(${listMaxHeight}, 50vh)`,
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class:
-          // Same list tone/size as MultiSelect
-          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
-          // Row layout
-          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
-          'hover:bg-secondary-background-hover',
-          // Add focus state for keyboard navigation
-          context.focused && 'bg-secondary-background-hover',
-          // Selected state + check icon
-          context.selected &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      optionLabel: {
-        class: 'truncate'
-      },
-      optionGroupLabel: {
-        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
-      },
-      emptyMessage: {
-        class: 'px-3 py-2 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.singleSelectDropdown')"
-    :aria-busy="loading || undefined"
-    :aria-invalid="invalid || undefined"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <!-- Trigger value -->
-    <template #value="slotProps">
+      "
+    >
       <div
         :class="
-          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
+          cn(
+            'flex flex-1 items-center gap-2 overflow-hidden py-2',
+            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
+          )
         "
       >
         <i
           v-if="loading"
-          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+          class="icon-[lucide--loader-circle] shrink-0 animate-spin text-muted-foreground"
         />
         <slot v-else name="icon" />
-        <span
-          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-base-foreground"
-        >
-          {{ getLabel(slotProps.value) }}
-        </span>
-        <span v-else class="text-base-foreground">
-          {{ label }}
-        </span>
+        <SelectValue :placeholder="label" class="truncate" />
       </div>
-    </template>
-
-    <!-- Trigger caret (hidden when loading) -->
-    <template #dropdownicon>
-      <i
-        v-if="!loading"
-        class="icon-[lucide--chevron-down] text-muted-foreground"
-      />
-    </template>
-
-    <!-- Option row -->
-    <template #option="{ option, selected }">
       <div
-        class="flex w-full items-center justify-between gap-3"
-        :style="optionStyle"
+        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
       >
-        <span class="truncate">{{ option.name }}</span>
-        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
       </div>
-    </template>
-  </Select>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="optionStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'min-w-(--reka-select-trigger-width)',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+      >
+        <SelectViewport
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+          class="scrollbar-custom w-full"
+        >
+          <SelectItem
+            v-for="opt in options"
+            :key="opt.value"
+            :value="opt.value"
+            :class="
+              cn(
+                'relative flex w-full cursor-pointer items-center justify-between select-none',
+                'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
+                'hover:bg-secondary-background-hover',
+                'focus:bg-secondary-background-hover',
+                'data-[state=checked]:bg-secondary-background-selected',
+                'data-[state=checked]:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <SelectItemText class="truncate">
+              {{ opt.name }}
+            </SelectItemText>
+            <SelectItemIndicator
+              class="flex shrink-0 items-center justify-center"
+            >
+              <i
+                class="icon-[lucide--check] text-base-foreground"
+                aria-hidden="true"
+              />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>
 
 <script setup lang="ts">
-import type { SelectPassThroughMethodOptions } from 'primevue/select'
-import Select from 'primevue/select'
-import { computed } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from 'reka-ui'
 import { useI18n } from 'vue-i18n'
 
+import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
@@ -152,16 +129,12 @@ const {
   size = 'lg',
   invalid = false,
   loading = false,
+  disabled = false,
   listMaxHeight = '28rem',
   popoverMinWidth,
   popoverMaxWidth
 } = defineProps<{
   label?: string
-  /**
-   * Required for displaying the selected item's label.
-   * Cannot rely on $attrs alone because we need to access options
-   * in getLabel() to map values to their display names.
-   */
   options?: SelectOption[]
   /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
   size?: 'lg' | 'md'
@@ -169,6 +142,8 @@ const {
   invalid?: boolean
   /** Show loading spinner instead of chevron */
   loading?: boolean
+  /** Disable the select */
+  disabled?: boolean
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */
@@ -181,26 +156,8 @@ const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 
-/**
- * Maps a value to its display label.
- * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
- * only the raw value. We need this to show the correct text when an item is selected.
- */
-const getLabel = (val: string | null | undefined) => {
-  if (val == null) return label ?? ''
-  if (!options) return label ?? ''
-  const found = options.find((o) => o.value === val)
-  return found ? found.name : (label ?? '')
-}
-
-// Extract complex style logic from template
-const optionStyle = computed(() => {
-  if (!popoverMinWidth && !popoverMaxWidth) return undefined
-
-  const styles: string[] = []
-  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
-  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
-
-  return styles.join('; ')
+const optionStyle = usePopoverSizing({
+  minWidth: popoverMinWidth,
+  maxWidth: popoverMaxWidth
 })
 </script>

src/components/node/CreditBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <span
+    :class="
+      cn(
+        'flex h-5 shrink-0 items-center bg-component-node-widget-background p-1 text-xs',
+        rest ? 'rounded-l-full pr-1' : 'rounded-full'
+      )
+    "
+  >
+    <i class="icon-[lucide--component] h-full bg-amber-400" />
+    <span class="truncate" v-text="text" />
+  </span>
+  <span
+    v-if="rest"
+    class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
+  >
+    <span class="pr-2" v-text="rest" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  text: string
+  rest?: string
+}>()
+</script>

src/components/node/NodePreviewCard.vue

@@ -1,9 +1,14 @@
 <template>
   <div
-    class="flex w-50 flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
+    class="flex flex-col overflow-hidden rounded-lg border border-border-default bg-base-background"
+    :style="{ width: `${BASE_WIDTH_PX * (scaleFactor / BASE_SCALE)}px` }"
   >
     <div ref="previewContainerRef" class="overflow-hidden p-3">
-      <div ref="previewWrapperRef" class="origin-top-left scale-50">
+      <div
+        ref="previewWrapperRef"
+        class="origin-top-left"
+        :style="{ transform: `scale(${scaleFactor})` }"
+      >
         <LGraphNodePreview :node-def="nodeDef" position="relative" />
       </div>
     </div>
@@ -18,21 +23,21 @@
       <!-- Category Path -->
       <p
         v-if="showCategoryPath && nodeDef.category"
-        class="-mt-1 text-xs text-muted-foreground"
+        class="-mt-1 truncate text-xs text-muted-foreground"
       >
-        {{ nodeDef.category.replaceAll('/', ' > ') }}
+        {{ categoryPath }}
       </p>
 
       <!-- Badges -->
-      <div class="flex flex-wrap gap-2 empty:hidden">
-        <NodePricingBadge :node-def="nodeDef" />
+      <div class="flex flex-wrap gap-2 overflow-hidden empty:hidden">
+        <NodePricingBadge class="max-w-full truncate" :node-def="nodeDef" />
         <NodeProviderBadge :node-def="nodeDef" />
       </div>
 
       <!-- Description -->
       <p
         v-if="nodeDef.description"
-        class="m-0 text-[11px] leading-normal font-normal text-muted-foreground"
+        class="m-0 max-h-[30vh] overflow-y-auto text-xs/normal font-normal text-muted-foreground"
       >
         {{ nodeDef.description }}
       </p>
@@ -99,17 +104,20 @@ 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 BASE_WIDTH_PX = 200
+const BASE_SCALE = 0.5
 const PREVIEW_CONTAINER_PADDING_PX = 24
 
 const {
   nodeDef,
   showInputsAndOutputs = true,
-  showCategoryPath = false
+  showCategoryPath = false,
+  scaleFactor = 0.5
 } = defineProps<{
   nodeDef: ComfyNodeDefImpl
   showInputsAndOutputs?: boolean
   showCategoryPath?: boolean
+  scaleFactor?: number
 }>()
 
 const previewContainerRef = ref<HTMLElement>()
@@ -118,11 +126,13 @@ const previewWrapperRef = ref<HTMLElement>()
 useResizeObserver(previewWrapperRef, (entries) => {
   const entry = entries[0]
   if (entry && previewContainerRef.value) {
-    const scaledHeight = entry.contentRect.height * SCALE_FACTOR
+    const scaledHeight = entry.contentRect.height * scaleFactor
     previewContainerRef.value.style.height = `${scaledHeight + PREVIEW_CONTAINER_PADDING_PX}px`
   }
 })
 
+const categoryPath = computed(() => nodeDef.category?.replaceAll('/', ' / '))
+
 const inputs = computed(() => {
   if (!nodeDef.inputs) return []
   return Object.entries(nodeDef.inputs)

src/components/node/NodePricingBadge.vue

@@ -1,18 +1,13 @@
 <template>
-  <BadgePill
-    v-if="nodeDef.api_node"
-    v-show="priceLabel"
-    :text="priceLabel"
-    icon="icon-[comfy--credits]"
-    border-style="#f59e0b"
-    filled
-  />
+  <span v-if="nodeDef.api_node && priceLabel">
+    <CreditBadge :text="priceLabel" />
+  </span>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import BadgePill from '@/components/common/BadgePill.vue'
+import CreditBadge from '@/components/node/CreditBadge.vue'
 import { evaluateNodeDefPricing } from '@/composables/node/useNodePricing'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 

src/components/rightSidePanel/RightSidePanel.vue

@@ -9,12 +9,15 @@ import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
 import { st } from '@/i18n'
+import { app } from '@/scripts/app'
+import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -38,12 +41,21 @@ import TabErrors from './errors/TabErrors.vue'
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
+const missingNodesErrorStore = useMissingNodesErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
-  storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
+
+const activeMissingNodeGraphIds = computed<Set<string>>(() => {
+  if (!app.isGraphReady) return new Set()
+  return getActiveGraphNodeIds(
+    app.rootGraph,
+    canvasStore.currentGraph ?? app.rootGraph,
+    missingNodesErrorStore.missingAncestorExecutionIds
+  )
+})
 
 const { activeMissingModelGraphIds } = storeToRefs(missingModelStore)
 

src/components/rightSidePanel/errors/ErrorNodeCard.test.ts

@@ -237,6 +237,11 @@ describe('ErrorNodeCard.vue', () => {
 
     // Report is still generated with fallback log message
     expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    expect(mockGenerateErrorReport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        serverLogs: 'Failed to retrieve server logs'
+      })
+    )
     expect(wrapper.text()).toContain('ComfyUI Error Report')
   })
 

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -90,6 +90,7 @@
               variant="secondary"
               size="sm"
               class="h-8 w-2/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-find-on-github"
               @click="handleCheckGithub(error)"
             >
               {{ t('g.findOnGithub') }}
@@ -99,6 +100,7 @@
               variant="secondary"
               size="sm"
               class="h-8 w-1/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-copy"
               @click="handleCopyError(idx)"
             >
               {{ t('g.copy') }}
@@ -125,12 +127,10 @@
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { useTelemetry } from '@/platform/telemetry'
-import { useCommandStore } from '@/stores/commandStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { ErrorCardData, ErrorItem } from './types'
+import { useErrorActions } from './useErrorActions'
 import { useErrorReport } from './useErrorReport'
 
 const {
@@ -154,10 +154,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const telemetry = useTelemetry()
-const { staticUrls } = useExternalLink()
-const commandStore = useCommandStore()
 const { displayedDetailsMap } = useErrorReport(() => card)
+const { findOnGitHub, contactSupport: handleGetHelp } = useErrorActions()
 
 function handleLocateNode() {
   if (card.nodeId) {
@@ -178,23 +176,6 @@ function handleCopyError(idx: number) {
 }
 
 function handleCheckGithub(error: ErrorItem) {
-  telemetry?.trackUiButtonClicked({
-    button_id: 'error_tab_find_existing_issues_clicked'
-  })
-  const query = encodeURIComponent(error.message + ' is:issue')
-  window.open(
-    `${staticUrls.githubIssues}?q=${query}`,
-    '_blank',
-    'noopener,noreferrer'
-  )
-}
-
-function handleGetHelp() {
-  telemetry?.trackHelpResourceClicked({
-    resource_type: 'help_feedback',
-    is_external: true,
-    source: 'error_dialog'
-  })
-  commandStore.execute('Comfy.ContactSupport')
+  findOnGitHub(error.message)
 }
 </script>

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -1,7 +1,5 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
-import PrimeVue from 'primevue/config'
-import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -42,23 +40,25 @@ vi.mock('@/stores/systemStatsStore', () => ({
   })
 }))
 
-const mockApplyChanges = vi.fn()
-const mockIsRestarting = ref(false)
+const mockApplyChanges = vi.hoisted(() => vi.fn())
+const mockIsRestarting = vi.hoisted(() => ({ value: false }))
 vi.mock('@/workbench/extensions/manager/composables/useApplyChanges', () => ({
   useApplyChanges: () => ({
-    isRestarting: mockIsRestarting,
+    get isRestarting() {
+      return mockIsRestarting.value
+    },
     applyChanges: mockApplyChanges
   })
 }))
 
-const mockIsPackInstalled = vi.fn(() => false)
+const mockIsPackInstalled = vi.hoisted(() => vi.fn(() => false))
 vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: () => ({
     isPackInstalled: mockIsPackInstalled
   })
 }))
 
-const mockShouldShowManagerButtons = { value: false }
+const mockShouldShowManagerButtons = vi.hoisted(() => ({ value: false }))
 vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
   useManagerState: () => ({
     shouldShowManagerButtons: mockShouldShowManagerButtons
@@ -128,7 +128,7 @@ function mountCard(
       ...props
     },
     global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
       stubs: {
         DotSpinner: { template: '<span role="status" aria-label="loading" />' }
       }

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -209,12 +209,9 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    // Find the copy button by text (rendered inside ErrorNodeCard)
-    const copyButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Copy'))
-    expect(copyButton).toBeTruthy()
-    await copyButton!.trigger('click')
+    const copyButton = wrapper.find('[data-testid="error-card-copy"]')
+    expect(copyButton.exists()).toBe(true)
+    await copyButton.trigger('click')
 
     expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
   })
@@ -245,5 +242,9 @@ describe('TabErrors.vue', () => {
     // Should render in the dedicated runtime error panel, not inside accordion
     const runtimePanel = wrapper.find('[data-testid="runtime-error-panel"]')
     expect(runtimePanel.exists()).toBe(true)
+    // Verify the error message appears exactly once (not duplicated in accordion)
+    expect(
+      wrapper.text().match(/RuntimeError: Out of memory/g) ?? []
+    ).toHaveLength(1)
   })
 })

src/components/rightSidePanel/errors/TabErrors.vue

@@ -53,6 +53,7 @@
         <PropertiesAccordionItem
           v-for="group in filteredGroups"
           :key="group.title"
+          :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
           :collapse="isSectionCollapsed(group.title) && !isSearching"
           class="border-b border-interface-stroke"
           :size="getGroupSize(group)"
@@ -209,12 +210,9 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCommandStore } from '@/stores/commandStore'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -238,6 +236,7 @@ import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useErrorActions } from './useErrorActions'
 import { useErrorGroups } from './useErrorGroups'
 import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
@@ -246,7 +245,7 @@ import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacemen
 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
 const { focusNode, enterSubgraph } = useFocusNode()
-const { staticUrls } = useExternalLink()
+const { openGitHubIssues, contactSupport } = useErrorActions()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
@@ -372,13 +371,13 @@ watch(
     if (!graphNodeId) return
     const prefix = `${graphNodeId}:`
     for (const group of allErrorGroups.value) {
-      const hasMatch =
-        group.type === 'execution' &&
-        group.cards.some(
-          (card) =>
-            card.graphNodeId === graphNodeId ||
-            (card.nodeId?.startsWith(prefix) ?? false)
-        )
+      if (group.type !== 'execution') continue
+
+      const hasMatch = group.cards.some(
+        (card) =>
+          card.graphNodeId === graphNodeId ||
+          (card.nodeId?.startsWith(prefix) ?? false)
+      )
       setSectionCollapsed(group.title, !hasMatch)
     }
     rightSidePanelStore.focusedErrorNodeId = null
@@ -418,20 +417,4 @@ function handleReplaceAll() {
 function handleEnterSubgraph(nodeId: string) {
   enterSubgraph(nodeId, errorNodeCache.value)
 }
-
-function openGitHubIssues() {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'error_tab_github_issues_clicked'
-  })
-  window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
-}
-
-async function contactSupport() {
-  useTelemetry()?.trackHelpResourceClicked({
-    resource_type: 'help_feedback',
-    is_external: true,
-    source: 'error_dialog'
-  })
-  useCommandStore().execute('Comfy.ContactSupport')
-}
 </script>

src/components/rightSidePanel/errors/swapNodeGroups.test.ts

@@ -47,7 +47,7 @@ vi.mock('@/utils/executableGroupNodeDto', () => ({
   isGroupNode: vi.fn(() => false)
 }))
 
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useErrorGroups } from './useErrorGroups'
 
 function makeMissingNodeType(
@@ -80,8 +80,7 @@ describe('swapNodeGroups computed', () => {
   })
 
   function getSwapNodeGroups(nodeTypes: MissingNodeType[]) {
-    const store = useExecutionErrorStore()
-    store.surfaceMissingNodes(nodeTypes)
+    useMissingNodesErrorStore().surfaceMissingNodes(nodeTypes)
 
     const searchQuery = ref('')
     const t = (key: string) => key

src/components/rightSidePanel/errors/useErrorActions.ts

@@ -0,0 +1,39 @@
+import { useCommandStore } from '@/stores/commandStore'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useTelemetry } from '@/platform/telemetry'
+
+export function useErrorActions() {
+  const telemetry = useTelemetry()
+  const commandStore = useCommandStore()
+  const { staticUrls } = useExternalLink()
+
+  function openGitHubIssues() {
+    telemetry?.trackUiButtonClicked({
+      button_id: 'error_tab_github_issues_clicked'
+    })
+    window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
+  }
+
+  function contactSupport() {
+    telemetry?.trackHelpResourceClicked({
+      resource_type: 'help_feedback',
+      is_external: true,
+      source: 'error_dialog'
+    })
+    void commandStore.execute('Comfy.ContactSupport')
+  }
+
+  function findOnGitHub(errorMessage: string) {
+    telemetry?.trackUiButtonClicked({
+      button_id: 'error_tab_find_existing_issues_clicked'
+    })
+    const query = encodeURIComponent(errorMessage + ' is:issue')
+    window.open(
+      `${staticUrls.githubIssues}?q=${query}`,
+      '_blank',
+      'noopener,noreferrer'
+    )
+  }
+
+  return { openGitHubIssues, contactSupport, findOnGitHub }
+}

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -58,6 +58,7 @@ vi.mock(
 )
 
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useErrorGroups } from './useErrorGroups'
 
 function makeMissingNodeType(
@@ -126,8 +127,9 @@ describe('useErrorGroups', () => {
     })
 
     it('groups non-replaceable nodes by cnrId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' }),
         makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
         makeMissingNodeType('NodeC', { cnrId: 'pack-2', nodeId: '3' })
@@ -146,8 +148,9 @@ describe('useErrorGroups', () => {
     })
 
     it('excludes replaceable nodes from missingPackGroups', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -164,8 +167,9 @@ describe('useErrorGroups', () => {
     })
 
     it('groups nodes without cnrId under null packId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('UnknownNode', { nodeId: '1' }),
         makeMissingNodeType('AnotherUnknown', { nodeId: '2' })
       ])
@@ -177,8 +181,9 @@ describe('useErrorGroups', () => {
     })
 
     it('sorts groups alphabetically with null packId last', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'zebra-pack' }),
         makeMissingNodeType('NodeB', { nodeId: '2' }),
         makeMissingNodeType('NodeC', { cnrId: 'alpha-pack', nodeId: '3' })
@@ -190,8 +195,9 @@ describe('useErrorGroups', () => {
     })
 
     it('sorts nodeTypes within each group alphabetically by type then nodeId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
         makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '3' }),
         makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '1' })
@@ -206,8 +212,9 @@ describe('useErrorGroups', () => {
     })
 
     it('handles string nodeType entries', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         'StringGroupNode' as unknown as MissingNodeType
       ])
       await nextTick()
@@ -224,8 +231,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes missing_node group when missing nodes exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
       ])
       await nextTick()
@@ -237,8 +245,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes swap_nodes group when replaceable nodes exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -253,8 +262,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes both swap_nodes and missing_node when both exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -272,8 +282,9 @@ describe('useErrorGroups', () => {
     })
 
     it('swap_nodes has lower priority than missing_node', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -533,13 +544,18 @@ describe('useErrorGroups', () => {
     })
 
     it('includes missing node group title as message', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
       ])
       await nextTick()
 
-      expect(groups.groupedErrorMessages.value.length).toBeGreaterThan(0)
+      const missingGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'missing_node'
+      )
+      expect(missingGroup).toBeDefined()
+      expect(groups.groupedErrorMessages.value).toContain(missingGroup!.title)
     })
   })
 

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -5,6 +5,7 @@ import type { IFuseOptions } from 'fuse.js'
 
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
@@ -195,12 +196,8 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
         cardIndex: ci,
         searchableNodeId: card.nodeId ?? '',
         searchableNodeTitle: card.nodeTitle ?? '',
-        searchableMessage: card.errors
-          .map((e: ErrorItem) => e.message)
-          .join(' '),
-        searchableDetails: card.errors
-          .map((e: ErrorItem) => e.details ?? '')
-          .join(' ')
+        searchableMessage: card.errors.map((e) => e.message).join(' '),
+        searchableDetails: card.errors.map((e) => e.details ?? '').join(' ')
       })
     }
   }
@@ -240,6 +237,7 @@ export function useErrorGroups(
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
+  const missingNodesStore = useMissingNodesErrorStore()
   const missingModelStore = useMissingModelStore()
   const canvasStore = useCanvasStore()
   const { inferPackFromNodeName } = useComfyRegistryStore()
@@ -285,7 +283,7 @@ export function useErrorGroups(
 
   const missingNodeCache = computed(() => {
     const map = new Map<string, LGraphNode>()
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     for (const nodeType of nodeTypes) {
       if (typeof nodeType === 'string') continue
       if (nodeType.nodeId == null) continue
@@ -407,7 +405,7 @@ export function useErrorGroups(
   const asyncResolvedIds = ref<Map<string, string | null>>(new Map())
 
   const pendingTypes = computed(() =>
-    (executionErrorStore.missingNodesError?.nodeTypes ?? []).filter(
+    (missingNodesStore.missingNodesError?.nodeTypes ?? []).filter(
       (n): n is Exclude<MissingNodeType, string> =>
         typeof n !== 'string' && !n.cnrId
     )
@@ -448,6 +446,8 @@ export function useErrorGroups(
       for (const r of results) {
         if (r.status === 'fulfilled') {
           final.set(r.value.type, r.value.packId)
+        } else {
+          console.warn('Failed to resolve pack ID:', r.reason)
         }
       }
       // Clear any remaining RESOLVING markers for failed lookups
@@ -459,8 +459,18 @@ export function useErrorGroups(
     { immediate: true }
   )
 
+  // Evict stale entries when missing nodes are cleared
+  watch(
+    () => missingNodesStore.missingNodesError,
+    (error) => {
+      if (!error && asyncResolvedIds.value.size > 0) {
+        asyncResolvedIds.value = new Map()
+      }
+    }
+  )
+
   const missingPackGroups = computed<MissingPackGroup[]>(() => {
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     const map = new Map<
       string | null,
       { nodeTypes: MissingNodeType[]; isResolving: boolean }
@@ -522,7 +532,7 @@ export function useErrorGroups(
   })
 
   const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     const map = new Map<string, SwapNodeGroup>()
 
     for (const nodeType of nodeTypes) {
@@ -546,7 +556,7 @@ export function useErrorGroups(
 
   /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
   function buildMissingNodeGroups(): ErrorGroup[] {
-    const error = executionErrorStore.missingNodesError
+    const error = missingNodesStore.missingNodesError
     if (!error) return []
 
     const groups: ErrorGroup[] = []

src/components/rightSidePanel/errors/useErrorReport.ts

@@ -2,6 +2,8 @@ import { computed, onMounted, onUnmounted, reactive, toValue } from 'vue'
 
 import type { MaybeRefOrGetter } from 'vue'
 
+import { until } from '@vueuse/core'
+
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
@@ -40,24 +42,33 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
     if (runtimeErrors.length === 0) return
 
     if (!systemStatsStore.systemStats) {
-      try {
-        await systemStatsStore.refetchSystemStats()
-      } catch {
-        return
+      if (systemStatsStore.isLoading) {
+        await until(systemStatsStore.isLoading).toBe(false)
+      } else {
+        try {
+          await systemStatsStore.refetchSystemStats()
+        } catch (e) {
+          console.warn('Failed to fetch system stats for error report:', e)
+          return
+        }
       }
     }
-    if (cancelled || !systemStatsStore.systemStats) return
-
-    let logs: string
-    try {
-      logs = await api.getLogs()
-    } catch {
-      logs = 'Failed to retrieve server logs'
-    }
+    if (!systemStatsStore.systemStats || cancelled) return
 
+    const logs = await api
+      .getLogs()
+      .catch(() => 'Failed to retrieve server logs')
     if (cancelled) return
 
-    const workflow = app.rootGraph.serialize()
+    const workflow = (() => {
+      try {
+        return app.rootGraph.serialize()
+      } catch (e) {
+        console.warn('Failed to serialize workflow for error report:', e)
+        return null
+      }
+    })()
+    if (!workflow) return
 
     for (const { error, idx } of runtimeErrors) {
       try {
@@ -72,8 +83,8 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
           workflow
         })
         enrichedDetails[idx] = report
-      } catch {
-        // Fallback: keep original error.details
+      } catch (e) {
+        console.warn('Failed to generate error report:', e)
       }
     }
   })

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -7,7 +7,7 @@
       :pt="{
         root: {
           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'
+            ? 'w-full max-w-[56rem] min-w-[32rem] max-md:min-w-0 bg-transparent border-0 overflow-visible'
             : 'invisible-dialog-root'
         },
         mask: {
@@ -36,7 +36,9 @@
             v-if="hoveredNodeDef && enableNodePreview"
             :key="hoveredNodeDef.name"
             :node-def="hoveredNodeDef"
+            :scale-factor="0.625"
             show-category-path
+            inert
             class="absolute top-0 left-full ml-3"
           />
         </div>

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

@@ -1,32 +1,47 @@
+import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import NodeSearchCategorySidebar from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
+import NodeSearchCategorySidebar, {
+  DEFAULT_CATEGORY
+} from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
 import {
   createMockNodeDef,
   setupTestPinia,
   testI18n
 } from '@/components/searchbox/v2/__test__/testUtils'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
-    get: vi.fn(() => undefined),
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.NodeLibrary.Bookmarks.V2') return []
+      if (key === 'Comfy.NodeLibrary.BookmarksCustomization') return {}
+      return undefined
+    }),
     set: vi.fn()
   }))
 }))
 
 describe('NodeSearchCategorySidebar', () => {
+  let wrapper: VueWrapper
+
   beforeEach(() => {
     vi.restoreAllMocks()
     setupTestPinia()
   })
 
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
   async function createWrapper(props = {}) {
-    const wrapper = mount(NodeSearchCategorySidebar, {
-      props: { selectedCategory: 'most-relevant', ...props },
-      global: { plugins: [testI18n] }
+    wrapper = mount(NodeSearchCategorySidebar, {
+      props: { selectedCategory: DEFAULT_CATEGORY, ...props },
+      global: { plugins: [testI18n] },
+      attachTo: document.body
     })
     await nextTick()
     return wrapper
@@ -46,30 +61,29 @@ describe('NodeSearchCategorySidebar', () => {
   }
 
   describe('preset categories', () => {
-    it('should render all preset categories', async () => {
-      useNodeDefStore().updateNodeDefs([
-        createMockNodeDef({
-          name: 'EssentialNode',
-          essentials_category: 'basic',
-          python_module: 'comfy_essentials'
-        })
-      ])
-      await nextTick()
-
+    it('should always show Most relevant', async () => {
       const wrapper = await createWrapper()
-
       expect(wrapper.text()).toContain('Most relevant')
-      expect(wrapper.text()).toContain('Recents')
-      expect(wrapper.text()).toContain('Favorites')
-      expect(wrapper.text()).toContain('Essentials')
-      expect(wrapper.text()).toContain('Blueprints')
-      expect(wrapper.text()).toContain('Partner')
-      expect(wrapper.text()).toContain('Comfy')
-      expect(wrapper.text()).toContain('Extensions')
+    })
+
+    it('should not show Favorites in sidebar', async () => {
+      vi.spyOn(useNodeBookmarkStore(), 'bookmarks', 'get').mockReturnValue([
+        'some-bookmark'
+      ])
+      const wrapper = await createWrapper()
+      expect(wrapper.text()).not.toContain('Favorites')
+    })
+
+    it('should not show source categories in sidebar', async () => {
+      const wrapper = await createWrapper()
+      expect(wrapper.text()).not.toContain('Extensions')
+      expect(wrapper.text()).not.toContain('Essentials')
     })
 
     it('should mark the selected preset category as selected', async () => {
-      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+      const wrapper = await createWrapper({
+        selectedCategory: DEFAULT_CATEGORY
+      })
 
       const mostRelevantBtn = wrapper.find(
         '[data-testid="category-most-relevant"]'
@@ -77,17 +91,6 @@ describe('NodeSearchCategorySidebar', () => {
 
       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', () => {
@@ -127,7 +130,8 @@ describe('NodeSearchCategorySidebar', () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({ name: 'Node1', category: 'sampling' }),
         createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
-        createMockNodeDef({ name: 'Node3', category: 'sampling/basic' })
+        createMockNodeDef({ name: 'Node3', category: 'sampling/basic' }),
+        createMockNodeDef({ name: 'Node4', category: 'loaders' })
       ])
       await nextTick()
 
@@ -166,7 +170,8 @@ describe('NodeSearchCategorySidebar', () => {
     it('should emit update:selectedCategory when subcategory is clicked', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({ name: 'Node1', category: 'sampling' }),
-        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' })
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
       ])
       await nextTick()
 
@@ -202,11 +207,14 @@ describe('NodeSearchCategorySidebar', () => {
     it('should emit selected subcategory when expanded', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({ name: 'Node1', category: 'sampling' }),
-        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' })
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
       ])
       await nextTick()
 
-      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+      const wrapper = await createWrapper({
+        selectedCategory: DEFAULT_CATEGORY
+      })
 
       // Expand and click subcategory
       await clickCategory(wrapper, 'sampling', true)
@@ -217,7 +225,16 @@ describe('NodeSearchCategorySidebar', () => {
     })
   })
 
-  it('should support deeply nested categories (3+ levels)', async () => {
+  describe('hidePresets prop', () => {
+    it('should hide preset categories when hidePresets is true', async () => {
+      const wrapper = await createWrapper({ hidePresets: true })
+
+      expect(wrapper.text()).not.toContain('Most relevant')
+      expect(wrapper.text()).not.toContain('Custom')
+    })
+  })
+
+  it('should emit autoExpand for single root and support deeply nested categories', async () => {
     useNodeDefStore().updateNodeDefs([
       createMockNodeDef({ name: 'Node1', category: 'api' }),
       createMockNodeDef({ name: 'Node2', category: 'api/image' }),
@@ -227,14 +244,14 @@ describe('NodeSearchCategorySidebar', () => {
 
     const wrapper = await createWrapper()
 
-    // Only top-level visible initially
+    // Single root emits autoExpand
+    expect(wrapper.emitted('autoExpand')?.[0]).toEqual(['api'])
+
+    // Simulate parent handling autoExpand
+    await wrapper.setProps({ selectedCategory: 'api' })
+    await nextTick()
+
     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')
 
@@ -262,4 +279,202 @@ describe('NodeSearchCategorySidebar', () => {
 
     expect(wrapper.emitted('update:selectedCategory')![0][0]).toBe('sampling')
   })
+
+  describe('keyboard navigation', () => {
+    it('should expand a collapsed tree node on ArrowRight', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      expect(wrapper.text()).not.toContain('advanced')
+
+      const samplingBtn = wrapper.find('[data-testid="category-sampling"]')
+      await samplingBtn.trigger('keydown', { key: 'ArrowRight' })
+      await nextTick()
+
+      // Should have emitted select for sampling, expanding it
+      expect(wrapper.emitted('update:selectedCategory')).toBeTruthy()
+      expect(wrapper.emitted('update:selectedCategory')![0]).toEqual([
+        'sampling'
+      ])
+    })
+
+    it('should collapse an expanded tree node on ArrowLeft', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
+      ])
+      await nextTick()
+
+      // First expand sampling by clicking
+      const wrapper = await createWrapper()
+      await clickCategory(wrapper, 'sampling', true)
+
+      expect(wrapper.text()).toContain('advanced')
+
+      const samplingBtn = wrapper.find('[data-testid="category-sampling"]')
+      await samplingBtn.trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      // Collapse toggles internal state; children should be hidden
+      expect(wrapper.text()).not.toContain('advanced')
+    })
+
+    it('should focus first child on ArrowRight when already expanded', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+      await clickCategory(wrapper, 'sampling', true)
+
+      expect(wrapper.text()).toContain('advanced')
+
+      const samplingBtn = wrapper.find('[data-testid="category-sampling"]')
+      await samplingBtn.trigger('keydown', { key: 'ArrowRight' })
+      await nextTick()
+
+      const advancedBtn = wrapper.find(
+        '[data-testid="category-sampling/advanced"]'
+      )
+      expect(advancedBtn.element).toBe(document.activeElement)
+    })
+
+    it('should focus parent on ArrowLeft from a leaf or collapsed node', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+      await clickCategory(wrapper, 'sampling', true)
+
+      const advancedBtn = wrapper.find(
+        '[data-testid="category-sampling/advanced"]'
+      )
+      await advancedBtn.trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      const samplingBtn = wrapper.find('[data-testid="category-sampling"]')
+      expect(samplingBtn.element).toBe(document.activeElement)
+    })
+
+    it('should collapse sampling on ArrowLeft, not just its expanded child', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({
+          name: 'Node2',
+          category: 'sampling/custom_sampling'
+        }),
+        createMockNodeDef({
+          name: 'Node3',
+          category: 'sampling/custom_sampling/child'
+        }),
+        createMockNodeDef({ name: 'Node4', category: 'loaders' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      // Step 1: Expand sampling
+      await clickCategory(wrapper, 'sampling', true)
+      await wrapper.setProps({ selectedCategory: 'sampling' })
+      await nextTick()
+      expect(wrapper.text()).toContain('custom_sampling')
+
+      // Step 2: Expand custom_sampling
+      await clickCategory(wrapper, 'custom_sampling', true)
+      await wrapper.setProps({ selectedCategory: 'sampling/custom_sampling' })
+      await nextTick()
+      expect(wrapper.text()).toContain('child')
+
+      // Step 3: Navigate back to sampling (keyboard focus only)
+      const samplingBtn = wrapper.find('[data-testid="category-sampling"]')
+      ;(samplingBtn.element as HTMLElement).focus()
+      await nextTick()
+
+      // Step 4: Press left on sampling
+      await samplingBtn.trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      // Sampling should collapse entirely — custom_sampling should not be visible
+      expect(wrapper.text()).not.toContain('custom_sampling')
+    })
+
+    it('should collapse 4-deep tree to parent of level 2 on ArrowLeft', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'N1', category: 'a' }),
+        createMockNodeDef({ name: 'N2', category: 'a/b' }),
+        createMockNodeDef({ name: 'N3', category: 'a/b/c' }),
+        createMockNodeDef({ name: 'N4', category: 'a/b/c/d' }),
+        createMockNodeDef({ name: 'N5', category: 'other' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      // Expand a → a/b → a/b/c → a/b/c/d
+      await clickCategory(wrapper, 'a', true)
+      await wrapper.setProps({ selectedCategory: 'a' })
+      await nextTick()
+      expect(wrapper.text()).toContain('b')
+
+      await clickCategory(wrapper, 'b', true)
+      await wrapper.setProps({ selectedCategory: 'a/b' })
+      await nextTick()
+      expect(wrapper.text()).toContain('c')
+
+      await clickCategory(wrapper, 'c', true)
+      await wrapper.setProps({ selectedCategory: 'a/b/c' })
+      await nextTick()
+      expect(wrapper.text()).toContain('d')
+
+      // Focus level 2 (a/b) and press ArrowLeft
+      const bBtn = wrapper.find('[data-testid="category-a/b"]')
+      ;(bBtn.element as HTMLElement).focus()
+      await nextTick()
+
+      await bBtn.trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      // Level 2 and below should collapse, but level 1 (a) stays expanded
+      // so 'b' is still visible but 'c' and 'd' are not
+      expect(wrapper.text()).toContain('b')
+      expect(wrapper.text()).not.toContain('c')
+      expect(wrapper.text()).not.toContain('d')
+    })
+
+    it('should set aria-expanded on tree nodes with children', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({ name: 'Node1', category: 'sampling' }),
+        createMockNodeDef({ name: 'Node2', category: 'sampling/advanced' }),
+        createMockNodeDef({ name: 'Node3', category: 'loaders' })
+      ])
+      await nextTick()
+
+      const wrapper = await createWrapper()
+
+      const samplingTreeItem = wrapper
+        .find('[data-testid="category-sampling"]')
+        .element.closest('[role="treeitem"]')!
+      expect(samplingTreeItem.getAttribute('aria-expanded')).toBe('false')
+
+      // Leaf node should not have aria-expanded
+      const loadersTreeItem = wrapper
+        .find('[data-testid="category-loaders"]')
+        .element.closest('[role="treeitem"]')!
+      expect(loadersTreeItem.getAttribute('aria-expanded')).toBeNull()
+    })
+  })
 })

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -1,52 +1,62 @@
 <template>
-  <div class="flex min-h-0 flex-col overflow-y-auto py-2.5">
+  <RovingFocusGroup
+    as="div"
+    orientation="vertical"
+    :loop="true"
+    class="group/categories flex min-h-0 flex-col overflow-y-auto py-2.5 select-none"
+  >
     <!-- Preset categories -->
-    <div class="flex flex-col px-1">
-      <button
+    <div v-if="!hidePresets" class="flex flex-col px-3">
+      <RovingFocusItem
         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)"
+        as-child
       >
-        {{ 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>
+        <button
+          type="button"
+          :data-testid="`category-${preset.id}`"
+          :aria-current="selectedCategory === preset.id || undefined"
+          :class="categoryBtnClass(preset.id)"
+          @click="selectCategory(preset.id)"
+        >
+          {{ preset.label }}
+        </button>
+      </RovingFocusItem>
     </div>
 
     <!-- Category tree -->
-    <div class="flex flex-col px-1">
+    <div
+      role="tree"
+      :aria-label="t('g.category')"
+      :class="
+        cn(
+          'flex flex-col px-3',
+          !hidePresets && 'mt-2 border-t border-border-subtle pt-2'
+        )
+      "
+    >
       <NodeSearchCategoryTreeNode
         v-for="category in categoryTree"
         :key="category.key"
         :node="category"
         :selected-category="selectedCategory"
-        :selected-collapsed="selectedCollapsed"
+        :expanded-category="expandedCategory"
+        :hide-chevrons="hideChevrons"
         @select="selectCategory"
+        @collapse="collapseCategory"
       />
     </div>
-  </div>
+  </RovingFocusGroup>
 </template>
 
+<script lang="ts">
+export const DEFAULT_CATEGORY = 'most-relevant'
+</script>
+
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { RovingFocusGroup, RovingFocusItem } from 'reka-ui'
 
 import NodeSearchCategoryTreeNode, {
   CATEGORY_SELECTED_CLASS,
@@ -54,52 +64,45 @@ import NodeSearchCategoryTreeNode, {
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { NodeSourceType } from '@/types/nodeSource'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
 
+const {
+  hideChevrons = false,
+  hidePresets = false,
+  nodeDefs,
+  rootLabel,
+  rootKey
+} = defineProps<{
+  hideChevrons?: boolean
+  hidePresets?: boolean
+  nodeDefs?: ComfyNodeDefImpl[]
+  rootLabel?: string
+  rootKey?: string
+}>()
+
 const selectedCategory = defineModel<string>('selectedCategory', {
   required: true
 })
 
+const emit = defineEmits<{
+  autoExpand: [key: string]
+}>()
+
 const { t } = useI18n()
 const nodeDefStore = useNodeDefStore()
 
 const topCategories = computed(() => [
-  { id: 'most-relevant', label: t('g.mostRelevant') },
-  { id: 'recents', label: t('g.recents') },
-  { id: 'favorites', label: t('g.favorites') }
+  { id: DEFAULT_CATEGORY, label: t('g.mostRelevant') }
 ])
 
-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: 'blueprints',
-      label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints')
-    },
-    { id: 'partner', label: t('g.partner') },
-    { id: 'comfy', label: t('g.comfy') },
-    { id: 'extensions', label: t('g.extensions') }
-  )
-  return categories
-})
-
 const categoryTree = computed<CategoryNode[]>(() => {
-  const tree = nodeOrganizationService.organizeNodes(
-    nodeDefStore.visibleNodeDefs,
-    { groupBy: 'category' }
-  )
+  const defs = nodeDefs ?? nodeDefStore.visibleNodeDefs
+  const tree = nodeOrganizationService.organizeNodes(defs, {
+    groupBy: 'category'
+  })
 
   const stripRootPrefix = (key: string) => key.replace(/^root\//, '')
 
@@ -114,28 +117,82 @@ const categoryTree = computed<CategoryNode[]>(() => {
     }
   }
 
-  return (tree.children ?? [])
+  const nodes = (tree.children ?? [])
     .filter((node): node is TreeNode => !node.leaf)
     .map(mapNode)
+
+  if (rootLabel && nodes.length > 1) {
+    const key = rootKey ?? rootLabel.toLowerCase()
+    function prefixKeys(node: CategoryNode): CategoryNode {
+      return {
+        key: key + '/' + node.key,
+        label: node.label,
+        ...(node.children?.length
+          ? { children: node.children.map(prefixKeys) }
+          : {})
+      }
+    }
+    return [{ key, label: rootLabel, children: nodes.map(prefixKeys) }]
+  }
+
+  return nodes
 })
 
+// Notify parent when there is only a single root category to auto-expand
+watch(
+  categoryTree,
+  (nodes) => {
+    if (nodes.length === 1 && nodes[0].children?.length) {
+      const rootKey = nodes[0].key
+      if (
+        selectedCategory.value !== rootKey &&
+        !selectedCategory.value.startsWith(rootKey + '/')
+      ) {
+        emit('autoExpand', rootKey)
+      }
+    }
+  },
+  { immediate: true }
+)
+
 function categoryBtnClass(id: string) {
   return cn(
-    'cursor-pointer rounded-sm border-none bg-transparent px-3 py-2.5 text-left text-sm transition-colors',
+    'cursor-pointer rounded-lg border-none bg-transparent py-2.5 pr-3 text-left font-inter text-sm transition-colors',
+    hideChevrons ? 'pl-3' : 'pl-9',
     selectedCategory.value === id
       ? CATEGORY_SELECTED_CLASS
       : CATEGORY_UNSELECTED_CLASS
   )
 }
 
-const selectedCollapsed = ref(false)
+const expandedCategory = ref(selectedCategory.value)
+let lastEmittedCategory = ''
+
+watch(selectedCategory, (val) => {
+  if (val !== lastEmittedCategory) {
+    expandedCategory.value = val
+  }
+  lastEmittedCategory = ''
+})
+
+function parentCategory(key: string): string {
+  const i = key.lastIndexOf('/')
+  return i > 0 ? key.slice(0, i) : ''
+}
 
 function selectCategory(categoryId: string) {
-  if (selectedCategory.value === categoryId) {
-    selectedCollapsed.value = !selectedCollapsed.value
+  if (expandedCategory.value === categoryId) {
+    expandedCategory.value = parentCategory(categoryId)
   } else {
-    selectedCollapsed.value = false
-    selectedCategory.value = categoryId
+    expandedCategory.value = categoryId
   }
+  lastEmittedCategory = categoryId
+  selectedCategory.value = categoryId
+}
+
+function collapseCategory(categoryId: string) {
+  expandedCategory.value = parentCategory(categoryId)
+  lastEmittedCategory = categoryId
+  selectedCategory.value = categoryId
 }
 </script>

src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue

@@ -1,32 +1,66 @@
 <template>
-  <button
-    type="button"
-    :data-testid="`category-${node.key}`"
-    :aria-current="selectedCategory === node.key || undefined"
-    :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
+  <div
     :class="
       cn(
-        'w-full cursor-pointer rounded-sm border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
-        selectedCategory === node.key
-          ? CATEGORY_SELECTED_CLASS
-          : CATEGORY_UNSELECTED_CLASS
+        selectedCategory === node.key &&
+          isExpanded &&
+          node.children?.length &&
+          'rounded-lg bg-secondary-background'
       )
     "
-    @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>
+    <RovingFocusItem as-child>
+      <button
+        ref="buttonEl"
+        type="button"
+        role="treeitem"
+        :data-testid="`category-${node.key}`"
+        :aria-current="selectedCategory === node.key || undefined"
+        :aria-expanded="node.children?.length ? isExpanded : undefined"
+        :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
+        :class="
+          cn(
+            'flex w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent py-2.5 pr-3 text-left font-inter text-sm transition-colors',
+            selectedCategory === node.key
+              ? CATEGORY_SELECTED_CLASS
+              : CATEGORY_UNSELECTED_CLASS
+          )
+        "
+        @click="$emit('select', node.key)"
+        @keydown.right.prevent="handleRight"
+        @keydown.left.prevent="handleLeft"
+      >
+        <i
+          v-if="!hideChevrons"
+          :class="
+            cn(
+              'size-4 shrink-0 text-muted-foreground transition-[transform,opacity] duration-150',
+              node.children?.length
+                ? 'icon-[lucide--chevron-down] opacity-0 group-hover/categories:opacity-100 group-has-focus-visible/categories:opacity-100'
+                : '',
+              node.children?.length && !isExpanded && '-rotate-90'
+            )
+          "
+        />
+        <span class="flex-1 truncate">{{ node.label }}</span>
+      </button>
+    </RovingFocusItem>
+    <div v-if="isExpanded && node.children?.length" role="group">
+      <NodeSearchCategoryTreeNode
+        v-for="child in node.children"
+        :key="child.key"
+        ref="childRefs"
+        :node="child"
+        :depth="depth + 1"
+        :selected-category="selectedCategory"
+        :expanded-category="expandedCategory"
+        :hide-chevrons="hideChevrons"
+        :focus-parent="() => buttonEl?.focus()"
+        @select="$emit('select', $event)"
+        @collapse="$emit('collapse', $event)"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -37,13 +71,14 @@ export interface CategoryNode {
 }
 
 export const CATEGORY_SELECTED_CLASS =
-  'bg-secondary-background-hover font-semibold text-foreground'
+  'bg-secondary-background-hover 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 { computed, nextTick, ref } from 'vue'
+import { RovingFocusItem } from 'reka-ui'
 
 import { cn } from '@/utils/tailwindUtil'
 
@@ -51,20 +86,53 @@ const {
   node,
   depth = 0,
   selectedCategory,
-  selectedCollapsed = false
+  expandedCategory,
+  hideChevrons = false,
+  focusParent
 } = defineProps<{
   node: CategoryNode
   depth?: number
   selectedCategory: string
-  selectedCollapsed?: boolean
+  expandedCategory: string
+  hideChevrons?: boolean
+  focusParent?: () => void
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   select: [key: string]
+  collapse: [key: string]
 }>()
 
-const isExpanded = computed(() => {
-  if (selectedCategory === node.key) return !selectedCollapsed
-  return selectedCategory.startsWith(node.key + '/')
-})
+const buttonEl = ref<HTMLButtonElement>()
+const childRefs = ref<{ focus?: () => void }[]>([])
+
+defineExpose({ focus: () => buttonEl.value?.focus() })
+
+const isExpanded = computed(
+  () =>
+    expandedCategory === node.key || expandedCategory.startsWith(node.key + '/')
+)
+
+function handleRight() {
+  if (!node.children?.length) return
+  if (!isExpanded.value) {
+    emit('select', node.key)
+    return
+  }
+  nextTick(() => {
+    childRefs.value[0]?.focus?.()
+  })
+}
+
+function handleLeft() {
+  if (node.children?.length && isExpanded.value) {
+    if (expandedCategory.startsWith(node.key + '/')) {
+      emit('collapse', node.key)
+    } else {
+      emit('select', node.key)
+    }
+    return
+  }
+  focusParent?.()
+}
 </script>

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

@@ -3,8 +3,8 @@ 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 NodeSearchFilterBar from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
 import {
   createMockNodeDef,
   setupTestPinia,
@@ -55,13 +55,35 @@ describe('NodeSearchContent', () => {
     return wrapper
   }
 
+  function mockBookmarks(
+    isBookmarked: boolean | ((node: ComfyNodeDefImpl) => boolean) = true,
+    bookmarkList: string[] = []
+  ) {
+    const bookmarkStore = useNodeBookmarkStore()
+    if (typeof isBookmarked === 'function') {
+      vi.spyOn(bookmarkStore, 'isBookmarked').mockImplementation(isBookmarked)
+    } else {
+      vi.spyOn(bookmarkStore, 'isBookmarked').mockReturnValue(isBookmarked)
+    }
+    vi.spyOn(bookmarkStore, 'bookmarks', 'get').mockReturnValue(bookmarkList)
+  }
+
+  function clickFilterButton(wrapper: VueWrapper, text: string) {
+    const btn = wrapper
+      .findComponent(NodeSearchFilterBar)
+      .findAll('button')
+      .find((b) => b.text() === text)
+    expect(btn, `Expected filter button "${text}"`).toBeDefined()
+    return btn!.trigger('click')
+  }
+
   async function setupFavorites(
     nodes: Parameters<typeof createMockNodeDef>[0][]
   ) {
     useNodeDefStore().updateNodeDefs(nodes.map(createMockNodeDef))
-    vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(true)
+    mockBookmarks(true, ['placeholder'])
     const wrapper = await createWrapper()
-    await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+    await clickFilterButton(wrapper, 'Bookmarked')
     await nextTick()
     return wrapper
   }
@@ -106,12 +128,13 @@ describe('NodeSearchContent', () => {
           display_name: 'Regular Node'
         })
       ])
-      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockImplementation(
-        (node: ComfyNodeDefImpl) => node.name === 'BookmarkedNode'
+      mockBookmarks(
+        (node: ComfyNodeDefImpl) => node.name === 'BookmarkedNode',
+        ['BookmarkedNode']
       )
 
       const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
 
       const items = getNodeItems(wrapper)
@@ -123,83 +146,15 @@ describe('NodeSearchContent', () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({ name: 'Node1', display_name: 'Node One' })
       ])
-      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
+      mockBookmarks(false, ['placeholder'])
 
       const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
 
       expect(wrapper.text()).toContain('No results')
     })
 
-    it('should show only CustomNodes when Extensions 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-extensions"]').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({
@@ -230,8 +185,137 @@ describe('NodeSearchContent', () => {
     })
   })
 
+  describe('root filter (filter bar categories)', () => {
+    it('should show only non-Core nodes when Extensions root filter is active', 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()
+      const extensionsBtn = wrapper
+        .findAll('button')
+        .find((b) => b.text().includes('Extensions'))
+      expect(extensionsBtn).toBeTruthy()
+      await extensionsBtn!.trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Custom Node')
+    })
+
+    it('should show only essential nodes when Essentials root filter is active', 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()
+      const filterBar = wrapper.findComponent(NodeSearchFilterBar)
+      const essentialsBtn = filterBar
+        .findAll('button')
+        .find((b) => b.text().includes('Essentials'))
+      expect(essentialsBtn).toBeTruthy()
+      await essentialsBtn!.trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('Essential Node')
+    })
+
+    it('should show only API nodes when Partner Nodes root filter is active', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'ApiNode',
+          display_name: 'API Node',
+          api_node: true
+        }),
+        createMockNodeDef({
+          name: 'RegularNode',
+          display_name: 'Regular Node'
+        })
+      ])
+
+      const wrapper = await createWrapper()
+      const filterBar = wrapper.findComponent(NodeSearchFilterBar)
+      const partnerBtn = filterBar
+        .findAll('button')
+        .find((b) => b.text().includes('Partner'))
+      expect(partnerBtn).toBeTruthy()
+      await partnerBtn!.trigger('click')
+      await nextTick()
+
+      const items = getNodeItems(wrapper)
+      expect(items).toHaveLength(1)
+      expect(items[0].text()).toContain('API Node')
+    })
+
+    it('should toggle root filter off when clicking the active category button', 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()
+
+      vi.spyOn(useNodeFrequencyStore(), 'topNodeDefs', 'get').mockReturnValue([
+        useNodeDefStore().nodeDefsByName['CoreNode'],
+        useNodeDefStore().nodeDefsByName['CustomNode']
+      ])
+
+      const wrapper = await createWrapper()
+      const filterBar = wrapper.findComponent(NodeSearchFilterBar)
+      const extensionsBtn = filterBar
+        .findAll('button')
+        .find((b) => b.text().includes('Extensions'))!
+
+      // Activate
+      await extensionsBtn.trigger('click')
+      await nextTick()
+      expect(getNodeItems(wrapper)).toHaveLength(1)
+
+      // Deactivate (toggle off)
+      await extensionsBtn.trigger('click')
+      await nextTick()
+      expect(getNodeItems(wrapper)).toHaveLength(2)
+    })
+  })
+
   describe('search and category interaction', () => {
-    it('should override category to most-relevant when search query is active', async () => {
+    it('should search within selected category', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({
           name: 'KSampler',
@@ -256,13 +340,14 @@ describe('NodeSearchContent', () => {
       await nextTick()
 
       const texts = getNodeItems(wrapper).map((i) => i.text())
-      expect(texts.some((t) => t.includes('Load Checkpoint'))).toBe(true)
+      expect(texts.some((t) => t.includes('Load Checkpoint'))).toBe(false)
     })
 
-    it('should clear search query when category changes', async () => {
+    it('should preserve search query when category changes', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({ name: 'TestNode', display_name: 'Test Node' })
       ])
+      mockBookmarks(true, ['placeholder'])
 
       const wrapper = await createWrapper()
 
@@ -271,9 +356,9 @@ describe('NodeSearchContent', () => {
       await nextTick()
       expect((input.element as HTMLInputElement).value).toBe('test query')
 
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
-      expect((input.element as HTMLInputElement).value).toBe('')
+      expect((input.element as HTMLInputElement).value).toBe('test query')
     })
 
     it('should reset selected index when search query changes', async () => {
@@ -306,11 +391,10 @@ describe('NodeSearchContent', () => {
       await input.trigger('keydown', { key: 'ArrowDown' })
       await nextTick()
 
-      await wrapper
-        .find('[data-testid="category-most-relevant"]')
-        .trigger('click')
+      // Toggle Bookmarked off (back to default) then on again to reset index
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
 
       expect(getResultItems(wrapper)[0].attributes('aria-selected')).toBe(
@@ -373,19 +457,63 @@ describe('NodeSearchContent', () => {
       })
     })
 
-    it('should select item on hover', async () => {
+    it('should select item on hover via pointermove', 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 results[1].trigger('pointermove')
       await nextTick()
 
       expect(results[1].attributes('aria-selected')).toBe('true')
     })
 
+    it('should navigate results with ArrowDown/ArrowUp from a focused result item', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'Node1', display_name: 'Node One' },
+        { name: 'Node2', display_name: 'Node Two' },
+        { name: 'Node3', display_name: 'Node Three' }
+      ])
+
+      const results = getResultItems(wrapper)
+      await results[0].trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      expect(getResultItems(wrapper)[1].attributes('aria-selected')).toBe(
+        'true'
+      )
+
+      await getResultItems(wrapper)[1].trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      expect(getResultItems(wrapper)[2].attributes('aria-selected')).toBe(
+        'true'
+      )
+
+      await getResultItems(wrapper)[2].trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+
+      expect(getResultItems(wrapper)[1].attributes('aria-selected')).toBe(
+        'true'
+      )
+    })
+
+    it('should select node with Enter from a focused result item', async () => {
+      const wrapper = await setupFavorites([
+        { name: 'TestNode', display_name: 'Test Node' }
+      ])
+
+      await getResultItems(wrapper)[0].trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('addNode')).toBeTruthy()
+      expect(wrapper.emitted('addNode')![0][0]).toMatchObject({
+        name: 'TestNode'
+      })
+    })
+
     it('should add node on click', async () => {
       const wrapper = await setupFavorites([
         { name: 'TestNode', display_name: 'Test Node' }
@@ -413,10 +541,10 @@ describe('NodeSearchContent', () => {
     })
 
     it('should emit null hoverNode when no results', async () => {
+      mockBookmarks(false, ['placeholder'])
       const wrapper = await createWrapper()
 
-      vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await clickFilterButton(wrapper, 'Bookmarked')
       await nextTick()
 
       const emitted = wrapper.emitted('hoverNode')!
@@ -509,221 +637,4 @@ describe('NodeSearchContent', () => {
       })
     })
   })
-
-  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

@@ -1,107 +1,130 @@
 <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">
-      <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"
+  <FocusScope as-child loop>
+    <div
+      ref="dialogRef"
+      class="flex h-[min(80vh,750px)] 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"
+        :filters="filters"
+        @remove-filter="emit('removeFilter', $event)"
+        @navigate-down="navigateResults(1)"
+        @navigate-up="navigateResults(-1)"
+        @select-current="selectCurrentResult"
       />
 
-      <!-- Filter options list (filter selection mode) -->
-      <NodeSearchFilterPanel
-        v-if="activeFilter"
-        ref="filterPanelRef"
-        v-model:query="filterQuery"
-        :chip="activeFilter"
-        @apply="onFilterApply"
-      />
+      <!-- Filter header row -->
+      <div class="flex items-center">
+        <NodeSearchFilterBar
+          class="flex-1"
+          :filters="filters"
+          :active-category="rootFilter"
+          :has-favorites="nodeBookmarkStore.bookmarks.length > 0"
+          :has-essential-nodes="nodeAvailability.essential"
+          :has-blueprint-nodes="nodeAvailability.blueprint"
+          :has-partner-nodes="nodeAvailability.partner"
+          :has-custom-nodes="nodeAvailability.custom"
+          @toggle-filter="onToggleFilter"
+          @clear-filter-group="onClearFilterGroup"
+          @focus-search="nextTick(() => searchInputRef?.focus())"
+          @select-category="onSelectCategory"
+        />
+      </div>
 
-      <!-- Results list (normal mode) -->
-      <div
-        v-else
-        id="results-list"
-        role="listbox"
-        class="flex-1 overflow-y-auto py-2"
-      >
+      <!-- Content area -->
+      <div class="flex min-h-0 flex-1 overflow-hidden">
+        <!-- Category sidebar -->
+        <NodeSearchCategorySidebar
+          v-model:selected-category="sidebarCategory"
+          class="w-52 shrink-0"
+          :hide-chevrons="!anyTreeCategoryHasChildren"
+          :hide-presets="rootFilter !== null"
+          :node-defs="rootFilteredNodeDefs"
+          :root-label="rootFilterLabel"
+          :root-key="rootFilter ?? undefined"
+          @auto-expand="selectedCategory = $event"
+        />
+
+        <!-- Results list -->
         <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 h-14 cursor-pointer items-center px-4',
-              index === selectedIndex && 'bg-secondary-background-hover'
-            )
-          "
-          @click="emit('addNode', node, $event)"
-          @mouseenter="selectedIndex = index"
+          id="results-list"
+          role="listbox"
+          tabindex="-1"
+          class="flex-1 overflow-y-auto py-2 pr-3 pl-1 select-none"
+          @pointermove="onPointerMove"
         >
-          <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
+            v-for="(node, index) in displayedResults"
+            :id="`result-item-${index}`"
+            :key="node.name"
+            role="option"
+            data-testid="result-item"
+            :tabindex="index === selectedIndex ? 0 : -1"
+            :aria-selected="index === selectedIndex"
+            :class="
+              cn(
+                'flex h-14 cursor-pointer items-center rounded-lg px-4 outline-none focus-visible:ring-2 focus-visible:ring-primary',
+                index === selectedIndex && 'bg-secondary-background'
+              )
+            "
+            @click="emit('addNode', node, $event)"
+            @keydown.down.prevent="navigateResults(1, true)"
+            @keydown.up.prevent="navigateResults(-1, true)"
+            @keydown.enter.prevent="selectCurrentResult"
+          >
+            <NodeSearchListItem
+              :node-def="node"
+              :current-query="searchQuery"
+              show-description
+              :show-source-badge="rootFilter !== 'essentials'"
+              :hide-bookmark-icon="effectiveCategory === 'favorites'"
+            />
+          </div>
+          <div
+            v-if="displayedResults.length === 0"
+            data-testid="no-results"
+            class="px-4 py-8 text-center text-muted-foreground"
+          >
+            {{ $t('g.noResults') }}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </FocusScope>
 </template>
 
 <script setup lang="ts">
+import { FocusScope } from 'reka-ui'
 import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-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 NodeSearchCategorySidebar, {
+  DEFAULT_CATEGORY
+} from '@/components/searchbox/v2/NodeSearchCategorySidebar.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 { useFeatureFlags } from '@/composables/useFeatureFlags'
+import {
+  BLUEPRINT_CATEGORY,
+  isCustomNode,
+  isEssentialNode
+} from '@/types/nodeSource'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+const sourceCategoryFilters: Record<string, (n: ComfyNodeDefImpl) => boolean> =
+  {
+    essentials: isEssentialNode,
+    comfy: (n) => !isCustomNode(n),
+    custom: isCustomNode
+  }
+
 const { filters } = defineProps<{
   filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
 }>()
@@ -113,57 +136,102 @@ const emit = defineEmits<{
   hoverNode: [nodeDef: ComfyNodeDefImpl | null]
 }>()
 
+const { t } = useI18n()
+const { flags } = useFeatureFlags()
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
 
+const nodeAvailability = computed(() => {
+  let essential = false
+  let blueprint = false
+  let partner = false
+  let custom = false
+  for (const n of nodeDefStore.visibleNodeDefs) {
+    if (!essential && flags.nodeLibraryEssentialsEnabled && isEssentialNode(n))
+      essential = true
+    if (!blueprint && n.category.startsWith(BLUEPRINT_CATEGORY))
+      blueprint = true
+    if (!partner && n.api_node) partner = true
+    if (!custom && isCustomNode(n)) custom = true
+    if (essential && blueprint && partner && custom) break
+  }
+  return { essential, blueprint, partner, custom }
+})
+
 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 selectedCategory = ref(DEFAULT_CATEGORY)
 const selectedIndex = ref(0)
 
-const activeFilter = ref<FilterChip | null>(null)
-const filterQuery = ref('')
+// Root filter from filter bar category buttons (radio toggle)
+const rootFilter = ref<string | null>(null)
 
-function lockDialogHeight() {
-  if (dialogRef.value) {
-    dialogRef.value.style.height = `${dialogRef.value.offsetHeight}px`
+const rootFilterLabel = computed(() => {
+  switch (rootFilter.value) {
+    case 'favorites':
+      return t('g.bookmarked')
+    case BLUEPRINT_CATEGORY:
+      return t('g.blueprints')
+    case 'partner-nodes':
+      return t('g.partner')
+    case 'essentials':
+      return t('g.essentials')
+    case 'comfy':
+      return t('g.comfy')
+    case 'custom':
+      return t('g.extensions')
+    default:
+      return undefined
+  }
+})
+
+const rootFilteredNodeDefs = computed(() => {
+  if (!rootFilter.value) return nodeDefStore.visibleNodeDefs
+  const allNodes = nodeDefStore.visibleNodeDefs
+  const sourceFilter = sourceCategoryFilters[rootFilter.value]
+  if (sourceFilter) return allNodes.filter(sourceFilter)
+  switch (rootFilter.value) {
+    case 'favorites':
+      return allNodes.filter((n) => nodeBookmarkStore.isBookmarked(n))
+    case BLUEPRINT_CATEGORY:
+      return allNodes.filter((n) => n.category.startsWith(rootFilter.value!))
+    case 'partner-nodes':
+      return allNodes.filter((n) => n.api_node)
+    default:
+      return allNodes
+  }
+})
+
+function onToggleFilter(
+  filterDef: FuseFilter<ComfyNodeDefImpl, string>,
+  value: string
+) {
+  const existing = filters.find(
+    (f) => f.filterDef.id === filterDef.id && f.value === value
+  )
+  if (existing) {
+    emit('removeFilter', existing)
+  } else {
+    emit('addFilter', { filterDef, value })
   }
 }
 
-function unlockDialogHeight() {
-  if (dialogRef.value) {
-    dialogRef.value.style.height = ''
+function onClearFilterGroup(filterId: string) {
+  for (const f of filters.filter((f) => f.filterDef.id === filterId)) {
+    emit('removeFilter', f)
   }
 }
 
-function onSelectFilterChip(chip: FilterChip) {
-  if (activeFilter.value?.key === chip.key) {
-    cancelFilter()
-    return
+function onSelectCategory(category: string) {
+  if (rootFilter.value === category) {
+    rootFilter.value = null
+  } else {
+    rootFilter.value = category
   }
-  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()
+  selectedCategory.value = DEFAULT_CATEGORY
   nextTick(() => searchInputRef.value?.focus())
 }
 
@@ -176,67 +244,70 @@ const searchResults = computed(() => {
   })
 })
 
-const effectiveCategory = computed(() =>
-  searchQuery.value ? 'most-relevant' : selectedCategory.value
-)
+const effectiveCategory = computed(() => 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))
+// Check if any tree category has children (for chevron visibility)
+const anyTreeCategoryHasChildren = computed(() =>
+  rootFilteredNodeDefs.value.some((n) => n.category.includes('/'))
+)
+
+function getMostRelevantResults(baseNodes: ComfyNodeDefImpl[]) {
+  if (searchQuery.value || filters.length > 0) {
+    const searched = searchResults.value
+    if (!rootFilter.value) return searched
+    const rootSet = new Set(baseNodes.map((n) => n.name))
+    return searched.filter((n) => rootSet.has(n.name))
+  }
+  return rootFilter.value ? baseNodes : nodeFrequencyStore.topNodeDefs
+}
+
+function getCategoryResults(baseNodes: ComfyNodeDefImpl[], category: string) {
+  if (rootFilter.value && category === rootFilter.value) return baseNodes
+  const rootPrefix = rootFilter.value ? rootFilter.value + '/' : ''
+  const categoryPath = category.startsWith(rootPrefix)
+    ? category.slice(rootPrefix.length)
+    : category
+  return baseNodes.filter((n) => {
+    const nodeCategory = n.category.startsWith(rootPrefix)
+      ? n.category.slice(rootPrefix.length)
+      : n.category
+    return (
+      nodeCategory === categoryPath ||
+      nodeCategory.startsWith(categoryPath + '/')
+    )
+  })
 }
 
 const displayedResults = computed<ComfyNodeDefImpl[]>(() => {
-  const allNodes = nodeDefStore.visibleNodeDefs
+  const baseNodes = rootFilteredNodeDefs.value
+  const category = effectiveCategory.value
 
-  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 'recents':
-      return searchResults.value
-    case 'blueprints':
-      results = allNodes.filter(
-        (n) => n.nodeSource.type === NodeSourceType.Blueprint
-      )
-      break
-    case 'partner':
-      results = allNodes.filter((n) => n.api_node)
-      break
-    case 'comfy':
-      results = allNodes.filter(
-        (n) => n.nodeSource.type === NodeSourceType.Core
-      )
-      break
-    case 'extensions':
-      results = allNodes.filter(
-        (n) => n.nodeSource.type === NodeSourceType.CustomNodes
-      )
-      break
-    default:
-      results = allNodes.filter(
-        (n) =>
-          n.category === effectiveCategory.value ||
-          n.category.startsWith(effectiveCategory.value + '/')
-      )
-      break
+  if (category === DEFAULT_CATEGORY) return getMostRelevantResults(baseNodes)
+
+  const hasSearch = searchQuery.value || filters.length > 0
+  let source: ComfyNodeDefImpl[]
+  if (hasSearch) {
+    const searched = searchResults.value
+    if (rootFilter.value) {
+      const rootSet = new Set(baseNodes.map((n) => n.name))
+      source = searched.filter((n) => rootSet.has(n.name))
+    } else {
+      source = searched
+    }
+  } else {
+    source = baseNodes
   }
 
-  return filters.length > 0 ? results.filter(matchesFilters) : results
+  const sourceFilter = sourceCategoryFilters[category]
+  if (sourceFilter) return source.filter(sourceFilter)
+  return getCategoryResults(source, category)
 })
 
 const hoveredNodeDef = computed(
@@ -251,42 +322,28 @@ watch(
   { immediate: true }
 )
 
-watch([selectedCategory, searchQuery, () => filters], () => {
+watch([selectedCategory, searchQuery, rootFilter, () => filters.length], () => {
   selectedIndex.value = 0
 })
 
-function onKeyDown() {
-  if (activeFilter.value) {
-    filterPanelRef.value?.navigate(1)
-  } else {
-    navigateResults(1)
-  }
+function onPointerMove(event: PointerEvent) {
+  const item = (event.target as HTMLElement).closest('[role=option]')
+  if (!item) return
+  const index = Number(item.id.replace('result-item-', ''))
+  if (!isNaN(index) && index !== selectedIndex.value)
+    selectedIndex.value = index
 }
 
-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) {
+function navigateResults(direction: number, focusItem = false) {
   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' })
+      const el = dialogRef.value?.querySelector(
+        `#result-item-${newIndex}`
+      ) as HTMLElement | null
+      el?.scrollIntoView({ block: 'nearest' })
+      if (focusItem) el?.focus()
     })
   }
 }

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

@@ -12,7 +12,11 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
-    get: vi.fn(() => undefined),
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.NodeLibrary.Bookmarks.V2') return []
+      if (key === 'Comfy.NodeLibrary.BookmarksCustomization') return {}
+      return undefined
+    }),
     set: vi.fn()
   }))
 }))
@@ -33,51 +37,79 @@ describe(NodeSearchFilterBar, () => {
   async function createWrapper(props = {}) {
     const wrapper = mount(NodeSearchFilterBar, {
       props,
-      global: { plugins: [testI18n] }
+      global: {
+        plugins: [testI18n],
+        stubs: {
+          NodeSearchTypeFilterPopover: {
+            template: '<div data-testid="popover"><slot /></div>',
+            props: ['chip', 'selectedValues']
+          }
+        }
+      }
     })
     await nextTick()
     return wrapper
   }
 
-  it('should render all filter chips', async () => {
+  it('should render Extensions button and Input/Output popover triggers', async () => {
+    const wrapper = await createWrapper({ hasCustomNodes: true })
+
+    const buttons = wrapper.findAll('button')
+    const texts = buttons.map((b) => b.text())
+    expect(texts).toContain('Extensions')
+    expect(texts).toContain('Input')
+    expect(texts).toContain('Output')
+  })
+
+  it('should always render Comfy button', async () => {
+    const wrapper = await createWrapper()
+    const texts = wrapper.findAll('button').map((b) => b.text())
+    expect(texts).toContain('Comfy')
+  })
+
+  it('should render conditional category buttons when matching nodes exist', async () => {
+    const wrapper = await createWrapper({
+      hasFavorites: true,
+      hasEssentialNodes: true,
+      hasBlueprintNodes: true,
+      hasPartnerNodes: true
+    })
+    const texts = wrapper.findAll('button').map((b) => b.text())
+    expect(texts).toContain('Bookmarked')
+    expect(texts).toContain('Blueprints')
+    expect(texts).toContain('Partner')
+    expect(texts).toContain('Essentials')
+  })
+
+  it('should not render Extensions button when no custom nodes exist', async () => {
     const wrapper = await createWrapper()
 
     const buttons = wrapper.findAll('button')
-    expect(buttons).toHaveLength(6)
-    expect(buttons[0].text()).toBe('Blueprints')
-    expect(buttons[1].text()).toBe('Partner Nodes')
-    expect(buttons[2].text()).toBe('Essentials')
-    expect(buttons[3].text()).toBe('Extensions')
-    expect(buttons[4].text()).toBe('Input')
-    expect(buttons[5].text()).toBe('Output')
+    const texts = buttons.map((b) => b.text())
+    expect(texts).not.toContain('Extensions')
   })
 
-  it('should mark active chip as pressed when activeChipKey matches', async () => {
-    const wrapper = await createWrapper({ activeChipKey: 'input' })
+  it('should emit selectCategory when category button is clicked', async () => {
+    const wrapper = await createWrapper({ hasCustomNodes: true })
 
-    const inputBtn = wrapper.findAll('button').find((b) => b.text() === 'Input')
-    expect(inputBtn?.attributes('aria-pressed')).toBe('true')
+    const extensionsBtn = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Extensions')!
+    await extensionsBtn.trigger('click')
+
+    expect(wrapper.emitted('selectCategory')![0]).toEqual(['custom'])
   })
 
-  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 apply active styling when activeCategory matches', async () => {
+    const wrapper = await createWrapper({
+      activeCategory: 'custom',
+      hasCustomNodes: true
     })
-  })
 
-  it('should emit selectChip with chip data when clicked', async () => {
-    const wrapper = await createWrapper()
+    const extensionsBtn = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Extensions')!
 
-    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()
-    })
+    expect(extensionsBtn.attributes('aria-pressed')).toBe('true')
   })
 })

src/components/searchbox/v2/NodeSearchFilterBar.vue

@@ -1,22 +1,43 @@
 <template>
-  <div class="flex items-center gap-2 px-2 py-1.5">
+  <div class="flex items-center gap-2.5 px-3">
+    <!-- Category filter buttons -->
     <button
-      v-for="chip in chips"
-      :key="chip.key"
+      v-for="btn in categoryButtons"
+      :key="btn.id"
       type="button"
-      :aria-pressed="activeChipKey === chip.key"
-      :class="
-        cn(
-          'flex-auto cursor-pointer rounded-md border border-secondary-background px-3 py-1 text-sm transition-colors',
-          activeChipKey === chip.key
-            ? 'text-foreground bg-secondary-background'
-            : 'bg-transparent text-muted-foreground hover:border-base-foreground/60 hover:text-base-foreground/60'
-        )
-      "
-      @click="emit('selectChip', chip)"
+      :aria-pressed="activeCategory === btn.id"
+      :class="chipClass(activeCategory === btn.id)"
+      @click="emit('selectCategory', btn.id)"
     >
-      {{ chip.label }}
+      {{ btn.label }}
     </button>
+
+    <div class="h-5 w-px shrink-0 bg-border-subtle" />
+
+    <!-- Type filter popovers (Input / Output) -->
+    <NodeSearchTypeFilterPopover
+      v-for="tf in typeFilters"
+      :key="tf.chip.key"
+      :chip="tf.chip"
+      :selected-values="tf.values"
+      @toggle="(v) => emit('toggleFilter', tf.chip.filter, v)"
+      @clear="emit('clearFilterGroup', tf.chip.filter.id)"
+      @escape-close="emit('focusSearch')"
+    >
+      <button type="button" :class="chipClass(false, tf.values.length > 0)">
+        <span v-if="tf.values.length > 0" class="flex items-center">
+          <span
+            v-for="val in tf.values.slice(0, MAX_VISIBLE_DOTS)"
+            :key="val"
+            class="-mx-[2px] text-lg leading-none"
+            :style="{ color: getLinkTypeColor(val) }"
+            >&bull;</span
+          >
+        </span>
+        {{ tf.chip.label }}
+        <i class="icon-[lucide--chevron-down] size-3.5" />
+      </button>
+    </NodeSearchTypeFilterPopover>
   </div>
 </template>
 
@@ -35,53 +56,97 @@ export interface FilterChip {
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import NodeSearchTypeFilterPopover from '@/components/searchbox/v2/NodeSearchTypeFilterPopover.vue'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { BLUEPRINT_CATEGORY } from '@/types/nodeSource'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { getLinkTypeColor } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const { activeChipKey = null } = defineProps<{
-  activeChipKey?: string | null
+const {
+  filters = [],
+  activeCategory = null,
+  hasFavorites = false,
+  hasEssentialNodes = false,
+  hasBlueprintNodes = false,
+  hasPartnerNodes = false,
+  hasCustomNodes = false
+} = defineProps<{
+  filters?: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+  activeCategory?: string | null
+  hasFavorites?: boolean
+  hasEssentialNodes?: boolean
+  hasBlueprintNodes?: boolean
+  hasPartnerNodes?: boolean
+  hasCustomNodes?: boolean
 }>()
 
 const emit = defineEmits<{
-  selectChip: [chip: FilterChip]
+  toggleFilter: [filterDef: FuseFilter<ComfyNodeDefImpl, string>, value: string]
+  clearFilterGroup: [filterId: string]
+  focusSearch: []
+  selectCategory: [category: string]
 }>()
 
 const { t } = useI18n()
 const nodeDefStore = useNodeDefStore()
 
-const chips = computed<FilterChip[]>(() => {
-  const searchService = nodeDefStore.nodeSearchService
-  return [
-    {
-      key: 'blueprints',
-      label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints'),
-      filter: searchService.nodeSourceFilter
-    },
-    {
-      key: 'partnerNodes',
-      label: t('sideToolbar.nodeLibraryTab.filterOptions.partnerNodes'),
-      filter: searchService.nodeSourceFilter
-    },
-    {
-      key: 'essentials',
-      label: t('g.essentials'),
-      filter: searchService.nodeSourceFilter
-    },
-    {
-      key: 'extensions',
-      label: t('g.extensions'),
-      filter: searchService.nodeSourceFilter
-    },
-    {
-      key: 'input',
-      label: t('g.input'),
-      filter: searchService.inputTypeFilter
-    },
-    {
-      key: 'output',
-      label: t('g.output'),
-      filter: searchService.outputTypeFilter
-    }
-  ]
+const MAX_VISIBLE_DOTS = 4
+
+const categoryButtons = computed(() => {
+  const buttons: { id: string; label: string }[] = []
+  if (hasFavorites) {
+    buttons.push({ id: 'favorites', label: t('g.bookmarked') })
+  }
+  if (hasBlueprintNodes) {
+    buttons.push({ id: BLUEPRINT_CATEGORY, label: t('g.blueprints') })
+  }
+  if (hasPartnerNodes) {
+    buttons.push({ id: 'partner-nodes', label: t('g.partner') })
+  }
+  if (hasEssentialNodes) {
+    buttons.push({ id: 'essentials', label: t('g.essentials') })
+  }
+  buttons.push({ id: 'comfy', label: t('g.comfy') })
+  if (hasCustomNodes) {
+    buttons.push({ id: 'custom', label: t('g.extensions') })
+  }
+  return buttons
 })
+
+const inputChip = computed<FilterChip>(() => ({
+  key: 'input',
+  label: t('g.input'),
+  filter: nodeDefStore.nodeSearchService.inputTypeFilter
+}))
+
+const outputChip = computed<FilterChip>(() => ({
+  key: 'output',
+  label: t('g.output'),
+  filter: nodeDefStore.nodeSearchService.outputTypeFilter
+}))
+
+const selectedInputValues = computed(() =>
+  filters.filter((f) => f.filterDef.id === 'input').map((f) => f.value)
+)
+
+const selectedOutputValues = computed(() =>
+  filters.filter((f) => f.filterDef.id === 'output').map((f) => f.value)
+)
+
+const typeFilters = computed(() => [
+  { chip: inputChip.value, values: selectedInputValues.value },
+  { chip: outputChip.value, values: selectedOutputValues.value }
+])
+
+function chipClass(isActive: boolean, hasSelections = false) {
+  return cn(
+    'flex cursor-pointer items-center justify-center gap-1 rounded-md border border-secondary-background px-3 py-1 font-inter text-sm transition-colors',
+    isActive
+      ? 'border-base-foreground bg-base-foreground text-base-background'
+      : hasSelections
+        ? 'border-base-foreground/60 bg-transparent text-base-foreground/60 hover:border-base-foreground/60 hover:text-base-foreground/60'
+        : 'bg-transparent text-muted-foreground hover:border-base-foreground/60 hover:text-base-foreground/60'
+  )
+}
 </script>

src/components/searchbox/v2/NodeSearchFilterPanel.vue

@@ -1,90 +0,0 @@
-<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-foreground text-base font-semibold">
-        <span class="mr-1 text-2xl" :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

@@ -1,7 +1,6 @@
 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,
@@ -18,7 +17,11 @@ vi.mock('@/utils/litegraphUtil', () => ({
 
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
-    get: 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()
   }))
 }))
@@ -39,20 +42,6 @@ function createFilter(
   }
 }
 
-function createActiveFilter(label: string): FilterChip {
-  return {
-    key: label.toLowerCase(),
-    label,
-    filter: {
-      id: label.toLowerCase(),
-      matches: vi.fn(() => true)
-    } as Partial<FuseFilter<ComfyNodeDefImpl, string>> as FuseFilter<
-      ComfyNodeDefImpl,
-      string
-    >
-  }
-}
-
 describe('NodeSearchInput', () => {
   beforeEach(() => {
     setupTestPinia()
@@ -62,51 +51,27 @@ describe('NodeSearchInput', () => {
   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 () => {
+  it('should route input to searchQuery', 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', () => {
+  it('should show add node placeholder', () => {
     const wrapper = createWrapper()
 
     expect(
@@ -114,16 +79,7 @@ describe('NodeSearchInput', () => {
     ).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', () => {
+  it('should show filter chips when filters are present', () => {
     const wrapper = createWrapper({
       filters: [createFilter('input', 'IMAGE')]
     })
@@ -131,16 +87,6 @@ describe('NodeSearchInput', () => {
     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()
 

src/components/searchbox/v2/NodeSearchInput.vue

@@ -7,61 +7,41 @@
       @remove-tag="onRemoveTag"
       @click="inputRef?.focus()"
     >
-      <!-- Active filter label (filter selection mode) -->
-      <span
-        v-if="activeFilter"
-        class="text-foreground -my-1 inline-flex shrink-0 items-center gap-1 rounded-lg bg-base-background px-2 py-1 text-sm opacity-80"
-      >
-        {{ activeFilter.label }}:
-        <button
-          type="button"
-          data-testid="cancel-filter"
-          class="aspect-square cursor-pointer rounded-full border-none bg-transparent text-muted-foreground hover:text-base-foreground"
-          :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="-my-1 inline-flex items-center gap-1 rounded-lg bg-base-background px-2 py-1 data-[state=active]:ring-2 data-[state=active]:ring-primary"
+      <TagsInputItem
+        v-for="filter in filters"
+        :key="filterKey(filter)"
+        :value="filterKey(filter)"
+        data-testid="filter-chip"
+        class="-my-1 inline-flex items-center gap-1 rounded-lg bg-base-background px-2 py-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 flex aspect-square cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-muted-foreground hover:text-base-foreground"
         >
-          <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 aspect-square cursor-pointer rounded-full border-none bg-transparent text-muted-foreground hover:text-base-foreground"
-          >
-            <i class="pi pi-times text-xs" />
-          </TagsInputItemDelete>
-        </TagsInputItem>
-      </template>
+          <i class="icon-[lucide--x] size-3" />
+        </TagsInputItemDelete>
+      </TagsInputItem>
       <TagsInputInput as-child>
         <input
           ref="inputRef"
-          v-model="inputValue"
+          v-model="searchQuery"
           type="text"
           role="combobox"
           aria-autocomplete="list"
           :aria-expanded="true"
-          :aria-controls="activeFilter ? 'filter-options-list' : 'results-list'"
-          :aria-label="inputPlaceholder"
-          :placeholder="inputPlaceholder"
-          class="text-foreground h-6 min-w-[min(300px,80vw)] flex-1 border-none bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          aria-controls="results-list"
+          :aria-label="t('g.addNode')"
+          :placeholder="t('g.addNode')"
+          class="text-foreground h-6 min-w-[min(300px,80vw)] flex-1 border-none bg-transparent font-inter text-sm outline-none placeholder:text-muted-foreground"
           @keydown.enter.prevent="emit('selectCurrent')"
           @keydown.down.prevent="emit('navigateDown')"
           @keydown.up.prevent="emit('navigateUp')"
@@ -81,22 +61,18 @@ import {
   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<{
+const { filters } = 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: []
@@ -105,23 +81,6 @@ const emit = defineEmits<{
 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>) {

src/components/searchbox/v2/NodeSearchListItem.vue

@@ -2,46 +2,78 @@
   <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="text-foreground flex items-center gap-2 font-semibold">
+    <div class="flex min-w-0 flex-1 flex-col gap-1 overflow-hidden">
+      <!-- Row 1: Name (left) + badges (right) -->
+      <div class="text-foreground flex items-center gap-2 text-sm">
         <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
+          class="truncate"
+          v-html="highlightQuery(nodeDef.display_name, currentQuery)"
+        />
         <span
           v-if="showIdName"
-          class="rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+          data-testid="node-id-badge"
+          class="shrink-0 rounded-sm 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" />
+        <template v-if="showDescription">
+          <div class="flex-1" />
+          <div class="flex shrink-0 items-center gap-1">
+            <span
+              v-if="showSourceBadge && !isCustom"
+              aria-hidden="true"
+              class="flex size-[18px] shrink-0 items-center justify-center rounded-full bg-secondary-background-hover/80"
+            >
+              <ComfyLogo :size="10" mode="fill" color="currentColor" />
+            </span>
+            <span
+              v-else-if="showSourceBadge && isCustom"
+              :class="badgePillClass"
+            >
+              <span class="truncate text-[10px]">
+                {{ nodeDef.nodeSource.displayText }}
+              </span>
+            </span>
+
+            <span
+              v-if="nodeDef.api_node && providerName"
+              :class="badgePillClass"
+            >
+              <i
+                aria-hidden="true"
+                class="icon-[lucide--component] size-3 text-amber-400"
+              />
+              <i
+                aria-hidden="true"
+                :class="cn(getProviderIcon(providerName), 'size-3')"
+              />
+            </span>
+          </div>
+        </template>
+        <template v-else>
+          <NodePricingBadge :node-def="nodeDef" />
+          <NodeProviderBadge v-if="nodeDef.api_node" :node-def="nodeDef" />
+        </template>
       </div>
+
       <div
         v-if="showDescription"
-        class="flex items-center gap-1 text-[11px] text-muted-foreground"
+        class="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
       >
-        <span
-          v-if="
-            showSourceBadge &&
-            nodeDef.nodeSource.type !== NodeSourceType.Core &&
-            nodeDef.nodeSource.type !== NodeSourceType.Unknown
-          "
-          class="border-border mr-0.5 inline-flex shrink-0 rounded-sm border bg-base-foreground/5 px-1.5 py-0.5 text-xs text-base-foreground/70"
-        >
-          {{ nodeDef.nodeSource.displayText }}
+        <span v-if="showCategory" class="max-w-2/5 shrink-0 truncate">
+          {{ nodeDef.category.replaceAll('/', ' / ') }}
         </span>
-        <TextTicker v-if="nodeDef.description">
+        <span
+          v-if="nodeDef.description && showCategory"
+          class="h-3 w-px shrink-0 bg-border-default"
+        />
+        <TextTicker v-if="nodeDef.description" class="min-w-0 flex-1">
           {{ 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
@@ -82,14 +114,20 @@
 import { computed } from 'vue'
 
 import TextTicker from '@/components/common/TextTicker.vue'
+import ComfyLogo from '@/components/icons/ComfyLogo.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 {
+  isCustomNode as isCustomNodeDef,
+  NodeSourceType
+} from '@/types/nodeSource'
+import { getProviderIcon, getProviderName } from '@/utils/categoryUtil'
 import { formatNumberWithSuffix, highlightQuery } from '@/utils/formatUtil'
+import { cn } from '@/utils/tailwindUtil'
 
 const {
   nodeDef,
@@ -105,6 +143,9 @@ const {
   hideBookmarkIcon?: boolean
 }>()
 
+const badgePillClass =
+  'flex h-[18px] max-w-28 shrink-0 items-center justify-center gap-1 rounded-full bg-secondary-background-hover/80 px-2'
+
 const settingStore = useSettingStore()
 const showCategory = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
@@ -122,4 +163,6 @@ const nodeFrequency = computed(() =>
 
 const nodeBookmarkStore = useNodeBookmarkStore()
 const isBookmarked = computed(() => nodeBookmarkStore.isBookmarked(nodeDef))
+const providerName = computed(() => getProviderName(nodeDef.category))
+const isCustom = computed(() => isCustomNodeDef(nodeDef))
 </script>

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

@@ -0,0 +1,168 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import NodeSearchTypeFilterPopover from '@/components/searchbox/v2/NodeSearchTypeFilterPopover.vue'
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import { testI18n } from '@/components/searchbox/v2/__test__/testUtils'
+
+function createMockChip(
+  data: string[] = ['IMAGE', 'LATENT', 'MODEL']
+): FilterChip {
+  return {
+    key: 'input',
+    label: 'Input',
+    filter: {
+      id: 'input',
+      matches: vi.fn(),
+      fuseSearch: {
+        search: vi.fn((query: string) =>
+          data.filter((d) => d.toLowerCase().includes(query.toLowerCase()))
+        ),
+        data
+      }
+    } as unknown as FilterChip['filter']
+  }
+}
+
+describe(NodeSearchTypeFilterPopover, () => {
+  let wrapper: ReturnType<typeof mount>
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  function createWrapper(
+    props: {
+      chip?: FilterChip
+      selectedValues?: string[]
+    } = {}
+  ) {
+    wrapper = mount(NodeSearchTypeFilterPopover, {
+      props: {
+        chip: props.chip ?? createMockChip(),
+        selectedValues: props.selectedValues ?? []
+      },
+      slots: {
+        default: '<button data-testid="trigger">Input</button>'
+      },
+      global: {
+        plugins: [testI18n]
+      },
+      attachTo: document.body
+    })
+    return wrapper
+  }
+
+  async function openPopover(w: ReturnType<typeof mount>) {
+    await w.find('[data-testid="trigger"]').trigger('click')
+    await nextTick()
+    await nextTick()
+  }
+
+  function getOptions() {
+    return wrapper.findAll('[role="option"]')
+  }
+
+  it('should render the trigger slot', () => {
+    createWrapper()
+    expect(wrapper.find('[data-testid="trigger"]').exists()).toBe(true)
+  })
+
+  it('should show popover content when trigger is clicked', async () => {
+    createWrapper()
+    await openPopover(wrapper)
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+  })
+
+  it('should display all options sorted alphabetically', async () => {
+    createWrapper({ chip: createMockChip(['MODEL', 'IMAGE', 'LATENT']) })
+    await openPopover(wrapper)
+
+    const options = getOptions()
+    expect(options).toHaveLength(3)
+    const texts = options.map((o) => o.text().trim())
+    expect(texts[0]).toContain('IMAGE')
+    expect(texts[1]).toContain('LATENT')
+    expect(texts[2]).toContain('MODEL')
+  })
+
+  it('should show selected count text', async () => {
+    createWrapper({ selectedValues: ['IMAGE', 'LATENT'] })
+    await openPopover(wrapper)
+
+    expect(wrapper.text()).toContain('2 items selected')
+  })
+
+  it('should show clear all button only when values are selected', async () => {
+    createWrapper({ selectedValues: [] })
+    await openPopover(wrapper)
+
+    const buttons = wrapper.findAll('button')
+    const clearBtn = buttons.find((b) => b.text().includes('Clear all'))
+    expect(clearBtn).toBeUndefined()
+  })
+
+  it('should show clear all button when values are selected', async () => {
+    createWrapper({ selectedValues: ['IMAGE'] })
+    await openPopover(wrapper)
+
+    const buttons = wrapper.findAll('button')
+    const clearBtn = buttons.find((b) => b.text().includes('Clear all'))
+    expect(clearBtn).toBeTruthy()
+  })
+
+  it('should emit clear when clear all button is clicked', async () => {
+    createWrapper({ selectedValues: ['IMAGE'] })
+    await openPopover(wrapper)
+
+    const clearBtn = wrapper
+      .findAll('button')
+      .find((b) => b.text().includes('Clear all'))!
+    await clearBtn.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('clear')).toHaveLength(1)
+  })
+
+  it('should emit toggle when an option is clicked', async () => {
+    createWrapper()
+    await openPopover(wrapper)
+
+    const options = getOptions()
+    await options[0].trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('toggle')).toBeTruthy()
+    expect(wrapper.emitted('toggle')![0][0]).toBe('IMAGE')
+  })
+
+  it('should filter options via search input', async () => {
+    createWrapper()
+    await openPopover(wrapper)
+
+    const searchInput = wrapper.find('input')
+    await searchInput.setValue('IMAGE')
+    await nextTick()
+
+    const options = getOptions()
+    expect(options).toHaveLength(1)
+    expect(options[0].text()).toContain('IMAGE')
+  })
+
+  it('should show no results when search matches nothing', async () => {
+    createWrapper()
+    await openPopover(wrapper)
+
+    const searchInput = wrapper.find('input')
+    await searchInput.setValue('NONEXISTENT')
+    await nextTick()
+
+    expect(getOptions()).toHaveLength(0)
+    expect(wrapper.text()).toContain('No results')
+  })
+})

src/components/searchbox/v2/NodeSearchTypeFilterPopover.vue

@@ -0,0 +1,175 @@
+<template>
+  <PopoverRoot v-model:open="open" @update:open="onOpenChange">
+    <PopoverTrigger as-child>
+      <slot />
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      :side-offset="4"
+      :collision-padding="10"
+      class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-64 rounded-lg border border-border-default bg-base-background px-4 py-1 shadow-interface will-change-[transform,opacity]"
+      @open-auto-focus="onOpenAutoFocus"
+      @close-auto-focus="onCloseAutoFocus"
+      @escape-key-down.prevent
+      @keydown.escape.stop="closeWithEscape"
+    >
+      <ListboxRoot
+        multiple
+        selection-behavior="toggle"
+        :model-value="selectedValues"
+        @update:model-value="onSelectionChange"
+      >
+        <div
+          class="mt-2 flex h-8 items-center gap-2 rounded-sm border border-border-default px-2"
+        >
+          <i
+            class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+          />
+          <ListboxFilter
+            ref="searchFilterRef"
+            v-model="searchQuery"
+            :placeholder="t('g.search')"
+            class="text-foreground size-full border-none bg-transparent font-inter text-sm outline-none placeholder:text-muted-foreground"
+          />
+        </div>
+
+        <div class="flex items-center justify-between py-3">
+          <span class="text-sm text-muted-foreground">
+            {{
+              t(
+                'g.itemsSelected',
+                { count: selectedValues.length },
+                selectedValues.length
+              )
+            }}
+          </span>
+          <button
+            v-if="selectedValues.length > 0"
+            type="button"
+            class="cursor-pointer border-none bg-transparent font-inter text-sm text-base-foreground"
+            @click="emit('clear')"
+          >
+            {{ t('g.clearAll') }}
+          </button>
+        </div>
+
+        <div class="h-px bg-border-default" />
+
+        <ListboxContent class="max-h-64 overflow-y-auto py-3">
+          <ListboxItem
+            v-for="option in filteredOptions"
+            :key="option"
+            :value="option"
+            data-testid="filter-option"
+            class="text-foreground flex cursor-pointer items-center gap-2 rounded-sm px-1 py-2 text-sm outline-none data-highlighted:bg-secondary-background-hover"
+          >
+            <span
+              :class="
+                cn(
+                  'flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-default',
+                  selectedSet.has(option) &&
+                    'text-primary-foreground border-primary bg-primary'
+                )
+              "
+            >
+              <i
+                v-if="selectedSet.has(option)"
+                class="icon-[lucide--check] size-3"
+              />
+            </span>
+            <span class="truncate">{{ option }}</span>
+            <span
+              class="mr-1 ml-auto text-lg leading-none"
+              :style="{ color: getLinkTypeColor(option) }"
+            >
+              &bull;
+            </span>
+          </ListboxItem>
+          <div
+            v-if="filteredOptions.length === 0"
+            class="px-1 py-4 text-center text-sm text-muted-foreground"
+          >
+            {{ t('g.noResults') }}
+          </div>
+        </ListboxContent>
+      </ListboxRoot>
+    </PopoverContent>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { AcceptableValue } from 'reka-ui'
+import {
+  ListboxContent,
+  ListboxFilter,
+  ListboxItem,
+  ListboxRoot,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+
+import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
+import { getLinkTypeColor } from '@/utils/litegraphUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { chip, selectedValues } = defineProps<{
+  chip: FilterChip
+  selectedValues: string[]
+}>()
+
+const emit = defineEmits<{
+  toggle: [value: string]
+  clear: []
+  escapeClose: []
+}>()
+
+const { t } = useI18n()
+const open = ref(false)
+const closedWithEscape = ref(false)
+const searchQuery = ref('')
+const searchFilterRef = ref<InstanceType<typeof ListboxFilter>>()
+
+function onOpenChange(isOpen: boolean) {
+  if (!isOpen) searchQuery.value = ''
+}
+
+const selectedSet = computed(() => new Set(selectedValues))
+
+function onSelectionChange(value: AcceptableValue) {
+  const newValues = value as string[]
+  const added = newValues.find((v) => !selectedSet.value.has(v))
+  const removed = selectedValues.find((v) => !newValues.includes(v))
+  const toggled = added ?? removed
+  if (toggled) emit('toggle', toggled)
+}
+
+const filteredOptions = computed(() => {
+  const { fuseSearch } = chip.filter
+  if (searchQuery.value) {
+    return fuseSearch.search(searchQuery.value).slice(0, 64)
+  }
+  return fuseSearch.data.slice().sort()
+})
+
+function closeWithEscape() {
+  closedWithEscape.value = true
+  open.value = false
+}
+
+function onOpenAutoFocus(event: Event) {
+  event.preventDefault()
+  const el = searchFilterRef.value?.$el as HTMLInputElement | undefined
+  el?.focus()
+}
+
+function onCloseAutoFocus(event: Event) {
+  if (closedWithEscape.value) {
+    event.preventDefault()
+    closedWithEscape.value = false
+    emit('escapeClose')
+  }
+}
+</script>

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

@@ -39,7 +39,9 @@ export const testI18n = createI18n({
         mostRelevant: 'Most relevant',
         recents: 'Recents',
         favorites: 'Favorites',
+        bookmarked: 'Bookmarked',
         essentials: 'Essentials',
+        category: 'Category',
         custom: 'Custom',
         comfy: 'Comfy',
         partner: 'Partner',
@@ -49,15 +51,13 @@ export const testI18n = createI18n({
         input: 'Input',
         output: 'Output',
         source: 'Source',
-        search: 'Search'
-      },
-      sideToolbar: {
-        nodeLibraryTab: {
-          filterOptions: {
-            blueprints: 'Blueprints',
-            partnerNodes: 'Partner Nodes'
-          }
-        }
+        search: 'Search',
+        blueprints: 'Blueprints',
+        partnerNodes: 'Partner Nodes',
+        remove: 'Remove',
+        itemsSelected:
+          'No items selected | {count} item selected | {count} items selected',
+        clearAll: 'Clear all'
       }
     }
   }

src/composables/graph/useErrorClearingHooks.test.ts

@@ -315,6 +315,45 @@ describe('installErrorClearingHooks lifecycle', () => {
     cleanup()
     expect(graph.onNodeAdded).toBe(originalHook)
   })
+
+  it('restores original node callbacks when a node is removed', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addInput('clip', 'CLIP')
+    node.addWidget('number', 'steps', 20, () => undefined, {})
+    const originalOnConnectionsChange = vi.fn()
+    const originalOnWidgetChanged = vi.fn()
+    node.onConnectionsChange = originalOnConnectionsChange
+    node.onWidgetChanged = originalOnWidgetChanged
+    graph.add(node)
+
+    installErrorClearingHooks(graph)
+
+    // Callbacks should be chained (not the originals)
+    expect(node.onConnectionsChange).not.toBe(originalOnConnectionsChange)
+    expect(node.onWidgetChanged).not.toBe(originalOnWidgetChanged)
+
+    // Simulate node removal via the graph hook
+    graph.onNodeRemoved!(node)
+
+    // Original callbacks should be restored
+    expect(node.onConnectionsChange).toBe(originalOnConnectionsChange)
+    expect(node.onWidgetChanged).toBe(originalOnWidgetChanged)
+  })
+
+  it('does not double-wrap callbacks when installErrorClearingHooks is called twice', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addInput('clip', 'CLIP')
+    graph.add(node)
+
+    installErrorClearingHooks(graph)
+    const chainedAfterFirst = node.onConnectionsChange
+
+    // Install again on the same graph — should be a no-op for existing nodes
+    installErrorClearingHooks(graph)
+    expect(node.onConnectionsChange).toBe(chainedAfterFirst)
+  })
 })
 
 describe('clearWidgetRelatedErrors parameter routing', () => {

src/composables/graph/useErrorClearingHooks.ts

@@ -35,10 +35,22 @@ function resolvePromotedExecId(
 
 const hookedNodes = new WeakSet<LGraphNode>()
 
+type OriginalCallbacks = {
+  onConnectionsChange: LGraphNode['onConnectionsChange']
+  onWidgetChanged: LGraphNode['onWidgetChanged']
+}
+
+const originalCallbacks = new WeakMap<LGraphNode, OriginalCallbacks>()
+
 function installNodeHooks(node: LGraphNode): void {
   if (hookedNodes.has(node)) return
   hookedNodes.add(node)
 
+  originalCallbacks.set(node, {
+    onConnectionsChange: node.onConnectionsChange,
+    onWidgetChanged: node.onWidgetChanged
+  })
+
   node.onConnectionsChange = useChainCallback(
     node.onConnectionsChange,
     function (type, slotIndex, isConnected) {
@@ -82,6 +94,15 @@ function installNodeHooks(node: LGraphNode): void {
   )
 }
 
+function restoreNodeHooks(node: LGraphNode): void {
+  const originals = originalCallbacks.get(node)
+  if (!originals) return
+  node.onConnectionsChange = originals.onConnectionsChange
+  node.onWidgetChanged = originals.onWidgetChanged
+  originalCallbacks.delete(node)
+  hookedNodes.delete(node)
+}
+
 function installNodeHooksRecursive(node: LGraphNode): void {
   installNodeHooks(node)
   if (node.isSubgraphNode?.()) {
@@ -91,6 +112,15 @@ function installNodeHooksRecursive(node: LGraphNode): void {
   }
 }
 
+function restoreNodeHooksRecursive(node: LGraphNode): void {
+  restoreNodeHooks(node)
+  if (node.isSubgraphNode?.()) {
+    for (const innerNode of node.subgraph._nodes ?? []) {
+      restoreNodeHooksRecursive(innerNode)
+    }
+  }
+}
+
 export function installErrorClearingHooks(graph: LGraph): () => void {
   for (const node of graph._nodes ?? []) {
     installNodeHooksRecursive(node)
@@ -102,7 +132,17 @@ export function installErrorClearingHooks(graph: LGraph): () => void {
     originalOnNodeAdded?.call(this, node)
   }
 
+  const originalOnNodeRemoved = graph.onNodeRemoved
+  graph.onNodeRemoved = function (node: LGraphNode) {
+    restoreNodeHooksRecursive(node)
+    originalOnNodeRemoved?.call(this, node)
+  }
+
   return () => {
+    for (const node of graph._nodes ?? []) {
+      restoreNodeHooksRecursive(node)
+    }
     graph.onNodeAdded = originalOnNodeAdded || undefined
+    graph.onNodeRemoved = originalOnNodeRemoved || undefined
   }
 }

src/composables/graph/useNodeErrorFlagSync.ts

@@ -0,0 +1,111 @@
+import type { Ref } from 'vue'
+import { computed, watch } from 'vue'
+
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
+import type { NodeError } from '@/schemas/apiSchema'
+import { getParentExecutionIds } from '@/types/nodeIdentification'
+import { forEachNode, getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+
+function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
+  if (node.has_errors === hasErrors) return
+  const oldValue = node.has_errors
+  node.has_errors = hasErrors
+  node.graph?.trigger('node:property:changed', {
+    type: 'node:property:changed',
+    nodeId: node.id,
+    property: 'has_errors',
+    oldValue,
+    newValue: hasErrors
+  })
+}
+
+/**
+ * Single-pass reconciliation of node error flags.
+ * Collects the set of nodes that should have errors, then walks all nodes
+ * once, setting each flag exactly once. This avoids the redundant
+ * true→false→true transition (and duplicate events) that a clear-then-apply
+ * approach would cause.
+ */
+function reconcileNodeErrorFlags(
+  rootGraph: LGraph,
+  nodeErrors: Record<string, NodeError> | null,
+  missingModelExecIds: Set<string>
+): void {
+  // Collect nodes and slot info that should be flagged
+  // Includes both error-owning nodes and their ancestor containers
+  const flaggedNodes = new Set<LGraphNode>()
+  const errorSlots = new Map<LGraphNode, Set<string>>()
+
+  if (nodeErrors) {
+    for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
+      const node = getNodeByExecutionId(rootGraph, executionId)
+      if (!node) continue
+
+      flaggedNodes.add(node)
+      const slotNames = new Set<string>()
+      for (const error of nodeError.errors) {
+        const name = error.extra_info?.input_name
+        if (name) slotNames.add(name)
+      }
+      if (slotNames.size > 0) errorSlots.set(node, slotNames)
+
+      for (const parentId of getParentExecutionIds(executionId)) {
+        const parentNode = getNodeByExecutionId(rootGraph, parentId)
+        if (parentNode) flaggedNodes.add(parentNode)
+      }
+    }
+  }
+
+  for (const execId of missingModelExecIds) {
+    const node = getNodeByExecutionId(rootGraph, execId)
+    if (node) flaggedNodes.add(node)
+  }
+
+  forEachNode(rootGraph, (node) => {
+    setNodeHasErrors(node, flaggedNodes.has(node))
+
+    if (node.inputs) {
+      const nodeSlotNames = errorSlots.get(node)
+      for (const slot of node.inputs) {
+        slot.hasErrors = !!nodeSlotNames?.has(slot.name)
+      }
+    }
+  })
+}
+
+export function useNodeErrorFlagSync(
+  lastNodeErrors: Ref<Record<string, NodeError> | null>,
+  missingModelStore: ReturnType<typeof useMissingModelStore>
+): () => void {
+  const settingStore = useSettingStore()
+  const showErrorsTab = computed(() =>
+    settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
+  )
+
+  const stop = watch(
+    [
+      lastNodeErrors,
+      () => missingModelStore.missingModelNodeIds,
+      showErrorsTab
+    ],
+    () => {
+      if (!app.isGraphReady) return
+      // Legacy (LGraphNode) only: suppress missing-model error flags when
+      // the Errors tab is hidden, since legacy nodes lack the per-widget
+      // red highlight that Vue nodes use to indicate *why* a node has errors.
+      // Vue nodes compute hasAnyError independently and are unaffected.
+      reconcileNodeErrorFlags(
+        app.rootGraph,
+        lastNodeErrors.value,
+        showErrorsTab.value
+          ? missingModelStore.missingModelAncestorExecutionIds
+          : new Set()
+      )
+    },
+    { flush: 'post' }
+  )
+  return stop
+}

src/composables/useClickDragGuard.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  exceedsClickThreshold,
+  useClickDragGuard
+} from '@/composables/useClickDragGuard'
+
+describe('exceedsClickThreshold', () => {
+  it('returns false when distance is within threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 5)).toBe(false)
+  })
+
+  it('returns true when distance exceeds threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 5 }, 5)).toBe(true)
+  })
+
+  it('returns false when distance exactly equals threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)).toBe(false)
+  })
+
+  it('handles negative deltas', () => {
+    expect(exceedsClickThreshold({ x: 10, y: 10 }, { x: 4, y: 2 }, 5)).toBe(
+      true
+    )
+  })
+})
+
+describe('useClickDragGuard', () => {
+  it('reports no drag when pointer has not moved', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('reports no drag when movement is within threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 103, clientY: 204 })).toBe(false)
+  })
+
+  it('reports drag when movement exceeds threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 106, clientY: 200 })).toBe(true)
+  })
+
+  it('returns false when no start has been recorded', () => {
+    const guard = useClickDragGuard(5)
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('returns false after reset', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    guard.reset()
+    expect(guard.wasDragged({ clientX: 200, clientY: 300 })).toBe(false)
+  })
+
+  it('respects custom threshold', () => {
+    const guard = useClickDragGuard(3)
+    guard.recordStart({ clientX: 0, clientY: 0 })
+    expect(guard.wasDragged({ clientX: 3, clientY: 0 })).toBe(false)
+    expect(guard.wasDragged({ clientX: 4, clientY: 0 })).toBe(true)
+  })
+})

src/composables/useClickDragGuard.ts

@@ -0,0 +1,41 @@
+interface PointerPosition {
+  readonly x: number
+  readonly y: number
+}
+
+function squaredDistance(a: PointerPosition, b: PointerPosition): number {
+  const dx = a.x - b.x
+  const dy = a.y - b.y
+  return dx * dx + dy * dy
+}
+
+export function exceedsClickThreshold(
+  start: PointerPosition,
+  end: PointerPosition,
+  threshold: number
+): boolean {
+  return squaredDistance(start, end) > threshold * threshold
+}
+
+export function useClickDragGuard(threshold: number = 5) {
+  let start: PointerPosition | null = null
+
+  function recordStart(e: { clientX: number; clientY: number }) {
+    start = { x: e.clientX, y: e.clientY }
+  }
+
+  function wasDragged(e: { clientX: number; clientY: number }): boolean {
+    if (!start) return false
+    return exceedsClickThreshold(
+      start,
+      { x: e.clientX, y: e.clientY },
+      threshold
+    )
+  }
+
+  function reset() {
+    start = null
+  }
+
+  return { recordStart, wasDragged, reset }
+}

src/constants/essentialsNodes.ts

@@ -107,6 +107,27 @@ export const ESSENTIALS_CATEGORY_CANONICAL: ReadonlyMap<
   EssentialsCategory
 > = new Map(ESSENTIALS_CATEGORIES.map((c) => [c.toLowerCase(), c]))
 
+/**
+ * Precomputed rank map: category → display order index.
+ * Used for sorting essentials folders in their canonical order.
+ */
+export const ESSENTIALS_CATEGORY_RANK: ReadonlyMap<string, number> = new Map(
+  ESSENTIALS_CATEGORIES.map((c, i) => [c, i])
+)
+
+/**
+ * Precomputed rank maps: category → (node name → display order index).
+ * Used for sorting nodes within each essentials folder.
+ */
+export const ESSENTIALS_NODE_RANK: Partial<
+  Record<EssentialsCategory, ReadonlyMap<string, number>>
+> = Object.fromEntries(
+  Object.entries(ESSENTIALS_NODES).map(([category, nodes]) => [
+    category,
+    new Map(nodes.map((name, i) => [name, i]))
+  ])
+)
+
 /**
  * "Novel" toolkit nodes for telemetry — basics excluded.
  * Derived from ESSENTIALS_NODES minus the 'basics' category.

src/extensions/core/load3d/Load3d.ts

@@ -1,5 +1,7 @@
 import * as THREE from 'three'
 
+import { exceedsClickThreshold } from '@/composables/useClickDragGuard'
+
 import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
@@ -68,9 +70,7 @@ class Load3d {
   targetAspectRatio: number = 1
   isViewerMode: boolean = false
 
-  // Context menu tracking
-  private rightMouseDownX: number = 0
-  private rightMouseDownY: number = 0
+  private rightMouseStart: { x: number; y: number } = { x: 0, y: 0 }
   private rightMouseMoved: boolean = false
   private readonly dragThreshold: number = 5
   private contextMenuAbortController: AbortController | null = null
@@ -197,18 +197,20 @@ class Load3d {
 
     const mousedownHandler = (e: MouseEvent) => {
       if (e.button === 2) {
-        this.rightMouseDownX = e.clientX
-        this.rightMouseDownY = e.clientY
+        this.rightMouseStart = { x: e.clientX, y: e.clientY }
         this.rightMouseMoved = false
       }
     }
 
     const mousemoveHandler = (e: MouseEvent) => {
       if (e.buttons === 2) {
-        const dx = Math.abs(e.clientX - this.rightMouseDownX)
-        const dy = Math.abs(e.clientY - this.rightMouseDownY)
-
-        if (dx > this.dragThreshold || dy > this.dragThreshold) {
+        if (
+          exceedsClickThreshold(
+            this.rightMouseStart,
+            { x: e.clientX, y: e.clientY },
+            this.dragThreshold
+          )
+        ) {
           this.rightMouseMoved = true
         }
       }
@@ -217,12 +219,13 @@ class Load3d {
     const contextmenuHandler = (e: MouseEvent) => {
       if (this.isViewerMode) return
 
-      const dx = Math.abs(e.clientX - this.rightMouseDownX)
-      const dy = Math.abs(e.clientY - this.rightMouseDownY)
       const wasDragging =
         this.rightMouseMoved ||
-        dx > this.dragThreshold ||
-        dy > this.dragThreshold
+        exceedsClickThreshold(
+          this.rightMouseStart,
+          { x: e.clientX, y: e.clientY },
+          this.dragThreshold
+        )
 
       this.rightMouseMoved = false
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -2222,6 +2222,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     if (this.state.ghostNodeId != null) {
       if (e.button === 0) this.finalizeGhostPlacement(false)
       if (e.button === 2) this.finalizeGhostPlacement(true)
+      this.canvas.focus()
       e.stopPropagation()
       e.preventDefault()
       return
@@ -3679,6 +3680,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     }
 
     this.state.ghostNodeId = node.id
+    this.dispatchEvent('litegraph:ghost-placement', {
+      active: true,
+      nodeId: node.id
+    })
 
     this.deselectAll()
     this.select(node)
@@ -3709,6 +3714,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
     this.state.ghostNodeId = null
     this.isDragging = false
+    this.dispatchEvent('litegraph:ghost-placement', {
+      active: false,
+      nodeId
+    })
     this._autoPan?.stop()
     this._autoPan = null
 

src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts

@@ -1,7 +1,7 @@
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
 import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
 import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
@@ -53,4 +53,10 @@ export interface LGraphCanvasEventMap {
     node: LGraphNode
     button: LGraphButton
   }
+
+  /** Ghost placement mode has started or ended. */
+  'litegraph:ghost-placement': {
+    active: boolean
+    nodeId: NodeId
+  }
 }

src/locales/en/main.json

@@ -207,6 +207,7 @@
     "filterByType": "Filter by {type}...",
     "mostRelevant": "Most relevant",
     "favorites": "Favorites",
+    "bookmarked": "Bookmarked",
     "essentials": "Essentials",
     "input": "Input",
     "output": "Output",
@@ -278,8 +279,7 @@
     "clearAll": "Clear all",
     "copyURL": "Copy URL",
     "releaseTitle": "{package} {version} Release",
-    "itemSelected": "{selectedCount} item selected",
-    "itemsSelected": "{selectedCount} items selected",
+    "itemsSelected": "No items selected | {count} item selected | {count} items selected",
     "multiSelectDropdown": "Multi-select dropdown",
     "singleSelectDropdown": "Single-select dropdown",
     "progressCountOf": "of",
@@ -367,6 +367,8 @@
     "preloadErrorTitle": "Loading Error",
     "recents": "Recents",
     "partner": "Partner",
+    "blueprints": "Blueprints",
+    "partnerNodes": "Partner Nodes",
     "collapseAll": "Collapse all",
     "expandAll": "Expand all"
   },
@@ -3707,5 +3709,18 @@
     "footer": "ComfyUI stays free and open source. Cloud is optional.",
     "continueLocally": "Continue Locally",
     "exploreCloud": "Try Cloud for Free"
+  },
+  "execution": {
+    "generating": "Generating…",
+    "saving": "Saving…",
+    "loading": "Loading…",
+    "encoding": "Encoding…",
+    "decoding": "Decoding…",
+    "processing": "Processing…",
+    "resizing": "Resizing…",
+    "generatingVideo": "Generating video…",
+    "training": "Training…",
+    "processingVideo": "Processing video…",
+    "running": "Running…"
   }
 }

src/locales/en/settings.json

@@ -313,8 +313,7 @@
     "tooltip": "Only applies to the default implementation"
   },
   "Comfy_NodeSearchBoxImpl_ShowCategory": {
-    "name": "Show node category in search results",
-    "tooltip": "Only applies to v1 (legacy)"
+    "name": "Show node category in search results"
   },
   "Comfy_NodeSearchBoxImpl_ShowIdName": {
     "name": "Show node id name in search results",

src/platform/nodeReplacement/cnrIdUtil.test.ts

@@ -2,10 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-import {
-  getCnrIdFromProperties,
-  getCnrIdFromNode
-} from './missingNodeErrorUtil'
+import { getCnrIdFromNode, getCnrIdFromProperties } from './cnrIdUtil'
 
 describe('getCnrIdFromProperties', () => {
   it('returns cnr_id when present', () => {

src/platform/nodeReplacement/missingNodeScan.test.ts

@@ -20,8 +20,8 @@ vi.mock('@/utils/graphTraversalUtil', () => ({
   getExecutionIdByNode: vi.fn()
 }))
 
-vi.mock('@/workbench/extensions/manager/utils/missingNodeErrorUtil', () => ({
-  getCnrIdFromNode: vi.fn(() => null)
+vi.mock('@/platform/nodeReplacement/cnrIdUtil', () => ({
+  getCnrIdFromNode: vi.fn(() => undefined)
 }))
 
 vi.mock('@/i18n', () => ({
@@ -48,11 +48,10 @@ import {
   collectAllNodes,
   getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
-// eslint-disable-next-line import-x/no-restricted-paths
-import { getCnrIdFromNode } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
 import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
 import { rescanAndSurfaceMissingNodes } from './missingNodeScan'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 
 function mockNode(
   id: number,
@@ -72,7 +71,7 @@ function mockGraph(): LGraph {
 }
 
 function getMissingNodesError(
-  store: ReturnType<typeof useExecutionErrorStore>
+  store: ReturnType<typeof useMissingNodesErrorStore>
 ) {
   const error = store.missingNodesError
   if (!error) throw new Error('Expected missingNodesError to be defined')
@@ -99,7 +98,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     expect(store.missingNodesError).toBeNull()
   })
 
@@ -112,7 +111,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     expect(error.nodeTypes).toHaveLength(2)
   })
@@ -129,7 +128,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     expect(error.nodeTypes).toHaveLength(1)
     const missing = error.nodeTypes[0]
@@ -142,7 +141,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.nodeId).toBe('exec-42')
@@ -154,7 +153,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.nodeId).toBe('99')
@@ -167,7 +166,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.cnrId).toBe(
@@ -194,7 +193,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.isReplaceable).toBe(true)
@@ -209,7 +208,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.isReplaceable).toBe(false)
@@ -225,7 +224,7 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
 
     rescanAndSurfaceMissingNodes(mockGraph())
 
-    const store = useExecutionErrorStore()
+    const store = useMissingNodesErrorStore()
     const error = getMissingNodesError(store)
     const missing = error.nodeTypes[0]
     expect(typeof missing !== 'string' && missing.type).toBe('OriginalType')

src/platform/nodeReplacement/missingNodeScan.ts

@@ -2,13 +2,13 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import {
   collectAllNodes,
   getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
-// eslint-disable-next-line import-x/no-restricted-paths
-import { getCnrIdFromNode } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
 
 /** Scan the live graph for unregistered node types and build a full MissingNodeType list. */
 function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
@@ -41,5 +41,7 @@ function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
 /** Re-scan the graph for missing nodes and update the error store. */
 export function rescanAndSurfaceMissingNodes(rootGraph: LGraph): void {
   const types = scanMissingNodes(rootGraph)
-  useExecutionErrorStore().surfaceMissingNodes(types)
+  if (useMissingNodesErrorStore().surfaceMissingNodes(types)) {
+    useExecutionErrorStore().showErrorOverlay()
+  }
 }

src/platform/nodeReplacement/missingNodesErrorStore.test.ts

@@ -0,0 +1,215 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { MissingNodeType } from '@/types/comfy'
+
+vi.mock('@/i18n', () => ({
+  st: vi.fn((_key: string, fallback: string) => fallback)
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+const mockShowErrorsTab = vi.hoisted(() => ({ value: false }))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => mockShowErrorsTab.value)
+  }))
+}))
+
+import { useMissingNodesErrorStore } from './missingNodesErrorStore'
+
+describe('missingNodesErrorStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('setMissingNodeTypes', () => {
+    it('sets missingNodesError with provided types', () => {
+      const store = useMissingNodesErrorStore()
+      const types: MissingNodeType[] = [
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ]
+      store.setMissingNodeTypes(types)
+
+      expect(store.missingNodesError).not.toBeNull()
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      expect(store.hasMissingNodes).toBe(true)
+    })
+
+    it('clears missingNodesError when given empty array', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+      expect(store.missingNodesError).not.toBeNull()
+
+      store.setMissingNodeTypes([])
+      expect(store.missingNodesError).toBeNull()
+      expect(store.hasMissingNodes).toBe(false)
+    })
+
+    it('deduplicates string entries by value', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        'NodeA',
+        'NodeA',
+        'NodeB'
+      ] as MissingNodeType[])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
+    })
+
+    it('deduplicates object entries by nodeId when present', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeA', nodeId: '2', isReplaceable: false }
+      ])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
+    })
+
+    it('deduplicates object entries by type when nodeId is absent', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', isReplaceable: false },
+        { type: 'NodeA', isReplaceable: true }
+      ] as MissingNodeType[])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+    })
+
+    it('keeps distinct nodeIds even when type is the same', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeA', nodeId: '2', isReplaceable: false },
+        { type: 'NodeA', nodeId: '3', isReplaceable: false }
+      ])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(3)
+    })
+  })
+
+  describe('surfaceMissingNodes', () => {
+    beforeEach(() => {
+      mockShowErrorsTab.value = false
+    })
+
+    it('stores missing node types and returns false when setting disabled', () => {
+      const store = useMissingNodesErrorStore()
+      const types: MissingNodeType[] = [
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ]
+      const shouldShowOverlay = store.surfaceMissingNodes(types)
+
+      expect(store.missingNodesError).not.toBeNull()
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      expect(store.hasMissingNodes).toBe(true)
+      expect(shouldShowOverlay).toBe(false)
+    })
+
+    it('returns true when ShowErrorsTab setting is enabled', () => {
+      mockShowErrorsTab.value = true
+      const store = useMissingNodesErrorStore()
+      const shouldShowOverlay = store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      expect(shouldShowOverlay).toBe(true)
+    })
+
+    it('returns false when ShowErrorsTab setting is disabled', () => {
+      mockShowErrorsTab.value = false
+      const store = useMissingNodesErrorStore()
+      const shouldShowOverlay = store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      expect(shouldShowOverlay).toBe(false)
+    })
+
+    it('returns false for empty types even when setting is enabled', () => {
+      mockShowErrorsTab.value = true
+      const store = useMissingNodesErrorStore()
+      const shouldShowOverlay = store.surfaceMissingNodes([])
+
+      expect(shouldShowOverlay).toBe(false)
+    })
+
+    it('deduplicates node types', () => {
+      const store = useMissingNodesErrorStore()
+      store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeB', nodeId: '2', isReplaceable: false }
+      ])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
+    })
+  })
+
+  describe('removeMissingNodesByType', () => {
+    it('removes matching types from the missing nodes list', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeB', nodeId: '2', isReplaceable: false },
+        { type: 'NodeC', nodeId: '3', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByType(['NodeA', 'NodeC'])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      const remaining = store.missingNodesError?.nodeTypes[0]
+      expect(typeof remaining !== 'string' && remaining?.type).toBe('NodeB')
+    })
+
+    it('clears missingNodesError when all types are removed', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByType(['NodeA'])
+
+      expect(store.missingNodesError).toBeNull()
+      expect(store.hasMissingNodes).toBe(false)
+    })
+
+    it('does nothing when missingNodesError is null', () => {
+      const store = useMissingNodesErrorStore()
+      expect(store.missingNodesError).toBeNull()
+
+      store.removeMissingNodesByType(['NodeA'])
+      expect(store.missingNodesError).toBeNull()
+    })
+
+    it('does nothing when removing non-existent types', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByType(['NonExistent'])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+    })
+
+    it('handles removing from string entries', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        'StringNodeA',
+        'StringNodeB'
+      ] as MissingNodeType[])
+
+      store.removeMissingNodesByType(['StringNodeA'])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+    })
+  })
+})

src/platform/nodeReplacement/missingNodesErrorStore.ts

@@ -0,0 +1,125 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import { st } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
+import type { MissingNodeType } from '@/types/comfy'
+import { getAncestorExecutionIds } from '@/types/nodeIdentification'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { getExecutionIdByNode } from '@/utils/graphTraversalUtil'
+
+interface MissingNodesError {
+  message: string
+  nodeTypes: MissingNodeType[]
+}
+
+export const useMissingNodesErrorStore = defineStore(
+  'missingNodesError',
+  () => {
+    const missingNodesError = ref<MissingNodesError | null>(null)
+
+    function setMissingNodeTypes(types: MissingNodeType[]) {
+      if (!types.length) {
+        missingNodesError.value = null
+        return
+      }
+      const seen = new Set<string>()
+      const uniqueTypes = types.filter((node) => {
+        // For string entries (group nodes), deduplicate by the string itself.
+        // For object entries, prefer nodeId so multiple instances of the same
+        // type are kept as separate rows; fall back to type if nodeId is absent.
+        const isString = typeof node === 'string'
+        let key: string
+        if (isString) {
+          key = node
+        } else if (node.nodeId != null) {
+          key = String(node.nodeId)
+        } else {
+          key = node.type
+        }
+        if (seen.has(key)) return false
+        seen.add(key)
+        return true
+      })
+      missingNodesError.value = {
+        message: isCloud
+          ? st(
+              'rightSidePanel.missingNodePacks.unsupportedTitle',
+              'Unsupported Node Packs'
+            )
+          : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
+        nodeTypes: uniqueTypes
+      }
+    }
+
+    /** Set missing node types. Returns true if the Errors tab is enabled and types were set. */
+    function surfaceMissingNodes(types: MissingNodeType[]): boolean {
+      setMissingNodeTypes(types)
+      return (
+        types.length > 0 &&
+        useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
+      )
+    }
+
+    /** Remove specific node types from the missing nodes list (e.g. after replacement). */
+    function removeMissingNodesByType(typesToRemove: string[]) {
+      if (!missingNodesError.value) return
+      const removeSet = new Set(typesToRemove)
+      const remaining = missingNodesError.value.nodeTypes.filter((node) => {
+        const nodeType = typeof node === 'string' ? node : node.type
+        return !removeSet.has(nodeType)
+      })
+      setMissingNodeTypes(remaining)
+    }
+
+    const hasMissingNodes = computed(() => !!missingNodesError.value)
+
+    const missingNodeCount = computed(
+      () => missingNodesError.value?.nodeTypes.length ?? 0
+    )
+
+    /**
+     * Set of all execution ID prefixes derived from missing node execution IDs,
+     * including the missing nodes themselves.
+     *
+     * Example: missing node at "65:70:63" → Set { "65", "65:70", "65:70:63" }
+     */
+    const missingAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
+      const ids = new Set<NodeExecutionId>()
+      const error = missingNodesError.value
+      if (!error) return ids
+
+      for (const nodeType of error.nodeTypes) {
+        if (typeof nodeType === 'string') continue
+        if (nodeType.nodeId == null) continue
+        for (const id of getAncestorExecutionIds(String(nodeType.nodeId))) {
+          ids.add(id)
+        }
+      }
+
+      return ids
+    })
+
+    /** True if the node has a missing node inside it at any nesting depth. */
+    function isContainerWithMissingNode(node: LGraphNode): boolean {
+      if (!app.isGraphReady) return false
+      const execId = getExecutionIdByNode(app.rootGraph, node)
+      if (!execId) return false
+      return missingAncestorExecutionIds.value.has(execId)
+    }
+
+    return {
+      missingNodesError,
+      setMissingNodeTypes,
+      surfaceMissingNodes,
+      removeMissingNodesByType,
+      hasMissingNodes,
+      missingNodeCount,
+      missingAncestorExecutionIds,
+      isContainerWithMissingNode
+    }
+  }
+)

src/platform/nodeReplacement/useNodeReplacement.test.ts

@@ -47,8 +47,8 @@ vi.mock('@/i18n', () => ({
 const { mockRemoveMissingNodesByType } = vi.hoisted(() => ({
   mockRemoveMissingNodesByType: vi.fn()
 }))
-vi.mock('@/stores/executionErrorStore', () => ({
-  useExecutionErrorStore: vi.fn(() => ({
+vi.mock('@/platform/nodeReplacement/missingNodesErrorStore', () => ({
+  useMissingNodesErrorStore: vi.fn(() => ({
     removeMissingNodesByType: mockRemoveMissingNodesByType
   }))
 }))

src/platform/nodeReplacement/useNodeReplacement.ts

@@ -7,7 +7,7 @@ import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app, sanitizeNodeName } from '@/scripts/app'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
 
@@ -329,24 +329,24 @@ export function useNodeReplacement() {
 
   /**
    * Replaces all nodes in a single swap group and removes successfully
-   * replaced types from the execution error store.
+   * replaced types from the missing nodes error store.
    */
   function replaceGroup(group: ReplacementGroup): void {
     const replaced = replaceNodesInPlace(group.nodeTypes)
     if (replaced.length > 0) {
-      useExecutionErrorStore().removeMissingNodesByType(replaced)
+      useMissingNodesErrorStore().removeMissingNodesByType(replaced)
     }
   }
 
   /**
    * Replaces every available node across all swap groups and removes
-   * the succeeded types from the execution error store.
+   * the succeeded types from the missing nodes error store.
    */
   function replaceAllGroups(groups: ReplacementGroup[]): void {
     const allNodeTypes = groups.flatMap((g) => g.nodeTypes)
     const replaced = replaceNodesInPlace(allNodeTypes)
     if (replaced.length > 0) {
-      useExecutionErrorStore().removeMissingNodesByType(replaced)
+      useMissingNodesErrorStore().removeMissingNodesByType(replaced)
     }
   }
 

src/platform/workflow/core/services/workflowService.test.ts

@@ -12,7 +12,7 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { app } from '@/scripts/app'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
@@ -160,7 +160,7 @@ describe('useWorkflowService', () => {
       useWorkflowService().showPendingWarnings(workflow)
 
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).not.toHaveBeenCalled()
     })
 
@@ -170,9 +170,9 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
-        missingNodeTypes
-      )
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(missingNodeTypes)
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -185,9 +185,9 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
-        ['CustomNode1']
-      )
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(['CustomNode1'])
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -201,7 +201,7 @@ describe('useWorkflowService', () => {
       service.showPendingWarnings(workflow)
 
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledTimes(1)
     })
   })
@@ -226,7 +226,7 @@ describe('useWorkflowService', () => {
       )
 
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).not.toHaveBeenCalled()
 
       await useWorkflowService().openWorkflow(workflow)
@@ -238,9 +238,9 @@ describe('useWorkflowService', () => {
         workflow,
         expect.objectContaining({ deferWarnings: true })
       )
-      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
-        ['CustomNode1']
-      )
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(['CustomNode1'])
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -258,20 +258,20 @@ describe('useWorkflowService', () => {
 
       await service.openWorkflow(workflow1)
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledTimes(1)
-      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
-        ['MissingNodeA']
-      )
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(['MissingNodeA'])
       expect(workflow1.pendingWarnings).toBeNull()
       expect(workflow2.pendingWarnings).not.toBeNull()
 
       await service.openWorkflow(workflow2)
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledTimes(2)
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenLastCalledWith(['MissingNodeB'])
       expect(workflow2.pendingWarnings).toBeNull()
     })
@@ -286,12 +286,12 @@ describe('useWorkflowService', () => {
 
       await service.openWorkflow(workflow, { force: true })
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledTimes(1)
 
       await service.openWorkflow(workflow, { force: true })
       expect(
-        useExecutionErrorStore().surfaceMissingNodes
+        useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledTimes(1)
     })
   })

src/platform/workflow/core/services/workflowService.ts

@@ -23,6 +23,7 @@ import type { AppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
   appendJsonExt,
@@ -43,6 +44,7 @@ export const useWorkflowService = () => {
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
   const executionErrorStore = useExecutionErrorStore()
+  const missingNodesErrorStore = useMissingNodesErrorStore()
   const workflowDraftStore = useWorkflowDraftStore()
 
   function confirmOverwrite(targetPath: string) {
@@ -542,7 +544,9 @@ export const useWorkflowService = () => {
     wf.pendingWarnings = null
 
     if (missingNodeTypes?.length) {
-      executionErrorStore.surfaceMissingNodes(missingNodeTypes)
+      if (missingNodesErrorStore.surfaceMissingNodes(missingNodeTypes)) {
+        executionErrorStore.showErrorOverlay()
+      }
     }
   }
 

src/platform/workflow/persistence/base/storageIO.ts

@@ -250,61 +250,125 @@ function readSessionPointer<T extends { workspaceId: string }>(
 
 /**
  * Reads the active path pointer from sessionStorage.
- * Falls back to workspace-based search when clientId changes after reload.
+ * Falls back to workspace-based search when clientId changes after reload,
+ * then to localStorage when sessionStorage is empty (browser restart).
  */
 export function readActivePath(
   clientId: string,
   targetWorkspaceId?: string
 ): ActivePathPointer | null {
-  return readSessionPointer<ActivePathPointer>(
-    StorageKeys.activePath(clientId),
-    StorageKeys.prefixes.activePath,
-    targetWorkspaceId
+  return (
+    readSessionPointer<ActivePathPointer>(
+      StorageKeys.activePath(clientId),
+      StorageKeys.prefixes.activePath,
+      targetWorkspaceId
+    ) ??
+    (targetWorkspaceId
+      ? readLocalPointer<ActivePathPointer>(
+          StorageKeys.lastActivePath(targetWorkspaceId),
+          isValidActivePathPointer
+        )
+      : null)
   )
 }
 
 /**
- * Writes the active path pointer to sessionStorage.
+ * Writes the active path pointer to both sessionStorage (tab-scoped)
+ * and localStorage (survives browser restart).
  */
 export function writeActivePath(
   clientId: string,
   pointer: ActivePathPointer
 ): void {
-  try {
-    const key = StorageKeys.activePath(clientId)
-    sessionStorage.setItem(key, JSON.stringify(pointer))
-  } catch {
-    // Best effort - ignore errors
-  }
+  const json = JSON.stringify(pointer)
+  writeStorage(sessionStorage, StorageKeys.activePath(clientId), json)
+  writeStorage(
+    localStorage,
+    StorageKeys.lastActivePath(pointer.workspaceId),
+    json
+  )
 }
 
 /**
  * Reads the open paths pointer from sessionStorage.
- * Falls back to workspace-based search when clientId changes after reload.
+ * Falls back to workspace-based search when clientId changes after reload,
+ * then to localStorage when sessionStorage is empty (browser restart).
  */
 export function readOpenPaths(
   clientId: string,
   targetWorkspaceId?: string
 ): OpenPathsPointer | null {
-  return readSessionPointer<OpenPathsPointer>(
-    StorageKeys.openPaths(clientId),
-    StorageKeys.prefixes.openPaths,
-    targetWorkspaceId
+  return (
+    readSessionPointer<OpenPathsPointer>(
+      StorageKeys.openPaths(clientId),
+      StorageKeys.prefixes.openPaths,
+      targetWorkspaceId
+    ) ??
+    (targetWorkspaceId
+      ? readLocalPointer<OpenPathsPointer>(
+          StorageKeys.lastOpenPaths(targetWorkspaceId),
+          isValidOpenPathsPointer
+        )
+      : null)
   )
 }
 
 /**
- * Writes the open paths pointer to sessionStorage.
+ * Writes the open paths pointer to both sessionStorage (tab-scoped)
+ * and localStorage (survives browser restart).
  */
 export function writeOpenPaths(
   clientId: string,
   pointer: OpenPathsPointer
 ): void {
+  const json = JSON.stringify(pointer)
+  writeStorage(sessionStorage, StorageKeys.openPaths(clientId), json)
+  writeStorage(
+    localStorage,
+    StorageKeys.lastOpenPaths(pointer.workspaceId),
+    json
+  )
+}
+
+function hasWorkspaceId(obj: Record<string, unknown>): boolean {
+  return typeof obj.workspaceId === 'string'
+}
+
+function isValidActivePathPointer(value: unknown): value is ActivePathPointer {
+  if (typeof value !== 'object' || value === null) return false
+  const obj = value as Record<string, unknown>
+  return hasWorkspaceId(obj) && typeof obj.path === 'string'
+}
+
+function isValidOpenPathsPointer(value: unknown): value is OpenPathsPointer {
+  if (typeof value !== 'object' || value === null) return false
+  const obj = value as Record<string, unknown>
+  return (
+    hasWorkspaceId(obj) &&
+    Array.isArray(obj.paths) &&
+    typeof obj.activeIndex === 'number'
+  )
+}
+
+function readLocalPointer<T>(
+  key: string,
+  validate: (value: unknown) => value is T
+): T | null {
   try {
-    const key = StorageKeys.openPaths(clientId)
-    sessionStorage.setItem(key, JSON.stringify(pointer))
+    const json = localStorage.getItem(key)
+    if (!json) return null
+    const parsed = JSON.parse(json)
+    return validate(parsed) ? parsed : null
   } catch {
-    // Best effort - ignore errors
+    return null
+  }
+}
+
+function writeStorage(storage: Storage, key: string, value: string): void {
+  try {
+    storage.setItem(key, value)
+  } catch {
+    // Best effort — silently degrade when storage is full or unavailable
   }
 }
 
@@ -317,7 +381,9 @@ export function clearAllV2Storage(): void {
 
   const prefixes = [
     StorageKeys.prefixes.draftIndex,
-    StorageKeys.prefixes.draftPayload
+    StorageKeys.prefixes.draftPayload,
+    StorageKeys.prefixes.lastActivePath,
+    StorageKeys.prefixes.lastOpenPaths
   ]
 
   try {

src/platform/workflow/persistence/base/storageKeys.ts

@@ -72,6 +72,19 @@ export const StorageKeys = {
     return `Comfy.Workflow.OpenPaths:${clientId}`
   },
 
+  /**
+   * localStorage copies of tab pointers for cross-session restore.
+   * sessionStorage is per-tab (correct for in-session use) but lost
+   * on browser restart; these keys preserve the last-written state.
+   */
+  lastActivePath(workspaceId: string): string {
+    return `Comfy.Workflow.LastActivePath:${workspaceId}`
+  },
+
+  lastOpenPaths(workspaceId: string): string {
+    return `Comfy.Workflow.LastOpenPaths:${workspaceId}`
+  },
+
   /**
    * Prefix patterns for cleanup operations.
    */
@@ -79,6 +92,8 @@ export const StorageKeys = {
     draftIndex: 'Comfy.Workflow.DraftIndex.v2:',
     draftPayload: 'Comfy.Workflow.Draft.v2:',
     activePath: 'Comfy.Workflow.ActivePath:',
-    openPaths: 'Comfy.Workflow.OpenPaths:'
+    openPaths: 'Comfy.Workflow.OpenPaths:',
+    lastActivePath: 'Comfy.Workflow.LastActivePath:',
+    lastOpenPaths: 'Comfy.Workflow.LastOpenPaths:'
   }
 } as const

src/renderer/core/canvas/canvasStore.ts

@@ -6,6 +6,7 @@ import type { Raw } from 'vue'
 import { useAppMode } from '@/composables/useAppMode'
 
 import type { Point, Positionable } from '@/lib/litegraph/src/interfaces'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type {
   LGraph,
   LGraphCanvas,
@@ -14,6 +15,7 @@ import type {
   SubgraphNode
 } from '@/lib/litegraph/src/litegraph'
 import { promoteRecommendedWidgets } from '@/core/graph/subgraph/promotionUtils'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { app } from '@/scripts/app'
 import { isLGraphGroup, isLGraphNode, isReroute } from '@/utils/litegraphUtil'
 
@@ -114,6 +116,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 
   const currentGraph = shallowRef<LGraph | null>(null)
   const isInSubgraph = ref(false)
+  const isGhostPlacing = ref(false)
 
   // Provide selection state to all Vue nodes
   const selectedNodeIds = computed(
@@ -148,6 +151,18 @@ export const useCanvasStore = defineStore('canvas', () => {
         (e: CustomEvent<{ subgraphNode: SubgraphNode }>) =>
           promoteRecommendedWidgets(e.detail.subgraphNode)
       )
+
+      useEventListener(
+        newCanvas.canvas,
+        'litegraph:ghost-placement',
+        (e: CustomEvent<{ active: boolean; nodeId: NodeId }>) => {
+          isGhostPlacing.value = e.detail.active
+          if (e.detail.active) {
+            const mutations = useLayoutMutations()
+            mutations.bringNodeToFront(String(e.detail.nodeId))
+          }
+        }
+      )
     },
     { immediate: true }
   )
@@ -167,6 +182,7 @@ export const useCanvasStore = defineStore('canvas', () => {
     initScaleSync,
     cleanupScaleSync,
     currentGraph,
-    isInSubgraph
+    isInSubgraph,
+    isGhostPlacing
   }
 })

src/renderer/extensions/linearMode/DropZone.vue

@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ImageLightbox from '@/components/common/ImageLightbox.vue'
+import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { cn } from '@/utils/tailwindUtil'
 
 defineOptions({ inheritAttrs: false })
@@ -30,26 +31,17 @@ const {
 
 const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
-const pointerStart = ref<{ x: number; y: number } | null>(null)
+const clickGuard = useClickDragGuard(5)
 const lightboxOpen = ref(false)
 
 function onPointerDown(e: PointerEvent) {
-  pointerStart.value = { x: e.clientX, y: e.clientY }
+  clickGuard.recordStart(e)
 }
 
 function onIndicatorClick(e: MouseEvent) {
-  if (e.detail !== 0) {
-    const start = pointerStart.value
-    if (start) {
-      const dx = e.clientX - start.x
-      const dy = e.clientY - start.y
-      if (dx * dx + dy * dy > 25) {
-        pointerStart.value = null
-        return
-      }
-    }
-  }
-  pointerStart.value = null
+  const dragged = e.detail !== 0 && clickGuard.wasDragged(e)
+  clickGuard.reset()
+  if (dragged) return
   dropIndicator?.onClick?.(e)
 }
 

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -2,19 +2,29 @@
 import { ref, useTemplateRef } from 'vue'
 
 import ZoomPane from '@/components/ui/ZoomPane.vue'
+import { useExecutionStatus } from '@/renderer/extensions/linearMode/useExecutionStatus'
 import { cn } from '@/utils/tailwindUtil'
 
+const { executionStatusMessage } = useExecutionStatus()
+
 defineOptions({ inheritAttrs: false })
 
-const { src } = defineProps<{
+const { src, showSize = true } = defineProps<{
   src: string
   mobile?: boolean
   label?: string
+  showSize?: boolean
 }>()
 
 const imageRef = useTemplateRef('imageRef')
-const width = ref('')
-const height = ref('')
+const width = ref<number | null>(null)
+const height = ref<number | null>(null)
+
+function onImageLoad() {
+  if (!imageRef.value || !showSize) return
+  width.value = imageRef.value.naturalWidth
+  height.value = imageRef.value.naturalHeight
+}
 </script>
 <template>
   <ZoomPane
@@ -27,13 +37,7 @@ const height = ref('')
       :src
       v-bind="slotProps"
       class="size-full object-contain"
-      @load="
-        () => {
-          if (!imageRef) return
-          width = `${imageRef.naturalWidth}`
-          height = `${imageRef.naturalHeight}`
-        }
-      "
+      @load="onImageLoad"
     />
   </ZoomPane>
   <img
@@ -41,15 +45,15 @@ const height = ref('')
     ref="imageRef"
     class="grow object-contain contain-size"
     :src
-    @load="
-      () => {
-        if (!imageRef) return
-        width = `${imageRef.naturalWidth}`
-        height = `${imageRef.naturalHeight}`
-      }
-    "
+    @load="onImageLoad"
   />
-  <span class="self-center md:z-10">
+  <span
+    v-if="executionStatusMessage"
+    class="animate-pulse self-center text-muted md:z-10"
+  >
+    {{ executionStatusMessage }}
+  </span>
+  <span v-else-if="width && height" class="self-center md:z-10">
     {{ `${width} x ${height}` }}
     <template v-if="label"> | {{ label }}</template>
   </span>

src/renderer/extensions/linearMode/LatentPreview.vue

@@ -1,7 +1,23 @@
+<script setup lang="ts">
+import { useExecutionStatus } from '@/renderer/extensions/linearMode/useExecutionStatus'
+
+const { executionStatusMessage } = useExecutionStatus()
+</script>
 <template>
-  <div class="flex min-h-0 w-full flex-1 items-center justify-center">
-    <div
-      class="skeleton-shimmer aspect-square size-[min(50vw,50vh)] rounded-lg"
-    />
+  <div
+    class="sz-full flex min-h-0 flex-1 flex-col items-center justify-center gap-3"
+  >
+    <div class="flex h-full items-center justify-center">
+      <div
+        class="skeleton-shimmer aspect-square size-[min(50vw,50vh)] rounded-lg"
+      />
+    </div>
+
+    <span
+      v-if="executionStatusMessage"
+      class="animate-pulse text-sm text-muted"
+    >
+      {{ executionStatusMessage }}
+    </span>
   </div>
 </template>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -136,6 +136,7 @@ async function rerun(e: Event) {
     v-if="canShowPreview && latentPreview"
     :mobile
     :src="latentPreview"
+    :show-size="false"
   />
   <MediaOutputPreview
     v-else-if="selectedOutput"

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

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import { getExecutionStatusMessage } from './getExecutionStatusMessage'
+
+// Pass-through t so we can assert the i18n key
+const t = (key: string) => key
+
+describe('getExecutionStatusMessage', () => {
+  describe('custom messages', () => {
+    it('returns custom message from properties when set', () => {
+      expect(
+        getExecutionStatusMessage(t, 'KSampler', null, {
+          'Execution Message': 'custom status'
+        })
+      ).toBe('custom status')
+    })
+
+    it('ignores empty or whitespace-only custom message', () => {
+      expect(
+        getExecutionStatusMessage(t, 'KSampler', null, {
+          'Execution Message': '  '
+        })
+      ).toBe('execution.generating')
+    })
+  })
+
+  describe('API nodes', () => {
+    it('returns processing for API nodes', () => {
+      const apiDef = { api_node: true } as ComfyNodeDefImpl
+      expect(getExecutionStatusMessage(t, 'SomeApiNode', apiDef)).toBe(
+        'execution.processing'
+      )
+    })
+
+    it('statusMap takes precedence over api_node flag', () => {
+      const apiDef = { api_node: true } as ComfyNodeDefImpl
+      expect(getExecutionStatusMessage(t, 'KSampler', apiDef)).toBe(
+        'execution.generating'
+      )
+    })
+  })
+
+  describe('Node type matching', () => {
+    it('does not match partial PascalCase words', () => {
+      expect(getExecutionStatusMessage(t, 'Loads')).toBeNull()
+    })
+
+    it('matches identifier mid-string at PascalCase boundary', () => {
+      expect(getExecutionStatusMessage(t, 'CompositeSaveImage')).toBe(
+        'execution.saving'
+      )
+    })
+
+    it('matches identifier followed by non-letter characters', () => {
+      expect(getExecutionStatusMessage(t, 'Save_V2')).toBe('execution.saving')
+      expect(getExecutionStatusMessage(t, 'LoadImage🐍')).toBe(
+        'execution.loading'
+      )
+    })
+
+    const testNodeTypes: [string, string[]][] = [
+      ['generating', ['KSampler', 'SamplerCustomAdvanced']],
+      [
+        'saving',
+        ['SaveImage', 'SaveAnimatedWEBP', 'PreviewImage', 'MaskPreview']
+      ],
+      ['loading', ['LoadImage', 'VAELoader', 'CheckpointLoaderSimple']],
+      [
+        'encoding',
+        ['VAEEncode', 'StableCascade_StageC_VAEEncode', 'CLIPTextEncode']
+      ],
+      ['decoding', ['VAEDecode', 'VAEDecodeHunyuan3D']],
+      [
+        'resizing',
+        ['ImageUpscaleWithModel', 'LatentUpscale', 'ResizeImageMaskNode']
+      ],
+      [
+        'processing',
+        ['TorchCompileModel', 'SVD_img2vid_Conditioning', 'ModelMergeSimple']
+      ],
+      ['generatingVideo', ['WanImageToVideo', 'WanFunControlToVideo']],
+      ['processingVideo', ['Video Slice', 'CreateVideo']],
+      ['training', ['TrainLoraNode']]
+    ]
+
+    it.for(
+      testNodeTypes.flatMap(([status, nodes]) =>
+        nodes.map((node) => [status, node] as const)
+      )
+    )('%s ← %s', ([status, nodeType]) => {
+      expect(getExecutionStatusMessage(t, nodeType)).toBe(`execution.${status}`)
+    })
+  })
+
+  it('returns null for nodes matching no pattern', () => {
+    expect(getExecutionStatusMessage(t, 'PrimitiveString')).toBeNull()
+  })
+})

src/renderer/extensions/linearMode/getExecutionStatusMessage.ts

@@ -0,0 +1,67 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+type ExecutionStatusKey =
+  | 'generating'
+  | 'saving'
+  | 'loading'
+  | 'encoding'
+  | 'decoding'
+  | 'processing'
+  | 'resizing'
+  | 'generatingVideo'
+  | 'processingVideo'
+  | 'training'
+
+/**
+ * Specific status messages for nodes that can't be matched by PascalCase
+ * identifier patterns (e.g. unconventional naming, spaces).
+ */
+const statusMap: Record<string, ExecutionStatusKey> = {
+  // Video utility nodes with non-standard naming
+  'Video Slice': 'processingVideo',
+  GetVideoComponents: 'processingVideo',
+  CreateVideo: 'processingVideo',
+
+  // Training
+  TrainLoraNode: 'training'
+}
+
+/**
+ * Matches a PascalCase identifier within a node type name.
+ */
+function pascalId(...ids: string[]): RegExp {
+  return new RegExp('(?:' + ids.join('|') + ')(?![a-z])')
+}
+
+const identifierRules: [RegExp, ExecutionStatusKey][] = [
+  [pascalId('Save', 'Preview'), 'saving'],
+  [pascalId('Load', 'Loader'), 'loading'],
+  [pascalId('Encode'), 'encoding'],
+  [pascalId('Decode'), 'decoding'],
+  [pascalId('Compile', 'Conditioning', 'Merge'), 'processing'],
+  [pascalId('Upscale', 'Resize'), 'resizing'],
+  [pascalId('ToVideo'), 'generatingVideo'],
+  [pascalId('Sampler'), 'generating']
+]
+
+export function getExecutionStatusMessage(
+  t: (key: string) => string,
+  nodeType: string,
+  nodeDef?: ComfyNodeDefImpl | null,
+  properties?: Record<string, unknown>
+): string | null {
+  const customMessage = properties?.['Execution Message']
+  if (typeof customMessage === 'string' && customMessage.trim()) {
+    return customMessage.trim()
+  }
+
+  if (nodeType in statusMap) return t(`execution.${statusMap[nodeType]}`)
+
+  for (const [pattern, key] of identifierRules) {
+    if (pattern.test(nodeType)) return t(`execution.${key}`)
+  }
+
+  if (nodeDef?.api_node) return t('execution.processing')
+
+  return null
+}

src/renderer/extensions/linearMode/useExecutionStatus.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { getExecutionStatusMessage } from '@/renderer/extensions/linearMode/getExecutionStatusMessage'
+import { app } from '@/scripts/app'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import {
+  executionIdToNodeLocatorId,
+  getNodeByLocatorId
+} from '@/utils/graphTraversalUtil'
+
+function resolveStatus(
+  t: (key: string) => string,
+  nodeDefStore: ReturnType<typeof useNodeDefStore>,
+  executionId: string | number
+): string | null {
+  const locatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
+  if (!locatorId) return null
+
+  const node = getNodeByLocatorId(app.rootGraph, locatorId)
+  const nodeType = node?.type
+  if (!nodeType) return null
+
+  const nodeDef = nodeDefStore.nodeDefsByName[nodeType] ?? null
+  return getExecutionStatusMessage(t, nodeType, nodeDef, node.properties)
+}
+
+export function useExecutionStatus() {
+  const { t } = useI18n()
+  const executionStore = useExecutionStore()
+  const nodeDefStore = useNodeDefStore()
+
+  const executionStatusMessage = computed<string | null>(() => {
+    const executionId = executionStore.executingNodeId
+    if (!executionId) return null
+    return resolveStatus(t, nodeDefStore, executionId) || t('execution.running')
+  })
+
+  return { executionStatusMessage }
+}

src/renderer/extensions/vueNodes/VideoPreview.vue

@@ -101,7 +101,11 @@
 
     <!-- Video Dimensions -->
     <div class="mt-2 text-center text-xs text-muted-foreground">
-      <span v-if="videoError" class="text-red-400">
+      <span
+        v-if="videoError"
+        class="text-red-400"
+        data-testid="error-loading-video"
+      >
         {{ $t('g.errorLoadingVideo') }}
       </span>
       <span v-else-if="showLoader" class="text-smoke-400">

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -117,7 +117,11 @@
       v-if="viewMode === 'gallery'"
       class="pt-2 text-center text-xs text-base-foreground"
     >
-      <span v-if="imageError" class="text-error">
+      <span
+        v-if="imageError"
+        class="text-error"
+        data-testid="error-loading-image"
+      >
         {{ $t('g.errorLoadingImage') }}
       </span>
       <span v-else-if="showLoader" class="text-base-foreground">

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -16,7 +16,9 @@
         cursorClass,
         isSelected && 'outline-node-component-outline',
         executing && 'outline-node-stroke-executing',
-        shouldHandleNodePointerEvents && !nodeData.flags?.ghost
+        shouldHandleNodePointerEvents &&
+          !nodeData.flags?.ghost &&
+          !isGhostPlacing
           ? 'pointer-events-auto'
           : 'pointer-events-none'
       )
@@ -27,6 +29,7 @@
       zIndex: zIndex,
       opacity: nodeOpacity
     }"
+    :inert="isGhostPlacing"
     v-bind="remainingPointerHandlers"
     @pointerdown="nodeOnPointerdown"
     @wheel="handleWheel"
@@ -304,6 +307,7 @@ import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeS
 import { app } from '@/scripts/app'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isVideoOutput } from '@/utils/litegraphUtil'
@@ -346,7 +350,7 @@ const { bringNodeToFront } = useNodeZIndex()
 
 useVueElementTracking(() => nodeData.id, 'node')
 
-const { selectedNodeIds } = storeToRefs(useCanvasStore())
+const { selectedNodeIds, isGhostPlacing } = storeToRefs(useCanvasStore())
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
 })
@@ -355,6 +359,7 @@ const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
+const missingNodesErrorStore = useMissingNodesErrorStore()
 const hasExecutionError = computed(
   () => executionErrorStore.lastExecutionErrorNodeId === nodeData.id
 )
@@ -368,7 +373,7 @@ const hasAnyError = computed((): boolean => {
     missingModelStore.hasMissingModelOnNode(nodeLocatorId.value) ||
     (lgraphNode.value &&
       (executionErrorStore.isContainerWithInternalError(lgraphNode.value) ||
-        executionErrorStore.isContainerWithMissingNode(lgraphNode.value) ||
+        missingNodesErrorStore.isContainerWithMissingNode(lgraphNode.value) ||
         missingModelStore.isContainerWithMissingModel(lgraphNode.value)))
   )
 })

src/renderer/extensions/vueNodes/components/NodeFooter.vue

@@ -28,7 +28,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
-      :style="{ backgroundColor: headerColor }"
+      :style="headerColorStyle"
       @click.stop="$emit('enterSubgraph')"
     >
       <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -73,6 +73,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
+      :style="headerColorStyle"
       @click.stop="$emit('toggleAdvanced')"
     >
       <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
@@ -124,7 +125,7 @@
           '-z-10 bg-node-component-header-surface'
         )
       "
-      :style="{ backgroundColor: headerColor }"
+      :style="headerColorStyle"
       @click.stop="$emit('enterSubgraph')"
     >
       <div class="flex size-full items-center justify-center gap-2">
@@ -145,6 +146,7 @@
         '-z-10 bg-node-component-header-surface'
       )
     "
+    :style="headerColorStyle"
     @click.stop="$emit('toggleAdvanced')"
   >
     <div class="flex size-full items-center justify-center gap-2">
@@ -233,6 +235,10 @@ const getTabStyles = (isBackground = false) => {
   )
 }
 
+const headerColorStyle = computed(() =>
+  props.headerColor ? { backgroundColor: props.headerColor } : undefined
+)
+
 // Case 1 context: Split widths
 const errorTabWidth = 'w-[calc(50%+4px)]'
 const enterTabFullWidth = 'w-[calc(100%+8px)]'

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -55,25 +55,12 @@
         </div>
       </div>
 
-      <template v-for="badge in priceBadges ?? []" :key="badge.required">
-        <span
-          :class="
-            cn(
-              'flex h-5 shrink-0 items-center bg-component-node-widget-background p-1 text-xs',
-              badge.rest ? 'rounded-l-full pr-1' : 'rounded-full'
-            )
-          "
-        >
-          <i class="icon-[lucide--component] h-full bg-amber-400" />
-          <span class="truncate" v-text="badge.required" />
-        </span>
-        <span
-          v-if="badge.rest"
-          class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
-        >
-          <span class="pr-2" v-text="badge.rest" />
-        </span>
-      </template>
+      <CreditBadge
+        v-for="badge in priceBadges ?? []"
+        :key="badge.required"
+        :text="badge.required"
+        :rest="badge.rest"
+      />
       <NodeBadge v-if="statusBadge" v-bind="statusBadge" />
       <i
         v-if="isPinned"
@@ -88,6 +75,7 @@
 import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
+import CreditBadge from '@/components/node/CreditBadge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'

src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts

@@ -1,7 +1,8 @@
-import { onScopeDispose, ref, toValue } from 'vue'
+import { onScopeDispose, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
 import { isMiddlePointerInput } from '@/base/pointerUtils'
+import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -28,9 +29,7 @@ export function useNodePointerInteractions(
 
   let hasDraggingStarted = false
 
-  const startPosition = ref({ x: 0, y: 0 })
-
-  const DRAG_THRESHOLD = 3 // pixels
+  const dragGuard = useClickDragGuard(3)
 
   function onPointerdown(event: PointerEvent) {
     if (forwardMiddlePointerIfNeeded(event)) return
@@ -57,7 +56,7 @@ export function useNodePointerInteractions(
       return
     }
 
-    startPosition.value = { x: event.clientX, y: event.clientY }
+    dragGuard.recordStart(event)
 
     safeDragStart(event, nodeId)
   }
@@ -85,11 +84,7 @@ export function useNodePointerInteractions(
     }
     // Check if we should start dragging (pointer moved beyond threshold)
     if (lmbDown && !layoutStore.isDraggingVueNodes.value) {
-      const dx = event.clientX - startPosition.value.x
-      const dy = event.clientY - startPosition.value.y
-      const distance = Math.sqrt(dx * dx + dy * dy)
-
-      if (distance > DRAG_THRESHOLD) {
+      if (dragGuard.wasDragged(event)) {
         layoutStore.isDraggingVueNodes.value = true
         handleNodeSelect(event, nodeId)
       }

src/scripts/app.ts

@@ -65,6 +65,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
@@ -83,7 +84,7 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import type { ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { getCnrIdFromProperties } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+import { getCnrIdFromProperties } from '@/platform/nodeReplacement/cnrIdUtil'
 import { rescanAndSurfaceMissingNodes } from '@/platform/nodeReplacement/missingNodeScan'
 import {
   scanAllModelCandidates,
@@ -1105,7 +1106,9 @@ export class ComfyApp {
   }
 
   private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
-    useExecutionErrorStore().surfaceMissingNodes(missingNodeTypes)
+    if (useMissingNodesErrorStore().surfaceMissingNodes(missingNodeTypes)) {
+      useExecutionErrorStore().showErrorOverlay()
+    }
   }
 
   async loadGraphData(

src/services/nodeOrganizationService.ts

@@ -1,8 +1,9 @@
 import { resolveBlueprintEssentialsCategory } from '@/constants/essentialsDisplayNames'
 import type { EssentialsCategory } from '@/constants/essentialsNodes'
 import {
-  ESSENTIALS_CATEGORIES,
-  ESSENTIALS_NODES
+  ESSENTIALS_CATEGORY_CANONICAL,
+  ESSENTIALS_CATEGORY_RANK,
+  ESSENTIALS_NODE_RANK
 } from '@/constants/essentialsNodes'
 import { t } from '@/i18n'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -19,6 +20,34 @@ import type { TreeNode } from '@/types/treeExplorerTypes'
 import { sortedTree, unwrapTreeRoot } from '@/utils/treeUtil'
 
 const DEFAULT_ICON = 'pi pi-sort'
+const UNKNOWN_RANK = Number.MAX_SAFE_INTEGER
+
+function resolveEssentialsCategory(
+  nodeDef: ComfyNodeDefImpl
+): EssentialsCategory | undefined {
+  if (!nodeDef.isCoreNode) return undefined
+
+  if (nodeDef.essentials_category) {
+    return (
+      ESSENTIALS_CATEGORY_CANONICAL.get(
+        nodeDef.essentials_category.toLowerCase()
+      ) ?? (nodeDef.essentials_category as EssentialsCategory)
+    )
+  }
+  return resolveBlueprintEssentialsCategory(nodeDef.name)
+}
+
+function sortByKnownOrder<T>(
+  items: T[],
+  getKey: (item: T) => string | undefined,
+  rankMap: ReadonlyMap<string, number>
+): void {
+  items.sort(
+    (a, b) =>
+      (rankMap.get(getKey(a) ?? '') ?? UNKNOWN_RANK) -
+      (rankMap.get(getKey(b) ?? '') ?? UNKNOWN_RANK)
+  )
+}
 
 function categoryPathExtractor(nodeDef: ComfyNodeDefImpl): string[] {
   const category = nodeDef.category || ''
@@ -147,44 +176,39 @@ class NodeOrganizationService {
   }
 
   private organizeEssentials(nodes: ComfyNodeDefImpl[]): NodeSection[] {
-    const essentialNodes = nodes.filter(
-      (nodeDef) =>
-        !!nodeDef.essentials_category ||
-        !!resolveBlueprintEssentialsCategory(nodeDef.name)
-    )
-    const tree = buildNodeDefTree(essentialNodes, {
-      pathExtractor: (nodeDef) => {
-        const folder =
-          nodeDef.essentials_category ||
-          resolveBlueprintEssentialsCategory(nodeDef.name) ||
-          ''
-        return folder ? [folder, nodeDef.name] : [nodeDef.name]
-      }
+    const categoryByNode = new Map<ComfyNodeDefImpl, EssentialsCategory>()
+    const essentialNodes = nodes.filter((node) => {
+      const category = resolveEssentialsCategory(node)
+      if (!category) return false
+      categoryByNode.set(node, category)
+      return true
     })
-    this.sortEssentialsFolders(tree)
+
+    const tree = buildNodeDefTree(essentialNodes, {
+      pathExtractor: (node) => [categoryByNode.get(node)!, node.name]
+    })
+    this.sortEssentialsTree(tree)
     return [{ tree }]
   }
 
-  private sortEssentialsFolders(tree: TreeNode): void {
+  private sortEssentialsTree(tree: TreeNode): void {
     if (!tree.children) return
 
-    const catLen = ESSENTIALS_CATEGORIES.length
-    tree.children.sort((a, b) => {
-      const ai = ESSENTIALS_CATEGORIES.indexOf(a.label as EssentialsCategory)
-      const bi = ESSENTIALS_CATEGORIES.indexOf(b.label as EssentialsCategory)
-      return (ai === -1 ? catLen : ai) - (bi === -1 ? catLen : bi)
-    })
+    sortByKnownOrder(
+      tree.children,
+      (node) => node.label,
+      ESSENTIALS_CATEGORY_RANK
+    )
 
     for (const folder of tree.children) {
       if (!folder.children) continue
-      const order = ESSENTIALS_NODES[folder.label as EssentialsCategory]
-      if (!order) continue
-      const orderLen = order.length
-      folder.children.sort((a, b) => {
-        const ai = order.indexOf(a.data?.name ?? a.label ?? '')
-        const bi = order.indexOf(b.data?.name ?? b.label ?? '')
-        return (ai === -1 ? orderLen : ai) - (bi === -1 ? orderLen : bi)
-      })
+      const rankMap = ESSENTIALS_NODE_RANK[folder.label as EssentialsCategory]
+      if (!rankMap) continue
+      sortByKnownOrder(
+        folder.children,
+        (node) => node.data?.name ?? node.label,
+        rankMap
+      )
     }
   }
 

src/stores/executionErrorStore.test.ts

@@ -34,193 +34,7 @@ vi.mock(
 )
 
 import { useExecutionErrorStore } from './executionErrorStore'
-
-describe('executionErrorStore — missing node operations', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-  })
-
-  describe('setMissingNodeTypes', () => {
-    it('sets missingNodesError with provided types', () => {
-      const store = useExecutionErrorStore()
-      const types: MissingNodeType[] = [
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ]
-      store.setMissingNodeTypes(types)
-
-      expect(store.missingNodesError).not.toBeNull()
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      expect(store.hasMissingNodes).toBe(true)
-    })
-
-    it('clears missingNodesError when given empty array', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-      expect(store.missingNodesError).not.toBeNull()
-
-      store.setMissingNodeTypes([])
-      expect(store.missingNodesError).toBeNull()
-      expect(store.hasMissingNodes).toBe(false)
-    })
-
-    it('deduplicates string entries by value', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        'NodeA',
-        'NodeA',
-        'NodeB'
-      ] as MissingNodeType[])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-
-    it('deduplicates object entries by nodeId when present', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '2', isReplaceable: false }
-      ])
-
-      // Same nodeId='1' deduplicated, nodeId='2' kept
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-
-    it('deduplicates object entries by type when nodeId is absent', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', isReplaceable: false },
-        { type: 'NodeA', isReplaceable: true }
-      ] as MissingNodeType[])
-
-      // Same type, no nodeId → deduplicated
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-
-    it('keeps distinct nodeIds even when type is the same', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '2', isReplaceable: false },
-        { type: 'NodeA', nodeId: '3', isReplaceable: false }
-      ])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(3)
-    })
-  })
-
-  describe('surfaceMissingNodes', () => {
-    beforeEach(() => {
-      mockShowErrorsTab.value = false
-    })
-
-    it('stores missing node types when called', () => {
-      const store = useExecutionErrorStore()
-      const types: MissingNodeType[] = [
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ]
-      store.surfaceMissingNodes(types)
-
-      expect(store.missingNodesError).not.toBeNull()
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      expect(store.hasMissingNodes).toBe(true)
-    })
-
-    it('opens error overlay when ShowErrorsTab setting is true', () => {
-      mockShowErrorsTab.value = true
-      const store = useExecutionErrorStore()
-      store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      expect(store.isErrorOverlayOpen).toBe(true)
-    })
-
-    it('does not open error overlay when ShowErrorsTab setting is false', () => {
-      mockShowErrorsTab.value = false
-      const store = useExecutionErrorStore()
-      store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      expect(store.isErrorOverlayOpen).toBe(false)
-    })
-
-    it('deduplicates node types', () => {
-      const store = useExecutionErrorStore()
-      store.surfaceMissingNodes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeB', nodeId: '2', isReplaceable: false }
-      ])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
-    })
-  })
-
-  describe('removeMissingNodesByType', () => {
-    it('removes matching types from the missing nodes list', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false },
-        { type: 'NodeB', nodeId: '2', isReplaceable: false },
-        { type: 'NodeC', nodeId: '3', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NodeA', 'NodeC'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-      const remaining = store.missingNodesError?.nodeTypes[0]
-      expect(typeof remaining !== 'string' && remaining?.type).toBe('NodeB')
-    })
-
-    it('clears missingNodesError when all types are removed', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NodeA'])
-
-      expect(store.missingNodesError).toBeNull()
-      expect(store.hasMissingNodes).toBe(false)
-    })
-
-    it('does nothing when missingNodesError is null', () => {
-      const store = useExecutionErrorStore()
-      expect(store.missingNodesError).toBeNull()
-
-      // Should not throw
-      store.removeMissingNodesByType(['NodeA'])
-      expect(store.missingNodesError).toBeNull()
-    })
-
-    it('does nothing when removing non-existent types', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        { type: 'NodeA', nodeId: '1', isReplaceable: false }
-      ])
-
-      store.removeMissingNodesByType(['NonExistent'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-
-    it('handles removing from string entries', () => {
-      const store = useExecutionErrorStore()
-      store.setMissingNodeTypes([
-        'StringNodeA',
-        'StringNodeB'
-      ] as MissingNodeType[])
-
-      store.removeMissingNodesByType(['StringNodeA'])
-
-      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
-    })
-  })
-})
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 
 describe('executionErrorStore — node error operations', () => {
   beforeEach(() => {
@@ -537,16 +351,18 @@ describe('executionErrorStore — node error operations', () => {
 })
 
 describe('clearAllErrors', () => {
-  let store: ReturnType<typeof useExecutionErrorStore>
+  let executionErrorStore: ReturnType<typeof useExecutionErrorStore>
+  let missingNodesStore: ReturnType<typeof useMissingNodesErrorStore>
 
   beforeEach(() => {
     const pinia = createPinia()
     setActivePinia(pinia)
-    store = useExecutionErrorStore()
+    executionErrorStore = useExecutionErrorStore()
+    missingNodesStore = useMissingNodesErrorStore()
   })
 
   it('resets all error categories and closes error overlay', () => {
-    store.lastExecutionError = {
+    executionErrorStore.lastExecutionError = {
       prompt_id: 'test',
       timestamp: 0,
       node_id: '1',
@@ -556,8 +372,12 @@ describe('clearAllErrors', () => {
       exception_type: 'RuntimeError',
       traceback: []
     }
-    store.lastPromptError = { type: 'execution', message: 'fail', details: '' }
-    store.lastNodeErrors = {
+    executionErrorStore.lastPromptError = {
+      type: 'execution',
+      message: 'fail',
+      details: ''
+    }
+    executionErrorStore.lastNodeErrors = {
       '1': {
         errors: [
           {
@@ -571,19 +391,18 @@ describe('clearAllErrors', () => {
         class_type: 'Test'
       }
     }
-    store.missingNodesError = {
-      message: 'Missing nodes',
-      nodeTypes: [{ type: 'MissingNode', hint: '' }]
-    }
-    store.showErrorOverlay()
+    missingNodesStore.setMissingNodeTypes([
+      { type: 'MissingNode', hint: '' }
+    ] as unknown as MissingNodeType[])
+    executionErrorStore.showErrorOverlay()
 
-    store.clearAllErrors()
+    executionErrorStore.clearAllErrors()
 
-    expect(store.lastExecutionError).toBeNull()
-    expect(store.lastPromptError).toBeNull()
-    expect(store.lastNodeErrors).toBeNull()
-    expect(store.missingNodesError).toBeNull()
-    expect(store.isErrorOverlayOpen).toBe(false)
-    expect(store.hasAnyError).toBe(false)
+    expect(executionErrorStore.lastExecutionError).toBeNull()
+    expect(executionErrorStore.lastPromptError).toBeNull()
+    expect(executionErrorStore.lastNodeErrors).toBeNull()
+    expect(missingNodesStore.missingNodesError).toBeNull()
+    expect(executionErrorStore.isErrorOverlayOpen).toBe(false)
+    expect(executionErrorStore.hasAnyError).toBe(false)
   })
 })

src/stores/executionErrorStore.ts

@@ -1,122 +1,43 @@
 import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
-import { st } from '@/i18n'
-import { isCloud } from '@/platform/distribution/types'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeErrorFlagSync } from '@/composables/graph/useNodeErrorFlagSync'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
   PromptError
 } from '@/schemas/apiSchema'
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import type { MissingModelCandidate } from '@/platform/missingModel/types'
-import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import {
-  getAncestorExecutionIds,
-  getParentExecutionIds
-} from '@/types/nodeIdentification'
+import { getAncestorExecutionIds } from '@/types/nodeIdentification'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
-import type { MissingNodeType } from '@/types/comfy'
 import {
   executionIdToNodeLocatorId,
-  forEachNode,
-  getNodeByExecutionId,
   getExecutionIdByNode,
-  getActiveGraphNodeIds
+  getNodeByExecutionId
 } from '@/utils/graphTraversalUtil'
 import {
-  isValueStillOutOfRange,
-  SIMPLE_ERROR_TYPES
+  SIMPLE_ERROR_TYPES,
+  isValueStillOutOfRange
 } from '@/utils/executionErrorUtil'
-
-interface MissingNodesError {
-  message: string
-  nodeTypes: MissingNodeType[]
-}
-
-function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
-  if (node.has_errors === hasErrors) return
-  const oldValue = node.has_errors
-  node.has_errors = hasErrors
-  node.graph?.trigger('node:property:changed', {
-    type: 'node:property:changed',
-    nodeId: node.id,
-    property: 'has_errors',
-    oldValue,
-    newValue: hasErrors
-  })
-}
-
-/**
- * Single-pass reconciliation of node error flags.
- * Collects the set of nodes that should have errors, then walks all nodes
- * once, setting each flag exactly once. This avoids the redundant
- * true→false→true transition (and duplicate events) that a clear-then-apply
- * approach would cause.
- */
-function reconcileNodeErrorFlags(
-  rootGraph: LGraph,
-  nodeErrors: Record<string, NodeError> | null,
-  missingModelExecIds: Set<string>
-): void {
-  // Collect nodes and slot info that should be flagged
-  // Includes both error-owning nodes and their ancestor containers
-  const flaggedNodes = new Set<LGraphNode>()
-  const errorSlots = new Map<LGraphNode, Set<string>>()
-
-  if (nodeErrors) {
-    for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
-      const node = getNodeByExecutionId(rootGraph, executionId)
-      if (!node) continue
-
-      flaggedNodes.add(node)
-      const slotNames = new Set<string>()
-      for (const error of nodeError.errors) {
-        const name = error.extra_info?.input_name
-        if (name) slotNames.add(name)
-      }
-      if (slotNames.size > 0) errorSlots.set(node, slotNames)
-
-      for (const parentId of getParentExecutionIds(executionId)) {
-        const parentNode = getNodeByExecutionId(rootGraph, parentId)
-        if (parentNode) flaggedNodes.add(parentNode)
-      }
-    }
-  }
-
-  for (const execId of missingModelExecIds) {
-    const node = getNodeByExecutionId(rootGraph, execId)
-    if (node) flaggedNodes.add(node)
-  }
-
-  forEachNode(rootGraph, (node) => {
-    setNodeHasErrors(node, flaggedNodes.has(node))
-
-    if (node.inputs) {
-      const nodeSlotNames = errorSlots.get(node)
-      for (const slot of node.inputs) {
-        slot.hasErrors = !!nodeSlotNames?.has(slot.name)
-      }
-    }
-  })
-}
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 
 /** Execution error state: node errors, runtime errors, prompt errors, and missing assets. */
 export const useExecutionErrorStore = defineStore('executionError', () => {
   const workflowStore = useWorkflowStore()
   const canvasStore = useCanvasStore()
-
   const missingModelStore = useMissingModelStore()
+  const missingNodesStore = useMissingNodesErrorStore()
 
   const lastNodeErrors = ref<Record<NodeId, NodeError> | null>(null)
   const lastExecutionError = ref<ExecutionErrorWsMessage | null>(null)
   const lastPromptError = ref<PromptError | null>(null)
-  const missingNodesError = ref<MissingNodesError | null>(null)
 
   const isErrorOverlayOpen = ref(false)
 
@@ -136,7 +57,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     lastExecutionError.value = null
     lastPromptError.value = null
     lastNodeErrors.value = null
-    missingNodesError.value = null
+    missingNodesStore.setMissingNodeTypes([])
     isErrorOverlayOpen.value = false
   }
 
@@ -238,14 +159,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     missingModelStore.removeMissingModelByWidget(executionId, widgetName)
   }
 
-  /** Set missing node types and open the error overlay if the Errors tab is enabled. */
-  function surfaceMissingNodes(types: MissingNodeType[]) {
-    setMissingNodeTypes(types)
-    if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
-      showErrorOverlay()
-    }
-  }
-
   /** Set missing models and open the error overlay if the Errors tab is enabled. */
   function surfaceMissingModels(models: MissingModelCandidate[]) {
     missingModelStore.setMissingModels(models)
@@ -257,51 +170,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     }
   }
 
-  /** Remove specific node types from the missing nodes list (e.g. after replacement). */
-  function removeMissingNodesByType(typesToRemove: string[]) {
-    if (!missingNodesError.value) return
-    const removeSet = new Set(typesToRemove)
-    const remaining = missingNodesError.value.nodeTypes.filter((node) => {
-      const nodeType = typeof node === 'string' ? node : node.type
-      return !removeSet.has(nodeType)
-    })
-    setMissingNodeTypes(remaining)
-  }
-
-  function setMissingNodeTypes(types: MissingNodeType[]) {
-    if (!types.length) {
-      missingNodesError.value = null
-      return
-    }
-    const seen = new Set<string>()
-    const uniqueTypes = types.filter((node) => {
-      // For string entries (group nodes), deduplicate by the string itself.
-      // For object entries, prefer nodeId so multiple instances of the same
-      // type are kept as separate rows; fall back to type if nodeId is absent.
-      const isString = typeof node === 'string'
-      let key: string
-      if (isString) {
-        key = node
-      } else if (node.nodeId != null) {
-        key = String(node.nodeId)
-      } else {
-        key = node.type
-      }
-      if (seen.has(key)) return false
-      seen.add(key)
-      return true
-    })
-    missingNodesError.value = {
-      message: isCloud
-        ? st(
-            'rightSidePanel.missingNodePacks.unsupportedTitle',
-            'Unsupported Node Packs'
-          )
-        : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
-      nodeTypes: uniqueTypes
-    }
-  }
-
   const lastExecutionErrorNodeLocatorId = computed(() => {
     const err = lastExecutionError.value
     if (!err) return null
@@ -323,14 +191,12 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     () => !!lastNodeErrors.value && Object.keys(lastNodeErrors.value).length > 0
   )
 
-  const hasMissingNodes = computed(() => !!missingNodesError.value)
-
   const hasAnyError = computed(
     () =>
       hasExecutionError.value ||
       hasPromptError.value ||
       hasNodeError.value ||
-      hasMissingNodes.value ||
+      missingNodesStore.hasMissingNodes ||
       missingModelStore.hasMissingModels
   )
 
@@ -361,14 +227,12 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   const executionErrorCount = computed(() => (lastExecutionError.value ? 1 : 0))
 
-  const missingNodeCount = computed(() => (missingNodesError.value ? 1 : 0))
-
   const totalErrorCount = computed(
     () =>
       promptErrorCount.value +
       nodeErrorCount.value +
       executionErrorCount.value +
-      missingNodeCount.value +
+      missingNodesStore.missingNodeCount +
       missingModelStore.missingModelCount
   )
 
@@ -400,37 +264,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return ids
   })
 
-  /**
-   * Set of all execution ID prefixes derived from missing node execution IDs,
-   * including the missing nodes themselves.
-   *
-   * Example: missing node at "65:70:63" → Set { "65", "65:70", "65:70:63" }
-   */
-  const missingAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
-    const ids = new Set<NodeExecutionId>()
-    const error = missingNodesError.value
-    if (!error) return ids
-
-    for (const nodeType of error.nodeTypes) {
-      if (typeof nodeType === 'string') continue
-      if (nodeType.nodeId == null) continue
-      for (const id of getAncestorExecutionIds(String(nodeType.nodeId))) {
-        ids.add(id)
-      }
-    }
-
-    return ids
-  })
-
-  const activeMissingNodeGraphIds = computed<Set<string>>(() => {
-    if (!app.isGraphReady) return new Set()
-    return getActiveGraphNodeIds(
-      app.rootGraph,
-      canvasStore.currentGraph ?? app.rootGraph,
-      missingAncestorExecutionIds.value
-    )
-  })
-
   /** Map of node errors indexed by locator ID. */
   const nodeErrorsByLocatorId = computed<Record<NodeLocatorId, NodeError>>(
     () => {
@@ -493,42 +326,13 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return errorAncestorExecutionIds.value.has(execId)
   }
 
-  /** True if the node has a missing node inside it at any nesting depth. */
-  function isContainerWithMissingNode(node: LGraphNode): boolean {
-    if (!app.isGraphReady) return false
-    const execId = getExecutionIdByNode(app.rootGraph, node)
-    if (!execId) return false
-    return missingAncestorExecutionIds.value.has(execId)
-  }
-
-  watch(
-    [lastNodeErrors, () => missingModelStore.missingModelNodeIds],
-    () => {
-      if (!app.isGraphReady) return
-      // Legacy (LGraphNode) only: suppress missing-model error flags when
-      // the Errors tab is hidden, since legacy nodes lack the per-widget
-      // red highlight that Vue nodes use to indicate *why* a node has errors.
-      // Vue nodes compute hasAnyError independently and are unaffected.
-      const showErrorsTab = useSettingStore().get(
-        'Comfy.RightSidePanel.ShowErrorsTab'
-      )
-      reconcileNodeErrorFlags(
-        app.rootGraph,
-        lastNodeErrors.value,
-        showErrorsTab
-          ? missingModelStore.missingModelAncestorExecutionIds
-          : new Set()
-      )
-    },
-    { flush: 'post' }
-  )
+  useNodeErrorFlagSync(lastNodeErrors, missingModelStore)
 
   return {
     // Raw state
     lastNodeErrors,
     lastExecutionError,
     lastPromptError,
-    missingNodesError,
 
     // Clearing
     clearAllErrors,
@@ -543,30 +347,22 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     hasExecutionError,
     hasPromptError,
     hasNodeError,
-    hasMissingNodes,
     hasAnyError,
     allErrorExecutionIds,
     totalErrorCount,
     lastExecutionErrorNodeId,
     activeGraphErrorNodeIds,
-    activeMissingNodeGraphIds,
 
     // Clearing (targeted)
     clearSimpleNodeErrors,
     clearWidgetRelatedErrors,
 
-    // Missing node actions
-    setMissingNodeTypes,
-    surfaceMissingNodes,
-    removeMissingNodesByType,
-
     // Missing model coordination (delegates to missingModelStore)
     surfaceMissingModels,
 
     // Lookup helpers
     getNodeErrors,
     slotHasError,
-    isContainerWithInternalError,
-    isContainerWithMissingNode
+    isContainerWithInternalError
   }
 })

src/stores/executionStore.test.ts

@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { app } from '@/scripts/app'
 import { MAX_PROGRESS_JOBS, useExecutionStore } from '@/stores/executionStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'
 
 // Create mock functions that will be shared
@@ -598,13 +599,13 @@ describe('useExecutionErrorStore - Node Error Lookups', () => {
   })
 })
 
-describe('useExecutionErrorStore - setMissingNodeTypes', () => {
-  let store: ReturnType<typeof useExecutionErrorStore>
+describe('useMissingNodesErrorStore - setMissingNodeTypes', () => {
+  let store: ReturnType<typeof useMissingNodesErrorStore>
 
   beforeEach(() => {
     vi.clearAllMocks()
     setActivePinia(createTestingPinia({ stubActions: false }))
-    store = useExecutionErrorStore()
+    store = useMissingNodesErrorStore()
   })
 
   it('clears missingNodesError when called with an empty array', () => {

src/types/nodeSource.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from 'vitest'
 
-import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+import {
+  NodeSourceType,
+  getNodeSource,
+  isCustomNode,
+  isEssentialNode
+} from '@/types/nodeSource'
+import type { NodeSource } from '@/types/nodeSource'
 
 describe('getNodeSource', () => {
   it('should return UNKNOWN_NODE_SOURCE when python_module is undefined', () => {
@@ -108,3 +114,44 @@ describe('getNodeSource', () => {
     })
   })
 })
+
+function makeNode(type: NodeSourceType): { nodeSource: NodeSource } {
+  return {
+    nodeSource: {
+      type,
+      className: '',
+      displayText: '',
+      badgeText: ''
+    }
+  }
+}
+
+describe('isEssentialNode', () => {
+  it('returns true for Essentials nodes', () => {
+    expect(isEssentialNode(makeNode(NodeSourceType.Essentials))).toBe(true)
+  })
+
+  it.for([
+    NodeSourceType.Core,
+    NodeSourceType.CustomNodes,
+    NodeSourceType.Blueprint,
+    NodeSourceType.Unknown
+  ])('returns false for %s nodes', (type) => {
+    expect(isEssentialNode(makeNode(type))).toBe(false)
+  })
+})
+
+describe('isCustomNode', () => {
+  it('returns true for CustomNodes', () => {
+    expect(isCustomNode(makeNode(NodeSourceType.CustomNodes))).toBe(true)
+  })
+
+  it.for([
+    NodeSourceType.Core,
+    NodeSourceType.Essentials,
+    NodeSourceType.Unknown,
+    NodeSourceType.Blueprint
+  ])('returns false for %s nodes', (type) => {
+    expect(isCustomNode(makeNode(type))).toBe(false)
+  })
+})

src/types/nodeSource.ts

@@ -1,3 +1,5 @@
+export const BLUEPRINT_CATEGORY = 'Subgraph Blueprints'
+
 export enum NodeSourceType {
   Core = 'core',
   CustomNodes = 'custom_nodes',
@@ -76,6 +78,18 @@ export function getNodeSource(
   }
 }
 
+interface NodeDefLike {
+  nodeSource: NodeSource
+}
+
+export function isEssentialNode(node: NodeDefLike): boolean {
+  return node.nodeSource.type === NodeSourceType.Essentials
+}
+
+export function isCustomNode(node: NodeDefLike): boolean {
+  return node.nodeSource.type === NodeSourceType.CustomNodes
+}
+
 export enum NodeBadgeMode {
   None = 'None',
   ShowAll = 'Show all',

src/workbench/extensions/manager/components/ManagerProgressToast.vue

@@ -135,6 +135,7 @@ whenever(() => !isExpanded.value, resetUserScrolling)
 
 function closeToast() {
   comfyManagerStore.resetTaskState()
+  isRestartCompleted.value = false
   isExpanded.value = false
 }
 

src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue

@@ -3,7 +3,7 @@
     variant="primary"
     :size
     :disabled="isLoading || isInstalling"
-    @click="installAllPacks"
+    @click.stop="installAllPacks"
   >
     <i
       v-if="hasConflict && !isInstalling && !isLoading"