[fix] Add validation and improve device detection in registry search

- Add sortField validation to prevent malformed API requests
- Improve GPU device type detection with additional vendor patterns (nvidia, amd, apple)
- Prevent potential injection via sort parameters

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@executeautomation/playwright-mcp-server"]
+    }
+  }
+}

CLAUDE.md

@@ -4,7 +4,7 @@
 - When trying to set tailwind classes for dark theme, use "dark-theme:" prefix rather than "dark:"
 - Never add lines to PR descriptions that say "Generated with Claude Code"
 - When making PR names and commit messages, if you are going to add a prefix like "docs:", "feat:", "bugfix:", use square brackets around the prefix term and do not use a colon (e.g., should be "[docs]" rather than "docs:").
-- When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading speicifc branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
+- When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading specific branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
 - For information about ComfyUI, ComfyUI_frontend, or ComfyUI-Manager, you can web search or download these wikis: https://deepwiki.com/Comfy-Org/ComfyUI-Manager, https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview, https://deepwiki.com/comfyanonymous/ComfyUI/2-core-architecture
 - If a question/project is related to Comfy-Org, Comfy, or ComfyUI ecosystem, you should proactively use the Comfy docs to answer the question. The docs may be referenced with URLs like https://docs.comfy.org
 - When operating inside a repo, check for README files at key locations in the repo detailing info about the contents of that folder. E.g., top-level key folders like tests-ui, browser_tests, composables, extensions/core, stores, services often have their own README.md files. When writing code, make sure to frequently reference these README files to understand the overall architecture and design of the project. Pay close attention to the snippets to learn particular patterns that seem to be there for a reason, as you should emulate those.
@@ -12,7 +12,7 @@
 - If using a lesser known or complex CLI tool, run the --help to see the documentation before deciding what to run, even if just for double-checking or verifying things.
 - IMPORTANT: the most important goal when writing code is to create clean, best-practices, sustainable, and scalable public APIs and interfaces. Our app is used by thousands of users and we have thousands of mods/extensions that are constantly changing and updating; and we are also always updating. That's why it is IMPORTANT that we design systems and write code that follows practices of domain-driven design, object-oriented design, and design patterns (such that you can assure stability while allowing for all components around you to change and evolve). We ABSOLUTELY prioritize clean APIs and public interfaces that clearly define and restrict how/what the mods/extensions can access.
 - If any of these technologies are referenced, you can proactively read their docs at these locations: https://primevue.org/theming, https://primevue.org/forms/, https://www.electronjs.org/docs/latest/api/browser-window, https://vitest.dev/guide/browser/, https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets/, https://playwright.dev/docs/api/class-test, https://playwright.dev/docs/api/class-electron, https://www.algolia.com/doc/api-reference/rest-api/, https://pyav.org/docs/develop/cookbook/basics.html
-- IMPORTANT: Never add Co-Authored by Claude or any refrence to Claude or Claude Code in commit messages, PR descriptions, titles, or any documentation whatsoever
+- IMPORTANT: Never add Co-Authored by Claude or any reference to Claude or Claude Code in commit messages, PR descriptions, titles, or any documentation whatsoever
 - The npm script to type check is called "typecheck" NOT "type check"
 - Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
 - when we are solving an issue we know the link/number for, we should add "Fixes #n" (where n is the issue number) to the PR description.
@@ -46,3 +46,11 @@
   * `TabMenu` → Use `Tabs` without panels
   * `Steps` → Use `Stepper` without panels
   * `InlineMessage` → Use `Message` component
+* Use `api.apiURL()` for all backend API calls and routes
+  - Actual API endpoints like /prompt, /queue, /view, etc.
+  - Image previews: `api.apiURL('/view?...')`
+  - Any backend-generated content or dynamic routes
+* Use `api.fileURL()` for static files served from the public folder:
+  - Templates: `api.fileURL('/templates/default.json')`
+  - Extensions: `api.fileURL(extensionPath)` for loading JS modules
+  - Any static assets that exist in the public directory

README.md

@@ -609,6 +609,68 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
+### Recommended MCP Integrations
+
+#### Playwright Browser Automation
+
+The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
+
+For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
+
+##### Setup for Claude Code
+
+After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+
+Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
+
+
+```
+> navigate to localhost:5173 and take a screenshot.
+   tell me the items in the menubar
+
+● I'll navigate to localhost:5173 and take a
+  screenshot to see the menubar items.
+
+● playwright:playwright_navigate (MCP)(url:       …
+                                      "http://local
+                                      host:5173")
+  ⎿  Navigated to http://localhost:5173
+
+● playwright:playwright_screenshot (MCP)(name: "lo…
+                                        alhost_5173
+                                        _menubar")
+
+  ⎿ Screenshot saved to: ../../../Downloads/localho
+    st_5173_menubar-2025-05-30T17-23-00-942Z.png
+  ⎿  Screenshot also stored in memory with name:
+     'localhost_5173_menubar'
+
+● Read(../../../Downloads/localhost_5173_menubar-2…
+      25-05-30T17-23-00-942Z.png)
+  ⎿  Read image (94.3KB)
+
+● Based on the screenshot, I can see the menubar at
+   the top of the ComfyUI interface contains the
+  following items:
+
+  Main Menubar Items:
+  - Workflow - Menu for workflow-related actions
+  - Edit - Menu for editing operations
+  - Help - Menu for help and documentation
+
+  Additional UI Elements:
+  - ComfyUI Logo - On the far left
+  - Workflow Tab - Shows "Unsaved Workflow" with a
+  dropdown and close button
+  - Layout Controls - On the far right (grid view
+  and hamburger menu icons)
+
+  The interface shows a typical ComfyUI workflow
+  graph with nodes like "Load Checkpoint", "CLIP
+  Text Encode (Prompt)", "KSampler", and "Empty
+  Latent Image" connected with colored cables.
+```
+
 ### Unit Test
 
 - `npm i` to install all dependencies

browser_tests/assets/save_animated_png.json

@@ -0,0 +1,190 @@
+{
+  "id": "cffcce2d-a13c-4a5f-929b-82f274bacc36",
+  "revision": 0,
+  "last_node_id": 14,
+  "last_link_id": 14,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [
+        -361.02374267578125,
+        -40.05255126953125
+      ],
+      "size": [
+        274.080078125,
+        314
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            11
+          ]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "ComfyUI_00137_.png",
+        "image"
+      ]
+    },
+    {
+      "id": 12,
+      "type": "ImageBatch",
+      "pos": [
+        146.92184448242188,
+        104.8472671508789
+      ],
+      "size": [
+        140,
+        46
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 11
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": 12
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            14
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageBatch"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 14,
+      "type": "SaveAnimatedPNG",
+      "pos": [
+        457.4212646484375,
+        39.56276321411133
+      ],
+      "size": [
+        270,
+        368
+      ],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 14
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI",
+        6,
+        4
+      ]
+    },
+    {
+      "id": 11,
+      "type": "LoadImage",
+      "pos": [
+        -360.4931640625,
+        326.1943664550781
+      ],
+      "size": [
+        274.080078125,
+        314
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            12
+          ]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "ComfyUI_00153_.png",
+        "image"
+      ]
+    }
+  ],
+  "links": [
+    [
+      11,
+      10,
+      0,
+      12,
+      0,
+      "IMAGE"
+    ],
+    [
+      12,
+      11,
+      0,
+      12,
+      1,
+      "IMAGE"
+    ],
+    [
+      14,
+      12,
+      0,
+      14,
+      0,
+      "IMAGE"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.129559245649766,
+      "offset": [
+        768.6140137916129,
+        203.6152852376302
+      ]
+    },
+    "frontendVersion": "1.22.2"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -762,7 +762,7 @@ export class ComfyPage {
         y: 625
       }
     })
-    this.page.mouse.move(10, 10)
+    await this.page.mouse.move(10, 10)
     await this.nextFrame()
   }
 
@@ -774,7 +774,7 @@ export class ComfyPage {
       },
       button: 'right'
     })
-    this.page.mouse.move(10, 10)
+    await this.page.mouse.move(10, 10)
     await this.nextFrame()
   }
 
@@ -1046,6 +1046,8 @@ export class ComfyPage {
   }
 }
 
+export const testComfySnapToGridGridSize = 50
+
 export const comfyPageFixture = base.extend<{
   comfyPage: ComfyPage
   comfyMouse: ComfyMouse
@@ -1072,7 +1074,8 @@ export const comfyPageFixture = base.extend<{
         'Comfy.EnableTooltips': false,
         'Comfy.userId': userId,
         // Set tutorial completed to true to avoid loading the tutorial workflow.
-        'Comfy.TutorialCompleted': true
+        'Comfy.TutorialCompleted': true,
+        'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize
       })
     } catch (e) {
       console.error(e)

browser_tests/tests/interaction.spec.ts

@@ -1,6 +1,12 @@
 import { expect } from '@playwright/test'
+import { Position } from '@vueuse/core'
 
-import { type ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import {
+  type ComfyPage,
+  comfyPageFixture as test,
+  testComfySnapToGridGridSize
+} from '../fixtures/ComfyPage'
+import { type NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {
@@ -57,8 +63,10 @@ test.describe('Node Interaction', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
     })
 
-    test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
-      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    const dragSelectNodes = async (
+      comfyPage: ComfyPage,
+      clipNodes: NodeReference[]
+    ) => {
       const clipNode1Pos = await clipNodes[0].getPosition()
       const clipNode2Pos = await clipNodes[1].getPosition()
       const offset = 64
@@ -74,10 +82,67 @@ test.describe('Node Interaction', () => {
         }
       )
       await comfyPage.page.keyboard.up('Meta')
+    }
+
+    test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
+      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+      await dragSelectNodes(comfyPage, clipNodes)
       expect(await comfyPage.getSelectedGraphNodesCount()).toBe(
         clipNodes.length
       )
     })
+
+    test('Can move selected nodes using the Comfy.Canvas.MoveSelectedNodes.{Up|Down|Left|Right} commands', async ({
+      comfyPage
+    }) => {
+      const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+      const getPositions = () =>
+        Promise.all(clipNodes.map((node) => node.getPosition()))
+      const testDirection = async ({
+        direction,
+        expectedPosition
+      }: {
+        direction: string
+        expectedPosition: (originalPosition: Position) => Position
+      }) => {
+        const originalPositions = await getPositions()
+        await dragSelectNodes(comfyPage, clipNodes)
+        await comfyPage.executeCommand(
+          `Comfy.Canvas.MoveSelectedNodes.${direction}`
+        )
+        await comfyPage.canvas.press(`Control+Arrow${direction}`)
+        const newPositions = await getPositions()
+        expect(newPositions).toEqual(originalPositions.map(expectedPosition))
+      }
+      await testDirection({
+        direction: 'Down',
+        expectedPosition: (originalPosition) => ({
+          ...originalPosition,
+          y: originalPosition.y + testComfySnapToGridGridSize
+        })
+      })
+      await testDirection({
+        direction: 'Right',
+        expectedPosition: (originalPosition) => ({
+          ...originalPosition,
+          x: originalPosition.x + testComfySnapToGridGridSize
+        })
+      })
+      await testDirection({
+        direction: 'Up',
+        expectedPosition: (originalPosition) => ({
+          ...originalPosition,
+          y: originalPosition.y - testComfySnapToGridGridSize
+        })
+      })
+      await testDirection({
+        direction: 'Left',
+        expectedPosition: (originalPosition) => ({
+          ...originalPosition,
+          x: originalPosition.x - testComfySnapToGridGridSize
+        })
+      })
+    })
   })
 
   test('Can drag node', async ({ comfyPage }) => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.22.0",
+  "version": "1.22.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -29,10 +29,11 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
+    "@executeautomation/playwright-mcp-server": "^1.0.5",
     "@iconify/json": "^2.2.245",
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.52.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/dompurify": "^3.0.5",
     "@types/fs-extra": "^11.0.4",

src/components/dialog/GlobalDialog.vue

@@ -1,14 +1,12 @@
 <!-- The main global dialog to show various things -->
 <template>
   <Dialog
-    v-for="(item, index) in dialogStore.dialogStack"
+    v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
     class="global-dialog"
     v-bind="item.dialogComponentProps"
-    :auto-z-index="false"
     :pt="item.dialogComponentProps.pt"
-    :pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
     :aria-labelledby="item.key"
   >
     <template #header>
@@ -35,25 +33,11 @@
 </template>
 
 <script setup lang="ts">
-import { ZIndex } from '@primeuix/utils/zindex'
-import { usePrimeVue } from '@primevue/core'
 import Dialog from 'primevue/dialog'
-import { computed, onMounted } from 'vue'
 
 import { useDialogStore } from '@/stores/dialogStore'
 
 const dialogStore = useDialogStore()
-
-const primevue = usePrimeVue()
-
-const baseZIndex = computed(() => {
-  return primevue?.config?.zIndex?.modal ?? 1100
-})
-
-onMounted(() => {
-  const mask = document.createElement('div')
-  ZIndex.set('model', mask, baseZIndex.value)
-})
 </script>
 
 <style>

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -30,8 +30,11 @@
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
             v-model:sortField="sortField"
+            v-model:activeFilters="activeFilters"
             :search-results="searchResults"
             :suggestions="suggestions"
+            :sort-options="sortOptions"
+            :filter-options="filterOptions"
           />
           <div class="flex-1 overflow-auto">
             <div
@@ -93,7 +96,14 @@
 import { whenever } from '@vueuse/core'
 import { merge } from 'lodash'
 import Button from 'primevue/button'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
@@ -106,23 +116,28 @@ import PackCard from '@/components/dialog/content/manager/packCard/PackCard.vue'
 import RegistrySearchBar from '@/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue'
 import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
+import { useManagerStatePersistence } from '@/composables/manager/useManagerStatePersistence'
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
-const { initialTab = ManagerTab.All } = defineProps<{
-  initialTab: ManagerTab
+const { initialTab } = defineProps<{
+  initialTab?: ManagerTab
 }>()
 
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
+const systemStatsStore = useSystemStatsStore()
+const persistedState = useManagerStatePersistence()
+const initialState = persistedState.loadStoredState()
 
 const GRID_STYLE = {
   display: 'grid',
@@ -156,8 +171,10 @@ const tabs = ref<TabItem[]>([
     icon: 'pi-sync'
   }
 ])
+
+const initialTabId = initialTab ?? initialState.selectedTabId
 const selectedTab = ref<TabItem>(
-  tabs.value.find((tab) => tab.id === initialTab) || tabs.value[0]
+  tabs.value.find((tab) => tab.id === initialTabId) || tabs.value[0]
 )
 
 const {
@@ -167,8 +184,15 @@ const {
   searchResults,
   searchMode,
   sortField,
-  suggestions
-} = useRegistrySearch()
+  suggestions,
+  sortOptions,
+  activeFilters,
+  filterOptions
+} = useRegistrySearch({
+  initialSortField: initialState.sortField,
+  initialSearchMode: initialState.searchMode,
+  initialSearchQuery: initialState.searchQuery
+})
 pageNumber.value = 0
 const onApproachEnd = () => {
   pageNumber.value++
@@ -232,7 +256,11 @@ watch(
 
     if (!isEmptySearch.value) {
       displayPacks.value = filterOutdatedPacks(installedPacks.value)
-    } else if (!installedPacks.value.length) {
+    } else if (
+      !installedPacks.value.length &&
+      !installedPacksReady.value &&
+      !isLoadingInstalled.value
+    ) {
       await startFetchInstalled()
     } else {
       displayPacks.value = filterOutdatedPacks(installedPacks.value)
@@ -426,7 +454,13 @@ whenever(selectedNodePack, async () => {
   if (data?.id === pack.id) {
     lastFetchedPackId.value = pack.id
     const mergedPack = merge({}, pack, data)
-    selectedNodePacks.value = [mergedPack]
+    // Update the pack in current selection without changing selection state
+    const packIndex = selectedNodePacks.value.findIndex(
+      (p) => p.id === mergedPack.id
+    )
+    if (packIndex !== -1) {
+      selectedNodePacks.value.splice(packIndex, 1, mergedPack)
+    }
     // Replace pack in displayPacks so that children receive a fresh prop reference
     const idx = displayPacks.value.findIndex((p) => p.id === mergedPack.id)
     if (idx !== -1) {
@@ -436,8 +470,13 @@ whenever(selectedNodePack, async () => {
 })
 
 let gridContainer: HTMLElement | null = null
-onMounted(() => {
+onMounted(async () => {
   gridContainer = document.getElementById('results-grid')
+
+  // Fetch system stats if not already loaded
+  if (!systemStatsStore.systemStats && !systemStatsStore.isLoading) {
+    await systemStatsStore.fetchSystemStats()
+  }
 })
 watch(searchQuery, () => {
   gridContainer ??= document.getElementById('results-grid')
@@ -446,6 +485,15 @@ watch(searchQuery, () => {
   }
 })
 
+onBeforeUnmount(() => {
+  persistedState.persistState({
+    selectedTabId: selectedTab.value?.id,
+    searchQuery: searchQuery.value,
+    searchMode: searchMode.value,
+    sortField: sortField.value
+  })
+})
+
 onUnmounted(() => {
   getPackById.cancel()
 })

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -62,6 +62,7 @@ describe('PackVersionBadge', () => {
     return mount(PackVersionBadge, {
       props: {
         nodePack: mockNodePack,
+        isSelected: false,
         ...props
       },
       global: {
@@ -162,4 +163,58 @@ describe('PackVersionBadge', () => {
     // Verify that the hide method was called
     expect(mockHide).toHaveBeenCalled()
   })
+
+  describe('selection state changes', () => {
+    it('closes the popover when card is deselected', async () => {
+      const wrapper = mountComponent({
+        props: { isSelected: true }
+      })
+
+      // Change isSelected from true to false
+      await wrapper.setProps({ isSelected: false })
+      await nextTick()
+
+      // Verify that the hide method was called
+      expect(mockHide).toHaveBeenCalled()
+    })
+
+    it('does not close the popover when card is selected', async () => {
+      const wrapper = mountComponent({
+        props: { isSelected: false }
+      })
+
+      // Change isSelected from false to true
+      await wrapper.setProps({ isSelected: true })
+      await nextTick()
+
+      // Verify that the hide method was NOT called
+      expect(mockHide).not.toHaveBeenCalled()
+    })
+
+    it('does not close the popover when isSelected remains false', async () => {
+      const wrapper = mountComponent({
+        props: { isSelected: false }
+      })
+
+      // Change isSelected from false to false (no change)
+      await wrapper.setProps({ isSelected: false })
+      await nextTick()
+
+      // Verify that the hide method was NOT called
+      expect(mockHide).not.toHaveBeenCalled()
+    })
+
+    it('does not close the popover when isSelected remains true', async () => {
+      const wrapper = mountComponent({
+        props: { isSelected: true }
+      })
+
+      // Change isSelected from true to true (no change)
+      await wrapper.setProps({ isSelected: true })
+      await nextTick()
+
+      // Verify that the hide method was NOT called
+      expect(mockHide).not.toHaveBeenCalled()
+    })
+  })
 })

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
@@ -43,8 +43,9 @@ import { isSemVer } from '@/utils/formatUtil'
 
 const TRUNCATED_HASH_LENGTH = 7
 
-const { nodePack } = defineProps<{
+const { nodePack, isSelected } = defineProps<{
   nodePack: components['schemas']['Node']
+  isSelected: boolean
 }>()
 
 const popoverRef = ref()
@@ -69,4 +70,14 @@ const toggleVersionSelector = (event: Event) => {
 const closeVersionSelector = () => {
   popoverRef.value.hide()
 }
+
+// If the card is unselected, automatically close the version selector popover
+watch(
+  () => isSelected,
+  (isSelected, wasSelected) => {
+    if (wasSelected && !isSelected) {
+      closeVersionSelector()
+    }
+  }
+)
 </script>

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -191,6 +191,100 @@ describe('PackVersionSelectorPopover', () => {
     expect(mockGetPackVersions).toHaveBeenCalledWith(newNodePack.id)
   })
 
+  describe('nodePack.id changes', () => {
+    it('re-fetches versions when nodePack.id changes', async () => {
+      // Set up the mock for the initial fetch
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      const wrapper = mountComponent()
+      await waitForPromises()
+
+      // Verify initial fetch
+      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
+      expect(mockGetPackVersions).toHaveBeenCalledWith(mockNodePack.id)
+
+      // Set up the mock for the second fetch
+      const newVersions = [
+        { version: '2.0.0', createdAt: '2023-06-01' },
+        { version: '1.9.0', createdAt: '2023-05-01' }
+      ]
+      mockGetPackVersions.mockResolvedValueOnce(newVersions)
+
+      // Update the nodePack with a new ID
+      const newNodePack = {
+        ...mockNodePack,
+        id: 'different-pack',
+        name: 'Different Pack'
+      }
+      await wrapper.setProps({ nodePack: newNodePack })
+      await waitForPromises()
+
+      // Should fetch versions for the new nodePack
+      expect(mockGetPackVersions).toHaveBeenCalledTimes(2)
+      expect(mockGetPackVersions).toHaveBeenLastCalledWith(newNodePack.id)
+
+      // Check that new versions are displayed
+      const listbox = wrapper.findComponent(Listbox)
+      const options = listbox.props('options')!
+      expect(options.some((o) => o.value === '2.0.0')).toBe(true)
+      expect(options.some((o) => o.value === '1.9.0')).toBe(true)
+    })
+
+    it('does not re-fetch when nodePack changes but id remains the same', async () => {
+      // Set up the mock for the initial fetch
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      const wrapper = mountComponent()
+      await waitForPromises()
+
+      // Verify initial fetch
+      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
+
+      // Update the nodePack with same ID but different properties
+      const updatedNodePack = {
+        ...mockNodePack,
+        name: 'Updated Test Pack',
+        description: 'New description'
+      }
+      await wrapper.setProps({ nodePack: updatedNodePack })
+      await waitForPromises()
+
+      // Should NOT fetch versions again
+      expect(mockGetPackVersions).toHaveBeenCalledTimes(1)
+    })
+
+    it('maintains selected version when switching to a new pack', async () => {
+      // Set up the mock for the initial fetch
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      const wrapper = mountComponent()
+      await waitForPromises()
+
+      // Select a specific version
+      const listbox = wrapper.findComponent(Listbox)
+      await listbox.setValue('0.9.0')
+      expect(listbox.props('modelValue')).toBe('0.9.0')
+
+      // Set up the mock for the second fetch
+      mockGetPackVersions.mockResolvedValueOnce([
+        { version: '3.0.0', createdAt: '2023-07-01' },
+        { version: '0.9.0', createdAt: '2023-04-01' }
+      ])
+
+      // Update to a new pack that also has version 0.9.0
+      const newNodePack = {
+        id: 'another-pack',
+        name: 'Another Pack',
+        latest_version: { version: '3.0.0' }
+      }
+      await wrapper.setProps({ nodePack: newNodePack })
+      await waitForPromises()
+
+      // Selected version should remain the same if available
+      expect(listbox.props('modelValue')).toBe('0.9.0')
+    })
+  })
+
   describe('Unclaimed GitHub packs handling', () => {
     it('falls back to nightly when no versions exist', async () => {
       // Set up the mock to return versions

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -62,7 +62,7 @@ import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
@@ -161,9 +161,11 @@ const onNodePackChange = async () => {
 }
 
 whenever(
-  () => nodePack,
-  () => {
-    void onNodePackChange()
+  () => nodePack.id,
+  (nodePackId, oldNodePackId) => {
+    if (nodePackId !== oldNodePackId) {
+      void onNodePackChange()
+    }
   },
   { deep: true, immediate: true }
 )
@@ -182,8 +184,4 @@ const handleSubmit = async () => {
   isQueueing.value = false
   emit('submit')
 }
-
-onUnmounted(() => {
-  managerStore.installPack.clear()
-})
 </script>

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -32,7 +32,7 @@
             />
           </MetadataRow>
           <MetadataRow :label="t('manager.version')">
-            <PackVersionBadge :node-pack="nodePack" />
+            <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
           </MetadataRow>
         </div>
         <div class="mb-6 overflow-hidden">
@@ -118,7 +118,15 @@ const onNodePackChange = () => {
   y.value = 0
 }
 
-whenever(() => nodePack, onNodePackChange, { immediate: true, deep: true })
+whenever(
+  () => nodePack.id,
+  (nodePackId, oldNodePackId) => {
+    if (nodePackId !== oldNodePackId) {
+      onNodePackChange()
+    }
+  },
+  { immediate: true }
+)
 </script>
 <style scoped>
 .hidden-scrollbar {

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -51,6 +51,7 @@ const isLoading = ref(false)
 const registryNodeDefs = shallowRef<ListComfyNodesResponse | null>(null)
 
 const fetchNodeDefs = async () => {
+  getNodeDefs.cancel()
   isLoading.value = true
 
   const { id: packId } = nodePack

src/components/dialog/content/manager/packBanner/PackBanner.vue

@@ -1,11 +1,37 @@
 <template>
-  <img
-    :src="isImageError ? DEFAULT_BANNER : imgSrc"
-    :alt="nodePack.name + ' banner'"
-    class="object-cover"
-    :style="{ width: cssWidth, height: cssHeight }"
-    @error="isImageError = true"
-  />
+  <div :style="{ width: cssWidth, height: cssHeight }" class="overflow-hidden">
+    <!-- default banner show -->
+    <div v-if="showDefaultBanner" class="w-full h-full">
+      <img
+        :src="DEFAULT_BANNER"
+        alt="default banner"
+        class="w-full h-full object-cover"
+      />
+    </div>
+    <!-- banner_url or icon show -->
+    <div v-else class="relative w-full h-full">
+      <!-- blur background -->
+      <div
+        v-if="imgSrc"
+        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+        :style="{
+          backgroundImage: `url(${imgSrc})`,
+          filter: 'blur(10px)'
+        }"
+      ></div>
+      <!-- image -->
+      <img
+        :src="isImageError ? DEFAULT_BANNER : imgSrc"
+        :alt="nodePack.name + ' banner'"
+        :class="
+          isImageError
+            ? 'relative w-full h-full object-cover z-10'
+            : 'relative w-full h-full object-contain z-10'
+        "
+        @error="isImageError = true"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -20,18 +46,15 @@ const {
   width = '100%',
   height = '12rem'
 } = defineProps<{
-  nodePack: components['schemas']['Node'] & { banner?: string } // Temporary measure until banner is in backend
+  nodePack: components['schemas']['Node']
   width?: string
   height?: string
 }>()
 
 const isImageError = ref(false)
-const shouldShowFallback = computed(
-  () => !nodePack.banner || nodePack.banner.trim() === '' || isImageError.value
-)
-const imgSrc = computed(() =>
-  shouldShowFallback.value ? DEFAULT_BANNER : nodePack.banner
-)
+
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
 
 const convertToCssValue = (value: string | number) =>
   typeof value === 'number' ? `${value}rem` : value

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -1,13 +1,13 @@
 <template>
   <Card
-    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-2xl shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
+    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-lg shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
     :class="{
-      'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected,
+      'selected-card': isSelected,
       'opacity-60': isDisabled
     }"
     :pt="{
-      body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
-      content: { class: 'flex-1 flex flex-col rounded-2xl min-h-0' },
+      body: { class: 'p-0 flex flex-col w-full h-full rounded-lg gap-0' },
+      content: { class: 'flex-1 flex flex-col rounded-lg min-h-0' },
       title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
       footer: { class: 'p-0 m-0' }
     }"
@@ -70,7 +70,10 @@
                     >
                       <i class="pi pi-arrow-circle-up text-blue-600" />
                     </div>
-                    <PackVersionBadge :node-pack="nodePack" />
+                    <PackVersionBadge
+                      :node-pack="nodePack"
+                      :is-selected="isSelected"
+                    />
                   </div>
                   <div
                     v-if="formattedLatestVersionDate"
@@ -113,11 +116,15 @@ import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanne
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { IsInstallingKey } from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
+import {
+  IsInstallingKey,
+  type MergedNodePack,
+  type RegistryPack,
+  isMergedNodePack
+} from '@/types/comfyManagerTypes'
 
 const { nodePack, isSelected = false } = defineProps<{
-  nodePack: components['schemas']['Node']
+  nodePack: MergedNodePack | RegistryPack
   isSelected?: boolean
 }>()
 
@@ -136,9 +143,9 @@ const isDisabled = computed(
 
 whenever(isInstalled, () => (isInstalling.value = false))
 
-// TODO: remove type assertion once comfy_nodes is added to node (pack) info type in backend
-const nodesCount = computed(() => (nodePack as any).comfy_nodes?.length)
-
+const nodesCount = computed(() =>
+  isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
+)
 const publisherName = computed(() => {
   if (!nodePack) return null
 
@@ -154,3 +161,22 @@ const formattedLatestVersionDate = computed(() => {
   })
 })
 </script>
+
+<style scoped>
+.selected-card {
+  position: relative;
+}
+
+.selected-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 3px solid var(--p-primary-color);
+  border-radius: 0.5rem;
+  pointer-events: none;
+  z-index: 100;
+}
+</style>

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -6,7 +6,8 @@
       <i class="pi pi-download text-muted"></i>
       <span>{{ formattedDownloads }}</span>
     </div>
-    <PackInstallButton :node-packs="[nodePack]" />
+    <PackInstallButton v-if="!isInstalled" :node-packs="[nodePack]" />
+    <PackEnableToggle v-else :node-pack="nodePack" />
   </div>
 </template>
 
@@ -14,13 +15,18 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
+const { isPackInstalled } = useComfyManagerStore()
+const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+
 const { n } = useI18n()
 
 const formattedDownloads = computed(() =>

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -25,23 +25,35 @@
         @option-select="onOptionSelect"
       />
     </div>
-    <div class="flex mt-3 text-sm">
-      <div class="flex gap-6 ml-1">
-        <SearchFilterDropdown
-          v-model:modelValue="searchMode"
-          :options="filterOptions"
-          :label="$t('g.filter')"
-        />
-        <SearchFilterDropdown
-          v-model:modelValue="sortField"
-          :options="sortOptions"
-          :label="$t('g.sort')"
-        />
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between mt-3 text-sm">
+        <div class="flex gap-6 ml-1">
+          <SearchFilterDropdown
+            v-model:modelValue="searchMode"
+            :options="searchModeOptions"
+            :label="$t('g.filter')"
+          />
+          <SearchFilterDropdown
+            v-model:modelValue="sortField"
+            :options="availableSortOptions"
+            :label="$t('g.sort')"
+          />
+        </div>
+        <div class="flex items-center gap-4 mr-6">
+          <small v-if="hasResults" class="text-color-secondary">
+            {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
+          </small>
+        </div>
       </div>
-      <div class="flex items-center gap-4 ml-6">
-        <small v-if="hasResults" class="text-color-secondary">
-          {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
-        </small>
+      <!-- Add search refinement dropdowns if provider supports them -->
+      <div v-if="filterOptions?.length" class="flex gap-3 ml-1 text-sm">
+        <SearchFilterDropdown
+          v-for="filterOption in filterOptions"
+          :key="filterOption.id"
+          v-model:modelValue="selectedFilters[filterOption.id]"
+          :options="availableFilterOptions(filterOption)"
+          :label="filterOption.label"
+        />
       </div>
     </div>
   </div>
@@ -56,22 +68,30 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
-import type { NodesIndexSuggestion } from '@/services/algoliaSearchService'
-import {
-  type SearchOption,
-  SortableAlgoliaField
-} from '@/types/comfyManagerTypes'
+import { type SearchOption } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import type {
+  ActiveFilters,
+  QuerySuggestion,
+  SearchFilter,
+  SearchMode,
+  SortableField
+} from '@/types/searchServiceTypes'
 
-const { searchResults } = defineProps<{
+const { searchResults, sortOptions, filterOptions } = defineProps<{
   searchResults?: components['schemas']['Node'][]
-  suggestions?: NodesIndexSuggestion[]
+  suggestions?: QuerySuggestion[]
+  sortOptions?: SortableField[]
+  filterOptions?: SearchFilter[]
 }>()
 
 const searchQuery = defineModel<string>('searchQuery')
-const searchMode = defineModel<string>('searchMode', { default: 'packs' })
-const sortField = defineModel<SortableAlgoliaField>('sortField', {
-  default: SortableAlgoliaField.Downloads
+const searchMode = defineModel<SearchMode>('searchMode', { default: 'packs' })
+const sortField = defineModel<string>('sortField', {
+  default: 'total_install'
+})
+const selectedFilters = defineModel<ActiveFilters>('activeFilters', {
+  default: () => ({})
 })
 
 const { t } = useI18n()
@@ -80,18 +100,30 @@ const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length
 )
 
-const sortOptions: SearchOption<SortableAlgoliaField>[] = [
-  { id: SortableAlgoliaField.Downloads, label: t('manager.sort.downloads') },
-  { id: SortableAlgoliaField.Created, label: t('manager.sort.created') },
-  { id: SortableAlgoliaField.Updated, label: t('manager.sort.updated') },
-  { id: SortableAlgoliaField.Publisher, label: t('manager.sort.publisher') },
-  { id: SortableAlgoliaField.Name, label: t('g.name') }
-]
-const filterOptions: SearchOption<string>[] = [
+const availableSortOptions = computed<SearchOption<string>[]>(() => {
+  if (!sortOptions) return []
+  return sortOptions.map((field) => ({
+    id: field.id,
+    label: field.label
+  }))
+})
+const searchModeOptions: SearchOption<SearchMode>[] = [
   { id: 'packs', label: t('manager.filter.nodePack') },
   { id: 'nodes', label: t('g.nodes') }
 ]
 
+// Convert filter options to SearchOption format for SearchFilterDropdown
+const availableFilterOptions = (
+  filter: SearchFilter
+): SearchOption<string>[] => {
+  if (!filter.options) return []
+  return filter.options.map((option) => ({
+    id: option.value,
+    label: option.label
+  }))
+}
+
+// When a dropdown query suggestion is selected, update the search query
 const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => {
   searchQuery.value = event.value.query
 }

src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue

@@ -6,6 +6,7 @@
       :options="options"
       option-label="label"
       option-value="id"
+      placeholder="Any"
       class="min-w-[6rem] border-none bg-transparent shadow-none"
       :pt="{
         input: { class: 'py-0 px-1 border-none' },

src/components/dialog/content/setting/SettingItem.spec.ts

@@ -54,4 +54,21 @@ describe('SettingItem', () => {
       { text: 'Correctly Translated', value: 'Correctly Translated' }
     ])
   })
+
+  it('handles tooltips with @ symbols without errors', () => {
+    const wrapper = mountComponent({
+      setting: {
+        id: 'TestSetting',
+        name: 'Test Setting',
+        type: 'boolean',
+        tooltip:
+          'This will load a larger version of @mtb/markdown-parser that bundles shiki'
+      }
+    })
+
+    // Should not throw an error and tooltip should be preserved as-is
+    expect(wrapper.vm.formItem.tooltip).toBe(
+      'This will load a larger version of @mtb/markdown-parser that bundles shiki'
+    )
+  })
 })

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

@@ -28,6 +28,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
+import { st } from '@/i18n'
 import { useSettingStore } from '@/stores/settingStore'
 import type { SettingOption, SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
@@ -64,7 +65,7 @@ const formItem = computed(() => {
     ...props.setting,
     name: t(`settings.${normalizedId}.name`, props.setting.name),
     tooltip: props.setting.tooltip
-      ? t(`settings.${normalizedId}.tooltip`, props.setting.tooltip)
+      ? st(`settings.${normalizedId}.tooltip`, props.setting.tooltip)
       : undefined,
     options: props.setting.options
       ? translateOptions(props.setting.options)

src/composables/manager/useManagerStatePersistence.ts

@@ -0,0 +1,54 @@
+import {
+  ManagerState,
+  ManagerTab,
+  SortableAlgoliaField
+} from '@/types/comfyManagerTypes'
+
+const STORAGE_KEY = 'Comfy.Manager.UI.State'
+
+export const useManagerStatePersistence = () => {
+  /**
+   * Load the UI state from localStorage.
+   */
+  const loadStoredState = (): ManagerState => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) {
+        return JSON.parse(stored)
+      }
+    } catch (e) {
+      console.error('Failed to load manager UI state:', e)
+    }
+    return {
+      selectedTabId: ManagerTab.All,
+      searchQuery: '',
+      searchMode: 'packs',
+      sortField: SortableAlgoliaField.Downloads
+    }
+  }
+
+  /**
+   * Persist the UI state to localStorage.
+   */
+  const persistState = (state: ManagerState) => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  }
+
+  /**
+   * Reset the UI state to the default values.
+   */
+  const reset = () => {
+    persistState({
+      selectedTabId: ManagerTab.All,
+      searchQuery: '',
+      searchMode: 'packs',
+      sortField: SortableAlgoliaField.Downloads
+    })
+  }
+
+  return {
+    loadStoredState,
+    persistState,
+    reset
+  }
+}

src/composables/useCoreCommands.ts

@@ -4,6 +4,7 @@ import {
   LGraphNode,
   LiteGraph
 } from '@comfyorg/litegraph'
+import { Point } from '@comfyorg/litegraph'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import {
@@ -27,6 +28,8 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+const moveSelectedNodesVersionAdded = '1.22.2'
+
 export function useCoreCommands(): ComfyCommand[] {
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
@@ -58,6 +61,20 @@ export function useCoreCommands(): ComfyCommand[] {
     })
   }
 
+  const moveSelectedNodes = (
+    positionUpdater: (pos: Point, gridSize: number) => Point
+  ) => {
+    const selectedNodes = getSelectedNodes()
+    if (selectedNodes.length === 0) return
+
+    const gridSize = useSettingStore().get('Comfy.SnapToGrid.GridSize')
+    selectedNodes.forEach((node) => {
+      node.pos = positionUpdater(node.pos, gridSize)
+    })
+    app.canvas.state.selectionChanged = true
+    app.canvas.setDirty(true, true)
+  }
+
   const commands = [
     {
       id: 'Comfy.NewBlankWorkflow',
@@ -641,19 +658,19 @@ export function useCoreCommands(): ComfyCommand[] {
     {
       id: 'Comfy.Manager.CustomNodesManager',
       icon: 'pi pi-puzzle',
-      label: 'Custom Nodes Manager',
+      label: 'Toggle the Custom Nodes Manager',
       versionAdded: '1.12.10',
       function: () => {
-        dialogService.showManagerDialog()
+        dialogService.toggleManagerDialog()
       }
     },
     {
       id: 'Comfy.Manager.ToggleManagerProgressDialog',
       icon: 'pi pi-spinner',
-      label: 'Toggle Progress Dialog',
+      label: 'Toggle the Custom Nodes Manager Progress Bar',
       versionAdded: '1.13.9',
       function: () => {
-        dialogService.showManagerProgressDialog()
+        dialogService.toggleManagerProgressDialog()
       }
     },
     {
@@ -673,6 +690,34 @@ export function useCoreCommands(): ComfyCommand[] {
       function: async () => {
         await firebaseAuthActions.logout()
       }
+    },
+    {
+      id: 'Comfy.Canvas.MoveSelectedNodes.Up',
+      icon: 'pi pi-arrow-up',
+      label: 'Move Selected Nodes Up',
+      versionAdded: moveSelectedNodesVersionAdded,
+      function: () => moveSelectedNodes(([x, y], gridSize) => [x, y - gridSize])
+    },
+    {
+      id: 'Comfy.Canvas.MoveSelectedNodes.Down',
+      icon: 'pi pi-arrow-down',
+      label: 'Move Selected Nodes Down',
+      versionAdded: moveSelectedNodesVersionAdded,
+      function: () => moveSelectedNodes(([x, y], gridSize) => [x, y + gridSize])
+    },
+    {
+      id: 'Comfy.Canvas.MoveSelectedNodes.Left',
+      icon: 'pi pi-arrow-left',
+      label: 'Move Selected Nodes Left',
+      versionAdded: moveSelectedNodesVersionAdded,
+      function: () => moveSelectedNodes(([x, y], gridSize) => [x - gridSize, y])
+    },
+    {
+      id: 'Comfy.Canvas.MoveSelectedNodes.Right',
+      icon: 'pi pi-arrow-right',
+      label: 'Move Selected Nodes Right',
+      versionAdded: moveSelectedNodesVersionAdded,
+      function: () => moveSelectedNodes(([x, y], gridSize) => [x + gridSize, y])
     }
   ]
 

src/composables/useProgressFavicon.ts

@@ -15,7 +15,10 @@ export const useProgressFavicon = () => {
       if (isIdle) {
         favicon.value = defaultFavicon
       } else {
-        const frame = Math.floor(progress * totalFrames)
+        const frame = Math.min(
+          Math.max(0, Math.floor(progress * totalFrames)),
+          totalFrames - 1
+        )
         favicon.value = `/assets/images/favicon_progress_16x16/frame_${frame}.png`
       }
     }

src/composables/useRegistrySearch.ts

@@ -1,114 +1,89 @@
 import { watchDebounced } from '@vueuse/core'
-import type { Hit } from 'algoliasearch/dist/lite/browser'
-import { memoize, orderBy } from 'lodash'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import {
-  AlgoliaNodePack,
-  SearchAttribute,
-  useAlgoliaSearchService
-} from '@/services/algoliaSearchService'
-import type { NodesIndexSuggestion } from '@/services/algoliaSearchService'
-import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
+import { DEFAULT_PAGE_SIZE } from '@/constants/searchConstants'
+import { useRegistrySearchGateway } from '@/services/gateway/registrySearchGateway'
+import type { SearchAttribute } from '@/types/algoliaTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import type {
+  ActiveFilters,
+  QuerySuggestion,
+  SearchMode
+} from '@/types/searchServiceTypes'
+
+type RegistryNodePack = components['schemas']['Node']
 
 const SEARCH_DEBOUNCE_TIME = 320
-const DEFAULT_PAGE_SIZE = 64
-const DEFAULT_SORT_FIELD = SortableAlgoliaField.Downloads // Set in the index configuration
-const DEFAULT_MAX_CACHE_SIZE = 64
-const SORT_DIRECTIONS: Record<SortableAlgoliaField, 'asc' | 'desc'> = {
-  [SortableAlgoliaField.Downloads]: 'desc',
-  [SortableAlgoliaField.Created]: 'desc',
-  [SortableAlgoliaField.Updated]: 'desc',
-  [SortableAlgoliaField.Publisher]: 'asc',
-  [SortableAlgoliaField.Name]: 'asc'
-}
-
-const isDateField = (field: SortableAlgoliaField): boolean =>
-  field === SortableAlgoliaField.Created ||
-  field === SortableAlgoliaField.Updated
+const DEFAULT_SORT_FIELD = 'total_install' // Downloads field in the database
 
 /**
  * Composable for managing UI state of Comfy Node Registry search.
  */
 export function useRegistrySearch(
   options: {
-    maxCacheSize?: number
+    initialSortField?: string
+    initialSearchMode?: SearchMode
+    initialSearchQuery?: string
+    initialPageNumber?: number
   } = {}
 ) {
-  const { maxCacheSize = DEFAULT_MAX_CACHE_SIZE } = options
+  const {
+    initialSortField = DEFAULT_SORT_FIELD,
+    initialSearchMode = 'packs',
+    initialSearchQuery = '',
+    initialPageNumber = 0
+  } = options
+
   const isLoading = ref(false)
-  const sortField = ref<SortableAlgoliaField>(SortableAlgoliaField.Downloads)
-  const searchMode = ref<'nodes' | 'packs'>('packs')
+  const sortField = ref<string>(initialSortField)
+  const searchMode = ref<SearchMode>(initialSearchMode)
   const pageSize = ref(DEFAULT_PAGE_SIZE)
-  const pageNumber = ref(0)
-  const searchQuery = ref('')
-  const results = ref<AlgoliaNodePack[]>([])
-  const suggestions = ref<NodesIndexSuggestion[]>([])
+  const pageNumber = ref(initialPageNumber)
+  const searchQuery = ref(initialSearchQuery)
+  const searchResults = ref<RegistryNodePack[]>([])
+  const suggestions = ref<QuerySuggestion[]>([])
+  const activeFilters = ref<ActiveFilters>({})
 
   const searchAttributes = computed<SearchAttribute[]>(() =>
     searchMode.value === 'nodes' ? ['comfy_nodes'] : ['name', 'description']
   )
 
-  const resultsAsRegistryPacks = computed(() =>
-    results.value ? results.value.map(algoliaToRegistry) : []
-  )
-  const resultsAsNodes = computed(() =>
-    results.value
-      ? results.value.reduce(
-          (acc, hit) => acc.concat(hit.comfy_nodes),
-          [] as string[]
-        )
-      : []
-  )
+  const searchGateway = useRegistrySearchGateway()
 
-  const { searchPacksCached, toRegistryPack, clearSearchPacksCache } =
-    useAlgoliaSearchService({
-      maxCacheSize
-    })
-
-  const algoliaToRegistry = memoize(
-    toRegistryPack,
-    (algoliaNode: AlgoliaNodePack) => algoliaNode.id
-  )
-  const getSortValue = (pack: Hit<AlgoliaNodePack>) => {
-    if (isDateField(sortField.value)) {
-      const value = pack[sortField.value]
-      return value ? new Date(value).getTime() : 0
-    } else {
-      const value = pack[sortField.value]
-      return value ?? 0
-    }
-  }
+  const {
+    searchPacks,
+    clearSearchCache,
+    getSortableFields,
+    getFilterableFields
+  } = searchGateway
 
   const updateSearchResults = async (options: { append?: boolean }) => {
     isLoading.value = true
     if (!options.append) {
       pageNumber.value = 0
     }
-    const { nodePacks, querySuggestions } = await searchPacksCached(
+
+    // Get the sort direction from the provider's sortable fields
+    const sortableFields = getSortableFields()
+    const fieldConfig = sortableFields.find((f) => f.id === sortField.value)
+    const sortDirection = fieldConfig?.direction || 'desc'
+
+    const { nodePacks, querySuggestions } = await searchPacks(
       searchQuery.value,
       {
         pageSize: pageSize.value,
         pageNumber: pageNumber.value,
-        restrictSearchableAttributes: searchAttributes.value
+        restrictSearchableAttributes: searchAttributes.value,
+        filters: activeFilters.value,
+        sortField: sortField.value,
+        sortDirection
       }
     )
 
-    let sortedPacks = nodePacks
-
-    // Results are sorted by the default field to begin with -- so don't manually sort again
-    if (sortField.value && sortField.value !== DEFAULT_SORT_FIELD) {
-      sortedPacks = orderBy(
-        nodePacks,
-        [getSortValue],
-        [SORT_DIRECTIONS[sortField.value]]
-      )
-    }
-
-    if (options.append && results.value?.length) {
-      results.value = results.value.concat(sortedPacks)
+    if (options.append && searchResults.value?.length) {
+      searchResults.value = searchResults.value.concat(nodePacks)
     } else {
-      results.value = sortedPacks
+      searchResults.value = nodePacks
     }
     suggestions.value = querySuggestions
     isLoading.value = false
@@ -118,13 +93,20 @@ export function useRegistrySearch(
   const onPageChange = () => updateSearchResults({ append: true })
 
   watch([sortField, searchMode], onQueryChange)
+  watch(activeFilters, onQueryChange, { deep: true })
   watch(pageNumber, onPageChange)
   watchDebounced(searchQuery, onQueryChange, {
     debounce: SEARCH_DEBOUNCE_TIME,
     immediate: true
   })
 
-  onUnmounted(clearSearchPacksCache)
+  const sortOptions = computed(() => {
+    return getSortableFields()
+  })
+
+  const filterOptions = computed(() => {
+    return getFilterableFields()
+  })
 
   return {
     isLoading,
@@ -134,7 +116,10 @@ export function useRegistrySearch(
     searchMode,
     searchQuery,
     suggestions,
-    searchResults: resultsAsRegistryPacks,
-    nodeSearchResults: resultsAsNodes
+    searchResults,
+    sortOptions,
+    activeFilters,
+    filterOptions,
+    clearCache: clearSearchCache
   }
 }

src/constants/searchConstants.ts

@@ -0,0 +1,3 @@
+export const SEARCH_CACHE_MAX_SIZE = 64
+export const DEFAULT_PAGE_SIZE = 64
+export const MIN_CHARS_FOR_SUGGESTIONS_ALGOLIA = 2

src/extensions/core/load3d/Load3d.ts

@@ -163,7 +163,7 @@ class Load3d {
     this.renderMainScene()
 
     if (this.previewManager.showPreview) {
-      this.renderPreviewScene()
+      this.previewManager.renderPreview()
     }
 
     this.resetViewport()
@@ -183,7 +183,6 @@ class Load3d {
     this.renderer.setScissor(0, 0, width, height)
     this.renderer.setScissorTest(true)
 
-    this.renderer.clear()
     this.sceneManager.renderBackground()
     this.renderer.render(
       this.sceneManager.scene,
@@ -191,10 +190,6 @@ class Load3d {
     )
   }
 
-  renderPreviewScene(): void {
-    this.previewManager.renderPreview()
-  }
-
   resetViewport(): void {
     const width = this.renderer.domElement.clientWidth
     const height = this.renderer.domElement.clientHeight
@@ -231,7 +226,7 @@ class Load3d {
       this.renderMainScene()
 
       if (this.previewManager.showPreview) {
-        this.renderPreviewScene()
+        this.previewManager.renderPreview()
       }
 
       this.resetViewport()
@@ -321,6 +316,9 @@ class Load3d {
 
   setBackgroundColor(color: string): void {
     this.sceneManager.setBackgroundColor(color)
+
+    this.previewManager.setPreviewBackgroundColor(color)
+
     this.forceRender()
   }
 
@@ -337,9 +335,9 @@ class Load3d {
   removeBackgroundImage(): void {
     this.sceneManager.removeBackgroundImage()
 
-    if (this.previewManager.previewCamera) {
-      this.previewManager.updateBackgroundTexture(null)
-    }
+    this.previewManager.setPreviewBackgroundColor(
+      this.sceneManager.currentBackgroundColor
+    )
 
     this.forceRender()
   }
@@ -366,10 +364,6 @@ class Load3d {
   setCameraState(state: CameraState): void {
     this.cameraManager.setCameraState(state)
 
-    if (this.previewManager.showPreview) {
-      this.previewManager.syncWithMainCamera()
-    }
-
     this.forceRender()
   }
 

src/extensions/core/load3d/Load3dAnimation.ts

@@ -53,7 +53,7 @@ class Load3dAnimation extends Load3d {
       this.renderMainScene()
 
       if (this.previewManager.showPreview) {
-        this.renderPreviewScene()
+        this.previewManager.renderPreview()
       }
 
       this.resetViewport()

src/extensions/core/load3d/PreviewManager.ts

@@ -5,7 +5,7 @@ import { EventManagerInterface, PreviewManagerInterface } from './interfaces'
 
 export class PreviewManager implements PreviewManagerInterface {
   previewCamera: THREE.Camera
-  previewContainer: HTMLDivElement = {} as HTMLDivElement
+  previewContainer: HTMLDivElement = null!
   showPreview: boolean = true
   previewWidth: number = 120
 
@@ -23,7 +23,8 @@ export class PreviewManager implements PreviewManagerInterface {
   private previewBackgroundMesh: THREE.Mesh | null = null
   private previewBackgroundTexture: THREE.Texture | null = null
 
-  private previewBackgroundColor: THREE.Color = new THREE.Color(0x282828)
+  private previewBackgroundColorMaterial: THREE.MeshBasicMaterial | null = null
+  private currentBackgroundColor: THREE.Color = new THREE.Color(0x282828)
 
   constructor(
     scene: THREE.Scene,
@@ -45,15 +46,24 @@ export class PreviewManager implements PreviewManagerInterface {
     this.previewBackgroundScene = backgroundScene.clone()
     this.previewBackgroundCamera = backgroundCamera.clone()
 
+    this.initPreviewBackgroundScene()
+  }
+
+  private initPreviewBackgroundScene(): void {
     const planeGeometry = new THREE.PlaneGeometry(2, 2)
-    const planeMaterial = new THREE.MeshBasicMaterial({
-      transparent: true,
+
+    this.previewBackgroundColorMaterial = new THREE.MeshBasicMaterial({
+      color: this.currentBackgroundColor.clone(),
+      transparent: false,
       depthWrite: false,
       depthTest: false,
       side: THREE.DoubleSide
     })
 
-    this.previewBackgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+    this.previewBackgroundMesh = new THREE.Mesh(
+      planeGeometry,
+      this.previewBackgroundColorMaterial
+    )
     this.previewBackgroundMesh.position.set(0, 0, 0)
     this.previewBackgroundScene.add(this.previewBackgroundMesh)
   }
@@ -65,9 +75,15 @@ export class PreviewManager implements PreviewManagerInterface {
       this.previewBackgroundTexture.dispose()
     }
 
+    if (this.previewBackgroundColorMaterial) {
+      this.previewBackgroundColorMaterial.dispose()
+    }
+
     if (this.previewBackgroundMesh) {
       this.previewBackgroundMesh.geometry.dispose()
-      ;(this.previewBackgroundMesh.material as THREE.Material).dispose()
+      if (this.previewBackgroundMesh.material instanceof THREE.Material) {
+        this.previewBackgroundMesh.material.dispose()
+      }
     }
   }
 
@@ -174,10 +190,24 @@ export class PreviewManager implements PreviewManagerInterface {
     return { left, bottom, width, height }
   }
 
-  syncWithMainCamera(): void {
-    if (!this.showPreview) return
+  renderPreview(): void {
+    const viewport = this.getPreviewViewport()
+    if (!viewport) return
 
-    this.previewCamera = this.getActiveCamera().clone()
+    const renderer = this.getRenderer()
+
+    const originalClearColor = renderer.getClearColor(new THREE.Color())
+    const originalClearAlpha = renderer.getClearAlpha()
+
+    if (
+      !this.previewCamera ||
+      (this.getActiveCamera() instanceof THREE.PerspectiveCamera &&
+        !(this.previewCamera instanceof THREE.PerspectiveCamera)) ||
+      (this.getActiveCamera() instanceof THREE.OrthographicCamera &&
+        !(this.previewCamera instanceof THREE.OrthographicCamera))
+    ) {
+      this.previewCamera = this.getActiveCamera().clone()
+    }
 
     this.previewCamera.position.copy(this.getActiveCamera().position)
     this.previewCamera.rotation.copy(this.getActiveCamera().rotation)
@@ -188,16 +218,16 @@ export class PreviewManager implements PreviewManagerInterface {
       const activeOrtho = this.getActiveCamera() as THREE.OrthographicCamera
       const previewOrtho = this.previewCamera as THREE.OrthographicCamera
 
-      previewOrtho.zoom = activeOrtho.zoom
-
       const frustumHeight =
         (activeOrtho.top - activeOrtho.bottom) / activeOrtho.zoom
+
       const frustumWidth = frustumHeight * aspect
 
       previewOrtho.top = frustumHeight / 2
       previewOrtho.left = -frustumWidth / 2
       previewOrtho.right = frustumWidth / 2
       previewOrtho.bottom = -frustumHeight / 2
+      previewOrtho.zoom = 1
 
       previewOrtho.updateProjectionMatrix()
     } else {
@@ -213,18 +243,6 @@ export class PreviewManager implements PreviewManagerInterface {
     }
 
     this.previewCamera.lookAt(this.getControls().target)
-  }
-
-  renderPreview(): void {
-    const viewport = this.getPreviewViewport()
-    if (!viewport) return
-
-    const renderer = this.getRenderer()
-
-    const originalClearColor = renderer.getClearColor(new THREE.Color())
-    const originalClearAlpha = renderer.getClearAlpha()
-
-    this.syncWithMainCamera()
 
     renderer.setViewport(
       viewport.left,
@@ -239,42 +257,46 @@ export class PreviewManager implements PreviewManagerInterface {
       viewport.height
     )
 
-    renderer.setClearColor(this.previewBackgroundColor, 1.0)
+    renderer.setClearColor(0x000000, 0)
     renderer.clear()
 
-    if (this.previewBackgroundMesh && this.previewBackgroundTexture) {
-      const material = this.previewBackgroundMesh
-        .material as THREE.MeshBasicMaterial
-      if (material.map) {
-        const currentToneMapping = renderer.toneMapping
-        const currentExposure = renderer.toneMappingExposure
-
-        renderer.toneMapping = THREE.NoToneMapping
-        renderer.render(
-          this.previewBackgroundScene,
-          this.previewBackgroundCamera
-        )
-
-        renderer.toneMapping = currentToneMapping
-        renderer.toneMappingExposure = currentExposure
-      }
-    }
+    this.renderPreviewBackground(renderer)
 
     renderer.render(this.scene, this.previewCamera)
 
     renderer.setClearColor(originalClearColor, originalClearAlpha)
   }
 
-  setPreviewBackgroundColor(color: string | number): void {
-    this.previewBackgroundColor.set(color)
+  private renderPreviewBackground(renderer: THREE.WebGLRenderer): void {
+    if (this.previewBackgroundMesh) {
+      const currentToneMapping = renderer.toneMapping
+      const currentExposure = renderer.toneMappingExposure
+
+      renderer.toneMapping = THREE.NoToneMapping
+      renderer.render(this.previewBackgroundScene, this.previewBackgroundCamera)
+
+      renderer.toneMapping = currentToneMapping
+      renderer.toneMappingExposure = currentExposure
+    }
   }
 
-  getPreviewBackgroundColor(): THREE.Color {
-    return this.previewBackgroundColor.clone()
-  }
+  setPreviewBackgroundColor(color: string | number | THREE.Color): void {
+    this.currentBackgroundColor.set(color)
 
-  updatePreviewRender(): void {
-    this.syncWithMainCamera()
+    if (!this.previewBackgroundMesh || !this.previewBackgroundColorMaterial) {
+      this.initPreviewBackgroundScene()
+    }
+
+    this.previewBackgroundColorMaterial!.color.copy(this.currentBackgroundColor)
+
+    if (this.previewBackgroundMesh) {
+      this.previewBackgroundMesh.material = this.previewBackgroundColorMaterial!
+    }
+
+    if (this.previewBackgroundTexture) {
+      this.previewBackgroundTexture.dispose()
+      this.previewBackgroundTexture = null
+    }
   }
 
   togglePreview(showPreview: boolean): void {
@@ -323,26 +345,42 @@ export class PreviewManager implements PreviewManagerInterface {
   }
 
   updateBackgroundTexture(texture: THREE.Texture | null): void {
-    if (this.previewBackgroundTexture) {
-      this.previewBackgroundTexture.dispose()
-    }
+    if (texture) {
+      if (this.previewBackgroundTexture) {
+        this.previewBackgroundTexture.dispose()
+      }
 
-    this.previewBackgroundTexture = texture
+      this.previewBackgroundTexture = texture
 
-    if (texture && this.previewBackgroundMesh) {
-      const material2 = this.previewBackgroundMesh
-        .material as THREE.MeshBasicMaterial
-      material2.map = texture
-      material2.needsUpdate = true
+      if (this.previewBackgroundMesh) {
+        const imageMaterial = new THREE.MeshBasicMaterial({
+          map: texture,
+          transparent: true,
+          depthWrite: false,
+          depthTest: false,
+          side: THREE.DoubleSide
+        })
 
-      this.previewBackgroundMesh.position.set(0, 0, 0)
+        if (
+          this.previewBackgroundMesh.material instanceof THREE.Material &&
+          this.previewBackgroundMesh.material !==
+            this.previewBackgroundColorMaterial
+        ) {
+          this.previewBackgroundMesh.material.dispose()
+        }
 
-      this.updateBackgroundSize(
-        this.previewBackgroundTexture,
-        this.previewBackgroundMesh,
-        this.targetWidth,
-        this.targetHeight
-      )
+        this.previewBackgroundMesh.material = imageMaterial
+        this.previewBackgroundMesh.position.set(0, 0, 0)
+
+        this.updateBackgroundSize(
+          this.previewBackgroundTexture,
+          this.previewBackgroundMesh,
+          this.targetWidth,
+          this.targetHeight
+        )
+      }
+    } else {
+      this.setPreviewBackgroundColor(this.currentBackgroundColor)
     }
   }
 

src/extensions/core/load3d/SceneManager.ts

@@ -13,6 +13,10 @@ export class SceneManager implements SceneManagerInterface {
   backgroundMesh: THREE.Mesh | null = null
   backgroundTexture: THREE.Texture | null = null
 
+  backgroundColorMaterial: THREE.MeshBasicMaterial | null = null
+  currentBackgroundType: 'color' | 'image' = 'color'
+  currentBackgroundColor: string = '#282828'
+
   private eventManager: EventManagerInterface
   private renderer: THREE.WebGLRenderer
 
@@ -40,17 +44,28 @@ export class SceneManager implements SceneManagerInterface {
     this.backgroundScene = new THREE.Scene()
     this.backgroundCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1)
 
+    this.initBackgroundScene()
+  }
+
+  private initBackgroundScene(): void {
     const planeGeometry = new THREE.PlaneGeometry(2, 2)
-    const planeMaterial = new THREE.MeshBasicMaterial({
-      transparent: true,
+
+    this.backgroundColorMaterial = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(this.currentBackgroundColor),
+      transparent: false,
       depthWrite: false,
       depthTest: false,
       side: THREE.DoubleSide
     })
 
-    this.backgroundMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+    this.backgroundMesh = new THREE.Mesh(
+      planeGeometry,
+      this.backgroundColorMaterial
+    )
     this.backgroundMesh.position.set(0, 0, 0)
     this.backgroundScene.add(this.backgroundMesh)
+
+    this.renderer.setClearColor(0x000000, 0)
   }
 
   init(): void {}
@@ -60,9 +75,15 @@ export class SceneManager implements SceneManagerInterface {
       this.backgroundTexture.dispose()
     }
 
+    if (this.backgroundColorMaterial) {
+      this.backgroundColorMaterial.dispose()
+    }
+
     if (this.backgroundMesh) {
       this.backgroundMesh.geometry.dispose()
-      ;(this.backgroundMesh.material as THREE.Material).dispose()
+      if (this.backgroundMesh.material instanceof THREE.Material) {
+        this.backgroundMesh.material.dispose()
+      }
     }
 
     this.scene.clear()
@@ -77,18 +98,39 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   setBackgroundColor(color: string): void {
-    this.renderer.setClearColor(new THREE.Color(color))
+    this.currentBackgroundColor = color
+    this.currentBackgroundType = 'color'
+
+    if (!this.backgroundMesh || !this.backgroundColorMaterial) {
+      this.initBackgroundScene()
+    }
+
+    this.backgroundColorMaterial!.color.set(color)
+    this.backgroundColorMaterial!.map = null
+    this.backgroundColorMaterial!.transparent = false
+    this.backgroundColorMaterial!.needsUpdate = true
+
+    if (this.backgroundMesh) {
+      this.backgroundMesh.material = this.backgroundColorMaterial!
+    }
+
+    if (this.backgroundTexture) {
+      this.backgroundTexture.dispose()
+      this.backgroundTexture = null
+    }
+
     this.eventManager.emitEvent('backgroundColorChange', color)
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
-    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
-
     if (uploadPath === '') {
-      this.removeBackgroundImage()
+      this.setBackgroundColor(this.currentBackgroundColor)
+
       return
     }
 
+    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
+
     let imageUrl = Load3dUtils.getResourceURL(
       ...Load3dUtils.splitFilePath(uploadPath)
     )
@@ -110,12 +152,31 @@ export class SceneManager implements SceneManagerInterface {
       texture.colorSpace = THREE.SRGBColorSpace
 
       this.backgroundTexture = texture
+      this.currentBackgroundType = 'image'
 
-      const material = this.backgroundMesh?.material as THREE.MeshBasicMaterial
-      material.map = texture
-      material.needsUpdate = true
+      if (!this.backgroundMesh) {
+        this.initBackgroundScene()
+      }
 
-      this.backgroundMesh?.position.set(0, 0, 0)
+      const imageMaterial = new THREE.MeshBasicMaterial({
+        map: texture,
+        transparent: true,
+        depthWrite: false,
+        depthTest: false,
+        side: THREE.DoubleSide
+      })
+
+      if (this.backgroundMesh) {
+        if (
+          this.backgroundMesh.material !== this.backgroundColorMaterial &&
+          this.backgroundMesh.material instanceof THREE.Material
+        ) {
+          this.backgroundMesh.material.dispose()
+        }
+
+        this.backgroundMesh.material = imageMaterial
+        this.backgroundMesh.position.set(0, 0, 0)
+      }
 
       this.updateBackgroundSize(
         this.backgroundTexture,
@@ -129,20 +190,12 @@ export class SceneManager implements SceneManagerInterface {
     } catch (error) {
       this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
       console.error('Error loading background image:', error)
+      this.setBackgroundColor(this.currentBackgroundColor)
     }
   }
 
   removeBackgroundImage(): void {
-    if (this.backgroundMesh) {
-      const material = this.backgroundMesh.material as THREE.MeshBasicMaterial
-      material.map = null
-      material.needsUpdate = true
-    }
-
-    if (this.backgroundTexture) {
-      this.backgroundTexture.dispose()
-      this.backgroundTexture = null
-    }
+    this.setBackgroundColor(this.currentBackgroundColor)
     this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
   }
 
@@ -172,7 +225,11 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   handleResize(width: number, height: number): void {
-    if (this.backgroundTexture && this.backgroundMesh) {
+    if (
+      this.backgroundTexture &&
+      this.backgroundMesh &&
+      this.currentBackgroundType === 'image'
+    ) {
       this.updateBackgroundSize(
         this.backgroundTexture,
         this.backgroundMesh,
@@ -183,18 +240,25 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   renderBackground(): void {
-    if (this.backgroundMesh && this.backgroundTexture) {
-      const material = this.backgroundMesh.material as THREE.MeshBasicMaterial
-      if (material.map) {
-        const currentToneMapping = this.renderer.toneMapping
-        const currentExposure = this.renderer.toneMappingExposure
+    if (this.backgroundMesh) {
+      const currentToneMapping = this.renderer.toneMapping
+      const currentExposure = this.renderer.toneMappingExposure
 
-        this.renderer.toneMapping = THREE.NoToneMapping
-        this.renderer.render(this.backgroundScene, this.backgroundCamera)
+      this.renderer.toneMapping = THREE.NoToneMapping
+      this.renderer.render(this.backgroundScene, this.backgroundCamera)
 
-        this.renderer.toneMapping = currentToneMapping
-        this.renderer.toneMappingExposure = currentExposure
-      }
+      this.renderer.toneMapping = currentToneMapping
+      this.renderer.toneMappingExposure = currentExposure
+    }
+  }
+
+  getCurrentBackgroundInfo(): { type: 'color' | 'image'; value: string } {
+    return {
+      type: this.currentBackgroundType,
+      value:
+        this.currentBackgroundType === 'color'
+          ? this.currentBackgroundColor
+          : ''
     }
   }
 
@@ -210,8 +274,6 @@ export class SceneManager implements SceneManagerInterface {
           new THREE.Color()
         )
         const originalClearAlpha = this.renderer.getClearAlpha()
-        const originalToneMapping = this.renderer.toneMapping
-        const originalExposure = this.renderer.toneMappingExposure
         const originalOutputColorSpace = this.renderer.outputColorSpace
 
         this.renderer.setSize(width, height)
@@ -237,7 +299,11 @@ export class SceneManager implements SceneManagerInterface {
           orthographicCamera.updateProjectionMatrix()
         }
 
-        if (this.backgroundTexture && this.backgroundMesh) {
+        if (
+          this.backgroundTexture &&
+          this.backgroundMesh &&
+          this.currentBackgroundType === 'image'
+        ) {
           this.updateBackgroundSize(
             this.backgroundTexture,
             this.backgroundMesh,
@@ -252,19 +318,7 @@ export class SceneManager implements SceneManagerInterface {
         >()
 
         this.renderer.clear()
-
-        if (this.backgroundMesh && this.backgroundTexture) {
-          const material = this.backgroundMesh
-            .material as THREE.MeshBasicMaterial
-
-          if (material.map) {
-            this.renderer.toneMapping = THREE.NoToneMapping
-            this.renderer.render(this.backgroundScene, this.backgroundCamera)
-            this.renderer.toneMapping = originalToneMapping
-            this.renderer.toneMappingExposure = originalExposure
-          }
-        }
-
+        this.renderBackground()
         this.renderer.render(this.scene, this.getActiveCamera())
         const sceneData = this.renderer.domElement.toDataURL('image/png')
 

src/extensions/core/load3d/interfaces.ts

@@ -106,7 +106,6 @@ export interface PreviewManagerInterface extends BaseManager {
   previewWidth: number
   createCapturePreview(container: Element | HTMLElement): void
   updatePreviewSize(): void
-  updatePreviewRender(): void
   togglePreview(showPreview: boolean): void
   setTargetSize(width: number, height: number): void
   handleResize(): void
@@ -118,7 +117,6 @@ export interface PreviewManagerInterface extends BaseManager {
     height: number
   } | null
   renderPreview(): void
-  syncWithMainCamera(): void
 }
 
 export interface EventManagerInterface {

src/locales/en/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "Fit view to selected nodes"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "Move Selected Nodes Down"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "Move Selected Nodes Left"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "Move Selected Nodes Right"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "Move Selected Nodes Up"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Reset View"
   },
@@ -135,10 +147,10 @@
     "label": "Load Default Workflow"
   },
   "Comfy_Manager_CustomNodesManager": {
-    "label": "Custom Nodes Manager"
+    "label": "Toggle the Custom Nodes Manager"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
-    "label": "Toggle Progress Dialog"
+    "label": "Toggle the Custom Nodes Manager Progress Bar"
   },
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Open Mask Editor for Selected Node"

src/locales/en/main.json

@@ -794,6 +794,10 @@
     "Browse Templates": "Browse Templates",
     "Delete Selected Items": "Delete Selected Items",
     "Fit view to selected nodes": "Fit view to selected nodes",
+    "Move Selected Nodes Down": "Move Selected Nodes Down",
+    "Move Selected Nodes Left": "Move Selected Nodes Left",
+    "Move Selected Nodes Right": "Move Selected Nodes Right",
+    "Move Selected Nodes Up": "Move Selected Nodes Up",
     "Reset View": "Reset View",
     "Resize Selected Nodes": "Resize Selected Nodes",
     "Canvas Toggle Link Visibility": "Canvas Toggle Link Visibility",
@@ -824,8 +828,8 @@
     "ComfyUI Issues": "ComfyUI Issues",
     "Interrupt": "Interrupt",
     "Load Default Workflow": "Load Default Workflow",
-    "Custom Nodes Manager": "Custom Nodes Manager",
-    "Toggle Progress Dialog": "Toggle Progress Dialog",
+    "Toggle the Custom Nodes Manager": "Toggle the Custom Nodes Manager",
+    "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
     "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
     "New": "New",
     "Clipspace": "Clipspace",

src/locales/es/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "Ajustar vista a los nodos seleccionados"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "Mover nodos seleccionados hacia abajo"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "Mover nodos seleccionados a la izquierda"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "Mover nodos seleccionados a la derecha"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "Mover nodos seleccionados hacia arriba"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Restablecer vista"
   },

src/locales/es/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "Problemas de ComfyUI",
     "Contact Support": "Contactar soporte",
     "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
-    "Custom Nodes Manager": "Gestor de nodos personalizados",
     "Delete Selected Items": "Eliminar elementos seleccionados",
     "Desktop User Guide": "Guía de usuario de escritorio",
     "Duplicate Current Workflow": "Duplicar flujo de trabajo actual",
@@ -709,6 +708,10 @@
     "Interrupt": "Interrumpir",
     "Load Default Workflow": "Cargar flujo de trabajo predeterminado",
     "Manage group nodes": "Gestionar nodos de grupo",
+    "Move Selected Nodes Down": "Mover nodos seleccionados hacia abajo",
+    "Move Selected Nodes Left": "Mover nodos seleccionados hacia la izquierda",
+    "Move Selected Nodes Right": "Mover nodos seleccionados hacia la derecha",
+    "Move Selected Nodes Up": "Mover nodos seleccionados hacia arriba",
     "Mute/Unmute Selected Nodes": "Silenciar/Activar sonido de nodos seleccionados",
     "New": "Nuevo",
     "Next Opened Workflow": "Siguiente flujo de trabajo abierto",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
     "Toggle Model Library Sidebar": "Alternar barra lateral de biblioteca de modelos",
     "Toggle Node Library Sidebar": "Alternar barra lateral de biblioteca de nodos",
-    "Toggle Progress Dialog": "Alternar diálogo de progreso",
     "Toggle Queue Sidebar": "Alternar barra lateral de cola",
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
     "Toggle Workflows Sidebar": "Alternar barra lateral de flujos de trabajo",
+    "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
+    "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
     "Workflow": "Flujo de trabajo",

src/locales/fr/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "Ajuster la vue aux nœuds sélectionnés"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "Déplacer les nœuds sélectionnés vers le bas"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "Déplacer les nœuds sélectionnés vers la gauche"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "Déplacer les nœuds sélectionnés vers la droite"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "Déplacer les nœuds sélectionnés vers le haut"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Réinitialiser la vue"
   },

src/locales/fr/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "Problèmes de ComfyUI",
     "Contact Support": "Contacter le support",
     "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
-    "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
     "Desktop User Guide": "Guide de l'utilisateur de bureau",
     "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
@@ -709,6 +708,10 @@
     "Interrupt": "Interrompre",
     "Load Default Workflow": "Charger le flux de travail par défaut",
     "Manage group nodes": "Gérer les nœuds de groupe",
+    "Move Selected Nodes Down": "Déplacer les nœuds sélectionnés vers le bas",
+    "Move Selected Nodes Left": "Déplacer les nœuds sélectionnés vers la gauche",
+    "Move Selected Nodes Right": "Déplacer les nœuds sélectionnés vers la droite",
+    "Move Selected Nodes Up": "Déplacer les nœuds sélectionnés vers le haut",
     "Mute/Unmute Selected Nodes": "Mettre en sourdine/Activer le son des nœuds sélectionnés",
     "New": "Nouveau",
     "Next Opened Workflow": "Prochain flux de travail ouvert",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
     "Toggle Model Library Sidebar": "Basculer la barre latérale de la bibliothèque de modèles",
     "Toggle Node Library Sidebar": "Basculer la barre latérale de la bibliothèque de nœuds",
-    "Toggle Progress Dialog": "Basculer la boîte de dialogue de progression",
     "Toggle Queue Sidebar": "Basculer la barre latérale de la file d'attente",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
     "Toggle Workflows Sidebar": "Basculer la barre latérale des flux de travail",
+    "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
+    "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
     "Workflow": "Flux de travail",

src/locales/ja/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "選択したノードにビューを合わせる"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "選択したノードを下に移動"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "選択したノードを左に移動"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "選択したノードを右に移動"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "選択したノードを上に移動"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "ビューをリセット"
   },

src/locales/ja/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "ComfyUIの問題",
     "Contact Support": "サポートに連絡",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
-    "Custom Nodes Manager": "カスタムノードマネージャ",
     "Delete Selected Items": "選択したアイテムを削除",
     "Desktop User Guide": "デスクトップユーザーガイド",
     "Duplicate Current Workflow": "現在のワークフローを複製",
@@ -709,6 +708,10 @@
     "Interrupt": "中断",
     "Load Default Workflow": "デフォルトワークフローを読み込む",
     "Manage group nodes": "グループノードを管理",
+    "Move Selected Nodes Down": "選択したノードを下へ移動",
+    "Move Selected Nodes Left": "選択したノードを左へ移動",
+    "Move Selected Nodes Right": "選択したノードを右へ移動",
+    "Move Selected Nodes Up": "選択したノードを上へ移動",
     "Mute/Unmute Selected Nodes": "選択したノードのミュート/ミュート解除",
     "New": "新規",
     "Next Opened Workflow": "次に開いたワークフロー",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "ログパネル下部を切り替え",
     "Toggle Model Library Sidebar": "モデルライブラリサイドバーを切り替え",
     "Toggle Node Library Sidebar": "ノードライブラリサイドバーを切り替え",
-    "Toggle Progress Dialog": "進行状況ダイアログの切り替え",
     "Toggle Queue Sidebar": "キューサイドバーを切り替え",
     "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
     "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
+    "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
+    "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
     "Workflow": "ワークフロー",

src/locales/ko/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "선택한 노드에 뷰 맞추기"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "선택한 노드 아래로 이동"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "선택한 노드 왼쪽으로 이동"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "선택한 노드 오른쪽으로 이동"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "선택한 노드 위로 이동"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "뷰 재설정"
   },

src/locales/ko/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "ComfyUI 이슈 페이지",
     "Contact Support": "고객 지원 문의",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
-    "Custom Nodes Manager": "사용자 정의 노드 관리자",
     "Delete Selected Items": "선택한 항목 삭제",
     "Desktop User Guide": "데스크톱 사용자 가이드",
     "Duplicate Current Workflow": "현재 워크플로 복제",
@@ -709,6 +708,10 @@
     "Interrupt": "중단",
     "Load Default Workflow": "기본 워크플로 불러오기",
     "Manage group nodes": "그룹 노드 관리",
+    "Move Selected Nodes Down": "선택한 노드 아래로 이동",
+    "Move Selected Nodes Left": "선택한 노드 왼쪽으로 이동",
+    "Move Selected Nodes Right": "선택한 노드 오른쪽으로 이동",
+    "Move Selected Nodes Up": "선택한 노드 위로 이동",
     "Mute/Unmute Selected Nodes": "선택한 노드 활성화/비활성화",
     "New": "새로 만들기",
     "Next Opened Workflow": "다음 열린 워크플로",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
     "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
     "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Progress Dialog": "진행 상황 대화 상자 전환",
     "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
     "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
+    "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
+    "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
     "Workflow": "워크플로",

src/locales/ru/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "Подогнать вид к выбранным нодам"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "Переместить выбранные узлы вниз"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "Переместить выбранные узлы влево"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "Переместить выбранные узлы вправо"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "Переместить выбранные узлы вверх"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "Сбросить вид"
   },

src/locales/ru/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "Проблемы ComfyUI",
     "Contact Support": "Связаться с поддержкой",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
-    "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Delete Selected Items": "Удалить выбранные элементы",
     "Desktop User Guide": "Руководство пользователя для настольных ПК",
     "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
@@ -709,6 +708,10 @@
     "Interrupt": "Прервать",
     "Load Default Workflow": "Загрузить стандартный рабочий процесс",
     "Manage group nodes": "Управление групповыми нодами",
+    "Move Selected Nodes Down": "Переместить выбранные узлы вниз",
+    "Move Selected Nodes Left": "Переместить выбранные узлы влево",
+    "Move Selected Nodes Right": "Переместить выбранные узлы вправо",
+    "Move Selected Nodes Up": "Переместить выбранные узлы вверх",
     "Mute/Unmute Selected Nodes": "Отключить/включить звук для выбранных нод",
     "New": "Новый",
     "Next Opened Workflow": "Следующий открытый рабочий процесс",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
     "Toggle Model Library Sidebar": "Переключение боковой панели библиотеки моделей",
     "Toggle Node Library Sidebar": "Переключение боковой панели библиотеки нод",
-    "Toggle Progress Dialog": "Переключить диалоговое окно прогресса",
     "Toggle Queue Sidebar": "Переключение боковой панели очереди",
     "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
     "Toggle Workflows Sidebar": "Переключение боковой панели рабочих процессов",
+    "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
+    "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
     "Workflow": "Рабочий процесс",

src/locales/zh/commands.json

@@ -44,6 +44,18 @@
   "Comfy_Canvas_FitView": {
     "label": "适应视图到选中节点"
   },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "下移选中的节点"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "向左移动选中节点"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "向右移动选中节点"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "上移选中的节点"
+  },
   "Comfy_Canvas_ResetView": {
     "label": "重置视图"
   },

src/locales/zh/main.json

@@ -694,7 +694,6 @@
     "ComfyUI Issues": "ComfyUI 问题",
     "Contact Support": "联系支持",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
-    "Custom Nodes Manager": "自定义节点管理器",
     "Delete Selected Items": "删除选定的项目",
     "Desktop User Guide": "桌面端用户指南",
     "Duplicate Current Workflow": "复制当前工作流",
@@ -709,6 +708,10 @@
     "Interrupt": "中断",
     "Load Default Workflow": "加载默认工作流",
     "Manage group nodes": "管理组节点",
+    "Move Selected Nodes Down": "下移所选节点",
+    "Move Selected Nodes Left": "左移所选节点",
+    "Move Selected Nodes Right": "右移所选节点",
+    "Move Selected Nodes Up": "上移所选节点",
     "Mute/Unmute Selected Nodes": "静音/取消静音选定节点",
     "New": "新建",
     "Next Opened Workflow": "下一个打开的工作流",
@@ -744,12 +747,13 @@
     "Toggle Logs Bottom Panel": "切换日志底部面板",
     "Toggle Model Library Sidebar": "切换模型库侧边栏",
     "Toggle Node Library Sidebar": "切换节点库侧边栏",
-    "Toggle Progress Dialog": "切换进度对话框",
     "Toggle Queue Sidebar": "切换队列侧边栏",
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
     "Toggle Workflows Sidebar": "切换工作流侧边栏",
+    "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
+    "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
     "Workflow": "工作流",

src/services/algoliaSearchService.ts

@@ -1,257 +0,0 @@
-import QuickLRU from '@alloc/quick-lru'
-import type {
-  BaseSearchParamsWithoutQuery,
-  Hit,
-  SearchQuery,
-  SearchResponse
-} from 'algoliasearch/dist/lite/browser'
-import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/browser'
-import { omit } from 'lodash'
-
-import { components } from '@/types/comfyRegistryTypes'
-import { paramsToCacheKey } from '@/utils/formatUtil'
-
-const DEFAULT_MAX_CACHE_SIZE = 64
-const DEFAULT_MIN_CHARS_FOR_SUGGESTIONS = 2
-
-type SafeNestedProperty<
-  T,
-  K1 extends keyof T,
-  K2 extends keyof NonNullable<T[K1]>
-> = T[K1] extends undefined | null ? undefined : NonNullable<T[K1]>[K2]
-
-type RegistryNodePack = components['schemas']['Node']
-type SearchPacksResult = {
-  nodePacks: Hit<AlgoliaNodePack>[]
-  querySuggestions: Hit<NodesIndexSuggestion>[]
-}
-
-export interface AlgoliaNodePack {
-  objectID: RegistryNodePack['id']
-  name: RegistryNodePack['name']
-  publisher_id: SafeNestedProperty<RegistryNodePack, 'publisher', 'id'>
-  description: RegistryNodePack['description']
-  comfy_nodes: string[]
-  total_install: RegistryNodePack['downloads']
-  id: RegistryNodePack['id']
-  create_time: string
-  update_time: SafeNestedProperty<
-    RegistryNodePack,
-    'latest_version',
-    'createdAt'
-  >
-  license: RegistryNodePack['license']
-  repository_url: RegistryNodePack['repository']
-  status: RegistryNodePack['status']
-  latest_version: SafeNestedProperty<
-    RegistryNodePack,
-    'latest_version',
-    'version'
-  >
-  latest_version_status: SafeNestedProperty<
-    RegistryNodePack,
-    'latest_version',
-    'status'
-  >
-  comfy_node_extract_status: SafeNestedProperty<
-    RegistryNodePack,
-    'latest_version',
-    'comfy_node_extract_status'
-  >
-  icon_url: RegistryNodePack['icon']
-}
-
-export type SearchAttribute = keyof AlgoliaNodePack
-
-const RETRIEVE_ATTRIBUTES: SearchAttribute[] = [
-  'comfy_nodes',
-  'name',
-  'description',
-  'latest_version',
-  'status',
-  'publisher_id',
-  'total_install',
-  'create_time',
-  'update_time',
-  'license',
-  'repository_url',
-  'latest_version_status',
-  'comfy_node_extract_status',
-  'id',
-  'icon_url'
-]
-
-export interface NodesIndexSuggestion {
-  nb_words: number
-  nodes_index: {
-    exact_nb_hits: number
-    facets: {
-      exact_matches: Record<string, number>
-      analytics: Record<string, any>
-    }
-  }
-  objectID: RegistryNodePack['id']
-  popularity: number
-  query: string
-}
-
-type SearchNodePacksParams = BaseSearchParamsWithoutQuery & {
-  pageSize: number
-  pageNumber: number
-  restrictSearchableAttributes: SearchAttribute[]
-}
-
-interface AlgoliaSearchServiceOptions {
-  /**
-   * Maximum number of search results to store in the cache.
-   * The cache is automatically cleared when the component is unmounted.
-   * @default 64
-   */
-  maxCacheSize?: number
-  /**
-   * Minimum number of characters for suggestions. An additional query
-   * will be made to the suggestions/completions index for queries that
-   * are this length or longer.
-   * @default 3
-   */
-  minCharsForSuggestions?: number
-}
-
-export const useAlgoliaSearchService = (
-  options: AlgoliaSearchServiceOptions = {}
-) => {
-  const {
-    maxCacheSize = DEFAULT_MAX_CACHE_SIZE,
-    minCharsForSuggestions = DEFAULT_MIN_CHARS_FOR_SUGGESTIONS
-  } = options
-  const searchClient = algoliasearch(__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__, {
-    hosts: [
-      {
-        url: 'search.comfy.org/api/search',
-        accept: 'read',
-        protocol: 'https'
-      }
-    ],
-    baseHeaders: {
-      'X-Algolia-Application-Id': __ALGOLIA_APP_ID__,
-      'X-Algolia-API-Key': __ALGOLIA_API_KEY__
-    }
-  })
-  const searchPacksCache = new QuickLRU<string, SearchPacksResult>({
-    maxSize: maxCacheSize
-  })
-
-  const toRegistryLatestVersion = (
-    algoliaNode: AlgoliaNodePack
-  ): RegistryNodePack['latest_version'] => {
-    return {
-      version: algoliaNode.latest_version,
-      createdAt: algoliaNode.update_time,
-      status: algoliaNode.latest_version_status,
-      comfy_node_extract_status:
-        algoliaNode.comfy_node_extract_status ?? undefined
-    }
-  }
-
-  const toRegistryPublisher = (
-    algoliaNode: AlgoliaNodePack
-  ): RegistryNodePack['publisher'] => {
-    return {
-      id: algoliaNode.publisher_id,
-      name: algoliaNode.publisher_id
-    }
-  }
-
-  /**
-   * Convert from node pack in Algolia format to Comfy Registry format
-   */
-  function toRegistryPack(algoliaNode: AlgoliaNodePack): RegistryNodePack {
-    return {
-      id: algoliaNode.id ?? algoliaNode.objectID,
-      name: algoliaNode.name,
-      description: algoliaNode.description,
-      repository: algoliaNode.repository_url,
-      license: algoliaNode.license,
-      downloads: algoliaNode.total_install,
-      status: algoliaNode.status,
-      icon: algoliaNode.icon_url,
-      latest_version: toRegistryLatestVersion(algoliaNode),
-      publisher: toRegistryPublisher(algoliaNode),
-      // @ts-expect-error remove when comfy_nodes is added to node (pack) info
-      comfy_nodes: algoliaNode.comfy_nodes
-    }
-  }
-
-  /**
-   * Search for node packs in Algolia
-   */
-  const searchPacks = async (
-    query: string,
-    params: SearchNodePacksParams
-  ): Promise<SearchPacksResult> => {
-    const { pageSize, pageNumber } = params
-    const rest = omit(params, ['pageSize', 'pageNumber'])
-
-    const requests: SearchQuery[] = [
-      {
-        query,
-        indexName: 'nodes_index',
-        attributesToRetrieve: RETRIEVE_ATTRIBUTES,
-        ...rest,
-        hitsPerPage: pageSize,
-        page: pageNumber
-      }
-    ]
-
-    const shouldQuerySuggestions = query.length >= minCharsForSuggestions
-
-    // If the query is long enough, also query the suggestions index
-    if (shouldQuerySuggestions) {
-      requests.push({
-        indexName: 'nodes_index_query_suggestions',
-        query
-      })
-    }
-
-    const { results } = await searchClient.search<
-      AlgoliaNodePack | NodesIndexSuggestion
-    >({
-      requests,
-      strategy: 'none'
-    })
-
-    const [nodePacks, querySuggestions = { hits: [] }] = results as [
-      SearchResponse<AlgoliaNodePack>,
-      SearchResponse<NodesIndexSuggestion>
-    ]
-
-    return {
-      nodePacks: nodePacks.hits,
-      querySuggestions: querySuggestions.hits
-    }
-  }
-
-  const searchPacksCached = async (
-    query: string,
-    params: SearchNodePacksParams
-  ): Promise<SearchPacksResult> => {
-    const cacheKey = paramsToCacheKey({ query, ...params })
-    const cachedResult = searchPacksCache.get(cacheKey)
-    if (cachedResult !== undefined) return cachedResult
-
-    const result = await searchPacks(query, params)
-    searchPacksCache.set(cacheKey, result)
-    return result
-  }
-
-  const clearSearchPacksCache = () => {
-    searchPacksCache.clear()
-  }
-
-  return {
-    searchPacks,
-    searchPacksCached,
-    toRegistryPack,
-    clearSearchPacksCache
-  }
-}

src/services/dialogService.ts

@@ -21,7 +21,6 @@ import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkfl
 import { t } from '@/i18n'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { type ShowDialogOptions, useDialogStore } from '@/stores/dialogStore'
-import { ManagerTab } from '@/types/comfyManagerTypes'
 
 export type ConfirmationDialogType =
   | 'default'
@@ -129,16 +128,14 @@ export const useDialogService = () => {
   }
 
   function showManagerDialog(
-    props: InstanceType<typeof ManagerDialogContent>['$props'] = {
-      initialTab: ManagerTab.All
-    }
+    props: InstanceType<typeof ManagerDialogContent>['$props'] = {}
   ) {
     dialogStore.showDialog({
       key: 'global-manager',
       component: ManagerDialogContent,
       headerComponent: ManagerHeader,
       dialogComponentProps: {
-        closable: false,
+        closable: true,
         pt: {
           header: { class: '!p-0 !m-0' },
           content: { class: '!px-0 h-[83vh] w-[90vw] overflow-y-hidden' }
@@ -397,6 +394,26 @@ export const useDialogService = () => {
     }
   }
 
+  function toggleManagerDialog(
+    props?: InstanceType<typeof ManagerDialogContent>['$props']
+  ) {
+    if (dialogStore.isDialogOpen('global-manager')) {
+      dialogStore.closeDialog({ key: 'global-manager' })
+    } else {
+      showManagerDialog(props)
+    }
+  }
+
+  function toggleManagerProgressDialog(
+    props?: InstanceType<typeof ManagerProgressDialogContent>['$props']
+  ) {
+    if (dialogStore.isDialogOpen('global-manager-progress-dialog')) {
+      dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
+    } else {
+      showManagerProgressDialog({ props })
+    }
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -414,6 +431,8 @@ export const useDialogService = () => {
     showUpdatePasswordDialog,
     showExtensionDialog,
     prompt,
-    confirm
+    confirm,
+    toggleManagerDialog,
+    toggleManagerProgressDialog
   }
 }

src/services/gateway/registrySearchGateway.ts

@@ -0,0 +1,240 @@
+import { useAlgoliaSearchProvider } from '@/services/providers/algoliaSearchProvider'
+import { useComfyRegistrySearchProvider } from '@/services/providers/registrySearchProvider'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import type { SearchNodePacksParams } from '@/types/algoliaTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import type {
+  NodePackSearchProvider,
+  ProviderState,
+  SearchPacksResult
+} from '@/types/searchServiceTypes'
+
+type RegistryNodePack = components['schemas']['Node']
+
+const CIRCUIT_BREAKER_THRESHOLD = 3 // Number of failures before circuit opens
+const CIRCUIT_BREAKER_TIMEOUT = 60000 // 1 minute before retry
+
+/**
+ * API Gateway for registry search providers with circuit breaker pattern.
+ * Acts as a single entry point that routes search requests to appropriate providers
+ * and handles failures gracefully by falling back to alternative providers.
+ *
+ * Implements:
+ * - Gateway pattern: Single entry point for all search requests
+ * - Circuit breaker: Prevents repeated calls to failed services
+ * - Automatic failover: Cascades through providers on failure
+ */
+export const useRegistrySearchGateway = (): NodePackSearchProvider => {
+  const store = useComfyRegistryStore()
+
+  // Initialize providers only once
+  if (!store.isSearchGatewayInitialized) {
+    // Initialize providers in priority order
+    try {
+      store.searchProviders.push({
+        provider: useAlgoliaSearchProvider(),
+        name: 'Algolia',
+        isHealthy: true,
+        consecutiveFailures: 0
+      })
+    } catch (error) {
+      console.warn('Failed to initialize Algolia provider:', error)
+    }
+
+    store.searchProviders.push({
+      provider: useComfyRegistrySearchProvider(),
+      name: 'ComfyRegistry',
+      isHealthy: true,
+      consecutiveFailures: 0
+    })
+
+    store.isSearchGatewayInitialized = true
+  }
+
+  // TODO: Add an "offline" provider that operates on a local cache of the registry.
+
+  /**
+   * Check if a provider's circuit breaker should be closed (available to try)
+   */
+  const isCircuitClosed = (providerState: ProviderState): boolean => {
+    if (providerState.consecutiveFailures < CIRCUIT_BREAKER_THRESHOLD) {
+      return true
+    }
+
+    // Check if enough time has passed to retry
+    if (providerState.lastAttempt) {
+      const timeSinceLastAttempt =
+        Date.now() - providerState.lastAttempt.getTime()
+      if (timeSinceLastAttempt > CIRCUIT_BREAKER_TIMEOUT) {
+        console.info(
+          `Retrying ${providerState.name} provider after circuit breaker timeout`
+        )
+        return true
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Record a successful call to a provider
+   */
+  const recordSuccess = (providerState: ProviderState) => {
+    providerState.isHealthy = true
+    providerState.consecutiveFailures = 0
+    providerState.lastError = undefined
+  }
+
+  /**
+   * Record a failed call to a provider
+   */
+  const recordFailure = (providerState: ProviderState, error: Error) => {
+    providerState.consecutiveFailures++
+    providerState.lastError = error
+    providerState.lastAttempt = new Date()
+
+    if (providerState.consecutiveFailures >= CIRCUIT_BREAKER_THRESHOLD) {
+      providerState.isHealthy = false
+      console.warn(
+        `${providerState.name} provider circuit breaker opened after ${providerState.consecutiveFailures} failures`
+      )
+    }
+  }
+
+  /**
+   * Get the currently active provider based on circuit breaker states
+   */
+  const getActiveProvider = (): NodePackSearchProvider => {
+    // First, try to use the current active provider if it's healthy
+    const currentProvider =
+      store.searchProviders[store.activeSearchProviderIndex]
+    if (currentProvider && isCircuitClosed(currentProvider)) {
+      return currentProvider.provider
+    }
+
+    // Otherwise, find the first healthy provider
+    for (let i = 0; i < store.searchProviders.length; i++) {
+      const providerState = store.searchProviders[i]
+      if (isCircuitClosed(providerState)) {
+        store.activeSearchProviderIndex = i
+        return providerState.provider
+      }
+    }
+
+    throw new Error('No available search providers')
+  }
+
+  /**
+   * Update the active provider index after a failure.
+   * Move to the next provider if available.
+   */
+  const updateActiveProviderOnFailure = () => {
+    if (store.activeSearchProviderIndex < store.searchProviders.length - 1) {
+      store.activeSearchProviderIndex++
+    }
+  }
+
+  /**
+   * Search for node packs.
+   */
+  const searchPacks = async (
+    query: string,
+    params: SearchNodePacksParams
+  ): Promise<SearchPacksResult> => {
+    let lastError: Error | null = null
+
+    // Start with the current active provider
+    for (
+      let attempts = 0;
+      attempts < store.searchProviders.length;
+      attempts++
+    ) {
+      try {
+        const provider = getActiveProvider()
+        const providerState =
+          store.searchProviders[store.activeSearchProviderIndex]
+
+        const result = await provider.searchPacks(query, params)
+        recordSuccess(providerState)
+        return result
+      } catch (error) {
+        lastError = error as Error
+        const providerState =
+          store.searchProviders[store.activeSearchProviderIndex]
+        recordFailure(providerState, lastError)
+        console.warn(
+          `${providerState.name} search provider failed (${providerState.consecutiveFailures} failures):`,
+          error
+        )
+
+        // Try the next provider
+        updateActiveProviderOnFailure()
+      }
+    }
+
+    // If we get here, all providers failed
+    throw new Error(
+      `All search providers failed. Last error: ${lastError?.message || 'Unknown error'}`
+    )
+  }
+
+  /**
+   * Clear the search cache for all providers that implement it.
+   */
+  const clearSearchCache = () => {
+    for (const providerState of store.searchProviders) {
+      try {
+        providerState.provider.clearSearchCache()
+      } catch (error) {
+        console.warn(
+          `Failed to clear cache for ${providerState.name} provider:`,
+          error
+        )
+      }
+    }
+  }
+
+  /**
+   * Get the sort value for a pack.
+   * @example
+   * const pack = {
+   *   id: '123',
+   *   name: 'Test Pack',
+   *   downloads: 100
+   * }
+   * const sortValue = getSortValue(pack, 'downloads')
+   * console.log(sortValue) // 100
+   */
+  const getSortValue = (
+    pack: RegistryNodePack,
+    sortField: string
+  ): string | number => {
+    return getActiveProvider().getSortValue(pack, sortField)
+  }
+
+  /**
+   * Get the sortable fields for the active provider.
+   * @example
+   * const sortableFields = getSortableFields()
+   * console.log(sortableFields) // ['downloads', 'created', 'updated', 'publisher', 'name']
+   */
+  const getSortableFields = () => {
+    return getActiveProvider().getSortableFields()
+  }
+
+  /**
+   * Get the filterable fields for the active provider.
+   */
+  const getFilterableFields = () => {
+    const provider = getActiveProvider()
+    return provider.getFilterableFields()
+  }
+
+  return {
+    searchPacks,
+    clearSearchCache,
+    getSortValue,
+    getSortableFields,
+    getFilterableFields
+  }
+}

src/services/providers/algoliaSearchProvider.ts

@@ -0,0 +1,246 @@
+import QuickLRU from '@alloc/quick-lru'
+import type {
+  SearchQuery,
+  SearchResponse
+} from 'algoliasearch/dist/lite/browser'
+import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/browser'
+import { memoize, omit } from 'lodash'
+
+import {
+  MIN_CHARS_FOR_SUGGESTIONS_ALGOLIA,
+  SEARCH_CACHE_MAX_SIZE
+} from '@/constants/searchConstants'
+import type {
+  AlgoliaNodePack,
+  NodesIndexSuggestion,
+  SearchAttribute,
+  SearchNodePacksParams
+} from '@/types/algoliaTypes'
+import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import type {
+  NodePackSearchProvider,
+  SearchFilter,
+  SearchPacksResult,
+  SortableField
+} from '@/types/searchServiceTypes'
+import { paramsToCacheKey } from '@/utils/formatUtil'
+
+type RegistryNodePack = components['schemas']['Node']
+
+const RETRIEVE_ATTRIBUTES: SearchAttribute[] = [
+  'comfy_nodes',
+  'name',
+  'description',
+  'latest_version',
+  'status',
+  'publisher_id',
+  'total_install',
+  'create_time',
+  'update_time',
+  'license',
+  'repository_url',
+  'latest_version_status',
+  'comfy_node_extract_status',
+  'id',
+  'icon_url'
+]
+
+const searchPacksCache = new QuickLRU<string, SearchPacksResult>({
+  maxSize: SEARCH_CACHE_MAX_SIZE
+})
+
+const toRegistryLatestVersion = (
+  algoliaNode: AlgoliaNodePack
+): RegistryNodePack['latest_version'] => {
+  return {
+    version: algoliaNode.latest_version,
+    createdAt: algoliaNode.update_time,
+    status: algoliaNode.latest_version_status,
+    comfy_node_extract_status:
+      algoliaNode.comfy_node_extract_status ?? undefined
+  }
+}
+
+const toRegistryPublisher = (
+  algoliaNode: AlgoliaNodePack
+): RegistryNodePack['publisher'] => {
+  return {
+    id: algoliaNode.publisher_id,
+    name: algoliaNode.publisher_id
+  }
+}
+
+/**
+ * Convert from node pack in Algolia format to Comfy Registry format
+ */
+const toRegistryPack = memoize(
+  (algoliaNode: AlgoliaNodePack): RegistryNodePack => {
+    return {
+      id: algoliaNode.id ?? algoliaNode.objectID,
+      name: algoliaNode.name,
+      description: algoliaNode.description,
+      repository: algoliaNode.repository_url,
+      license: algoliaNode.license,
+      downloads: algoliaNode.total_install,
+      status: algoliaNode.status,
+      icon: algoliaNode.icon_url,
+      latest_version: toRegistryLatestVersion(algoliaNode),
+      publisher: toRegistryPublisher(algoliaNode),
+      // @ts-expect-error comfy_nodes also not in node info
+      comfy_nodes: algoliaNode.comfy_nodes,
+      create_time: algoliaNode.create_time
+    }
+  },
+  (algoliaNode: AlgoliaNodePack) => algoliaNode.id
+)
+
+export const useAlgoliaSearchProvider = (): NodePackSearchProvider => {
+  const searchClient = algoliasearch(__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__)
+
+  /**
+   * Search for node packs in Algolia (internal method)
+   */
+  const searchPacksInternal = async (
+    query: string,
+    params: SearchNodePacksParams
+  ): Promise<SearchPacksResult> => {
+    const { pageSize, pageNumber } = params
+    const rest = omit(params, [
+      'pageSize',
+      'pageNumber',
+      'sortField',
+      'sortDirection',
+      'filters'
+    ])
+    // TODO:'filters', `sortField` and `sortDirection` need to be mapped to the appropriate Algolia syntax later
+
+    const requests: SearchQuery[] = [
+      {
+        query,
+        indexName: 'nodes_index',
+        attributesToRetrieve: RETRIEVE_ATTRIBUTES,
+        ...rest,
+        hitsPerPage: pageSize,
+        page: pageNumber
+      }
+    ]
+
+    const shouldQuerySuggestions =
+      query.length >= MIN_CHARS_FOR_SUGGESTIONS_ALGOLIA
+
+    // If the query is long enough, also query the suggestions index
+    if (shouldQuerySuggestions) {
+      requests.push({
+        indexName: 'nodes_index_query_suggestions',
+        query
+      })
+    }
+
+    const { results } = await searchClient.search<
+      AlgoliaNodePack | NodesIndexSuggestion
+    >({
+      requests,
+      strategy: 'none'
+    })
+
+    const [nodePacks, querySuggestions = { hits: [] }] = results as [
+      SearchResponse<AlgoliaNodePack>,
+      SearchResponse<NodesIndexSuggestion>
+    ]
+
+    // Convert Algolia hits to RegistryNodePack format
+    const registryPacks = nodePacks.hits.map(toRegistryPack)
+
+    // Extract query suggestions from search results
+    const suggestions = querySuggestions.hits.map((suggestion) => ({
+      query: suggestion.query,
+      popularity: suggestion.popularity
+    }))
+
+    return {
+      nodePacks: registryPacks,
+      querySuggestions: suggestions
+    }
+  }
+
+  /**
+   * Search for node packs in Algolia with caching.
+   */
+  const searchPacks = async (
+    query: string,
+    params: SearchNodePacksParams
+  ): Promise<SearchPacksResult> => {
+    const cacheKey = paramsToCacheKey({ query, ...params })
+    const cachedResult = searchPacksCache.get(cacheKey)
+    if (cachedResult !== undefined) return cachedResult
+
+    const result = await searchPacksInternal(query, params)
+    searchPacksCache.set(cacheKey, result)
+    return result
+  }
+
+  const clearSearchCache = () => {
+    searchPacksCache.clear()
+  }
+
+  const getSortValue = (
+    pack: RegistryNodePack,
+    sortField: string
+  ): string | number => {
+    // For Algolia, we rely on the default sorting behavior
+    // The results are already sorted by the index configuration
+    // This is mainly used for re-sorting after results are fetched
+    switch (sortField) {
+      case SortableAlgoliaField.Downloads:
+        return pack.downloads ?? 0
+      case SortableAlgoliaField.Created: {
+        // TODO: add create time to backend return type
+        // @ts-expect-error create_time is not in the RegistryNodePack type
+        const createTime = pack.create_time
+        return createTime ? new Date(createTime).getTime() : 0
+      }
+      case SortableAlgoliaField.Updated:
+        return pack.latest_version?.createdAt
+          ? new Date(pack.latest_version.createdAt).getTime()
+          : 0
+      case SortableAlgoliaField.Publisher:
+        return pack.publisher?.name ?? ''
+      case SortableAlgoliaField.Name:
+        return pack.name ?? ''
+      default:
+        return 0
+    }
+  }
+
+  const getSortableFields = (): SortableField[] => {
+    return [
+      {
+        id: SortableAlgoliaField.Downloads,
+        label: 'Downloads',
+        direction: 'desc'
+      },
+      { id: SortableAlgoliaField.Created, label: 'Created', direction: 'desc' },
+      { id: SortableAlgoliaField.Updated, label: 'Updated', direction: 'desc' },
+      {
+        id: SortableAlgoliaField.Publisher,
+        label: 'Publisher',
+        direction: 'asc'
+      },
+      { id: SortableAlgoliaField.Name, label: 'Name', direction: 'asc' }
+    ]
+  }
+
+  const getFilterableFields = (): SearchFilter[] => {
+    // Algolia provider doesn't support filters yet, returning empty array
+    return []
+  }
+
+  return {
+    searchPacks,
+    clearSearchCache,
+    getSortValue,
+    getSortableFields,
+    getFilterableFields
+  }
+}

src/services/providers/registrySearchProvider.ts

@@ -0,0 +1,258 @@
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { SearchNodePacksParams } from '@/types/algoliaTypes'
+import type { components, operations } from '@/types/comfyRegistryTypes'
+import type {
+  NodePackSearchProvider,
+  SearchFilter,
+  SearchPacksResult,
+  SortableField
+} from '@/types/searchServiceTypes'
+
+type RegistryNodePack = components['schemas']['Node']
+type ListNodesParams = operations['listAllNodes']['parameters']['query']
+type SearchNodesParams = operations['searchNodes']['parameters']['query']
+
+/**
+ * Search provider for the Comfy Registry.
+ * Uses public Comfy Registry API.
+ */
+export const useComfyRegistrySearchProvider = (): NodePackSearchProvider => {
+  const registryStore = useComfyRegistryStore()
+  const systemStatsStore = useSystemStatsStore()
+
+  /**
+   * Search for node packs using the Comfy Registry API.
+   */
+  const searchPacks = async (
+    query: string,
+    params: SearchNodePacksParams
+  ): Promise<SearchPacksResult> => {
+    const {
+      pageSize,
+      pageNumber,
+      restrictSearchableAttributes,
+      filters,
+      sortField,
+      sortDirection
+    } = params
+
+    // Determine search mode based on searchable attributes
+    const isNodeSearch = restrictSearchableAttributes?.includes('comfy_nodes')
+    const hasSearchQuery = query && query.trim().length > 0
+
+    let searchResult: { nodes?: RegistryNodePack[] } | null = null
+
+    if (hasSearchQuery) {
+      // Use /nodes/search endpoint when there's a search query
+      const searchParams: SearchNodesParams = {
+        search: isNodeSearch ? undefined : query,
+        comfy_node_search: isNodeSearch ? query : undefined,
+        limit: pageSize,
+        page: pageNumber + 1 // API uses 1-based page numbers
+      }
+
+      // Apply filters that are supported by search endpoint
+      if (filters) {
+        if (typeof filters.supported_os === 'string') {
+          searchParams.supported_os = filters.supported_os
+        }
+        // Map from our unified filter name to the search endpoint's parameter name
+        if (typeof filters.supported_accelerator === 'string') {
+          searchParams.supported_accelerator = filters.supported_accelerator
+        }
+      }
+
+      searchResult = await registryStore.search.call(searchParams)
+    } else {
+      // Use /nodes endpoint when there's no search query (supports more parameters)
+      const listParams: ListNodesParams = {
+        limit: pageSize,
+        page: pageNumber + 1 // API uses 1-based page numbers
+      }
+
+      // Apply filters that are supported by list endpoint
+      if (filters) {
+        if (typeof filters.supported_os === 'string') {
+          listParams.supported_os = filters.supported_os
+        }
+        if (typeof filters.supported_accelerator === 'string') {
+          listParams.supported_accelerator = filters.supported_accelerator
+        }
+        if (typeof filters.timestamp === 'string') {
+          listParams.timestamp = filters.timestamp
+        }
+      }
+
+      // Apply sort if provided (only supported by list endpoint)
+      if (sortField) {
+        // Validate sort field to prevent malformed API requests
+        if (!/^[a-zA-Z_]+$/.test(sortField)) {
+          throw new Error(`Invalid sort field: ${sortField}`)
+        }
+        const sortParam =
+          sortDirection === 'desc' ? `${sortField};desc` : sortField
+        listParams.sort = [sortParam]
+      }
+
+      searchResult = await registryStore.listAllPacks.call(listParams)
+    }
+
+    if (!searchResult || !searchResult.nodes) {
+      return {
+        nodePacks: [],
+        querySuggestions: []
+      }
+    }
+
+    return {
+      nodePacks: searchResult.nodes,
+      querySuggestions: [] // Registry doesn't support query suggestions
+    }
+  }
+
+  const clearSearchCache = () => {
+    registryStore.search.clear()
+  }
+
+  const getSortValue = (
+    pack: RegistryNodePack,
+    sortField: string
+  ): string | number => {
+    switch (sortField) {
+      case 'total_install':
+        return pack.downloads ?? 0
+      case 'name':
+        return pack.name ?? ''
+      case 'publisher_name':
+        return pack.publisher?.name ?? ''
+      case 'last_updated':
+        return pack.latest_version?.createdAt
+          ? new Date(pack.latest_version.createdAt).getTime()
+          : 0
+      default:
+        return 0
+    }
+  }
+
+  const getSortableFields = (): SortableField[] => {
+    return [
+      { id: 'total_install', label: 'Downloads', direction: 'desc' },
+      { id: 'name', label: 'Name', direction: 'asc' },
+      { id: 'publisher_name', label: 'Publisher', direction: 'asc' },
+      { id: 'last_updated', label: 'Updated', direction: 'desc' }
+    ]
+  }
+
+  /**
+   * Map system OS to filter value
+   */
+  const getDefaultOSFilter = (): string | undefined => {
+    const stats = systemStatsStore.systemStats
+    if (!stats?.system?.os) return undefined
+
+    const osLower = stats.system.os.toLowerCase()
+    if (osLower.includes('windows')) return 'windows'
+    if (osLower.includes('darwin') || osLower.includes('mac')) return 'macos'
+    if (osLower.includes('linux')) return 'linux'
+    return undefined
+  }
+
+  /**
+   * Map system GPU to filter value
+   */
+  const getDefaultAcceleratorFilter = (): string | undefined => {
+    const stats = systemStatsStore.systemStats
+    if (!stats?.devices || stats.devices.length === 0) return undefined
+
+    // Look for the first GPU device - check for additional patterns
+    for (const device of stats.devices) {
+      const deviceType = device.type.toLowerCase()
+      if (deviceType.includes('nvidia') || deviceType.includes('cuda'))
+        return 'cuda'
+      if (deviceType.includes('apple') || deviceType.includes('mps'))
+        return 'mps'
+      if (deviceType.includes('amd') || deviceType.includes('rocm'))
+        return 'rocm'
+      if (deviceType.includes('directml')) return 'directml'
+    }
+    return undefined
+  }
+
+  const getFilterableFields = (): SearchFilter[] => {
+    return [
+      {
+        id: 'supported_os',
+        label: 'Operating System',
+        type: 'single-select',
+        options: [
+          { value: 'windows', label: 'Windows' },
+          { value: 'macos', label: 'macOS' },
+          { value: 'linux', label: 'Linux' }
+        ],
+        defaultValue: getDefaultOSFilter()
+      },
+      {
+        // Note: search endpoint uses singular, list endpoint uses plural
+        id: 'supported_accelerator',
+        label: 'GPU Support',
+        type: 'single-select',
+        options: [
+          { value: 'cuda', label: 'CUDA (NVIDIA)' },
+          { value: 'directml', label: 'DirectML' },
+          { value: 'rocm', label: 'ROCm (AMD)' },
+          { value: 'mps', label: 'Metal (Apple)' }
+        ],
+        defaultValue: getDefaultAcceleratorFilter()
+      },
+      {
+        // Note: timestamp filter is only available on the list endpoint (no search query)
+        id: 'timestamp',
+        label: 'Updated Since',
+        type: 'single-select',
+        options: [
+          {
+            value: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+            label: 'Last 24 hours'
+          },
+          {
+            value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+            label: 'Last week'
+          },
+          {
+            value: new Date(
+              Date.now() - 30 * 24 * 60 * 60 * 1000
+            ).toISOString(),
+            label: 'Last month'
+          },
+          {
+            value: new Date(
+              Date.now() - 90 * 24 * 60 * 60 * 1000
+            ).toISOString(),
+            label: 'Last 3 months'
+          },
+          {
+            value: new Date(
+              Date.now() - 180 * 24 * 60 * 60 * 1000
+            ).toISOString(),
+            label: 'Last 6 months'
+          },
+          {
+            value: new Date(
+              Date.now() - 365 * 24 * 60 * 60 * 1000
+            ).toISOString(),
+            label: 'Last year'
+          }
+        ]
+      }
+    ]
+  }
+
+  return {
+    searchPacks,
+    clearSearchCache,
+    getSortValue,
+    getSortableFields,
+    getFilterableFields
+  }
+}

src/stores/comfyRegistryStore.ts

@@ -1,10 +1,12 @@
 import QuickLRU from '@alloc/quick-lru'
 import { partition } from 'lodash'
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
 import { useCachedRequest } from '@/composables/useCachedRequest'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import type { components, operations } from '@/types/comfyRegistryTypes'
+import type { ProviderState } from '@/types/searchServiceTypes'
 
 const PACK_LIST_CACHE_SIZE = 20
 const PACK_BY_ID_CACHE_SIZE = 64
@@ -34,6 +36,11 @@ export const useComfyRegistryStore = defineStore('comfyRegistry', () => {
     maxSize: PACK_BY_ID_CACHE_SIZE
   })
 
+  // Search gateway state
+  const searchProviders = ref<ProviderState[]>([])
+  const activeSearchProviderIndex = ref(0)
+  const isSearchGatewayInitialized = ref(false)
+
   /**
    * Get a list of all node packs from the registry
    */
@@ -137,6 +144,11 @@ export const useComfyRegistryStore = defineStore('comfyRegistry', () => {
     cancelRequests,
 
     isLoading: registryService.isLoading,
-    error: registryService.error
+    error: registryService.error,
+
+    // Search gateway state
+    searchProviders,
+    activeSearchProviderIndex,
+    isSearchGatewayInitialized
   }
 })

src/stores/dialogStore.ts

@@ -169,11 +169,16 @@ export const useDialogStore = defineStore('dialog', () => {
     return dialog
   }
 
+  function isDialogOpen(key: string) {
+    return dialogStack.value.some((d) => d.key === key)
+  }
+
   return {
     dialogStack,
     riseDialog,
     showDialog,
     closeDialog,
-    showExtensionDialog
+    showExtensionDialog,
+    isDialogOpen
   }
 })

src/stores/executionStore.ts

@@ -88,54 +88,30 @@ export const useExecutionStore = defineStore('execution', () => {
     if (!activePrompt.value) return 0
     const total = totalNodesToExecute.value
     const done = nodesExecuted.value
-    return done / total
+    return total > 0 ? done / total : 0
   })
 
   function bindExecutionEvents() {
-    api.addEventListener(
-      'execution_start',
-      handleExecutionStart as EventListener
-    )
-    api.addEventListener(
-      'execution_cached',
-      handleExecutionCached as EventListener
-    )
-    api.addEventListener('executed', handleExecuted as EventListener)
-    api.addEventListener('executing', handleExecuting as EventListener)
-    api.addEventListener('progress', handleProgress as EventListener)
-    api.addEventListener('status', handleStatus as EventListener)
-    api.addEventListener(
-      'execution_error',
-      handleExecutionError as EventListener
-    )
+    api.addEventListener('execution_start', handleExecutionStart)
+    api.addEventListener('execution_cached', handleExecutionCached)
+    api.addEventListener('executed', handleExecuted)
+    api.addEventListener('executing', handleExecuting)
+    api.addEventListener('progress', handleProgress)
+    api.addEventListener('status', handleStatus)
+    api.addEventListener('execution_error', handleExecutionError)
   }
-  api.addEventListener('progress_text', handleProgressText as EventListener)
-  api.addEventListener(
-    'display_component',
-    handleDisplayComponent as EventListener
-  )
+  api.addEventListener('progress_text', handleProgressText)
+  api.addEventListener('display_component', handleDisplayComponent)
 
   function unbindExecutionEvents() {
-    api.removeEventListener(
-      'execution_start',
-      handleExecutionStart as EventListener
-    )
-    api.removeEventListener(
-      'execution_cached',
-      handleExecutionCached as EventListener
-    )
-    api.removeEventListener('executed', handleExecuted as EventListener)
-    api.removeEventListener('executing', handleExecuting as EventListener)
-    api.removeEventListener('progress', handleProgress as EventListener)
-    api.removeEventListener('status', handleStatus as EventListener)
-    api.removeEventListener(
-      'execution_error',
-      handleExecutionError as EventListener
-    )
-    api.removeEventListener(
-      'progress_text',
-      handleProgressText as EventListener
-    )
+    api.removeEventListener('execution_start', handleExecutionStart)
+    api.removeEventListener('execution_cached', handleExecutionCached)
+    api.removeEventListener('executed', handleExecuted)
+    api.removeEventListener('executing', handleExecuting)
+    api.removeEventListener('progress', handleProgress)
+    api.removeEventListener('status', handleStatus)
+    api.removeEventListener('execution_error', handleExecutionError)
+    api.removeEventListener('progress_text', handleProgressText)
   }
 
   function handleExecutionStart(e: CustomEvent<ExecutionStartWsMessage>) {
@@ -184,7 +160,7 @@ export const useExecutionStore = defineStore('execution', () => {
       clientId.value = api.clientId
 
       // Once we've received the clientId we no longer need to listen
-      api.removeEventListener('status', handleStatus as EventListener)
+      api.removeEventListener('status', handleStatus)
     }
   }
 

src/types/algoliaTypes.ts

@@ -0,0 +1,93 @@
+import type { Hit } from 'algoliasearch/dist/lite/browser'
+
+import type { components } from '@/types/comfyRegistryTypes'
+
+type SafeNestedProperty<
+  T,
+  K1 extends keyof T,
+  K2 extends keyof NonNullable<T[K1]>
+> = T[K1] extends undefined | null ? undefined : NonNullable<T[K1]>[K2]
+
+type RegistryNodePack = components['schemas']['Node']
+
+/**
+ * Result of searching the Algolia index.
+ * Represents the entire result of a search query.
+ */
+export type SearchPacksResult = {
+  nodePacks: Hit<AlgoliaNodePack>[]
+  querySuggestions: Hit<NodesIndexSuggestion>[]
+}
+
+/**
+ * Node pack record after it has been mapped to Algolia index format.
+ * @see https://github.com/Comfy-Org/comfy-api/blob/main/mapper/algolia.go
+ */
+export interface AlgoliaNodePack {
+  objectID: RegistryNodePack['id']
+  name: RegistryNodePack['name']
+  publisher_id: SafeNestedProperty<RegistryNodePack, 'publisher', 'id'>
+  description: RegistryNodePack['description']
+  comfy_nodes: string[]
+  total_install: RegistryNodePack['downloads']
+  id: RegistryNodePack['id']
+  create_time: string
+  update_time: SafeNestedProperty<
+    RegistryNodePack,
+    'latest_version',
+    'createdAt'
+  >
+  license: RegistryNodePack['license']
+  repository_url: RegistryNodePack['repository']
+  status: RegistryNodePack['status']
+  latest_version: SafeNestedProperty<
+    RegistryNodePack,
+    'latest_version',
+    'version'
+  >
+  latest_version_status: SafeNestedProperty<
+    RegistryNodePack,
+    'latest_version',
+    'status'
+  >
+  comfy_node_extract_status: SafeNestedProperty<
+    RegistryNodePack,
+    'latest_version',
+    'comfy_node_extract_status'
+  >
+  icon_url: RegistryNodePack['icon']
+}
+
+/**
+ * An attribute that can be used to search the Algolia index by.
+ */
+export type SearchAttribute = keyof AlgoliaNodePack
+
+/**
+ * Suggestion for a search query (autocomplete).
+ */
+export interface NodesIndexSuggestion {
+  nb_words: number
+  nodes_index: {
+    exact_nb_hits: number
+    facets: {
+      exact_matches: Record<string, number>
+      analytics: Record<string, any>
+    }
+  }
+  objectID: RegistryNodePack['id']
+  popularity: number
+  query: string
+}
+
+/**
+ * Parameters for searching the Algolia index.
+ */
+export interface SearchNodePacksParams {
+  pageSize: number
+  pageNumber: number
+  restrictSearchableAttributes?: SearchAttribute[]
+  filters?: Record<string, string | string[] | boolean>
+  sortField?: string
+  sortDirection?: 'asc' | 'desc'
+}

src/types/comfyManagerTypes.ts

@@ -1,10 +1,18 @@
 import type { InjectionKey, Ref } from 'vue'
 
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { AlgoliaNodePack } from '@/types/algoliaTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import type { SearchMode } from '@/types/searchServiceTypes'
 
-type RegistryPack = components['schemas']['Node']
 type WorkflowNodeProperties = ComfyWorkflowJSON['nodes'][0]['properties']
+
+export type RegistryPack = components['schemas']['Node']
+export type MergedNodePack = RegistryPack & AlgoliaNodePack
+export const isMergedNodePack = (
+  nodePack: RegistryPack | AlgoliaNodePack
+): nodePack is MergedNodePack => 'comfy_nodes' in nodePack
+
 export type PackField = keyof RegistryPack | null
 
 export const IsInstallingKey: InjectionKey<Ref<boolean>> =
@@ -32,7 +40,7 @@ export enum SortableAlgoliaField {
 }
 
 export interface TabItem {
-  id: string
+  id: ManagerTab
   label: string
   icon: string
 }
@@ -227,3 +235,10 @@ export interface InstallPackParams extends ManagerPackInfo {
 export interface UpdateAllPacksParams {
   mode?: ManagerDatabaseSource
 }
+
+export interface ManagerState {
+  selectedTabId: ManagerTab
+  searchQuery: string
+  searchMode: SearchMode
+  sortField: string
+}

src/types/searchServiceTypes.ts

@@ -0,0 +1,84 @@
+import type { SearchNodePacksParams } from '@/types/algoliaTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type RegistryNodePack = components['schemas']['Node']
+
+/**
+ * Search mode for filtering results
+ */
+export type SearchMode = 'nodes' | 'packs'
+
+export type QuerySuggestion = {
+  query: string
+  popularity: number
+}
+
+export interface SearchFilter {
+  id: string
+  label: string
+  type: 'single-select' | 'boolean'
+  options?: FilterOption[]
+  defaultValue?: string | boolean
+}
+
+export interface FilterOption {
+  value: string
+  label: string
+  icon?: string
+}
+
+export type ActiveFilters = Record<string, string | boolean>
+
+export interface SearchPacksResult {
+  nodePacks: RegistryNodePack[]
+  querySuggestions: QuerySuggestion[]
+}
+
+export interface SortableField<T = string> {
+  id: T
+  label: string
+  direction: 'asc' | 'desc'
+}
+
+export interface NodePackSearchProvider {
+  /**
+   * Search for node packs
+   */
+  searchPacks(
+    query: string,
+    params: SearchNodePacksParams
+  ): Promise<SearchPacksResult>
+
+  /**
+   * Clear the search cache
+   */
+  clearSearchCache(): void
+
+  /**
+   * Get the sort value for a pack based on the sort field
+   */
+  getSortValue(pack: RegistryNodePack, sortField: string): string | number
+
+  /**
+   * Get the list of sortable fields supported by this provider
+   */
+  getSortableFields(): SortableField[]
+
+  /**
+   * Get the list of filterable fields supported by this provider
+   * Providers that don't support filters should return an empty array
+   */
+  getFilterableFields(): SearchFilter[]
+}
+
+/**
+ * State of a search provider
+ */
+export interface ProviderState {
+  provider: NodePackSearchProvider
+  name: string
+  isHealthy: boolean
+  lastError?: Error
+  lastAttempt?: Date
+  consecutiveFailures: number
+}

src/types/treeExplorerTypes.ts

@@ -4,12 +4,12 @@ import type { InjectionKey, ModelRef } from 'vue'
 
 export interface TreeNode extends PrimeVueTreeNode {
   label: string
-  children?: TreeNode[]
+  children?: this[]
 }
 
 export interface TreeExplorerNode<T = any> extends TreeNode {
   data?: T
-  children?: TreeExplorerNode<T>[]
+  children?: this[]
   icon?: string
   /**
    * Function to override what icon to use for the node.
@@ -62,7 +62,7 @@ export interface TreeExplorerNode<T = any> extends TreeNode {
 }
 
 export interface RenderedTreeExplorerNode<T = any> extends TreeExplorerNode<T> {
-  children?: RenderedTreeExplorerNode<T>[]
+  children?: this[]
   icon: string
   type: 'folder' | 'node'
   /** Total number of leaves in the subtree */

src/utils/nodeDefUtil.ts

@@ -61,8 +61,8 @@ const mergeNumericInputSpec = <T extends IntInputSpec | FloatInputSpec>(
   }
 
   return mergeCommonInputSpec(
-    [type, { ...options1, ...mergedOptions }] as unknown as T,
-    [type, { ...options2, ...mergedOptions }] as unknown as T
+    [type, { ...options1, ...mergedOptions }] as T,
+    [type, { ...options2, ...mergedOptions }] as T
   )
 }
 
@@ -84,8 +84,8 @@ const mergeComboInputSpec = <T extends ComboInputSpec | ComboInputSpecV2>(
   }
 
   return mergeCommonInputSpec(
-    ['COMBO', { ...options1, options: intersection }] as unknown as T,
-    ['COMBO', { ...options2, options: intersection }] as unknown as T
+    ['COMBO', { ...options1, options: intersection }] as T,
+    ['COMBO', { ...options2, options: intersection }] as T
   )
 }
 
@@ -107,9 +107,7 @@ const mergeCommonInputSpec = <T extends InputSpec>(
     return value1 === value2 || (_.isNil(value1) && _.isNil(value2))
   })
 
-  return mergeIsValid
-    ? ([type, { ...options1, ...options2 }] as unknown as T)
-    : null
+  return mergeIsValid ? ([type, { ...options1, ...options2 }] as T) : null
 }
 
 /**

src/utils/treeUtil.ts

@@ -116,7 +116,7 @@ export const findNodeByKey = <T extends TreeNode>(
     return null
   }
   for (const child of root.children) {
-    const result = findNodeByKey(child as T, key)
+    const result = findNodeByKey(child, key)
     if (result) {
       return result
     }
@@ -130,11 +130,11 @@ export const findNodeByKey = <T extends TreeNode>(
  * @returns A deep clone of the node.
  */
 export function cloneTree<T extends TreeNode>(node: T): T {
-  const clone: T = { ...node } as T
+  const clone = { ...node }
 
   // Clone children recursively
   if (node.children && node.children.length > 0) {
-    clone.children = node.children.map((child) => cloneTree(child as T))
+    clone.children = node.children.map((child) => cloneTree(child))
   }
 
   return clone

tests-ui/tests/services/algoliaSearchProvider.test.ts

@@ -0,0 +1,365 @@
+import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/browser'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useAlgoliaSearchProvider } from '@/services/providers/algoliaSearchProvider'
+import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
+
+// Mock global Algolia constants
+
+;(global as any).__ALGOLIA_APP_ID__ = 'test-app-id'
+;(global as any).__ALGOLIA_API_KEY__ = 'test-api-key'
+
+// Mock algoliasearch
+vi.mock('algoliasearch/dist/lite/builds/browser', () => ({
+  liteClient: vi.fn()
+}))
+
+describe('useAlgoliaSearchProvider', () => {
+  let mockSearchClient: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Create mock search client
+    mockSearchClient = {
+      search: vi.fn()
+    }
+
+    vi.mocked(algoliasearch).mockReturnValue(mockSearchClient)
+  })
+
+  afterEach(() => {
+    // Clear the module-level cache between tests
+    const provider = useAlgoliaSearchProvider()
+    provider.clearSearchCache()
+  })
+
+  describe('searchPacks', () => {
+    it('should search for packs and convert results', async () => {
+      const mockAlgoliaResults = {
+        results: [
+          {
+            hits: [
+              {
+                objectID: 'algolia-1',
+                id: 'pack-1',
+                name: 'Test Pack',
+                description: 'A test pack',
+                publisher_id: 'publisher-1',
+                total_install: 500,
+                create_time: '2024-01-01T00:00:00Z',
+                update_time: '2024-01-15T00:00:00Z',
+                repository_url: 'https://github.com/test/pack',
+                license: 'MIT',
+                status: 'active',
+                latest_version: '1.0.0',
+                latest_version_status: 'published',
+                icon_url: 'https://example.com/icon.png',
+                comfy_nodes: ['LoadImage', 'SaveImage']
+              }
+            ]
+          },
+          { hits: [] } // Query suggestions
+        ]
+      }
+
+      mockSearchClient.search.mockResolvedValue(mockAlgoliaResults)
+
+      const provider = useAlgoliaSearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(mockSearchClient.search).toHaveBeenCalledWith({
+        requests: [
+          {
+            query: 'test',
+            indexName: 'nodes_index',
+            attributesToRetrieve: expect.any(Array),
+            hitsPerPage: 10,
+            page: 0
+          },
+          {
+            query: 'test',
+            indexName: 'nodes_index_query_suggestions'
+          }
+        ],
+        strategy: 'none'
+      })
+
+      expect(result.nodePacks).toHaveLength(1)
+      expect(result.nodePacks[0]).toEqual({
+        id: 'pack-1',
+        name: 'Test Pack',
+        description: 'A test pack',
+        repository: 'https://github.com/test/pack',
+        license: 'MIT',
+        downloads: 500,
+        status: 'active',
+        icon: 'https://example.com/icon.png',
+        latest_version: {
+          version: '1.0.0',
+          createdAt: '2024-01-15T00:00:00Z',
+          status: 'published',
+          comfy_node_extract_status: undefined
+        },
+        publisher: {
+          id: 'publisher-1',
+          name: 'publisher-1'
+        },
+        create_time: '2024-01-01T00:00:00Z',
+        comfy_nodes: ['LoadImage', 'SaveImage']
+      })
+    })
+
+    it('should include query suggestions when query is long enough', async () => {
+      const mockAlgoliaResults = {
+        results: [
+          { hits: [] }, // Main results
+          {
+            hits: [
+              { query: 'test query', popularity: 10 },
+              { query: 'test pack', popularity: 5 }
+            ]
+          }
+        ]
+      }
+
+      mockSearchClient.search.mockResolvedValue(mockAlgoliaResults)
+
+      const provider = useAlgoliaSearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      // Should make 2 requests (main + suggestions)
+      expect(mockSearchClient.search).toHaveBeenCalledWith({
+        requests: [
+          expect.objectContaining({ indexName: 'nodes_index' }),
+          expect.objectContaining({
+            indexName: 'nodes_index_query_suggestions'
+          })
+        ],
+        strategy: 'none'
+      })
+
+      expect(result.querySuggestions).toEqual([
+        { query: 'test query', popularity: 10 },
+        { query: 'test pack', popularity: 5 }
+      ])
+    })
+
+    it('should not query suggestions for short queries', async () => {
+      mockSearchClient.search.mockResolvedValue({
+        results: [{ hits: [] }]
+      })
+
+      const provider = useAlgoliaSearchProvider()
+      await provider.searchPacks('a', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      // Should only make 1 request (no suggestions)
+      expect(mockSearchClient.search).toHaveBeenCalledWith({
+        requests: [expect.objectContaining({ indexName: 'nodes_index' })],
+        strategy: 'none'
+      })
+    })
+
+    it('should cache search results', async () => {
+      mockSearchClient.search.mockResolvedValue({
+        results: [{ hits: [] }, { hits: [] }]
+      })
+
+      const provider = useAlgoliaSearchProvider()
+      const params = { pageSize: 10, pageNumber: 0 }
+
+      // First call
+      await provider.searchPacks('test', params)
+      expect(mockSearchClient.search).toHaveBeenCalledTimes(1)
+
+      // Second call with same params should use cache
+      await provider.searchPacks('test', params)
+      expect(mockSearchClient.search).toHaveBeenCalledTimes(1)
+
+      // Different params should make new request
+      await provider.searchPacks('test', { ...params, pageNumber: 1 })
+      expect(mockSearchClient.search).toHaveBeenCalledTimes(2)
+    })
+
+    it('should handle missing objectID by using id field', async () => {
+      const mockAlgoliaResults = {
+        results: [
+          {
+            hits: [
+              {
+                id: 'pack-id-only',
+                name: 'Pack without objectID',
+                // ... other required fields
+                publisher_id: 'pub',
+                total_install: 0,
+                comfy_nodes: []
+              }
+            ]
+          },
+          { hits: [] }
+        ]
+      }
+
+      mockSearchClient.search.mockResolvedValue(mockAlgoliaResults)
+
+      const provider = useAlgoliaSearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(result.nodePacks[0].id).toBe('pack-id-only')
+    })
+  })
+
+  describe('clearSearchCache', () => {
+    it('should clear the cache', async () => {
+      mockSearchClient.search.mockResolvedValue({
+        results: [{ hits: [] }, { hits: [] }]
+      })
+
+      const provider = useAlgoliaSearchProvider()
+      const params = { pageSize: 10, pageNumber: 0 }
+
+      // Populate cache
+      await provider.searchPacks('test', params)
+      expect(mockSearchClient.search).toHaveBeenCalledTimes(1)
+
+      // Clear cache
+      provider.clearSearchCache()
+
+      // Same search should hit API again
+      await provider.searchPacks('test', params)
+      expect(mockSearchClient.search).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('getSortValue', () => {
+    const testPack = {
+      id: '1',
+      name: 'Test Pack',
+      downloads: 100,
+      publisher: { id: 'pub1', name: 'Publisher One' },
+      latest_version: {
+        version: '1.0.0',
+        createdAt: '2024-01-15T10:00:00Z'
+      },
+      create_time: '2024-01-01T10:00:00Z'
+    }
+
+    it('should return correct values for each sort field', () => {
+      const provider = useAlgoliaSearchProvider()
+
+      expect(
+        provider.getSortValue(testPack, SortableAlgoliaField.Downloads)
+      ).toBe(100)
+      expect(provider.getSortValue(testPack, SortableAlgoliaField.Name)).toBe(
+        'Test Pack'
+      )
+      expect(
+        provider.getSortValue(testPack, SortableAlgoliaField.Publisher)
+      ).toBe('Publisher One')
+
+      const createdTimestamp = new Date('2024-01-01T10:00:00Z').getTime()
+      expect(
+        provider.getSortValue(testPack as any, SortableAlgoliaField.Created)
+      ).toBe(createdTimestamp)
+
+      const updatedTimestamp = new Date('2024-01-15T10:00:00Z').getTime()
+      expect(
+        provider.getSortValue(testPack, SortableAlgoliaField.Updated)
+      ).toBe(updatedTimestamp)
+    })
+
+    it('should handle missing values', () => {
+      const incompletePack = { id: '1', name: 'Incomplete' }
+      const provider = useAlgoliaSearchProvider()
+
+      expect(
+        provider.getSortValue(incompletePack, SortableAlgoliaField.Downloads)
+      ).toBe(0)
+      expect(
+        provider.getSortValue(incompletePack, SortableAlgoliaField.Publisher)
+      ).toBe('')
+      expect(
+        provider.getSortValue(
+          incompletePack as any,
+          SortableAlgoliaField.Created
+        )
+      ).toBe(0)
+      expect(
+        provider.getSortValue(incompletePack, SortableAlgoliaField.Updated)
+      ).toBe(0)
+    })
+  })
+
+  describe('getSortableFields', () => {
+    it('should return all Algolia sort fields', () => {
+      const provider = useAlgoliaSearchProvider()
+      const fields = provider.getSortableFields()
+
+      expect(fields).toEqual([
+        {
+          id: SortableAlgoliaField.Downloads,
+          label: 'Downloads',
+          direction: 'desc'
+        },
+        {
+          id: SortableAlgoliaField.Created,
+          label: 'Created',
+          direction: 'desc'
+        },
+        {
+          id: SortableAlgoliaField.Updated,
+          label: 'Updated',
+          direction: 'desc'
+        },
+        {
+          id: SortableAlgoliaField.Publisher,
+          label: 'Publisher',
+          direction: 'asc'
+        },
+        { id: SortableAlgoliaField.Name, label: 'Name', direction: 'asc' }
+      ])
+    })
+  })
+
+  describe('memoization', () => {
+    it('should memoize toRegistryPack conversions', async () => {
+      const mockHit = {
+        objectID: 'algolia-1',
+        id: 'pack-1',
+        name: 'Test Pack',
+        publisher_id: 'pub1',
+        total_install: 100,
+        comfy_nodes: []
+      }
+
+      mockSearchClient.search.mockResolvedValue({
+        results: [
+          { hits: [mockHit, mockHit, mockHit] }, // Same object 3 times
+          { hits: [] }
+        ]
+      })
+
+      const provider = useAlgoliaSearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      // All 3 results should be the same object reference due to memoization
+      expect(result.nodePacks[0]).toBe(result.nodePacks[1])
+      expect(result.nodePacks[1]).toBe(result.nodePacks[2])
+    })
+  })
+})

tests-ui/tests/services/registrySearchGateway.test.ts

@@ -0,0 +1,470 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useRegistrySearchGateway } from '@/services/gateway/registrySearchGateway'
+import { useAlgoliaSearchProvider } from '@/services/providers/algoliaSearchProvider'
+import { useComfyRegistrySearchProvider } from '@/services/providers/registrySearchProvider'
+
+// Mock the provider modules to control their behavior
+vi.mock('@/services/providers/algoliaSearchProvider')
+vi.mock('@/services/providers/registrySearchProvider')
+
+describe('useRegistrySearchGateway', () => {
+  let consoleWarnSpy: any
+  let consoleInfoSpy: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    consoleInfoSpy = vi.spyOn(console, 'info').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+    consoleInfoSpy.mockRestore()
+    vi.useRealTimers()
+  })
+
+  describe('Provider initialization', () => {
+    it('should initialize with both providers', () => {
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      expect(useAlgoliaSearchProvider).toHaveBeenCalled()
+      expect(useComfyRegistrySearchProvider).toHaveBeenCalled()
+      expect(gateway).toBeDefined()
+    })
+
+    it('should handle Algolia initialization failure gracefully', () => {
+      vi.mocked(useAlgoliaSearchProvider).mockImplementation(() => {
+        throw new Error('Algolia init failed')
+      })
+
+      const mockRegistryProvider = {
+        searchPacks: vi
+          .fn()
+          .mockResolvedValue({ nodePacks: [], querySuggestions: [] }),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // Gateway should still work with just the Registry provider
+      expect(gateway).toBeDefined()
+      expect(typeof gateway.searchPacks).toBe('function')
+
+      // Verify it can still search using the fallback provider
+      return expect(
+        gateway.searchPacks('test', { pageSize: 10, pageNumber: 0 })
+      ).resolves.toBeDefined()
+    })
+  })
+
+  describe('Search functionality', () => {
+    it('should use Algolia provider by default and fallback on failure', async () => {
+      const algoliaResult = {
+        nodePacks: [{ id: 'algolia-1', name: 'Algolia Pack' }],
+        querySuggestions: []
+      }
+      const registryResult = {
+        nodePacks: [{ id: 'registry-1', name: 'Registry Pack' }],
+        querySuggestions: []
+      }
+
+      const mockAlgoliaProvider = {
+        searchPacks: vi
+          .fn()
+          .mockResolvedValueOnce(algoliaResult)
+          .mockRejectedValueOnce(new Error('Algolia failed')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn().mockResolvedValue(registryResult),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // First call should use Algolia
+      const result1 = await gateway.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+      expect(result1.nodePacks[0].name).toBe('Algolia Pack')
+
+      // Second call should fallback to Registry when Algolia fails
+      const result2 = await gateway.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+      expect(result2.nodePacks[0].name).toBe('Registry Pack')
+    })
+
+    it('should throw error when all providers fail', async () => {
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn().mockRejectedValue(new Error('Algolia failed')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn().mockRejectedValue(new Error('Registry failed')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      await expect(
+        gateway.searchPacks('test', { pageSize: 10, pageNumber: 0 })
+      ).rejects.toThrow('All search providers failed')
+    })
+  })
+
+  describe('Circuit breaker functionality', () => {
+    it('should switch to fallback provider after failure and log warnings', async () => {
+      const registryResult = {
+        nodePacks: [{ id: 'registry-1', name: 'Registry Pack' }],
+        querySuggestions: []
+      }
+
+      // Create mock that fails
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn().mockRejectedValue(new Error('Algolia failed')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn().mockResolvedValue(registryResult),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // First call should try Algolia, fail, and use Registry
+      const result = await gateway.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(mockAlgoliaProvider.searchPacks).toHaveBeenCalledTimes(1)
+      expect(mockRegistryProvider.searchPacks).toHaveBeenCalledTimes(1)
+      expect(result.nodePacks[0].name).toBe('Registry Pack')
+
+      // Circuit breaker behavior is internal implementation detail
+      // We only test the observable behavior (fallback works)
+    })
+
+    it('should have circuit breaker timeout mechanism', () => {
+      // This test verifies that the constants exist for circuit breaker behavior
+      // The actual circuit breaker logic is tested in integration with real provider behavior
+      expect(typeof useRegistrySearchGateway).toBe('function')
+
+      // We can test that the gateway logs circuit breaker behavior
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn().mockRejectedValue(new Error('Persistent failure')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi
+          .fn()
+          .mockResolvedValue({ nodePacks: [], querySuggestions: [] }),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+      expect(gateway).toBeDefined()
+    })
+  })
+
+  describe('Cache management', () => {
+    it('should clear cache for all providers', () => {
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+      gateway.clearSearchCache()
+
+      expect(mockAlgoliaProvider.clearSearchCache).toHaveBeenCalled()
+      expect(mockRegistryProvider.clearSearchCache).toHaveBeenCalled()
+    })
+
+    it('should handle cache clear failures gracefully', () => {
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn().mockImplementation(() => {
+          throw new Error('Cache clear failed')
+        }),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // Should not throw when clearing cache even if one provider fails
+      expect(() => gateway.clearSearchCache()).not.toThrow()
+
+      // Should still attempt to clear cache for all providers
+      expect(mockAlgoliaProvider.clearSearchCache).toHaveBeenCalled()
+      expect(mockRegistryProvider.clearSearchCache).toHaveBeenCalled()
+    })
+  })
+
+  describe('Sort functionality', () => {
+    it('should use sort fields from active provider', () => {
+      const algoliaFields = [
+        { id: 'downloads', label: 'Downloads', direction: 'desc' }
+      ]
+
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue(algoliaFields),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+      const sortFields = gateway.getSortableFields()
+
+      expect(sortFields).toEqual(algoliaFields)
+    })
+
+    it('should switch sort fields when provider changes', async () => {
+      const algoliaFields = [
+        { id: 'downloads', label: 'Downloads', direction: 'desc' }
+      ]
+      const registryFields = [{ id: 'name', label: 'Name', direction: 'asc' }]
+
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn().mockRejectedValue(new Error('Algolia failed')),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue(algoliaFields),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi
+          .fn()
+          .mockResolvedValue({ nodePacks: [], querySuggestions: [] }),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue(registryFields),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // Initially should use Algolia's sort fields
+      expect(gateway.getSortableFields()).toEqual(algoliaFields)
+
+      // Force a search to trigger provider switch
+      await gateway.searchPacks('test', { pageSize: 10, pageNumber: 0 })
+
+      // Now should use Registry's sort fields
+      expect(gateway.getSortableFields()).toEqual(registryFields)
+    })
+
+    it('should delegate getSortValue to active provider', () => {
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn().mockReturnValue(100),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn(),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+      const pack = { id: '1', name: 'Test Pack' }
+
+      const value = gateway.getSortValue(pack, 'downloads')
+
+      expect(mockAlgoliaProvider.getSortValue).toHaveBeenCalledWith(
+        pack,
+        'downloads'
+      )
+      expect(value).toBe(100)
+    })
+  })
+
+  describe('Provider recovery', () => {
+    it('should use fallback provider when primary fails', async () => {
+      const algoliaError = new Error('Algolia service unavailable')
+      const registryResult = {
+        nodePacks: [{ id: 'registry-1', name: 'Registry Pack' }],
+        querySuggestions: []
+      }
+
+      const mockAlgoliaProvider = {
+        searchPacks: vi.fn().mockRejectedValue(algoliaError),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      const mockRegistryProvider = {
+        searchPacks: vi.fn().mockResolvedValue(registryResult),
+        clearSearchCache: vi.fn(),
+        getSortValue: vi.fn(),
+        getSortableFields: vi.fn().mockReturnValue([]),
+        getFilterableFields: vi.fn().mockReturnValue([])
+      }
+
+      vi.mocked(useAlgoliaSearchProvider).mockReturnValue(mockAlgoliaProvider)
+      vi.mocked(useComfyRegistrySearchProvider).mockReturnValue(
+        mockRegistryProvider
+      )
+
+      const gateway = useRegistrySearchGateway()
+
+      // Should fallback to Registry when Algolia fails
+      const result = await gateway.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(result.nodePacks[0].name).toBe('Registry Pack')
+      expect(mockAlgoliaProvider.searchPacks).toHaveBeenCalledTimes(1)
+      expect(mockRegistryProvider.searchPacks).toHaveBeenCalledTimes(1)
+
+      // The gateway successfully handled the failure and returned results
+    })
+  })
+})

tests-ui/tests/services/registrySearchProvider.test.ts

@@ -0,0 +1,190 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useComfyRegistrySearchProvider } from '@/services/providers/registrySearchProvider'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+
+// Mock the store
+vi.mock('@/stores/comfyRegistryStore', () => ({
+  useComfyRegistryStore: vi.fn()
+}))
+
+describe('useComfyRegistrySearchProvider', () => {
+  const mockSearchCall = vi.fn()
+  const mockSearchClear = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    // Setup store mock
+    vi.mocked(useComfyRegistryStore).mockReturnValue({
+      search: {
+        call: mockSearchCall,
+        clear: mockSearchClear
+      }
+    } as any)
+  })
+
+  describe('searchPacks', () => {
+    it('should search for packs by name', async () => {
+      const mockResults = {
+        nodes: [
+          { id: '1', name: 'Test Pack 1' },
+          { id: '2', name: 'Test Pack 2' }
+        ]
+      }
+      mockSearchCall.mockResolvedValue(mockResults)
+
+      const provider = useComfyRegistrySearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0,
+        restrictSearchableAttributes: ['name', 'description']
+      })
+
+      expect(mockSearchCall).toHaveBeenCalledWith({
+        search: 'test',
+        comfy_node_search: undefined,
+        limit: 10,
+        page: 1
+      })
+      expect(result.nodePacks).toEqual(mockResults.nodes)
+      expect(result.querySuggestions).toEqual([])
+    })
+
+    it('should search for packs by node names', async () => {
+      const mockResults = {
+        nodes: [{ id: '1', name: 'Pack with LoadImage node' }]
+      }
+      mockSearchCall.mockResolvedValue(mockResults)
+
+      const provider = useComfyRegistrySearchProvider()
+      const result = await provider.searchPacks('LoadImage', {
+        pageSize: 20,
+        pageNumber: 1,
+        restrictSearchableAttributes: ['comfy_nodes']
+      })
+
+      expect(mockSearchCall).toHaveBeenCalledWith({
+        search: undefined,
+        comfy_node_search: 'LoadImage',
+        limit: 20,
+        page: 2
+      })
+      expect(result.nodePacks).toEqual(mockResults.nodes)
+    })
+
+    it('should handle empty results', async () => {
+      mockSearchCall.mockResolvedValue({ nodes: [] })
+
+      const provider = useComfyRegistrySearchProvider()
+      const result = await provider.searchPacks('nonexistent', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(result.nodePacks).toEqual([])
+      expect(result.querySuggestions).toEqual([])
+    })
+
+    it('should handle null results', async () => {
+      mockSearchCall.mockResolvedValue(null)
+
+      const provider = useComfyRegistrySearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(result.nodePacks).toEqual([])
+      expect(result.querySuggestions).toEqual([])
+    })
+
+    it('should handle results without nodes property', async () => {
+      mockSearchCall.mockResolvedValue({})
+
+      const provider = useComfyRegistrySearchProvider()
+      const result = await provider.searchPacks('test', {
+        pageSize: 10,
+        pageNumber: 0
+      })
+
+      expect(result.nodePacks).toEqual([])
+      expect(result.querySuggestions).toEqual([])
+    })
+  })
+
+  describe('clearSearchCache', () => {
+    it('should delegate to store search.clear', () => {
+      const provider = useComfyRegistrySearchProvider()
+      provider.clearSearchCache()
+
+      expect(mockSearchClear).toHaveBeenCalled()
+    })
+  })
+
+  describe('getSortValue', () => {
+    const testPack = {
+      id: '1',
+      name: 'Test Pack',
+      downloads: 100,
+      publisher: { id: 'pub1', name: 'Publisher One' },
+      latest_version: {
+        version: '1.0.0',
+        createdAt: '2024-01-15T10:00:00Z'
+      }
+    }
+
+    it('should return download count for downloads field', () => {
+      const provider = useComfyRegistrySearchProvider()
+      expect(provider.getSortValue(testPack, 'total_install')).toBe(100)
+    })
+
+    it('should return pack name for name field', () => {
+      const provider = useComfyRegistrySearchProvider()
+      expect(provider.getSortValue(testPack, 'name')).toBe('Test Pack')
+    })
+
+    it('should return publisher name for publisher field', () => {
+      const provider = useComfyRegistrySearchProvider()
+      expect(provider.getSortValue(testPack, 'publisher_name')).toBe(
+        'Publisher One'
+      )
+    })
+
+    it('should return timestamp for updated field', () => {
+      const provider = useComfyRegistrySearchProvider()
+      const timestamp = new Date('2024-01-15T10:00:00Z').getTime()
+      expect(provider.getSortValue(testPack, 'last_updated')).toBe(timestamp)
+    })
+
+    it('should handle missing values gracefully', () => {
+      const incompletePack = { id: '1', name: 'Incomplete' }
+      const provider = useComfyRegistrySearchProvider()
+
+      expect(provider.getSortValue(incompletePack, 'total_install')).toBe(0)
+      expect(provider.getSortValue(incompletePack, 'publisher_name')).toBe('')
+      expect(provider.getSortValue(incompletePack, 'last_updated')).toBe(0)
+    })
+
+    it('should return 0 for unknown sort fields', () => {
+      const provider = useComfyRegistrySearchProvider()
+      expect(provider.getSortValue(testPack, 'unknown')).toBe(0)
+    })
+  })
+
+  describe('getSortableFields', () => {
+    it('should return supported sort fields', () => {
+      const provider = useComfyRegistrySearchProvider()
+      const fields = provider.getSortableFields()
+
+      expect(fields).toEqual([
+        { id: 'total_install', label: 'Downloads', direction: 'desc' },
+        { id: 'name', label: 'Name', direction: 'asc' },
+        { id: 'publisher_name', label: 'Publisher', direction: 'asc' },
+        { id: 'last_updated', label: 'Updated', direction: 'desc' }
+      ])
+    })
+  })
+})

vite.config.mts

@@ -3,10 +3,9 @@ import dotenv from 'dotenv'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
+import { type UserConfig, defineConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import type { UserConfigExport } from 'vitest/config'
 
 import {
   addElementVnodeExportPlugin,
@@ -154,4 +153,4 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['@comfyorg/litegraph', '@comfyorg/comfyui-electron-types']
   }
-}) as UserConfigExport
+}) satisfies UserConfig as UserConfig

vite.electron.config.mts

@@ -1,6 +1,5 @@
 import { Plugin, defineConfig } from 'vite'
 import { mergeConfig } from 'vite'
-import type { UserConfig } from 'vitest/config'
 
 import baseConfig from './vite.config.mts'
 
@@ -83,7 +82,7 @@ const mockElectronAPI: Plugin = {
 }
 
 export default mergeConfig(
-  baseConfig as unknown as UserConfig,
+  baseConfig,
   defineConfig({
     plugins: [mockElectronAPI]
   })