feat: Complete manager migration with conflict detection integration

This completes the integration of ComfyUI Manager migration features with enhanced conflict detection system. Key changes include:

## Manager Migration & Conflict Detection
- Integrated PR #4637 (4-state manager restart workflow) with PR #4654 (comprehensive conflict detection)
- Fixed conflict detection to properly check `latest_version` fields for registry API compatibility
- Added conflict detection to PackCardFooter and InfoPanelHeader for comprehensive warning coverage
- Merged missing English locale translations from main branch with proper conflict resolution

## Bug Fixes
- Fixed double API path issue (`/api/v2/v2/`) in manager service routes
- Corrected PackUpdateButton payload structure and service method calls
- Enhanced conflict detection system to handle both installed and registry package structures

## Technical Improvements
- Updated conflict detection composable to handle both installed and registry package structures
- Enhanced manager service with proper error handling and route corrections
- Improved type safety across manager components with proper TypeScript definitions

Author: christian-byrne

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

@@ -93,15 +93,33 @@ import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'
 
+type ManagerChannel = ManagerComponents['schemas']['ManagerChannel']
+type ManagerDatabaseSource =
+  ManagerComponents['schemas']['ManagerDatabaseSource']
+type SelectedVersion = ManagerComponents['schemas']['SelectedVersion']
+
+// Enum values for runtime use
+const SelectedVersionValues = {
+  LATEST: 'latest' as SelectedVersion,
+  NIGHTLY: 'nightly' as SelectedVersion
+}
+
+const ManagerChannelValues = {
+  STABLE: 'stable' as ManagerChannel,
+  DEV: 'dev' as ManagerChannel
+}
+
+const ManagerDatabaseSourceValues = {
+  CACHE: 'cache' as ManagerDatabaseSource,
+  REMOTE: 'remote' as ManagerDatabaseSource,
+  LOCAL: 'local' as ManagerDatabaseSource
+}
+
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
@@ -118,19 +136,21 @@ const { checkNodeCompatibility } = useConflictDetection()
 
 const isQueueing = ref(false)
 
-const selectedVersion = ref<string>(SelectedVersion.LATEST)
+const selectedVersion = ref<string>(SelectedVersionValues.LATEST)
 onMounted(() => {
-  const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
+  const initialVersion =
+    getInitialSelectedVersion() ?? SelectedVersionValues.LATEST
   selectedVersion.value =
     // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
+    isSemVer(initialVersion) ? initialVersion : SelectedVersionValues.NIGHTLY
 })
 
 const getInitialSelectedVersion = () => {
   if (!nodePack.id) return
 
   // If unclaimed, set selected version to nightly
-  if (nodePack.publisher?.name === 'Unclaimed') return SelectedVersion.NIGHTLY
+  if (nodePack.publisher?.name === 'Unclaimed')
+    return SelectedVersionValues.NIGHTLY
 
   // If node pack is installed, set selected version to the installed version
   if (managerStore.isPackInstalled(nodePack.id))
@@ -180,15 +200,15 @@ const onNodePackChange = async () => {
   // Add Latest option
   const defaultVersions = [
     {
-      value: SelectedVersion.LATEST,
+      value: SelectedVersionValues.LATEST,
       label: latestLabel
     }
   ]
 
   // Add Nightly option if there is a non-empty `repository` field
   if (nodePack.repository?.length) {
     defaultVersions.push({
-      value: SelectedVersion.NIGHTLY,
+      value: SelectedVersionValues.NIGHTLY,
       label: t('manager.nightlyVersion')
     })
   }
@@ -222,8 +242,8 @@ const handleSubmit = async () => {
   await managerStore.installPack.call({
     id: nodePack.id,
     repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: ManagerDatabaseSource.CACHE,
+    channel: ManagerChannelValues.STABLE,
+    mode: ManagerDatabaseSourceValues.CACHE,
     version: actualVersion,
     selected_version: selectedVersion.value
   })

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

@@ -38,8 +38,8 @@ import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgme
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 
@@ -108,8 +108,12 @@ const handleEnable = () => {
   }
   return enablePack.call({
     id: nodePack.id,
-    version: version.value ?? ('latest' as ManagerComponents['schemas']['SelectedVersion']),
-    selected_version: version.value ?? ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    version:
+      version.value ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    selected_version:
+      version.value ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
     repository: nodePack.repository ?? '',
     channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
     mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
@@ -123,7 +127,9 @@ const handleDisable = () => {
   }
   return disablePack({
     id: nodePack.id,
-    version: version.value ?? ('latest' as ManagerComponents['schemas']['SelectedVersion'])
+    version:
+      version.value ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
   })
 }
 

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

@@ -33,11 +33,11 @@ import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 import {
   type ConflictDetail,
   ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 
@@ -123,7 +123,7 @@ const installAllPacks = async () => {
     })
     return
   }
-  
+
   // No conflicts or conflicts acknowledged - proceed with installation
   const uninstalledPacks = nodePacks.filter(
     (pack) => !managerStore.isPackInstalled(pack.id)

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

@@ -1,21 +1,26 @@
 <template>
-  <PackActionButton
+  <IconTextButton
     v-bind="$attrs"
-    variant="black"
+    type="transparent"
     :label="$t('manager.updateAll')"
-    :loading="isUpdating"
-    :loading-message="$t('g.updating')"
-    @action="updateAllPacks"
-  />
+    :border="true"
+    size="sm"
+    :disabled="isUpdating"
+    @click="updateAllPacks"
+  >
+    <template v-if="isUpdating" #icon>
+      <DotSpinner duration="1s" :size="12" />
+    </template>
+  </IconTextButton>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 
@@ -27,16 +32,10 @@ const isUpdating = ref<boolean>(false)
 
 const managerStore = useComfyManagerStore()
 
-const createPayload = (
-  updateItem: NodePack
-): ManagerComponents['schemas']['ManagerPackInfo'] => {
-  if (!updateItem.id) {
-    throw new Error('Node ID is required for update')
-  }
-
+const createPayload = (updateItem: NodePack) => {
   return {
-    id: updateItem.id,
-    version: updateItem.latest_version?.version || 'latest'
+    id: updateItem.id!,
+    version: updateItem.latest_version!.version!
   }
 }
 
@@ -53,21 +52,16 @@ const updateAllPacks = async () => {
     console.warn('No packs provided for update')
     return
   }
-
   isUpdating.value = true
-
   const updatablePacks = nodePacks.filter((pack) =>
     managerStore.isPackInstalled(pack.id)
   )
-
   if (!updatablePacks.length) {
     console.info('No installed packs available for update')
     isUpdating.value = false
     return
   }
-
   console.info(`Starting update of ${updatablePacks.length} packs`)
-
   try {
     await Promise.all(updatablePacks.map(updatePack))
     managerStore.updatePack.clear()

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

@@ -28,7 +28,8 @@
           size="md"
           :is-installing="isInstalling"
           :node-packs="nodePacks"
-          :has-conflict="hasConflict"
+          :has-conflict="hasConflict || computedHasConflict"
+          :conflict-info="conflictInfo"
         />
       </slot>
     </div>
@@ -48,8 +49,10 @@ import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 
 const { nodePacks, hasConflict } = defineProps<{
@@ -79,4 +82,23 @@ const isInstalling = computed(() => {
   if (!nodePacks?.length) return false
   return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
 })
+
+// Add conflict detection for install button dialog
+const { checkNodeCompatibility } = useConflictDetection()
+
+// Compute conflict info for all node packs
+const conflictInfo = computed<ConflictDetail[]>(() => {
+  if (!nodePacks?.length) return []
+
+  const allConflicts: ConflictDetail[] = []
+  for (const nodePack of nodePacks) {
+    const compatibilityCheck = checkNodeCompatibility(nodePack)
+    if (compatibilityCheck.conflicts) {
+      allConflicts.push(...compatibilityCheck.conflicts)
+    }
+  }
+  return allConflicts
+})
+
+const computedHasConflict = computed(() => conflictInfo.value.length > 0)
 </script>

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

@@ -10,6 +10,8 @@
       v-if="!isInstalled"
       :node-packs="[nodePack]"
       :is-installing="isInstalling"
+      :has-conflict="hasConflicts"
+      :conflict-info="conflictInfo"
     />
     <PackEnableToggle v-else :node-pack="nodePack" />
   </div>
@@ -21,9 +23,11 @@ import { useI18n } from 'vue-i18n'
 
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
@@ -38,4 +42,16 @@ const { n } = useI18n()
 const formattedDownloads = computed(() =>
   nodePack.downloads ? n(nodePack.downloads) : ''
 )
+
+// Add conflict detection for the card button
+const { checkNodeCompatibility } = useConflictDetection()
+
+// Check for conflicts with this specific node pack
+const conflictInfo = computed<ConflictDetail[]>(() => {
+  if (!nodePack) return []
+  const compatibilityCheck = checkNodeCompatibility(nodePack)
+  return compatibilityCheck.conflicts || []
+})
+
+const hasConflicts = computed(() => conflictInfo.value.length > 0)
 </script>

src/composables/useConflictDetection.ts

@@ -712,16 +712,27 @@ export function useConflictDetection() {
     const conflicts: ConflictDetail[] = []
 
     // Check OS compatibility using centralized function
-    if (node.supported_os && node.supported_os.length > 0) {
+    // First try latest_version (most accurate), then fallback to top level
+    const supportedOS =
+      ('latest_version' in node ? node.latest_version?.supported_os : null) ||
+      node.supported_os
+
+    if (supportedOS && supportedOS.length > 0) {
       const currentOS = systemStats.system?.os || 'unknown'
-      const osConflict = checkOSConflict(node.supported_os, currentOS)
+      const osConflict = checkOSConflict(supportedOS, currentOS)
       if (osConflict) {
         conflicts.push(osConflict)
       }
     }
 
     // Check accelerator compatibility using centralized function
-    if (node.supported_accelerators && node.supported_accelerators.length > 0) {
+    // First try latest_version (most accurate), then fallback to top level
+    const supportedAccelerators =
+      ('latest_version' in node
+        ? node.latest_version?.supported_accelerators
+        : null) || node.supported_accelerators
+
+    if (supportedAccelerators && supportedAccelerators.length > 0) {
       // Extract available accelerators from system stats
       const acceleratorInfo = extractAcceleratorInfo(systemStats)
       const availableAccelerators: Node['supported_accelerators'] = []
@@ -733,7 +744,7 @@ export function useConflictDetection() {
       })
 
       const acceleratorConflict = checkAcceleratorConflict(
-        node.supported_accelerators,
+        supportedAccelerators,
         availableAccelerators
       )
       if (acceleratorConflict) {
@@ -742,13 +753,19 @@ export function useConflictDetection() {
     }
 
     // Check ComfyUI version compatibility
-    if (node.supported_comfyui_version) {
+    // First try latest_version (most accurate), then fallback to top level
+    const comfyuiVersionRequirement =
+      ('latest_version' in node
+        ? node.latest_version?.supported_comfyui_version
+        : null) || node.supported_comfyui_version
+
+    if (comfyuiVersionRequirement) {
       const currentComfyUIVersion = systemStats.system?.comfyui_version
       if (currentComfyUIVersion && currentComfyUIVersion !== 'unknown') {
         const versionConflict = utilCheckVersionCompatibility(
           'comfyui_version',
           currentComfyUIVersion,
-          node.supported_comfyui_version
+          comfyuiVersionRequirement
         )
         if (versionConflict) {
           conflicts.push(versionConflict)
@@ -757,13 +774,19 @@ export function useConflictDetection() {
     }
 
     // Check ComfyUI Frontend version compatibility
-    if (node.supported_comfyui_frontend_version) {
+    // First try latest_version (most accurate), then fallback to top level
+    const frontendVersionRequirement =
+      ('latest_version' in node
+        ? node.latest_version?.supported_comfyui_frontend_version
+        : null) || node.supported_comfyui_frontend_version
+
+    if (frontendVersionRequirement) {
       const currentFrontendVersion = config.app_version
       if (currentFrontendVersion && currentFrontendVersion !== 'unknown') {
         const versionConflict = utilCheckVersionCompatibility(
           'frontend_version',
           currentFrontendVersion,
-          node.supported_comfyui_frontend_version
+          frontendVersionRequirement
         )
         if (versionConflict) {
           conflicts.push(versionConflict)