Complete PR #4654 integration with manager migration

✅ Successfully integrated conflict detection with task queue system
✅ Both systems work together seamlessly
✅ All merge conflicts resolved
✅ Generated types and locales properly merged

Note: Test updates needed for API changes (to be addressed in semantic review)

Author: christian-byrne

.github/workflows/update-manager-types.yaml

@@ -121,4 +121,4 @@ jobs:
           labels: Manager
           delete-branch: true
           add-paths: |
-            src/types/generatedManagerTypes.ts
+            src/types/generatedManagerTypes.ts

src/App.vue

@@ -15,12 +15,14 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
+const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 const handleKey = (e: KeyboardEvent) => {
   workspaceStore.shiftDown = e.shiftKey
@@ -47,5 +49,9 @@ onMounted(() => {
   if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)
   }
+
+  // Initialize conflict detection in background
+  // This runs async and doesn't block UI setup
+  void conflictDetection.initializeConflictDetection()
 })
 </script>

src/components/dialog/GlobalDialog.vue

@@ -29,7 +29,7 @@
     />
 
     <template v-if="item.footerComponent" #footer>
-      <component :is="item.footerComponent" />
+      <component :is="item.footerComponent" v-bind="item.footerProps" />
     </template>
   </Dialog>
 </template>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -34,9 +34,11 @@
   <div v-if="showManagerButtons" class="flex justify-end py-3">
     <PackInstallButton
       v-if="showInstallAllButton"
+      size="md"
       :disabled="
         isLoading || !!error || missingNodePacks.length === 0 || isInstalling
       "
+      :is-loading="isLoading"
       :node-packs="missingNodePacks"
       :label="
         isLoading
@@ -51,12 +53,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -79,6 +82,7 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
 const comfyManagerStore = useComfyManagerStore()
+const isLegacyManager = ref(false)
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -151,6 +155,13 @@ const openManager = async () => {
       break
   }
 }
+
+onMounted(async () => {
+  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
+  if (isLegacyResponse?.is_legacy_manager_ui) {
+    isLegacyManager.value = true
+  }
+})
 </script>
 
 <style scoped>

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

@@ -26,6 +26,35 @@
         }"
       >
         <div class="px-6 flex flex-col h-full">
+          <!-- Conflict Warning Banner -->
+          <div
+            v-if="shouldShowManagerBanner"
+            class="bg-yellow-600 bg-opacity-20 border border-yellow-400 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+          >
+            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
+            <div class="flex flex-col gap-2 flex-1">
+              <p class="text-sm font-bold m-0">
+                {{ $t('manager.conflicts.warningBanner.title') }}
+              </p>
+              <p class="text-xs m-0">
+                {{ $t('manager.conflicts.warningBanner.message') }}
+              </p>
+              <p
+                class="text-sm font-bold m-0 cursor-pointer"
+                @click="onClickWarningLink"
+              >
+                {{ $t('manager.conflicts.warningBanner.button') }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="absolute top-2 right-2 w-6 h-6 border-none outline-none bg-transparent flex items-center justify-center text-yellow-600 rounded transition-colors"
+              :aria-label="$t('g.close')"
+              @click="dismissWarningBanner"
+            >
+              <i class="pi pi-times text-sm"></i>
+            </button>
+          </div>
           <RegistrySearchBar
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
@@ -70,7 +99,9 @@
                     :is-selected="
                       selectedNodePacks.some((pack) => pack.id === item.id)
                     "
-                    @click.stop="(event) => selectNodePack(item, event)"
+                    @click.stop="
+                      (event: MouseEvent) => selectNodePack(item, event)
+                    "
                   />
                 </template>
               </VirtualGrid>
@@ -102,7 +133,8 @@ import {
   onMounted,
   onUnmounted,
   ref,
-  watch
+  watch,
+  watchEffect
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -120,6 +152,7 @@ import { useManagerStatePersistence } from '@/composables/manager/useManagerStat
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
@@ -134,12 +167,13 @@ const { initialTab } = defineProps<{
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
+const conflictAcknowledgment = useConflictAcknowledgment()
 const persistedState = useManagerStatePersistence()
 const initialState = persistedState.loadStoredState()
 
 const GRID_STYLE = {
   display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(19rem, 1fr))',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(17rem, 1fr))',
   padding: '0.5rem',
   gap: '1.5rem'
 } as const
@@ -150,6 +184,13 @@ const {
   toggle: toggleSideNav
 } = useResponsiveCollapse()
 
+// Use conflict acknowledgment state from composable
+const {
+  shouldShowManagerBanner,
+  dismissWarningBanner,
+  dismissRedDotNotification
+} = conflictAcknowledgment
+
 const tabs = ref<TabItem[]>([
   { id: ManagerTab.All, label: t('g.all'), icon: 'pi-list' },
   { id: ManagerTab.Installed, label: t('g.installed'), icon: 'pi-box' },
@@ -313,6 +354,13 @@ watch([isAllTab, searchResults], () => {
   displayPacks.value = searchResults.value
 })
 
+const onClickWarningLink = () => {
+  window.open(
+    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    '_blank'
+  )
+}
+
 const onResultsChange = () => {
   switch (selectedTab.value?.id) {
     case ManagerTab.Installed:
@@ -473,6 +521,10 @@ watch([searchQuery, selectedTab], () => {
   }
 })
 
+watchEffect(() => {
+  dismissRedDotNotification()
+})
+
 onBeforeUnmount(() => {
   persistedState.persistState({
     selectedTabId: selectedTab.value?.id,