[test] Add test to verify targetSelector property deletion

Add a specific test case to ensure the keybinding migration properly
deletes the deprecated 'targetSelector' property after migrating to
'targetElementId'. This test provides additional coverage to verify
the migration doesn't leave behind obsolete properties.

The test verifies:
- The old 'targetSelector' property is removed
- The new 'targetElementId' property is added with correct value
- Other properties remain unchanged

.github/workflows/test-ui.yaml

@@ -46,8 +46,8 @@ jobs:
         id: cache-key
         run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
 
-      - name: Cache setup
-        uses: actions/cache@v3
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
         with:
           path: |
             ComfyUI
@@ -62,9 +62,13 @@ jobs:
       matrix:
         browser: [chromium, chromium-2x, mobile-chrome]
     steps:
+      - name: Wait for cache propagation
+        run: sleep 10
+
       - name: Restore cached setup
-        uses: actions/cache@v3
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
         with:
+          fail-on-cache-miss: true
           path: |
             ComfyUI
             ComfyUI_frontend

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.22.2",
+  "version": "1.23.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.22.2",
+      "version": "1.23.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.2",
+  "version": "1.23.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

src/components/common/ContentDivider.vue

@@ -1,15 +1,12 @@
 <template>
-  <hr
+  <div
     :class="{
-      'm-0': true,
-      'border-t': orientation === 'horizontal',
-      'border-l': orientation === 'vertical',
-      'h-full': orientation === 'vertical',
-      'w-full': orientation === 'horizontal'
+      'content-divider': true,
+      'content-divider--horizontal': orientation === 'horizontal',
+      'content-divider--vertical': orientation === 'vertical'
     }"
     :style="{
-      borderColor: isLightTheme ? '#DCDAE1' : '#2C2C2C',
-      borderWidth: `${width}px !important`
+      backgroundColor: isLightTheme ? '#DCDAE1' : '#2C2C2C'
     }"
   />
 </template>
@@ -29,3 +26,25 @@ const isLightTheme = computed(
   () => colorPaletteStore.completedActivePalette.light_theme
 )
 </script>
+
+<style scoped>
+.content-divider {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.content-divider--horizontal {
+  width: 100%;
+  height: v-bind('width + "px"');
+}
+
+.content-divider--vertical {
+  height: 100%;
+  width: v-bind('width + "px"');
+}
+</style>

src/components/common/VirtualGrid.vue

@@ -92,12 +92,21 @@ whenever(
 const updateItemSize = () => {
   if (container.value) {
     const firstItem = container.value.querySelector('[data-virtual-grid-item]')
-    itemHeight.value = firstItem?.clientHeight || defaultItemHeight
-    itemWidth.value = firstItem?.clientWidth || defaultItemWidth
+
+    // Don't update item size if the first item is not rendered yet
+    if (!firstItem?.clientHeight || !firstItem?.clientWidth) return
+
+    if (itemHeight.value !== firstItem.clientHeight) {
+      itemHeight.value = firstItem.clientHeight
+    }
+    if (itemWidth.value !== firstItem.clientWidth) {
+      itemWidth.value = firstItem.clientWidth
+    }
   }
 }
 const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
+whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
   onResize.cancel() // Clear pending debounced calls
 })

src/components/dialog/GlobalDialog.vue

@@ -50,4 +50,17 @@ const dialogStore = useDialogStore()
   @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
   @apply pt-0;
 }
+
+.manager-dialog {
+  height: 80vh;
+  max-width: 1724px;
+  max-height: 1026px;
+}
+
+@media (min-width: 3000px) {
+  .manager-dialog {
+    max-width: 2200px;
+    max-height: 1320px;
+  }
+}
 </style>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -5,6 +5,7 @@
     title="Missing Node Types"
     message="When loading the graph, the following node types were not found"
   />
+  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
     :options="uniqueNodes"
     option-label="label"
@@ -31,6 +32,12 @@
     </template>
   </ListBox>
   <div v-if="isManagerInstalled" class="flex justify-end py-3">
+    <PackInstallButton
+      :disabled="isLoading || !!error || missingNodePacks.length === 0"
+      :node-packs="missingNodePacks"
+      variant="black"
+      :label="$t('manager.installAllMissingNodes')"
+    />
     <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
 </template>
@@ -41,6 +48,9 @@ import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useDialogService } from '@/services/dialogService'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import type { MissingNodeType } from '@/types/comfy'
@@ -52,6 +62,10 @@ const props = defineProps<{
 
 const aboutPanelStore = useAboutPanelStore()
 
+// Get missing node packs from workflow with loading and error states
+const { missingNodePacks, isLoading, error, missingCoreNodes } =
+  useMissingNodes()
+
 // Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
 // This allows us to conditionally show the Manager button only when the extension is available
 // TODO: Remove this check when Manager functionality is fully migrated into core

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -0,0 +1,95 @@
+<template>
+  <Message
+    v-if="hasMissingCoreNodes"
+    severity="info"
+    icon="pi pi-info-circle"
+    class="my-2 mx-2"
+    :pt="{
+      root: { class: 'flex-col' },
+      text: { class: 'flex-1' }
+    }"
+  >
+    <div class="flex flex-col gap-2">
+      <div>
+        {{
+          currentComfyUIVersion
+            ? $t('loadWorkflowWarning.outdatedVersion', {
+                version: currentComfyUIVersion
+              })
+            : $t('loadWorkflowWarning.outdatedVersionGeneric')
+        }}
+      </div>
+      <div
+        v-for="[version, nodes] in sortedMissingCoreNodes"
+        :key="version"
+        class="ml-4"
+      >
+        <div
+          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
+        >
+          {{
+            $t('loadWorkflowWarning.coreNodesFromVersion', {
+              version: version || 'unknown'
+            })
+          }}
+        </div>
+        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+          {{ getUniqueNodeNames(nodes).join(', ') }}
+        </div>
+      </div>
+    </div>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { whenever } from '@vueuse/core'
+import Message from 'primevue/message'
+import { computed, ref } from 'vue'
+
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { compareVersions } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  missingCoreNodes: Record<string, LGraphNode[]>
+}>()
+
+const systemStatsStore = useSystemStatsStore()
+
+const hasMissingCoreNodes = computed(() => {
+  return Object.keys(props.missingCoreNodes).length > 0
+})
+
+const currentComfyUIVersion = ref<string | null>(null)
+whenever(
+  hasMissingCoreNodes,
+  async () => {
+    if (!systemStatsStore.systemStats) {
+      await systemStatsStore.fetchSystemStats()
+    }
+    currentComfyUIVersion.value =
+      systemStatsStore.systemStats?.system?.comfyui_version ?? null
+  },
+  {
+    immediate: true
+  }
+)
+
+const sortedMissingCoreNodes = computed(() => {
+  return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
+    // Sort by version in descending order (newest first)
+    return compareVersions(b, a) // Reversed for descending order
+  })
+})
+
+const getUniqueNodeNames = (nodes: LGraphNode[]): string[] => {
+  return nodes
+    .reduce<string[]>((acc, node) => {
+      if (node.type && !acc.includes(node.type)) {
+        acc.push(node.type)
+      }
+      return acc
+    }, [])
+    .sort()
+}
+</script>

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

@@ -1,14 +1,16 @@
 <template>
   <div
-    class="flex flex-col mx-auto overflow-hidden h-[83vh] relative"
+    class="h-full flex flex-col mx-auto overflow-hidden"
     :aria-label="$t('manager.title')"
   >
+    <ContentDivider :width="0.3" />
     <Button
       v-if="isSmallScreen"
       :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
-      text
+      severity="secondary"
+      filled
       class="absolute top-1/2 -translate-y-1/2 z-10"
-      :class="isSideNavOpen ? 'left-[19rem]' : 'left-2'"
+      :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
       @click="toggleSideNav"
     />
     <div class="flex flex-1 relative overflow-hidden">
@@ -18,20 +20,19 @@
         :tabs="tabs"
       />
       <div
-        class="flex-1 overflow-auto pr-80"
+        class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
         :class="{
-          'transition-all duration-300': isSmallScreen,
-          'pl-80': isSideNavOpen || !isSmallScreen,
-          'pl-8': !isSideNavOpen && isSmallScreen
+          'transition-all duration-300': isSmallScreen
         }"
       >
-        <div class="px-6 pt-6 flex flex-col h-full">
+        <div class="px-6 flex flex-col h-full">
           <RegistrySearchBar
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
             v-model:sortField="sortField"
             :search-results="searchResults"
             :suggestions="suggestions"
+            :is-missing-tab="isMissingTab"
             :sort-options="sortOptions"
           />
           <div class="flex-1 overflow-auto">
@@ -58,7 +59,7 @@
               <VirtualGrid
                 id="results-grid"
                 :items="resultsWithKeys"
-                :buffer-rows="3"
+                :buffer-rows="4"
                 :grid-style="GRID_STYLE"
                 @approach-end="onApproachEnd"
               >
@@ -76,9 +77,9 @@
           </div>
         </div>
       </div>
-      <div class="w-80 border-l-0 absolute right-0 top-0 bottom-0 flex z-20">
+      <div class="w-[clamp(250px,33%,306px)] border-l-0 flex z-20">
         <ContentDivider orientation="vertical" :width="0.2" />
-        <div class="flex-1 flex flex-col isolate">
+        <div class="w-full flex flex-col isolate">
           <InfoPanel
             v-if="!hasMultipleSelections && selectedNodePack"
             :node-pack="selectedNodePack"
@@ -218,10 +219,6 @@ const {
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
-whenever(selectedTab, () => {
-  pageNumber.value = 0
-})
-
 const isUpdateAvailableTab = computed(
   () => selectedTab.value?.id === ManagerTab.UpdateAvailable
 )
@@ -467,9 +464,10 @@ let gridContainer: HTMLElement | null = null
 onMounted(() => {
   gridContainer = document.getElementById('results-grid')
 })
-watch(searchQuery, () => {
+watch([searchQuery, selectedTab], () => {
   gridContainer ??= document.getElementById('results-grid')
   if (gridContainer) {
+    pageNumber.value = 0
     gridContainer.scrollTop = 0
   }
 })

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

@@ -1,14 +1,9 @@
 <template>
   <div class="w-full">
-    <div class="px-6 py-4">
+    <div class="flex items-center">
       <h2 class="text-lg font-normal text-left">
         {{ $t('manager.discoverCommunityContent') }}
       </h2>
     </div>
-    <ContentDivider :width="0.3" />
   </div>
 </template>
-
-<script setup lang="ts">
-import ContentDivider from '@/components/common/ContentDivider.vue'
-</script>

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

@@ -1,8 +1,8 @@
 <template>
   <aside
-    class="absolute translate-x-0 top-0 left-0 h-full w-80 shadow-md z-5 transition-transform duration-300 ease-in-out flex"
+    class="flex translate-x-0 max-w-[250px] w-3/12 z-5 transition-transform duration-300 ease-in-out"
   >
-    <ScrollPanel class="w-80 mt-7">
+    <ScrollPanel class="flex-1">
       <Listbox
         v-model="selectedTab"
         :options="tabs"
@@ -10,20 +10,20 @@
         list-style="max-height:unset"
         class="w-full border-0 bg-transparent shadow-none"
         :pt="{
-          list: { class: 'p-5' },
-          option: { class: 'px-8 py-3 text-lg rounded-xl' },
+          list: { class: 'p-3 gap-2' },
+          option: { class: 'px-4 py-2 text-lg rounded-lg' },
           optionGroup: { class: 'p-0 text-left text-inherit' }
         }"
       >
         <template #option="slotProps">
           <div class="text-left flex items-center">
-            <i :class="['pi', slotProps.option.icon, 'mr-3']" />
-            <span class="text-lg">{{ slotProps.option.label }}</span>
+            <i :class="['pi', slotProps.option.icon, 'text-sm mr-2']" />
+            <span class="text-sm">{{ slotProps.option.label }}</span>
           </div>
         </template>
       </Listbox>
     </ScrollPanel>
-    <ContentDivider orientation="vertical" />
+    <ContentDivider orientation="vertical" :width="0.3" />
   </aside>
 </template>
 

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

@@ -1,6 +1,5 @@
 import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -33,6 +32,12 @@ vi.mock('@/stores/comfyManagerStore', () => ({
   }))
 }))
 
+vi.mock('@/composables/nodePack/usePackUpdateStatus', () => ({
+  usePackUpdateStatus: vi.fn(() => ({
+    isUpdateAvailable: false
+  }))
+}))
+
 const mockToggle = vi.fn()
 const mockHide = vi.fn()
 const PopoverStub = {
@@ -78,9 +83,9 @@ describe('PackVersionBadge', () => {
   it('renders with installed version from store', () => {
     const wrapper = mountComponent()
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe('1.5.0') // From mockInstalledPacks
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe('1.5.0') // From mockInstalledPacks
   })
 
   it('falls back to latest_version when not installed', () => {
@@ -97,9 +102,9 @@ describe('PackVersionBadge', () => {
       props: { nodePack: uninstalledPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe('3.0.0') // From latest_version
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe('3.0.0') // From latest_version
   })
 
   it('falls back to NIGHTLY when no latest_version and not installed', () => {
@@ -113,9 +118,9 @@ describe('PackVersionBadge', () => {
       props: { nodePack: noVersionPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe(SelectedVersion.NIGHTLY)
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
   })
 
   it('falls back to NIGHTLY when nodePack.id is missing', () => {
@@ -127,16 +132,16 @@ describe('PackVersionBadge', () => {
       props: { nodePack: invalidPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe(SelectedVersion.NIGHTLY)
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
   })
 
   it('toggles the popover when button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Click the button
-    await wrapper.findComponent(Button).trigger('click')
+    // Click the badge
+    await wrapper.find('[role="button"]').trigger('click')
 
     // Verify that the toggle method was called
     expect(mockToggle).toHaveBeenCalled()

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

@@ -1,18 +1,23 @@
 <template>
-  <div class="relative">
-    <Button
-      :label="installedVersion"
-      severity="secondary"
-      icon="pi pi-chevron-right"
-      icon-pos="right"
-      class="rounded-xl text-xs tracking-tighter p-0"
-      :pt="{
-        label: { class: 'pl-2 pr-0 py-0.5' },
-        icon: { class: 'text-xs pl-0 pr-2 py-0.5' }
-      }"
+  <div>
+    <div
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer px-2 py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700': fill }"
       aria-haspopup="true"
+      role="button"
+      tabindex="0"
       @click="toggleVersionSelector"
-    />
+      @keydown.enter="toggleVersionSelector"
+      @keydown.space="toggleVersionSelector"
+    >
+      <i
+        v-if="isUpdateAvailable"
+        class="pi pi-arrow-circle-up text-blue-600"
+        style="font-size: 8px"
+      />
+      <span>{{ installedVersion }}</span>
+      <i class="pi pi-chevron-right" style="font-size: 8px" />
+    </div>
 
     <Popover
       ref="popoverRef"
@@ -31,11 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref, watch } from 'vue'
 
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
@@ -43,11 +48,17 @@ import { isSemVer } from '@/utils/formatUtil'
 
 const TRUNCATED_HASH_LENGTH = 7
 
-const { nodePack, isSelected } = defineProps<{
+const {
+  nodePack,
+  isSelected,
+  fill = true
+} = defineProps<{
   nodePack: components['schemas']['Node']
   isSelected: boolean
+  fill?: boolean
 }>()
 
+const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 const popoverRef = ref()
 
 const managerStore = useComfyManagerStore()

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,16 +1,18 @@
 <template>
   <Button
     outlined
-    class="m-0 p-0 rounded-lg border-neutral-700"
-    :class="{
-      'w-full': fullWidth,
-      'w-min-content': !fullWidth
-    }"
+    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
+    :class="[
+      variant === 'black'
+        ? 'bg-neutral-900 text-white border-neutral-900'
+        : 'border-neutral-700',
+      fullWidth ? 'w-full' : 'w-min-content'
+    ]"
     :disabled="loading"
     v-bind="$attrs"
     @click="onClick"
   >
-    <span class="py-2.5 px-3">
+    <span class="py-2 px-3 whitespace-nowrap">
       <template v-if="loading">
         {{ loadingMessage ?? $t('g.loading') }}
       </template>
@@ -27,12 +29,14 @@ import Button from 'primevue/button'
 const {
   label,
   loadingMessage,
-  fullWidth = false
+  fullWidth = false,
+  variant = 'default'
 } = defineProps<{
   label: string
   loading?: boolean
   loadingMessage?: string
   fullWidth?: boolean
+  variant?: 'default' | 'black'
 }>()
 
 const emit = defineEmits<{

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -2,9 +2,11 @@
   <PackActionButton
     v-bind="$attrs"
     :label="
-      nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install')
+      label ??
+      (nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install'))
     "
-    severity="secondary"
+    :severity="variant === 'black' ? undefined : 'secondary'"
+    :variant="variant"
     :loading="isInstalling"
     :loading-message="$t('g.installing')"
     @action="installAllPacks"
@@ -27,8 +29,10 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks } = defineProps<{
+const { nodePacks, variant, label } = defineProps<{
   nodePacks: NodePack[]
+  variant?: 'default' | 'black'
+  label?: string
 }>()
 
 const isInstalling = inject(IsInstallingKey, ref(false))

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

@@ -1,6 +1,6 @@
 <template>
   <template v-if="nodePack">
-    <div class="flex flex-col h-full z-40 w-80 overflow-hidden relative">
+    <div class="flex flex-col h-full z-40 overflow-hidden relative">
       <div class="top-0 z-10 px-6 pt-6 w-full">
         <InfoPanelHeader :node-packs="[nodePack]" />
       </div>
@@ -42,7 +42,7 @@
     </div>
   </template>
   <template v-else>
-    <div class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
+    <div class="pt-4 px-8 flex-1 overflow-hidden text-sm">
       {{ $t('manager.infoPanelEmpty') }}
     </div>
   </template>

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

@@ -51,7 +51,11 @@ const getPackNodes = async (pack: components['schemas']['Node']) => {
   if (!pack.latest_version?.version) return []
   const nodeDefs = await getNodeDefs.call({
     packId: pack.id,
-    version: pack.latest_version?.version
+    version: pack.latest_version?.version,
+    // Fetch all nodes.
+    // TODO: Render all nodes previews and handle pagination.
+    // For determining length, use the `totalNumberOfPages` field of response
+    limit: 8192
   })
   return nodeDefs?.comfy_nodes ?? []
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ width: cssWidth, height: cssHeight }" class="overflow-hidden">
+  <div class="w-full aspect-[7/3] overflow-hidden">
     <!-- default banner show -->
     <div v-if="showDefaultBanner" class="w-full h-full">
       <img
@@ -41,24 +41,12 @@ import { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
-const {
-  nodePack,
-  width = '100%',
-  height = '12rem'
-} = defineProps<{
+const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
 }>()
 
 const isImageError = ref(false)
 
 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
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
 </script>

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

@@ -9,7 +9,12 @@
       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' }
+      footer: {
+        class: 'p-0 m-0 flex flex-col gap-0',
+        style: {
+          borderTop: isLightTheme ? '1px solid #f4f4f4' : '1px solid #2C2C2C'
+        }
+      }
     }"
   >
     <template #title>
@@ -29,75 +34,50 @@
         </div>
       </template>
       <template v-else>
-        <div
-          class="self-stretch inline-flex flex-col justify-start items-start"
-        >
-          <div
-            class="px-4 py-3 inline-flex justify-start items-start cursor-pointer w-full"
-          >
-            <div
-              class="inline-flex flex-col justify-start items-start overflow-hidden gap-y-3 w-full"
+        <div class="pt-4 px-4 pb-3 w-full h-full">
+          <div class="flex flex-col gap-y-1 w-full h-full">
+            <span
+              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
             >
-              <span
-                class="text-base font-bold truncate overflow-hidden text-ellipsis"
-              >
-                {{ nodePack.name }}
-              </span>
-              <p
-                v-if="nodePack.description"
-                class="flex-1 justify-start text-muted text-sm font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-5"
-              >
-                {{ nodePack.description }}
-              </p>
-              <div class="flex flex-col gap-y-2">
+              {{ nodePack.name }}
+            </span>
+            <p
+              v-if="nodePack.description"
+              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+            >
+              {{ nodePack.description }}
+            </p>
+            <div class="flex flex-col gap-y-2">
+              <div class="flex-1 flex items-center gap-2">
+                <div v-if="nodesCount" class="p-2 pl-0 text-xs">
+                  {{ nodesCount }} {{ $t('g.nodes') }}
+                </div>
+                <PackVersionBadge
+                  :node-pack="nodePack"
+                  :is-selected="isSelected"
+                  :fill="false"
+                />
                 <div
-                  class="self-stretch inline-flex justify-start items-center gap-1"
+                  v-if="formattedLatestVersionDate"
+                  class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
                 >
-                  <div
-                    v-if="nodesCount"
-                    class="pr-2 py-1 flex justify-center text-sm items-center gap-1"
-                  >
-                    <div
-                      class="text-center justify-center font-medium leading-3"
-                    >
-                      {{ nodesCount }} {{ $t('g.nodes') }}
-                    </div>
-                  </div>
-                  <div class="px-2 py-1 flex justify-center items-center gap-1">
-                    <div
-                      v-if="isUpdateAvailable"
-                      class="w-4 h-4 relative overflow-hidden"
-                    >
-                      <i class="pi pi-arrow-circle-up text-blue-600" />
-                    </div>
-                    <PackVersionBadge
-                      :node-pack="nodePack"
-                      :is-selected="isSelected"
-                    />
-                  </div>
-                  <div
-                    v-if="formattedLatestVersionDate"
-                    class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
-                  >
-                    {{ formattedLatestVersionDate }}
-                  </div>
-                </div>
-                <div class="flex">
-                  <span
-                    v-if="publisherName"
-                    class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
-                  >
-                    {{ publisherName }}
-                  </span>
+                  {{ formattedLatestVersionDate }}
                 </div>
               </div>
+              <div class="flex">
+                <span
+                  v-if="publisherName"
+                  class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+                >
+                  {{ publisherName }}
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </template>
     </template>
     <template #footer>
-      <ContentDivider :width="0.1" />
       <PackCardFooter :node-pack="nodePack" />
     </template>
   </Card>
@@ -110,12 +90,11 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import {
   IsInstallingKey,
   type MergedNodePack,
@@ -130,11 +109,15 @@ const { nodePack, isSelected = false } = defineProps<{
 
 const { d } = useI18n()
 
+const colorPaletteStore = useColorPaletteStore()
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
 const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
-const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
@@ -167,14 +150,14 @@ const formattedLatestVersionDate = computed(() => {
   position: relative;
 }
 
-.selected-card::before {
+.selected-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  border: 3px solid var(--p-primary-color);
+  border: 4px solid var(--p-primary-color);
   border-radius: 0.5rem;
   pointer-events: none;
   z-index: 100;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
   >
     <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
       <i class="pi pi-download text-muted"></i>

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

@@ -1,28 +1,37 @@
 <template>
   <div class="relative w-full p-6">
-    <div class="flex items-center w-full">
-      <AutoComplete
-        v-model.lazy="searchQuery"
-        :suggestions="suggestions || []"
-        :placeholder="$t('manager.searchPlaceholder')"
-        :complete-on-focus="false"
-        :delay="8"
-        option-label="query"
-        class="w-full"
-        :pt="{
-          pcInputText: {
-            root: {
-              autofocus: true,
-              class: 'w-5/12 rounded-2xl'
+    <div class="h-12 flex items-center gap-1 justify-between">
+      <div class="flex items-center w-5/12">
+        <AutoComplete
+          v-model.lazy="searchQuery"
+          :suggestions="suggestions || []"
+          :placeholder="$t('manager.searchPlaceholder')"
+          :complete-on-focus="false"
+          :delay="8"
+          option-label="query"
+          class="w-full"
+          :pt="{
+            pcInputText: {
+              root: {
+                autofocus: true,
+                class: 'w-full rounded-2xl'
+              }
+            },
+            loader: {
+              style: 'display: none'
             }
-          },
-          loader: {
-            style: 'display: none'
-          }
-        }"
-        :show-empty-message="false"
-        @complete="stubTrue"
-        @option-select="onOptionSelect"
+          }"
+          :show-empty-message="false"
+          @complete="stubTrue"
+          @option-select="onOptionSelect"
+        />
+      </div>
+      <PackInstallButton
+        v-if="isMissingTab && missingNodePacks.length > 0"
+        variant="black"
+        :disabled="isLoading || !!error"
+        :node-packs="missingNodePacks"
+        :label="$t('manager.installAllMissingNodes')"
       />
     </div>
     <div class="flex mt-3 text-sm">
@@ -55,7 +64,9 @@ import AutoComplete, {
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
+import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import {
   type SearchOption,
   SortableAlgoliaField
@@ -71,6 +82,7 @@ const { searchResults, sortOptions } = defineProps<{
   searchResults?: components['schemas']['Node'][]
   suggestions?: QuerySuggestion[]
   sortOptions?: SortableField[]
+  isMissingTab?: boolean
 }>()
 
 const searchQuery = defineModel<string>('searchQuery')
@@ -81,6 +93,9 @@ const sortField = defineModel<string>('sortField', {
 
 const { t } = useI18n()
 
+// Get missing node packs from workflow with loading and error states
+const { missingNodePacks, isLoading, error } = useMissingNodes()
+
 const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length
 )

src/components/graph/GraphCanvas.vue

@@ -297,6 +297,7 @@ onMounted(async () => {
       throw error
     }
   }
+
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
   })

src/composables/node/useNodeImageUpload.ts

@@ -3,15 +3,29 @@ import type { LGraphNode } from '@comfyorg/litegraph'
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
+import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useToastStore } from '@/stores/toastStore'
 
 const PASTED_IMAGE_EXPIRY_MS = 2000
 
-const uploadFile = async (file: File, isPasted: boolean) => {
+interface ImageUploadFormFields {
+  /**
+   * The folder to upload the file to.
+   * @example 'input', 'output', 'temp'
+   */
+  type: ResultItemType
+}
+
+const uploadFile = async (
+  file: File,
+  isPasted: boolean,
+  formFields: Partial<ImageUploadFormFields> = {}
+) => {
   const body = new FormData()
   body.append('image', file)
   if (isPasted) body.append('subfolder', 'pasted')
+  if (formFields.type) body.append('type', formFields.type)
 
   const resp = await api.fetchApi('/upload/image', {
     method: 'POST',
@@ -36,6 +50,11 @@ interface ImageUploadOptions {
    * @example 'image/png,image/jpeg,image/webp,video/webm,video/mp4'
    */
   accept?: string
+  /**
+   * The folder to upload the file to.
+   * @example 'input', 'output', 'temp'
+   */
+  folder?: ResultItemType
 }
 
 /**
@@ -53,7 +72,9 @@ export const useNodeImageUpload = (
 
   const handleUpload = async (file: File) => {
     try {
-      const path = await uploadFile(file, isPastedFile(file))
+      const path = await uploadFile(file, isPastedFile(file), {
+        type: options.folder
+      })
       if (!path) return
       return path
     } catch (error) {

src/composables/nodePack/useInstalledPacks.ts

@@ -1,3 +1,4 @@
+import { whenever } from '@vueuse/core'
 import { computed, onUnmounted } from 'vue'
 
 import { useNodePacks } from '@/composables/nodePack/useNodePacks'
@@ -18,6 +19,16 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
   const filterInstalledPack = (packs: components['schemas']['Node'][]) =>
     packs.filter((pack) => comfyManagerStore.isPackInstalled(pack.id))
 
+  const startFetchInstalled = async () => {
+    await comfyManagerStore.refreshInstalledList()
+    await startFetch()
+  }
+
+  // When installedPackIds changes, we need to update the nodePacks
+  whenever(installedPackIds, async () => {
+    await startFetch()
+  })
+
   onUnmounted(() => {
     cleanup()
   })
@@ -27,7 +38,7 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
     isLoading,
     isReady,
     installedPacks: nodePacks,
-    startFetchInstalled: startFetch,
+    startFetchInstalled,
     filterInstalledPack
   }
 }

src/composables/nodePack/useMissingNodes.ts

@@ -0,0 +1,76 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+import { NodeProperty } from '@comfyorg/litegraph/dist/LGraphNode'
+import { groupBy } from 'lodash'
+import { computed, onMounted } from 'vue'
+
+import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { app } from '@/scripts/app'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+/**
+ * Composable to find missing NodePacks from workflow
+ * Uses the same filtering approach as ManagerDialogContent.vue
+ * Automatically fetches workflow pack data when initialized
+ */
+export const useMissingNodes = () => {
+  const nodeDefStore = useNodeDefStore()
+  const comfyManagerStore = useComfyManagerStore()
+  const { workflowPacks, isLoading, error, startFetchWorkflowPacks } =
+    useWorkflowPacks()
+
+  // Same filtering logic as ManagerDialogContent.vue
+  const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
+    packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
+
+  // Filter only uninstalled packs from workflow packs
+  const missingNodePacks = computed(() => {
+    if (!workflowPacks.value.length) return []
+    return filterMissingPacks(workflowPacks.value)
+  })
+
+  /**
+   * Check if a pack is the ComfyUI builtin node pack (nodes that come pre-installed)
+   * @param packId - The id of the pack to check
+   * @returns True if the pack is the comfy-core pack, false otherwise
+   */
+  const isCorePack = (packId: NodeProperty) => {
+    return packId === 'comfy-core'
+  }
+
+  /**
+   * Check if a node is a missing core node
+   * A missing core node is a node that is in the workflow and originates from
+   * the comfy-core pack (pre-installed) but not registered in the node def
+   * store (the node def was not found on the server)
+   * @param node - The node to check
+   * @returns True if the node is a missing core node, false otherwise
+   */
+  const isMissingCoreNode = (node: LGraphNode) => {
+    const packId = node.properties?.cnr_id
+    if (packId === undefined || !isCorePack(packId)) return false
+    const nodeName = node.type
+    const isRegisteredNodeDef = !!nodeDefStore.nodeDefsByName[nodeName]
+    return !isRegisteredNodeDef
+  }
+
+  const missingCoreNodes = computed<Record<string, LGraphNode[]>>(() => {
+    const missingNodes = app.graph.nodes.filter(isMissingCoreNode)
+    return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
+  })
+
+  // Automatically fetch workflow pack data when composable is used
+  onMounted(async () => {
+    if (!workflowPacks.value.length && !isLoading.value) {
+      await startFetchWorkflowPacks()
+    }
+  })
+
+  return {
+    missingNodePacks,
+    missingCoreNodes,
+    isLoading,
+    error
+  }
+}

src/composables/widgets/useImageUploadWidget.ts

@@ -5,7 +5,7 @@ import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
 import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload'
 import { useValueTransform } from '@/composables/useValueTransform'
 import { t } from '@/i18n'
-import type { ResultItem } from '@/schemas/apiSchema'
+import type { ResultItem, ResultItemType } from '@/schemas/apiSchema'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import type { ComfyWidgetConstructor } from '@/scripts/widgets'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
@@ -42,6 +42,7 @@ export const useImageUploadWidget = () => {
 
     const inputOptions = inputData[1]
     const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions
+    const folder: ResultItemType | undefined = image_folder
     const nodeOutputStore = useNodeOutputStore()
 
     const isAnimated = !!inputOptions.animated_image_upload
@@ -75,6 +76,7 @@ export const useImageUploadWidget = () => {
       allow_batch,
       fileFilter,
       accept,
+      folder,
       onUploadComplete: (output) => {
         output.forEach((path) => addToComboValues(fileComboWidget, path))
         // @ts-expect-error litegraph combo value type does not support arrays yet

src/composables/widgets/useRemoteWidget.ts

@@ -2,7 +2,9 @@ import { LGraphNode } from '@comfyorg/litegraph'
 import { IWidget } from '@comfyorg/litegraph'
 import axios from 'axios'
 
+import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+import { api } from '@/scripts/api'
 
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
@@ -220,6 +222,46 @@ export function useRemoteWidget<
     node.addWidget('button', 'refresh', 'refresh', widget.refresh)
   }
 
+  /**
+   * Add auto-refresh toggle widget and execution success listener
+   */
+  function addAutoRefreshToggle() {
+    let autoRefreshEnabled = false
+
+    // Handler for execution success
+    const handleExecutionSuccess = () => {
+      if (autoRefreshEnabled && widget.refresh) {
+        widget.refresh()
+      }
+    }
+
+    // Add toggle widget
+    const autoRefreshWidget = node.addWidget(
+      'toggle',
+      'Auto-refresh after generation',
+      false,
+      (value: boolean) => {
+        autoRefreshEnabled = value
+      },
+      {
+        serialize: false
+      }
+    )
+
+    // Register event listener
+    api.addEventListener('execution_success', handleExecutionSuccess)
+
+    // Cleanup on node removal
+    node.onRemoved = useChainCallback(node.onRemoved, function () {
+      api.removeEventListener('execution_success', handleExecutionSuccess)
+    })
+
+    return autoRefreshWidget
+  }
+
+  // Always add auto-refresh toggle for remote widgets
+  addAutoRefreshToggle()
+
   return {
     getCachedValue,
     getValue,

src/constants/coreSettings.ts

@@ -430,14 +430,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 'Top',
     name: 'Use new menu',
     type: 'combo',
-    options: ['Disabled', 'Top', 'Bottom'],
-    migrateDeprecatedValue: (value: string) => {
-      // Floating is now supported by dragging the docked actionbar off.
-      if (value === 'Floating') {
-        return 'Top'
-      }
-      return value
-    }
+    options: ['Disabled', 'Top', 'Bottom']
   },
   {
     id: 'Comfy.Workflow.WorkflowTabsPosition',
@@ -470,15 +463,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'hidden',
     defaultValue: [] as Keybinding[],
     versionAdded: '1.3.7',
-    versionModified: '1.7.3',
-    migrateDeprecatedValue: (value: any[]) => {
-      return value.map((keybinding) => {
-        if (keybinding['targetSelector'] === '#graph-canvas') {
-          keybinding['targetElementId'] = 'graph-canvas'
-        }
-        return keybinding
-      })
-    }
+    versionModified: '1.7.3'
   },
   {
     id: 'Comfy.Keybinding.NewBindings',
@@ -716,11 +701,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'The active color palette id',
     type: 'hidden',
     defaultValue: 'dark',
-    versionModified: '1.6.7',
-    migrateDeprecatedValue(value: string) {
-      // Legacy custom palettes were prefixed with 'custom_'
-      return value.startsWith('custom_') ? value.replace('custom_', '') : value
-    }
+    versionModified: '1.6.7'
   },
   {
     id: 'Comfy.CustomColorPalettes',

src/locales/en/main.json

@@ -161,6 +161,7 @@
     "lastUpdated": "Last Updated",
     "noDescription": "No description available",
     "installSelected": "Install Selected",
+    "installAllMissingNodes": "Install All Missing Nodes",
     "packsSelected": "Packs Selected",
     "status": {
       "active": "Active",
@@ -1194,6 +1195,11 @@
     "missingModels": "Missing Models",
     "missingModelsMessage": "When loading the graph, the following models were not found"
   },
+  "loadWorkflowWarning": {
+    "outdatedVersion": "Some nodes require a newer version of ComfyUI (current: {version}). Please update to use all nodes.",
+    "outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
+    "coreNodesFromVersion": "Requires ComfyUI {version}:"
+  },
   "errorDialog": {
     "defaultTitle": "An error occurred",
     "loadWorkflowTitle": "Loading aborted due to error reloading workflow data",

src/locales/es/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Subir imagen de fondo",
     "uploadTexture": "Subir textura"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Requiere ComfyUI {version}:",
+    "outdatedVersion": "Algunos nodos requieren una versión más reciente de ComfyUI (actual: {version}). Por favor, actualiza para usar todos los nodos.",
+    "outdatedVersionGeneric": "Algunos nodos requieren una versión más reciente de ComfyUI. Por favor, actualiza para usar todos los nodos."
+  },
   "maintenance": {
     "None": "Ninguno",
     "OK": "OK",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "En Flujo de Trabajo",
     "infoPanelEmpty": "Haz clic en un elemento para ver la información",
+    "installAllMissingNodes": "Instalar todos los nodos faltantes",
     "installSelected": "Instalar Seleccionado",
     "installationQueue": "Cola de Instalación",
     "lastUpdated": "Última Actualización",

src/locales/fr/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Télécharger l'image de fond",
     "uploadTexture": "Télécharger Texture"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Nécessite ComfyUI {version} :",
+    "outdatedVersion": "Certains nœuds nécessitent une version plus récente de ComfyUI (actuelle : {version}). Veuillez mettre à jour pour utiliser tous les nœuds.",
+    "outdatedVersionGeneric": "Certains nœuds nécessitent une version plus récente de ComfyUI. Veuillez mettre à jour pour utiliser tous les nœuds."
+  },
   "maintenance": {
     "None": "Aucun",
     "OK": "OK",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "Dans le flux de travail",
     "infoPanelEmpty": "Cliquez sur un élément pour voir les informations",
+    "installAllMissingNodes": "Installer tous les nœuds manquants",
     "installSelected": "Installer sélectionné",
     "installationQueue": "File d'attente d'installation",
     "lastUpdated": "Dernière mise à jour",

src/locales/ja/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "背景画像をアップロード",
     "uploadTexture": "テクスチャをアップロード"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "ComfyUI {version} が必要です：",
+    "outdatedVersion": "一部のノードはより新しいバージョンのComfyUIが必要です（現在のバージョン：{version}）。すべてのノードを使用するにはアップデートしてください。",
+    "outdatedVersionGeneric": "一部のノードはより新しいバージョンのComfyUIが必要です。すべてのノードを使用するにはアップデートしてください。"
+  },
   "maintenance": {
     "None": "なし",
     "OK": "OK",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "ワークフロー内",
     "infoPanelEmpty": "アイテムをクリックして情報を表示します",
+    "installAllMissingNodes": "すべての不足しているノードをインストール",
     "installSelected": "選択したものをインストール",
     "installationQueue": "インストールキュー",
     "lastUpdated": "最終更新日",

src/locales/ko/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "배경 이미지 업로드",
     "uploadTexture": "텍스처 업로드"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "ComfyUI {version} 이상 필요:",
+    "outdatedVersion": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다 (현재: {version}). 모든 노드를 사용하려면 업데이트해 주세요.",
+    "outdatedVersionGeneric": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다. 모든 노드를 사용하려면 업데이트해 주세요."
+  },
   "maintenance": {
     "None": "없음",
     "OK": "확인",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "워크플로우 내",
     "infoPanelEmpty": "정보를 보려면 항목을 클릭하세요",
+    "installAllMissingNodes": "모든 누락된 노드 설치",
     "installSelected": "선택한 항목 설치",
     "installationQueue": "설치 대기열",
     "lastUpdated": "마지막 업데이트",

src/locales/ru/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Загрузить фоновое изображение",
     "uploadTexture": "Загрузить текстуру"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Требуется ComfyUI {version}:",
+    "outdatedVersion": "Некоторые узлы требуют более новой версии ComfyUI (текущая: {version}). Пожалуйста, обновите, чтобы использовать все узлы.",
+    "outdatedVersionGeneric": "Некоторые узлы требуют более новой версии ComfyUI. Пожалуйста, обновите, чтобы использовать все узлы."
+  },
   "maintenance": {
     "None": "Нет",
     "OK": "OK",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "В рабочем процессе",
     "infoPanelEmpty": "Нажмите на элемент, чтобы увидеть информацию",
+    "installAllMissingNodes": "Установить все отсутствующие узлы",
     "installSelected": "Установить выбранное",
     "installationQueue": "Очередь установки",
     "lastUpdated": "Последнее обновление",

src/locales/zh/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "上传背景图片",
     "uploadTexture": "上传纹理"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "需要 ComfyUI {version}：",
+    "outdatedVersion": "某些节点需要更高版本的 ComfyUI（当前版本：{version}）。请更新以使用所有节点。",
+    "outdatedVersionGeneric": "某些节点需要更高版本的 ComfyUI。请更新以使用所有节点。"
+  },
   "maintenance": {
     "None": "无",
     "OK": "确定",
@@ -586,6 +591,7 @@
     },
     "inWorkflow": "在工作流中",
     "infoPanelEmpty": "点击一个项目查看信息",
+    "installAllMissingNodes": "安装所有缺失节点",
     "installSelected": "安装选定",
     "installationQueue": "安装队列",
     "lastUpdated": "最后更新",
@@ -1037,9 +1043,9 @@
     "Extension": "扩展",
     "General": "常规",
     "Graph": "画面",
-    "Group": "组节点",
+    "Group": "组",
     "Keybinding": "快捷键",
-    "Light": "浅色",
+    "Light": "光照",
     "Link": "连线",
     "LinkRelease": "释放链接",
     "LiteGraph": "画面",

src/schemas/nodeDef/migration.ts

@@ -46,22 +46,26 @@ export function transformNodeDefV1ToV2(
   const outputs: OutputSpecV2[] = []
 
   if (nodeDefV1.output) {
-    nodeDefV1.output.forEach((outputType, index) => {
-      const outputSpec: OutputSpecV2 = {
-        index,
-        name: nodeDefV1.output_name?.[index] || `output_${index}`,
-        type: Array.isArray(outputType) ? 'COMBO' : outputType,
-        is_list: nodeDefV1.output_is_list?.[index] || false,
-        tooltip: nodeDefV1.output_tooltips?.[index]
-      }
+    if (Array.isArray(nodeDefV1.output)) {
+      nodeDefV1.output.forEach((outputType, index) => {
+        const outputSpec: OutputSpecV2 = {
+          index,
+          name: nodeDefV1.output_name?.[index] || `output_${index}`,
+          type: Array.isArray(outputType) ? 'COMBO' : outputType,
+          is_list: nodeDefV1.output_is_list?.[index] || false,
+          tooltip: nodeDefV1.output_tooltips?.[index]
+        }
 
-      // Add options for combo outputs
-      if (Array.isArray(outputType)) {
-        outputSpec.options = outputType
-      }
+        // Add options for combo outputs
+        if (Array.isArray(outputType)) {
+          outputSpec.options = outputType
+        }
 
-      outputs.push(outputSpec)
-    })
+        outputs.push(outputSpec)
+      })
+    } else {
+      console.warn('nodeDefV1.output is not an array:', nodeDefV1.output)
+    }
   }
 
   // Create the V2 node definition

src/services/dialogService.ts

@@ -137,8 +137,17 @@ export const useDialogService = () => {
       dialogComponentProps: {
         closable: true,
         pt: {
-          header: { class: '!p-0 !m-0' },
-          content: { class: '!px-0 h-[83vh] w-[90vw] overflow-y-hidden' }
+          pcCloseButton: {
+            root: {
+              class:
+                'bg-gray-500 dark-theme:bg-neutral-700 w-9 h-9 p-1.5 rounded-full text-white'
+            }
+          },
+          header: { class: '!py-0 px-6 !m-0 h-[68px]' },
+          content: {
+            class: '!p-0 h-full w-[90vw] max-w-full flex-1 overflow-hidden'
+          },
+          root: { class: 'manager-dialog' }
         }
       },
       props
@@ -154,6 +163,7 @@ export const useDialogService = () => {
       headerComponent: ManagerProgressHeader,
       footerComponent: ManagerProgressFooter,
       props: options?.props,
+      priority: 2,
       dialogComponentProps: {
         closable: false,
         modal: false,

src/services/providers/algoliaSearchProvider.ts

@@ -42,7 +42,13 @@ const RETRIEVE_ATTRIBUTES: SearchAttribute[] = [
   'latest_version_status',
   'comfy_node_extract_status',
   'id',
-  'icon_url'
+  'icon_url',
+  'github_stars',
+  'supported_os',
+  'supported_comfyui_version',
+  'supported_comfyui_frontend_version',
+  'supported_accelerators',
+  'banner_url'
 ]
 
 const searchPacksCache = new QuickLRU<string, SearchPacksResult>({
@@ -74,7 +80,9 @@ const toRegistryPublisher = (
  * Convert from node pack in Algolia format to Comfy Registry format
  */
 const toRegistryPack = memoize(
-  (algoliaNode: AlgoliaNodePack): RegistryNodePack => {
+  (
+    algoliaNode: AlgoliaNodePack
+  ): RegistryNodePack & { comfy_nodes: string[] } => {
     return {
       id: algoliaNode.id ?? algoliaNode.objectID,
       name: algoliaNode.name,
@@ -86,9 +94,18 @@ const toRegistryPack = memoize(
       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
+      created_at: algoliaNode.create_time,
+      category: algoliaNode.category,
+      author: algoliaNode.author,
+      tags: algoliaNode.tags,
+      github_stars: algoliaNode.github_stars,
+      supported_os: algoliaNode.supported_os,
+      supported_comfyui_version: algoliaNode.supported_comfyui_version,
+      supported_comfyui_frontend_version:
+        algoliaNode.supported_comfyui_frontend_version,
+      supported_accelerators: algoliaNode.supported_accelerators,
+      banner_url: algoliaNode.banner_url,
+      comfy_nodes: algoliaNode.comfy_nodes
     }
   },
   (algoliaNode: AlgoliaNodePack) => algoliaNode.id
@@ -187,9 +204,7 @@ export const useAlgoliaSearchProvider = (): NodePackSearchProvider => {
       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
+        const createTime = pack.created_at
         return createTime ? new Date(createTime).getTime() : 0
       }
       case SortableAlgoliaField.Updated:

src/services/providers/registrySearchProvider.ts

@@ -32,7 +32,7 @@ export const useComfyRegistrySearchProvider = (): NodePackSearchProvider => {
       search: isNodeSearch ? undefined : query,
       comfy_node_search: isNodeSearch ? query : undefined,
       limit: pageSize,
-      offset: pageNumber * pageSize
+      page: pageNumber + 1 // Registry API uses 1-based pagination
     }
 
     const searchResult = await registryStore.search.call(searchParams)

src/stores/comfyManagerStore.ts

@@ -213,6 +213,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     isPackInstalled: isInstalledPackId,
     isPackEnabled: isEnabledPackId,
     getInstalledPackVersion,
+    refreshInstalledList,
 
     // Pack actions
     installPack,

src/stores/dialogStore.ts

@@ -40,6 +40,7 @@ interface DialogInstance {
   contentProps: Record<string, any>
   footerComponent?: Component
   dialogComponentProps: DialogComponentProps
+  priority: number
 }
 
 export interface ShowDialogOptions {
@@ -50,6 +51,12 @@ export interface ShowDialogOptions {
   component: Component
   props?: Record<string, any>
   dialogComponentProps?: DialogComponentProps
+  /**
+   * Optional priority for dialog stacking.
+   * A dialog will never be shown above a dialog with a higher priority.
+   * @default 1
+   */
+  priority?: number
 }
 
 export const useDialogStore = defineStore('dialog', () => {
@@ -57,13 +64,29 @@ export const useDialogStore = defineStore('dialog', () => {
 
   const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
 
+  /**
+   * Inserts a dialog into the stack at the correct position based on priority.
+   * Higher priority dialogs are placed before lower priority ones.
+   */
+  function insertDialogByPriority(dialog: DialogInstance) {
+    const insertIndex = dialogStack.value.findIndex(
+      (d) => d.priority <= dialog.priority
+    )
+
+    dialogStack.value.splice(
+      insertIndex === -1 ? dialogStack.value.length : insertIndex,
+      0,
+      dialog
+    )
+  }
+
   function riseDialog(options: { key: string }) {
     const dialogKey = options.key
 
     const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
     if (index !== -1) {
-      const dialogs = dialogStack.value.splice(index, 1)
-      dialogStack.value.push(...dialogs)
+      const [dialog] = dialogStack.value.splice(index, 1)
+      insertDialogByPriority(dialog)
     }
   }
 
@@ -85,12 +108,13 @@ export const useDialogStore = defineStore('dialog', () => {
     component: Component
     props?: Record<string, any>
     dialogComponentProps?: DialogComponentProps
+    priority?: number
   }) {
     if (dialogStack.value.length >= 10) {
       dialogStack.value.shift()
     }
 
-    const dialog = {
+    const dialog: DialogInstance = {
       key: options.key,
       visible: true,
       title: options.title,
@@ -102,6 +126,7 @@ export const useDialogStore = defineStore('dialog', () => {
         : undefined,
       component: markRaw(options.component),
       contentProps: { ...options.props },
+      priority: options.priority ?? 1,
       dialogComponentProps: {
         maximizable: false,
         modal: true,
@@ -110,6 +135,7 @@ export const useDialogStore = defineStore('dialog', () => {
         dismissableMask: true,
         ...options.dialogComponentProps,
         maximized: false,
+        // @ts-expect-error TODO: fix this
         onMaximize: () => {
           dialog.dialogComponentProps.maximized = true
         },
@@ -128,7 +154,8 @@ export const useDialogStore = defineStore('dialog', () => {
         })
       }
     }
-    dialogStack.value.push(dialog)
+
+    insertDialogByPriority(dialog)
 
     return dialog
   }

src/stores/settingStore.ts

@@ -7,6 +7,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { SettingParams } from '@/types/settingTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
+import { runSettingMigrations } from '@/utils/migration/settingsMigration'
 
 export const getSettingInfo = (setting: SettingParams) => {
   const parts = setting.category || setting.id.split('.')
@@ -20,10 +21,6 @@ export interface SettingTreeNode extends TreeNode {
   data?: SettingParams
 }
 
-function tryMigrateDeprecatedValue(setting: SettingParams, value: any) {
-  return setting?.migrateDeprecatedValue?.(value) ?? value
-}
-
 function onChange(setting: SettingParams, newValue: any, oldValue: any) {
   if (setting?.onChange) {
     setting.onChange(newValue, oldValue)
@@ -54,16 +51,12 @@ export const useSettingStore = defineStore('setting', () => {
   async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
     // Clone the incoming value to prevent external mutations
     const clonedValue = _.cloneDeep(value)
-    const newValue = tryMigrateDeprecatedValue(
-      settingsById.value[key],
-      clonedValue
-    )
     const oldValue = get(key)
-    if (newValue === oldValue) return
+    if (clonedValue === oldValue) return
 
-    onChange(settingsById.value[key], newValue, oldValue)
-    settingValues.value[key] = newValue
-    await api.storeSetting(key, newValue)
+    onChange(settingsById.value[key], clonedValue, oldValue)
+    settingValues.value[key] = clonedValue
+    await api.storeSetting(key, clonedValue)
   }
 
   /**
@@ -102,12 +95,7 @@ export const useSettingStore = defineStore('setting', () => {
 
     settingsById.value[setting.id] = setting
 
-    if (settingValues.value[setting.id] !== undefined) {
-      settingValues.value[setting.id] = tryMigrateDeprecatedValue(
-        setting,
-        settingValues.value[setting.id]
-      )
-    }
+    // Trigger onChange callback with current value
     onChange(setting, get(setting.id), undefined)
   }
 
@@ -122,6 +110,9 @@ export const useSettingStore = defineStore('setting', () => {
       )
     }
     settingValues.value = await api.getSettings()
+
+    // Run migrations after loading values but before settings are registered
+    await runSettingMigrations()
   }
 
   return {

src/types/algoliaTypes.ts

@@ -59,6 +59,15 @@ export interface AlgoliaNodePack {
     'comfy_node_extract_status'
   >
   icon_url: RegistryNodePack['icon']
+  category: RegistryNodePack['category']
+  author: RegistryNodePack['author']
+  tags: RegistryNodePack['tags']
+  github_stars: RegistryNodePack['github_stars']
+  supported_os: RegistryNodePack['supported_os']
+  supported_comfyui_version: RegistryNodePack['supported_comfyui_version']
+  supported_comfyui_frontend_version: RegistryNodePack['supported_comfyui_frontend_version']
+  supported_accelerators: RegistryNodePack['supported_accelerators']
+  banner_url: RegistryNodePack['banner_url']
 }
 
 /**

src/types/comfyRegistryTypes.ts

@@ -896,6 +896,23 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/nodes/update-github-stars': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    get?: never
+    put?: never
+    /** Update GitHub stars for nodes */
+    post: operations['updateGithubStars']
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/nodes': {
     parameters: {
       query?: never
@@ -1078,6 +1095,30 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/releases': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /**
+     * Get release notes
+     * @description Fetch release notes from Strapi with caching
+     */
+    get: operations['getReleaseNotes']
+    put?: never
+    /**
+     * Process Github release webhook
+     * @description Webhook endpoint to process Github release events and generate release notes
+     */
+    post: operations['processReleaseWebhook']
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/security-scan': {
     parameters: {
       query?: never
@@ -3207,6 +3248,13 @@ export interface components {
       preempted_comfy_node_names?: string[]
       /** @description URL to the node's banner. */
       banner_url?: string
+      /** @description Number of stars on the GitHub repository. */
+      github_stars?: number
+      /**
+       * Format: date-time
+       * @description The date and time when the node was created
+       */
+      created_at?: string
     }
     NodeVersion: {
       id?: string
@@ -3345,6 +3393,8 @@ export interface components {
       stripe_id?: string
       /** @description The Metronome customer ID */
       metronome_id?: string
+      /** @description Whether the user has funds */
+      has_fund?: boolean
     }
     AuditLog: {
       /** @description the type of the event */
@@ -8692,6 +8742,292 @@ export interface components {
     MoonvalleyUploadResponse: {
       access_url?: string
     }
+    /** @description GitHub release webhook payload based on official webhook documentation */
+    GithubReleaseWebhook: {
+      /**
+       * @description The action performed on the release
+       * @enum {string}
+       */
+      action:
+        | 'published'
+        | 'unpublished'
+        | 'created'
+        | 'edited'
+        | 'deleted'
+        | 'prereleased'
+        | 'released'
+      /** @description The release object */
+      release: {
+        /** @description The ID of the release */
+        id: number
+        /** @description The node ID of the release */
+        node_id: string
+        /** @description The API URL of the release */
+        url: string
+        /** @description The HTML URL of the release */
+        html_url: string
+        /** @description The URL to the release assets */
+        assets_url?: string
+        /** @description The URL to upload release assets */
+        upload_url?: string
+        /** @description The tag name of the release */
+        tag_name: string
+        /** @description The branch or commit the release was created from */
+        target_commitish: string
+        /** @description The name of the release */
+        name?: string | null
+        /** @description The release notes/body */
+        body?: string | null
+        /** @description Whether the release is a draft */
+        draft: boolean
+        /** @description Whether the release is a prerelease */
+        prerelease: boolean
+        /**
+         * Format: date-time
+         * @description When the release was created
+         */
+        created_at: string
+        /**
+         * Format: date-time
+         * @description When the release was published
+         */
+        published_at?: string | null
+        author: components['schemas']['GithubUser']
+        /** @description URL to the tarball */
+        tarball_url: string
+        /** @description URL to the zipball */
+        zipball_url: string
+        /** @description Array of release assets */
+        assets: components['schemas']['GithubReleaseAsset'][]
+      }
+      repository: components['schemas']['GithubRepository']
+      sender: components['schemas']['GithubUser']
+      organization?: components['schemas']['GithubOrganization']
+      installation?: components['schemas']['GithubInstallation']
+      enterprise?: components['schemas']['GithubEnterprise']
+    }
+    /** @description A GitHub user */
+    GithubUser: {
+      /** @description The user's login name */
+      login: string
+      /** @description The user's ID */
+      id: number
+      /** @description The user's node ID */
+      node_id: string
+      /** @description URL to the user's avatar */
+      avatar_url: string
+      /** @description The user's gravatar ID */
+      gravatar_id?: string | null
+      /** @description The API URL of the user */
+      url: string
+      /** @description The HTML URL of the user */
+      html_url: string
+      /**
+       * @description The type of user
+       * @enum {string}
+       */
+      type: 'Bot' | 'User' | 'Organization'
+      /** @description Whether the user is a site admin */
+      site_admin: boolean
+    }
+    /** @description A GitHub repository */
+    GithubRepository: {
+      /** @description The repository ID */
+      id: number
+      /** @description The repository node ID */
+      node_id: string
+      /** @description The name of the repository */
+      name: string
+      /** @description The full name of the repository (owner/repo) */
+      full_name: string
+      /** @description Whether the repository is private */
+      private: boolean
+      owner: components['schemas']['GithubUser']
+      /** @description The HTML URL of the repository */
+      html_url: string
+      /** @description The repository description */
+      description?: string | null
+      /** @description Whether the repository is a fork */
+      fork: boolean
+      /** @description The API URL of the repository */
+      url: string
+      /** @description The clone URL of the repository */
+      clone_url: string
+      /** @description The git URL of the repository */
+      git_url: string
+      /** @description The SSH URL of the repository */
+      ssh_url: string
+      /** @description The default branch of the repository */
+      default_branch: string
+      /**
+       * Format: date-time
+       * @description When the repository was created
+       */
+      created_at: string
+      /**
+       * Format: date-time
+       * @description When the repository was last updated
+       */
+      updated_at: string
+      /**
+       * Format: date-time
+       * @description When the repository was last pushed to
+       */
+      pushed_at: string
+    }
+    /** @description A GitHub release asset */
+    GithubReleaseAsset: {
+      /** @description The asset ID */
+      id: number
+      /** @description The asset node ID */
+      node_id: string
+      /** @description The name of the asset */
+      name: string
+      /** @description The label of the asset */
+      label?: string | null
+      /** @description The content type of the asset */
+      content_type: string
+      /**
+       * @description The state of the asset
+       * @enum {string}
+       */
+      state: 'uploaded' | 'open'
+      /** @description The size of the asset in bytes */
+      size: number
+      /** @description The number of downloads */
+      download_count: number
+      /**
+       * Format: date-time
+       * @description When the asset was created
+       */
+      created_at: string
+      /**
+       * Format: date-time
+       * @description When the asset was last updated
+       */
+      updated_at: string
+      /** @description The browser download URL */
+      browser_download_url: string
+      uploader: components['schemas']['GithubUser']
+    }
+    /** @description A GitHub organization */
+    GithubOrganization: {
+      /** @description The organization's login name */
+      login: string
+      /** @description The organization ID */
+      id: number
+      /** @description The organization node ID */
+      node_id: string
+      /** @description The API URL of the organization */
+      url: string
+      /** @description The API URL of the organization's repositories */
+      repos_url: string
+      /** @description The API URL of the organization's events */
+      events_url: string
+      /** @description The API URL of the organization's hooks */
+      hooks_url: string
+      /** @description The API URL of the organization's issues */
+      issues_url: string
+      /** @description The API URL of the organization's members */
+      members_url: string
+      /** @description The API URL of the organization's public members */
+      public_members_url: string
+      /** @description URL to the organization's avatar */
+      avatar_url: string
+      /** @description The organization description */
+      description?: string | null
+    }
+    /** @description A GitHub App installation */
+    GithubInstallation: {
+      /** @description The installation ID */
+      id: number
+      account: components['schemas']['GithubUser']
+      /**
+       * @description Repository selection for the installation
+       * @enum {string}
+       */
+      repository_selection: 'selected' | 'all'
+      /** @description The API URL for access tokens */
+      access_tokens_url: string
+      /** @description The API URL for repositories */
+      repositories_url: string
+      /** @description The HTML URL of the installation */
+      html_url: string
+      /** @description The GitHub App ID */
+      app_id: number
+      /** @description The target ID */
+      target_id: number
+      /** @description The target type */
+      target_type: string
+      /** @description The installation permissions */
+      permissions: Record<string, never>
+      /** @description The events the installation subscribes to */
+      events: string[]
+      /**
+       * Format: date-time
+       * @description When the installation was created
+       */
+      created_at: string
+      /**
+       * Format: date-time
+       * @description When the installation was last updated
+       */
+      updated_at: string
+      /** @description The single file name if applicable */
+      single_file_name?: string | null
+    }
+    /** @description A GitHub enterprise */
+    GithubEnterprise: {
+      /** @description The enterprise ID */
+      id: number
+      /** @description The enterprise slug */
+      slug: string
+      /** @description The enterprise name */
+      name: string
+      /** @description The enterprise node ID */
+      node_id: string
+      /** @description URL to the enterprise avatar */
+      avatar_url: string
+      /** @description The enterprise description */
+      description?: string | null
+      /** @description The enterprise website URL */
+      website_url?: string | null
+      /** @description The HTML URL of the enterprise */
+      html_url: string
+      /**
+       * Format: date-time
+       * @description When the enterprise was created
+       */
+      created_at: string
+      /**
+       * Format: date-time
+       * @description When the enterprise was last updated
+       */
+      updated_at: string
+    }
+    ReleaseNote: {
+      /** @description Unique identifier for the release note */
+      id: number
+      /**
+       * @description The project this release note belongs to
+       * @enum {string}
+       */
+      project: 'comfyui' | 'comfyui_frontend' | 'desktop'
+      /** @description The version of the release */
+      version: string
+      /**
+       * @description The attention level for this release
+       * @enum {string}
+       */
+      attention: 'low' | 'medium' | 'high'
+      /** @description The content of the release note in markdown format */
+      content: string
+      /**
+       * Format: date-time
+       * @description When the release note was published
+       */
+      published_at: string
+    }
   }
   responses: never
   parameters: {
@@ -10795,8 +11131,6 @@ export interface operations {
       query?: {
         /** @description Maximum number of nodes to send to algolia at a time */
         max_batch?: number
-        /** @description Minimum interval from the last time the nodes were indexed to algolia */
-        min_age?: string
       }
       header?: never
       path?: never
@@ -10831,6 +11165,52 @@ export interface operations {
       }
     }
   }
+  updateGithubStars: {
+    parameters: {
+      query?: {
+        /** @description Maximum number of nodes to update in one batch */
+        max_batch?: number
+      }
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description Update GithubStars request triggered successfully */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Bad request. */
+      400: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Internal server error */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+    }
+  }
   listAllNodes: {
     parameters: {
       query?: {
@@ -10852,6 +11232,8 @@ export interface operations {
         sort?: string[]
         /** @description node_id to use as filter */
         node_id?: string[]
+        /** @description Comfy UI version */
+        comfyui_version?: string
         /** @description The platform requesting the nodes */
         form_factor?: string
       }
@@ -11418,6 +11800,115 @@ export interface operations {
       }
     }
   }
+  getReleaseNotes: {
+    parameters: {
+      query: {
+        /** @description The project to get release notes for */
+        project: 'comfyui' | 'comfyui_frontend' | 'desktop'
+        /** @description The current version to filter release notes */
+        current_version?: string
+        /** @description The locale for the release notes */
+        locale?: 'en' | 'es' | 'fr' | 'ja' | 'ko' | 'ru' | 'zh'
+        /** @description The platform requesting the release notes */
+        form_factor?: string
+      }
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description Release notes retrieved successfully */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ReleaseNote'][]
+        }
+      }
+      /** @description Bad request */
+      400: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+      /** @description Internal server error */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+    }
+  }
+  processReleaseWebhook: {
+    parameters: {
+      query?: never
+      header: {
+        /** @description The name of the event that triggered the delivery */
+        'X-GitHub-Event': 'release'
+        /** @description A globally unique identifier (GUID) to identify the event */
+        'X-GitHub-Delivery': string
+        /** @description The unique identifier of the webhook */
+        'X-GitHub-Hook-ID': string
+        /** @description HMAC hex digest of the request body using SHA-256 hash function */
+        'X-Hub-Signature-256'?: string
+        /** @description The type of resource where the webhook was created */
+        'X-GitHub-Hook-Installation-Target-Type'?: string
+        /** @description The unique identifier of the resource where the webhook was created */
+        'X-GitHub-Hook-Installation-Target-ID'?: string
+      }
+      path?: never
+      cookie?: never
+    }
+    requestBody: {
+      content: {
+        'application/json': components['schemas']['GithubReleaseWebhook']
+      }
+    }
+    responses: {
+      /** @description Webhook processed successfully */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Bad request */
+      400: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+      /** @description Validation failed or endpoint has been spammed */
+      422: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+      /** @description Internal server error */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['ErrorResponse']
+        }
+      }
+    }
+  }
   securityScan: {
     parameters: {
       query?: {

src/types/settingTypes.ts

@@ -43,8 +43,6 @@ export interface SettingParams extends FormItem {
   category?: string[]
   experimental?: boolean
   deprecated?: boolean
-  // Deprecated values are mapped to new values.
-  migrateDeprecatedValue?: (value: any) => any
   // Version of the setting when it was added
   versionAdded?: string
   // Version of the setting when it was last modified

src/utils/migration/settingsMigration.ts

@@ -0,0 +1,88 @@
+import type { Keybinding } from '@/schemas/keyBindingSchema'
+import { useSettingStore } from '@/stores/settingStore'
+
+export interface SettingMigration {
+  condition: () => boolean
+  migrate: () => Promise<void>
+}
+
+/**
+ * Setting value migrations that transform deprecated values to new formats.
+ * These run after settings are loaded from the server but before they are
+ * registered, ensuring settings have valid values when the app initializes.
+ */
+export const SETTING_MIGRATIONS: SettingMigration[] = [
+  // Migrate Comfy.UseNewMenu "Floating" value to "Top"
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      return (
+        settingStore.exists('Comfy.UseNewMenu') &&
+        (settingStore.get('Comfy.UseNewMenu') as string) === 'Floating'
+      )
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      await settingStore.set('Comfy.UseNewMenu', 'Top')
+    }
+  },
+  // Migrate Comfy.Keybinding.UnsetBindings targetSelector to targetElementId
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      if (!settingStore.exists('Comfy.Keybinding.UnsetBindings')) return false
+      const keybindings = settingStore.get(
+        'Comfy.Keybinding.UnsetBindings'
+      ) as Keybinding[]
+      return keybindings.some((kb: any) => 'targetSelector' in kb)
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      const keybindings = settingStore.get(
+        'Comfy.Keybinding.UnsetBindings'
+      ) as Keybinding[]
+      const migrated = keybindings.map((keybinding) => {
+        // Create a new object to avoid mutating the original
+        const newKeybinding = { ...keybinding }
+        if (
+          'targetSelector' in newKeybinding &&
+          newKeybinding['targetSelector'] === '#graph-canvas'
+        ) {
+          newKeybinding['targetElementId'] = 'graph-canvas'
+          delete newKeybinding['targetSelector']
+        }
+        return newKeybinding
+      })
+      await settingStore.set('Comfy.Keybinding.UnsetBindings', migrated)
+    }
+  },
+  // Migrate Comfy.ColorPalette custom_ prefix
+  {
+    condition: () => {
+      const settingStore = useSettingStore()
+      return (
+        settingStore.exists('Comfy.ColorPalette') &&
+        (settingStore.get('Comfy.ColorPalette') as string).startsWith('custom_')
+      )
+    },
+    migrate: async () => {
+      const settingStore = useSettingStore()
+      const value = settingStore.get('Comfy.ColorPalette') as string
+      await settingStore.set('Comfy.ColorPalette', value.replace('custom_', ''))
+    }
+  }
+]
+
+/**
+ * Runs all setting migrations that meet their conditions.
+ * This is called after loadSettingValues() to ensure all deprecated
+ * setting values are migrated to their current format before the
+ * application starts using them.
+ */
+export async function runSettingMigrations(): Promise<void> {
+  for (const migration of SETTING_MIGRATIONS) {
+    if (migration.condition()) {
+      await migration.migrate()
+    }
+  }
+}

tests-ui/tests/components/dialog/content/MissingCoreNodesMessage.spec.ts

@@ -0,0 +1,205 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Message from 'primevue/message'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+// Mock the stores
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: vi.fn()
+}))
+
+const createMockNode = (type: string, version?: string): LGraphNode =>
+  // @ts-expect-error - Creating a partial mock of LGraphNode for testing purposes.
+  // We only need specific properties for our tests, not the full LGraphNode interface.
+  ({
+    type,
+    properties: { cnr_id: 'comfy-core', ver: version },
+    id: 1,
+    title: type,
+    pos: [0, 0],
+    size: [100, 100],
+    flags: {},
+    graph: null,
+    mode: 0,
+    inputs: [],
+    outputs: []
+  })
+
+describe('MissingCoreNodesMessage', () => {
+  const mockSystemStatsStore = {
+    systemStats: null as { system?: { comfyui_version?: string } } | null,
+    fetchSystemStats: vi.fn()
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset the mock store state
+    mockSystemStatsStore.systemStats = null
+    mockSystemStatsStore.fetchSystemStats = vi.fn()
+    // @ts-expect-error - Mocking the return value of useSystemStatsStore for testing.
+    // The actual store has more properties, but we only need these for our tests.
+    useSystemStatsStore.mockReturnValue(mockSystemStatsStore)
+  })
+
+  const mountComponent = (props = {}) => {
+    return mount(MissingCoreNodesMessage, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Message },
+        mocks: {
+          $t: (key: string, params?: { version?: string }) => {
+            const translations: Record<string, string> = {
+              'loadWorkflowWarning.outdatedVersion': `Some nodes require a newer version of ComfyUI (current: ${params?.version}). Please update to use all nodes.`,
+              'loadWorkflowWarning.outdatedVersionGeneric':
+                'Some nodes require a newer version of ComfyUI. Please update to use all nodes.',
+              'loadWorkflowWarning.coreNodesFromVersion': `Requires ComfyUI ${params?.version}:`
+            }
+            return translations[key] || key
+          }
+        }
+      },
+      props: {
+        missingCoreNodes: {},
+        ...props
+      }
+    })
+  }
+
+  it('does not render when there are no missing core nodes', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.findComponent(Message).exists()).toBe(false)
+  })
+
+  it('renders message when there are missing core nodes', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    expect(wrapper.findComponent(Message).exists()).toBe(true)
+  })
+
+  it('fetches and displays current ComfyUI version', async () => {
+    // Start with no systemStats to trigger fetch
+    mockSystemStatsStore.fetchSystemStats.mockImplementation(() => {
+      // Simulate the fetch setting the systemStats
+      mockSystemStatsStore.systemStats = {
+        system: { comfyui_version: '1.0.0' }
+      }
+      return Promise.resolve()
+    })
+
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+
+    // Wait for all async operations
+    await nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await nextTick()
+
+    expect(mockSystemStatsStore.fetchSystemStats).toHaveBeenCalled()
+    expect(wrapper.text()).toContain(
+      'Some nodes require a newer version of ComfyUI (current: 1.0.0)'
+    )
+  })
+
+  it('displays generic message when version is unavailable', async () => {
+    // Mock fetchSystemStats to resolve without setting systemStats
+    mockSystemStatsStore.fetchSystemStats.mockResolvedValue(undefined)
+
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+
+    // Wait for the async operations to complete
+    await nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await nextTick()
+
+    expect(wrapper.text()).toContain(
+      'Some nodes require a newer version of ComfyUI. Please update to use all nodes.'
+    )
+  })
+
+  it('groups nodes by version and displays them', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [
+        createMockNode('NodeA', '1.2.0'),
+        createMockNode('NodeB', '1.2.0')
+      ],
+      '1.3.0': [createMockNode('NodeC', '1.3.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    expect(text).toContain('Requires ComfyUI 1.3.0:')
+    expect(text).toContain('NodeC')
+    expect(text).toContain('Requires ComfyUI 1.2.0:')
+    expect(text).toContain('NodeA, NodeB')
+  })
+
+  it('sorts versions in descending order', async () => {
+    const missingCoreNodes = {
+      '1.1.0': [createMockNode('Node1', '1.1.0')],
+      '1.3.0': [createMockNode('Node3', '1.3.0')],
+      '1.2.0': [createMockNode('Node2', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    const version13Index = text.indexOf('1.3.0')
+    const version12Index = text.indexOf('1.2.0')
+    const version11Index = text.indexOf('1.1.0')
+
+    expect(version13Index).toBeLessThan(version12Index)
+    expect(version12Index).toBeLessThan(version11Index)
+  })
+
+  it('removes duplicate node names within the same version', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [
+        createMockNode('DuplicateNode', '1.2.0'),
+        createMockNode('DuplicateNode', '1.2.0'),
+        createMockNode('UniqueNode', '1.2.0')
+      ]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    // Should only appear once in the sorted list
+    expect(text).toContain('DuplicateNode, UniqueNode')
+    // Count occurrences of 'DuplicateNode' - should be only 1
+    const matches = text.match(/DuplicateNode/g) || []
+    expect(matches.length).toBe(1)
+  })
+
+  it('handles nodes with missing version info', async () => {
+    const missingCoreNodes = {
+      '': [createMockNode('NoVersionNode')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    expect(wrapper.text()).toContain('Requires ComfyUI unknown:')
+    expect(wrapper.text()).toContain('NoVersionNode')
+  })
+})

tests-ui/tests/composables/useMissingNodes.test.ts

@@ -0,0 +1,385 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { app } from '@/scripts/app'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+// Mock Vue's onMounted to execute immediately for testing
+vi.mock('vue', async () => {
+  const actual = await vi.importActual<typeof import('vue')>('vue')
+  return {
+    ...actual,
+    onMounted: (cb: () => void) => cb()
+  }
+})
+
+// Mock the dependencies
+vi.mock('@/composables/nodePack/useWorkflowPacks', () => ({
+  useWorkflowPacks: vi.fn()
+}))
+
+vi.mock('@/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: vi.fn()
+}))
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: vi.fn()
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: {
+      nodes: []
+    }
+  }
+}))
+
+const mockUseWorkflowPacks = vi.mocked(useWorkflowPacks)
+const mockUseComfyManagerStore = vi.mocked(useComfyManagerStore)
+const mockUseNodeDefStore = vi.mocked(useNodeDefStore)
+
+describe('useMissingNodes', () => {
+  const mockWorkflowPacks = [
+    {
+      id: 'pack-1',
+      name: 'Test Pack 1',
+      latest_version: { version: '1.0.0' }
+    },
+    {
+      id: 'pack-2',
+      name: 'Test Pack 2',
+      latest_version: { version: '2.0.0' }
+    },
+    {
+      id: 'pack-3',
+      name: 'Installed Pack',
+      latest_version: { version: '1.5.0' }
+    }
+  ]
+
+  const mockStartFetchWorkflowPacks = vi.fn()
+  const mockIsPackInstalled = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Default setup: pack-3 is installed, others are not
+    mockIsPackInstalled.mockImplementation((id: string) => id === 'pack-3')
+
+    // @ts-expect-error - Mocking partial ComfyManagerStore for testing.
+    // We only need isPackInstalled method for these tests.
+    mockUseComfyManagerStore.mockReturnValue({
+      isPackInstalled: mockIsPackInstalled
+    })
+
+    mockUseWorkflowPacks.mockReturnValue({
+      workflowPacks: ref([]),
+      isLoading: ref(false),
+      error: ref(null),
+      startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+      isReady: ref(false),
+      filterWorkflowPack: vi.fn()
+    })
+
+    // Reset node def store mock
+    // @ts-expect-error - Mocking partial NodeDefStore for testing.
+    // We only need nodeDefsByName for these tests.
+    mockUseNodeDefStore.mockReturnValue({
+      nodeDefsByName: {}
+    })
+
+    // Reset app.graph.nodes
+    // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
+    app.graph.nodes = []
+  })
+
+  describe('core filtering logic', () => {
+    it('filters out installed packs correctly', () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref(mockWorkflowPacks),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(true),
+        filterWorkflowPack: vi.fn()
+      })
+
+      const { missingNodePacks } = useMissingNodes()
+
+      // Should only include packs that are not installed (pack-1, pack-2)
+      expect(missingNodePacks.value).toHaveLength(2)
+      expect(missingNodePacks.value[0].id).toBe('pack-1')
+      expect(missingNodePacks.value[1].id).toBe('pack-2')
+      expect(
+        missingNodePacks.value.find((pack) => pack.id === 'pack-3')
+      ).toBeUndefined()
+    })
+
+    it('returns empty array when all packs are installed', () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref(mockWorkflowPacks),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(true),
+        filterWorkflowPack: vi.fn()
+      })
+
+      // Mock all packs as installed
+      mockIsPackInstalled.mockReturnValue(true)
+
+      const { missingNodePacks } = useMissingNodes()
+
+      expect(missingNodePacks.value).toEqual([])
+    })
+
+    it('returns all packs when none are installed', () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref(mockWorkflowPacks),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(true),
+        filterWorkflowPack: vi.fn()
+      })
+
+      // Mock no packs as installed
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { missingNodePacks } = useMissingNodes()
+
+      expect(missingNodePacks.value).toHaveLength(3)
+      expect(missingNodePacks.value).toEqual(mockWorkflowPacks)
+    })
+
+    it('returns empty array when no workflow packs exist', () => {
+      const { missingNodePacks } = useMissingNodes()
+
+      expect(missingNodePacks.value).toEqual([])
+    })
+  })
+
+  describe('automatic data fetching', () => {
+    it('fetches workflow packs automatically when none exist', async () => {
+      useMissingNodes()
+
+      expect(mockStartFetchWorkflowPacks).toHaveBeenCalledOnce()
+    })
+
+    it('does not fetch when packs already exist', async () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref(mockWorkflowPacks),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(true),
+        filterWorkflowPack: vi.fn()
+      })
+
+      useMissingNodes()
+
+      expect(mockStartFetchWorkflowPacks).not.toHaveBeenCalled()
+    })
+
+    it('does not fetch when already loading', async () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref([]),
+        isLoading: ref(true),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(false),
+        filterWorkflowPack: vi.fn()
+      })
+
+      useMissingNodes()
+
+      expect(mockStartFetchWorkflowPacks).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('state management', () => {
+    it('exposes loading state from useWorkflowPacks', () => {
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref([]),
+        isLoading: ref(true),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(false),
+        filterWorkflowPack: vi.fn()
+      })
+
+      const { isLoading } = useMissingNodes()
+
+      expect(isLoading.value).toBe(true)
+    })
+
+    it('exposes error state from useWorkflowPacks', () => {
+      const testError = 'Failed to fetch workflow packs'
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: ref([]),
+        isLoading: ref(false),
+        error: ref(testError),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(false),
+        filterWorkflowPack: vi.fn()
+      })
+
+      const { error } = useMissingNodes()
+
+      expect(error.value).toBe(testError)
+    })
+  })
+
+  describe('reactivity', () => {
+    it('updates when workflow packs change', async () => {
+      const workflowPacksRef = ref([])
+      mockUseWorkflowPacks.mockReturnValue({
+        workflowPacks: workflowPacksRef,
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchWorkflowPacks: mockStartFetchWorkflowPacks,
+        isReady: ref(true),
+        filterWorkflowPack: vi.fn()
+      })
+
+      const { missingNodePacks } = useMissingNodes()
+
+      // Initially empty
+      expect(missingNodePacks.value).toEqual([])
+
+      // Update workflow packs
+      // @ts-expect-error - mockWorkflowPacks is a simplified version without full WorkflowPack interface.
+      workflowPacksRef.value = mockWorkflowPacks
+      await nextTick()
+
+      // Should update missing packs (2 missing since pack-3 is installed)
+      expect(missingNodePacks.value).toHaveLength(2)
+    })
+  })
+
+  describe('missing core nodes detection', () => {
+    const createMockNode = (
+      type: string,
+      packId?: string,
+      version?: string
+    ): LGraphNode =>
+      // @ts-expect-error - Creating a partial mock of LGraphNode for testing.
+      // We only need specific properties for our tests, not the full LGraphNode interface.
+      ({
+        type,
+        properties: { cnr_id: packId, ver: version },
+        id: 1,
+        title: type,
+        pos: [0, 0],
+        size: [100, 100],
+        flags: {},
+        graph: null,
+        mode: 0,
+        inputs: [],
+        outputs: []
+      })
+
+    it('identifies missing core nodes not in nodeDefStore', () => {
+      const coreNode1 = createMockNode('CoreNode1', 'comfy-core', '1.2.0')
+      const coreNode2 = createMockNode('CoreNode2', 'comfy-core', '1.2.0')
+      const registeredNode = createMockNode(
+        'RegisteredNode',
+        'comfy-core',
+        '1.0.0'
+      )
+
+      // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
+      app.graph.nodes = [coreNode1, coreNode2, registeredNode]
+
+      mockUseNodeDefStore.mockReturnValue({
+        nodeDefsByName: {
+          // @ts-expect-error - Creating minimal mock of ComfyNodeDefImpl for testing.
+          // Only including required properties for our test assertions.
+          RegisteredNode: { name: 'RegisteredNode' }
+        }
+      })
+
+      const { missingCoreNodes } = useMissingNodes()
+
+      expect(Object.keys(missingCoreNodes.value)).toHaveLength(1)
+      expect(missingCoreNodes.value['1.2.0']).toHaveLength(2)
+      expect(missingCoreNodes.value['1.2.0'][0].type).toBe('CoreNode1')
+      expect(missingCoreNodes.value['1.2.0'][1].type).toBe('CoreNode2')
+    })
+
+    it('groups missing core nodes by version', () => {
+      const node120 = createMockNode('Node120', 'comfy-core', '1.2.0')
+      const node130 = createMockNode('Node130', 'comfy-core', '1.3.0')
+      const nodeNoVer = createMockNode('NodeNoVer', 'comfy-core')
+
+      // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
+      app.graph.nodes = [node120, node130, nodeNoVer]
+
+      // @ts-expect-error - Mocking partial NodeDefStore for testing.
+      mockUseNodeDefStore.mockReturnValue({
+        nodeDefsByName: {}
+      })
+
+      const { missingCoreNodes } = useMissingNodes()
+
+      expect(Object.keys(missingCoreNodes.value)).toHaveLength(3)
+      expect(missingCoreNodes.value['1.2.0']).toHaveLength(1)
+      expect(missingCoreNodes.value['1.3.0']).toHaveLength(1)
+      expect(missingCoreNodes.value['']).toHaveLength(1)
+    })
+
+    it('ignores non-core nodes', () => {
+      const coreNode = createMockNode('CoreNode', 'comfy-core', '1.2.0')
+      const customNode = createMockNode('CustomNode', 'custom-pack', '1.0.0')
+      const noPackNode = createMockNode('NoPackNode')
+
+      // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
+      app.graph.nodes = [coreNode, customNode, noPackNode]
+
+      // @ts-expect-error - Mocking partial NodeDefStore for testing.
+      mockUseNodeDefStore.mockReturnValue({
+        nodeDefsByName: {}
+      })
+
+      const { missingCoreNodes } = useMissingNodes()
+
+      expect(Object.keys(missingCoreNodes.value)).toHaveLength(1)
+      expect(missingCoreNodes.value['1.2.0']).toHaveLength(1)
+      expect(missingCoreNodes.value['1.2.0'][0].type).toBe('CoreNode')
+    })
+
+    it('returns empty object when no core nodes are missing', () => {
+      const registeredNode1 = createMockNode(
+        'RegisteredNode1',
+        'comfy-core',
+        '1.0.0'
+      )
+      const registeredNode2 = createMockNode(
+        'RegisteredNode2',
+        'comfy-core',
+        '1.1.0'
+      )
+
+      // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
+      app.graph.nodes = [registeredNode1, registeredNode2]
+
+      mockUseNodeDefStore.mockReturnValue({
+        nodeDefsByName: {
+          // @ts-expect-error - Creating minimal mock of ComfyNodeDefImpl for testing.
+          // Only including required properties for our test assertions.
+          RegisteredNode1: { name: 'RegisteredNode1' },
+          // @ts-expect-error - Creating minimal mock of ComfyNodeDefImpl for testing.
+          RegisteredNode2: { name: 'RegisteredNode2' }
+        }
+      })
+
+      const { missingCoreNodes } = useMissingNodes()
+
+      expect(Object.keys(missingCoreNodes.value)).toHaveLength(0)
+    })
+  })
+})

tests-ui/tests/composables/widgets/useRemoteWidget.test.ts

@@ -26,6 +26,22 @@ vi.mock('@/stores/settingStore', () => ({
   })
 }))
 
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/functional/useChainCallback', () => ({
+  useChainCallback: vi.fn((original, ...callbacks) => {
+    return function (this: any, ...args: any[]) {
+      original?.apply(this, args)
+      callbacks.forEach((cb: any) => cb.apply(this, args))
+    }
+  })
+}))
+
 const FIRST_BACKOFF = 1000 // backoff is 1s on first retry
 const DEFAULT_VALUE = 'Loading...'
 
@@ -40,7 +56,9 @@ function createMockConfig(overrides = {}): RemoteWidgetConfig {
 const createMockOptions = (inputOverrides = {}) => ({
   remoteConfig: createMockConfig(inputOverrides),
   defaultValue: DEFAULT_VALUE,
-  node: {} as any,
+  node: {
+    addWidget: vi.fn()
+  } as any,
   widget: {} as any
 })
 
@@ -499,4 +517,168 @@ describe('useRemoteWidget', () => {
       expect(data2).toEqual(DEFAULT_VALUE)
     })
   })
+
+  describe('auto-refresh on task completion', () => {
+    it('should add auto-refresh toggle widget', () => {
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Should add auto-refresh toggle widget
+      expect(mockNode.addWidget).toHaveBeenCalledWith(
+        'toggle',
+        'Auto-refresh after generation',
+        false,
+        expect.any(Function),
+        {
+          serialize: false
+        }
+      )
+    })
+
+    it('should register event listener when enabled', async () => {
+      const { api } = await import('@/scripts/api')
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Event listener should be registered immediately
+      expect(api.addEventListener).toHaveBeenCalledWith(
+        'execution_success',
+        expect.any(Function)
+      )
+    })
+
+    it('should refresh widget when workflow completes successfully', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {} as any
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget
+      })
+
+      // Spy on the refresh function that was added by useRemoteWidget
+      const refreshSpy = vi.spyOn(mockWidget, 'refresh')
+
+      // Get the toggle callback and enable auto-refresh
+      const toggleCallback = mockNode.addWidget.mock.calls.find(
+        (call) => call[0] === 'toggle'
+      )?.[3]
+      toggleCallback?.(true)
+
+      // Simulate workflow completion
+      executionSuccessHandler?.()
+
+      expect(refreshSpy).toHaveBeenCalled()
+    })
+
+    it('should not refresh when toggle is disabled', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {} as any
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget
+      })
+
+      // Spy on the refresh function that was added by useRemoteWidget
+      const refreshSpy = vi.spyOn(mockWidget, 'refresh')
+
+      // Toggle is disabled by default
+      // Simulate workflow completion
+      executionSuccessHandler?.()
+
+      expect(refreshSpy).not.toHaveBeenCalled()
+    })
+
+    it('should cleanup event listener on node removal', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: [],
+        onRemoved: undefined as any
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Simulate node removal
+      mockNode.onRemoved?.()
+
+      expect(api.removeEventListener).toHaveBeenCalledWith(
+        'execution_success',
+        executionSuccessHandler
+      )
+    })
+  })
 })

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

@@ -108,8 +108,17 @@ describe('useAlgoliaSearchProvider', () => {
           id: 'publisher-1',
           name: 'publisher-1'
         },
-        create_time: '2024-01-01T00:00:00Z',
-        comfy_nodes: ['LoadImage', 'SaveImage']
+        created_at: '2024-01-01T00:00:00Z',
+        comfy_nodes: ['LoadImage', 'SaveImage'],
+        category: undefined,
+        author: undefined,
+        tags: undefined,
+        github_stars: undefined,
+        supported_os: undefined,
+        supported_comfyui_version: undefined,
+        supported_comfyui_frontend_version: undefined,
+        supported_accelerators: undefined,
+        banner_url: undefined
       })
     })
 
@@ -253,7 +262,7 @@ describe('useAlgoliaSearchProvider', () => {
         version: '1.0.0',
         createdAt: '2024-01-15T10:00:00Z'
       },
-      create_time: '2024-01-01T10:00:00Z'
+      created_at: '2024-01-01T10:00:00Z'
     }
 
     it('should return correct values for each sort field', () => {

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

@@ -45,7 +45,7 @@ describe('useComfyRegistrySearchProvider', () => {
         search: 'test',
         comfy_node_search: undefined,
         limit: 10,
-        offset: 0
+        page: 1
       })
       expect(result.nodePacks).toEqual(mockResults.nodes)
       expect(result.querySuggestions).toEqual([])
@@ -68,7 +68,7 @@ describe('useComfyRegistrySearchProvider', () => {
         search: undefined,
         comfy_node_search: 'LoadImage',
         limit: 20,
-        offset: 20
+        page: 2
       })
       expect(result.nodePacks).toEqual(mockResults.nodes)
     })

tests-ui/tests/store/dialogStore.test.ts

@@ -0,0 +1,175 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+
+import { useDialogStore } from '@/stores/dialogStore'
+
+const MockComponent = defineComponent({
+  name: 'MockComponent',
+  template: '<div>Mock</div>'
+})
+
+describe('dialogStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('priority system', () => {
+    it('should create dialogs in correct priority order', () => {
+      const store = useDialogStore()
+
+      // Create dialogs with different priorities
+      store.showDialog({
+        key: 'low-priority',
+        component: MockComponent,
+        priority: 0
+      })
+
+      store.showDialog({
+        key: 'high-priority',
+        component: MockComponent,
+        priority: 10
+      })
+
+      store.showDialog({
+        key: 'medium-priority',
+        component: MockComponent,
+        priority: 5
+      })
+
+      store.showDialog({
+        key: 'no-priority',
+        component: MockComponent
+      })
+
+      // Check order: high (2) -> medium (1) -> low (0)
+      expect(store.dialogStack.map((d) => d.key)).toEqual([
+        'high-priority',
+        'medium-priority',
+        'no-priority',
+        'low-priority'
+      ])
+    })
+
+    it('should maintain priority order when rising dialogs', () => {
+      const store = useDialogStore()
+
+      // Create dialogs with different priorities
+      store.showDialog({
+        key: 'priority-2',
+        component: MockComponent,
+        priority: 2
+      })
+
+      store.showDialog({
+        key: 'priority-1',
+        component: MockComponent,
+        priority: 1
+      })
+
+      store.showDialog({
+        key: 'priority-0',
+        component: MockComponent,
+        priority: 0
+      })
+
+      // Try to rise the lowest priority dialog
+      store.riseDialog({ key: 'priority-0' })
+
+      // Should still be at the bottom because of its priority
+      expect(store.dialogStack.map((d) => d.key)).toEqual([
+        'priority-2',
+        'priority-1',
+        'priority-0'
+      ])
+
+      // Rise the medium priority dialog
+      store.riseDialog({ key: 'priority-1' })
+
+      // Should be above priority-0 but below priority-2
+      expect(store.dialogStack.map((d) => d.key)).toEqual([
+        'priority-2',
+        'priority-1',
+        'priority-0'
+      ])
+    })
+
+    it('should keep high priority dialogs on top when creating new lower priority dialogs', () => {
+      const store = useDialogStore()
+
+      // Create a high priority dialog (like manager progress)
+      store.showDialog({
+        key: 'manager-progress',
+        component: MockComponent,
+        priority: 10
+      })
+
+      store.showDialog({
+        key: 'dialog-2',
+        component: MockComponent,
+        priority: 0
+      })
+
+      store.showDialog({
+        key: 'dialog-3',
+        component: MockComponent
+        // Default priority is 1
+      })
+
+      // Manager progress should still be on top
+      expect(store.dialogStack[0].key).toBe('manager-progress')
+
+      // Check full order
+      expect(store.dialogStack.map((d) => d.key)).toEqual([
+        'manager-progress', // priority 2
+        'dialog-3', // priority 1 (default)
+        'dialog-2' // priority 0
+      ])
+    })
+  })
+
+  describe('basic dialog operations', () => {
+    it('should show and close dialogs', () => {
+      const store = useDialogStore()
+
+      store.showDialog({
+        key: 'test-dialog',
+        component: MockComponent
+      })
+
+      expect(store.dialogStack).toHaveLength(1)
+      expect(store.isDialogOpen('test-dialog')).toBe(true)
+
+      store.closeDialog({ key: 'test-dialog' })
+
+      expect(store.dialogStack).toHaveLength(0)
+      expect(store.isDialogOpen('test-dialog')).toBe(false)
+    })
+
+    it('should reuse existing dialog when showing with same key', () => {
+      const store = useDialogStore()
+
+      store.showDialog({
+        key: 'reusable-dialog',
+        component: MockComponent,
+        title: 'Original Title'
+      })
+
+      // First call should create the dialog
+      expect(store.dialogStack).toHaveLength(1)
+      expect(store.dialogStack[0].title).toBe('Original Title')
+
+      // Second call with same key should reuse the dialog
+      store.showDialog({
+        key: 'reusable-dialog',
+        component: MockComponent,
+        title: 'New Title' // This should be ignored
+      })
+
+      // Should still have only one dialog with original title
+      expect(store.dialogStack).toHaveLength(1)
+      expect(store.dialogStack[0].key).toBe('reusable-dialog')
+      expect(store.dialogStack[0].title).toBe('Original Title')
+    })
+  })
+})

tests-ui/tests/store/settingStore.test.ts

@@ -92,21 +92,6 @@ describe('useSettingStore', () => {
         'Setting test.setting must have a unique ID.'
       )
     })
-
-    it('should migrate deprecated values', () => {
-      const setting: SettingParams = {
-        id: 'test.setting',
-        name: 'test.setting',
-        type: 'text',
-        defaultValue: 'default',
-        migrateDeprecatedValue: (value: string) => value.toUpperCase()
-      }
-
-      store.settingValues['test.setting'] = 'oldvalue'
-      store.addSetting(setting)
-
-      expect(store.settingValues['test.setting']).toBe('OLDVALUE')
-    })
   })
 
   describe('get and set', () => {

tests-ui/tests/utils/migration/settingsMigration.test.ts

@@ -0,0 +1,271 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+import { useSettingStore } from '@/stores/settingStore'
+import {
+  SETTING_MIGRATIONS,
+  runSettingMigrations
+} from '@/utils/migration/settingsMigration'
+
+// Mock the api
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getSettings: vi.fn(),
+    storeSetting: vi.fn()
+  }
+}))
+
+// Mock the app
+vi.mock('@/scripts/app', () => ({
+  app: {
+    ui: {
+      settings: {
+        dispatchChange: vi.fn()
+      }
+    }
+  }
+}))
+
+describe('settingsMigration', () => {
+  let store: ReturnType<typeof useSettingStore>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useSettingStore()
+    vi.clearAllMocks()
+
+    // Mock the store methods to avoid needing registered settings
+    vi.spyOn(store, 'set').mockImplementation(async (key, value) => {
+      store.settingValues[key] = value
+      await api.storeSetting(key, value)
+    })
+
+    vi.spyOn(store, 'get').mockImplementation((key) => {
+      return store.settingValues[key]
+    })
+
+    vi.spyOn(store, 'exists').mockImplementation((key) => {
+      return key in store.settingValues
+    })
+  })
+
+  describe('Comfy.UseNewMenu migration', () => {
+    it('should migrate "Floating" value to "Top"', async () => {
+      // Setup initial state with old value
+      store.settingValues = { 'Comfy.UseNewMenu': 'Floating' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the value was updated
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Top')
+      expect(api.storeSetting).toHaveBeenCalledWith('Comfy.UseNewMenu', 'Top')
+    })
+
+    it('should not migrate when value is not "Floating"', () => {
+      // Setup with different value
+      store.settingValues = { 'Comfy.UseNewMenu': 'Bottom' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[0]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('Comfy.Keybinding.UnsetBindings migration', () => {
+    it('should migrate targetSelector to targetElementId', async () => {
+      // Setup with old format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' },
+          { targetSelector: '#other', key: 'b' }
+        ]
+      }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the migration
+      const result = store.settingValues['Comfy.Keybinding.UnsetBindings']
+      expect(result).toEqual([
+        { targetElementId: 'graph-canvas', key: 'a' },
+        { targetSelector: '#other', key: 'b' } // Only #graph-canvas is migrated
+      ])
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.Keybinding.UnsetBindings',
+        result
+      )
+    })
+
+    it('should delete targetSelector property after migration', async () => {
+      // Setup with old format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' }
+        ]
+      }
+
+      // Run migration
+      await SETTING_MIGRATIONS[1].migrate()
+
+      // Verify targetSelector is deleted and targetElementId is added
+      const result = store.settingValues['Comfy.Keybinding.UnsetBindings'][0]
+      expect(result).not.toHaveProperty('targetSelector')
+      expect(result).toHaveProperty('targetElementId', 'graph-canvas')
+      expect(result).toHaveProperty('key', 'a')
+    })
+
+    it('should not migrate when all keybindings use new format', () => {
+      // Setup with new format
+      store.settingValues = {
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetElementId: 'graph-canvas', key: 'a' }
+        ]
+      }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should handle empty keybindings array', () => {
+      // Empty array
+      store.settingValues = { 'Comfy.Keybinding.UnsetBindings': [] }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[1]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('Comfy.ColorPalette migration', () => {
+    it('should remove "custom_" prefix', async () => {
+      // Setup with old format
+      store.settingValues = { 'Comfy.ColorPalette': 'custom_mytheme' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(true)
+
+      // Run migration
+      await migration.migrate()
+
+      // Verify the migration
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.ColorPalette',
+        'mytheme'
+      )
+    })
+
+    it('should not migrate when value does not start with "custom_"', () => {
+      // Setup with value that doesn't need migration
+      store.settingValues = { 'Comfy.ColorPalette': 'dark' }
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(false)
+    })
+
+    it('should not migrate when setting does not exist', () => {
+      // No settings
+      store.settingValues = {}
+
+      // Check condition
+      const migration = SETTING_MIGRATIONS[2]
+      expect(migration.condition()).toBe(false)
+    })
+  })
+
+  describe('runSettingMigrations', () => {
+    it('should run all applicable migrations', async () => {
+      // Setup state that triggers all migrations
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Floating',
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetSelector: '#graph-canvas', key: 'a' }
+        ],
+        'Comfy.ColorPalette': 'custom_mytheme'
+      }
+
+      // Run all migrations
+      await runSettingMigrations()
+
+      // Verify all migrations ran
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Top')
+      expect(store.settingValues['Comfy.Keybinding.UnsetBindings']).toEqual([
+        { targetElementId: 'graph-canvas', key: 'a' }
+      ])
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+
+      // Verify all API calls were made
+      expect(api.storeSetting).toHaveBeenCalledTimes(3)
+    })
+
+    it('should only run migrations that meet their conditions', async () => {
+      // Setup state that only triggers one migration
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Bottom', // Won't migrate
+        'Comfy.ColorPalette': 'custom_mytheme' // Will migrate
+      }
+
+      // Run migrations
+      await runSettingMigrations()
+
+      // Verify only one migration ran
+      expect(store.settingValues['Comfy.UseNewMenu']).toBe('Bottom')
+      expect(store.settingValues['Comfy.ColorPalette']).toBe('mytheme')
+
+      // Only one API call
+      expect(api.storeSetting).toHaveBeenCalledTimes(1)
+      expect(api.storeSetting).toHaveBeenCalledWith(
+        'Comfy.ColorPalette',
+        'mytheme'
+      )
+    })
+
+    it('should handle no migrations needed', async () => {
+      // Setup state that doesn't trigger any migrations
+      store.settingValues = {
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.Keybinding.UnsetBindings': [
+          { targetElementId: 'graph-canvas', key: 'a' }
+        ],
+        'Comfy.ColorPalette': 'dark'
+      }
+
+      // Run migrations
+      await runSettingMigrations()
+
+      // No API calls should be made
+      expect(api.storeSetting).not.toHaveBeenCalled()
+    })
+  })
+})

vitest.config.ts

@@ -7,7 +7,10 @@ export default defineConfig({
     globals: true,
     environment: 'happy-dom',
     setupFiles: ['./vitest.setup.ts'],
-    include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: [
+      'tests-ui/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+      'src/components/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
+    ],
     coverage: {
       reporter: ['text', 'json', 'html']
     }