1.22.2 (#4170)

Co-authored-by: webfiltered <176114999+webfiltered@users.noreply.github.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.22.1",
+  "version": "1.22.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.22.1",
+      "version": "1.22.2",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.22.1",
+  "version": "1.22.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

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

@@ -232,7 +232,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 +430,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) {

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' }
     }"
@@ -113,11 +113,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 +140,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 +158,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

@@ -56,7 +56,7 @@ 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 { NodesIndexSuggestion } from '@/types/algoliaTypes'
 import {
   type SearchOption,
   SortableAlgoliaField

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

@@ -3,12 +3,12 @@ import type { Hit } from 'algoliasearch/dist/lite/browser'
 import { memoize, orderBy } from 'lodash'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-import {
+import { useAlgoliaSearchService } from '@/services/algoliaSearchService'
+import type {
   AlgoliaNodePack,
-  SearchAttribute,
-  useAlgoliaSearchService
-} from '@/services/algoliaSearchService'
-import type { NodesIndexSuggestion } from '@/services/algoliaSearchService'
+  NodesIndexSuggestion,
+  SearchAttribute
+} from '@/types/algoliaTypes'
 import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
 
 const SEARCH_DEBOUNCE_TIME = 320

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
 

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"
   },

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",

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

@@ -709,6 +709,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",

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

@@ -709,6 +709,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",

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

@@ -709,6 +709,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": "次に開いたワークフロー",

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

@@ -709,6 +709,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": "다음 열린 워크플로",

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

@@ -709,6 +709,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": "Следующий открытый рабочий процесс",

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

@@ -709,6 +709,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": "下一个打开的工作流",

src/services/algoliaSearchService.ts

@@ -1,68 +1,26 @@
 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 type {
+  AlgoliaNodePack,
+  NodesIndexSuggestion,
+  SearchAttribute,
+  SearchNodePacksParams,
+  SearchPacksResult
+} from '@/types/algoliaTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { paramsToCacheKey } from '@/utils/formatUtil'
 
+type RegistryNodePack = components['schemas']['Node']
+
 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',
@@ -81,26 +39,6 @@ const RETRIEVE_ATTRIBUTES: SearchAttribute[] = [
   '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.

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,74 @@
+import type {
+  BaseSearchParamsWithoutQuery,
+  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']
+export 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
+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
+}
+
+export type SearchNodePacksParams = BaseSearchParamsWithoutQuery & {
+  pageSize: number
+  pageNumber: number
+  restrictSearchableAttributes: SearchAttribute[]
+}

src/types/comfyManagerTypes.ts

@@ -1,10 +1,17 @@
 import type { InjectionKey, Ref } from 'vue'
 
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { AlgoliaNodePack } from '@/types/algoliaTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
-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>> =

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

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]
   })