fix: feature flags and manager state handling (#5317) - merge conflict resolve (#5410)

Author: viva-jinyi

src/App.vue

@@ -15,10 +15,10 @@ 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 { useConflictDetection } from './composables/useConflictDetection'
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()

src/components/dialog/content/ErrorDialogContent.vue

@@ -105,7 +105,7 @@ const showContactSupport = async () => {
 
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
+    await systemStatsStore.refetchSystemStats()
   }
 
   try {

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -54,19 +54,12 @@
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
 import { computed } 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 { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useCommandStore } from '@/stores/commandStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
-import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -81,6 +74,7 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
 const comfyManagerStore = useComfyManagerStore()
+const managerState = useManagerState()
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -111,47 +105,21 @@ const uniqueNodes = computed(() => {
     })
 })
 
-const managerStateStore = useManagerStateStore()
-
 // Show manager buttons unless manager is disabled
 const showManagerButtons = computed(() => {
-  return managerStateStore.managerUIState !== ManagerUIState.DISABLED
+  return managerState.shouldShowManagerButtons.value
 })
 
 // Only show Install All button for NEW_UI (new manager with v4 support)
 const showInstallAllButton = computed(() => {
-  return managerStateStore.managerUIState === ManagerUIState.NEW_UI
+  return managerState.shouldShowInstallButton.value
 })
 
 const openManager = async () => {
-  const state = managerStateStore.managerUIState
-
-  switch (state) {
-    case ManagerUIState.DISABLED:
-      useDialogService().showSettingsDialog('extension')
-      break
-
-    case ManagerUIState.LEGACY_UI:
-      try {
-        await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
-      } catch {
-        // If legacy command doesn't exist, show toast
-        const { t } = useI18n()
-        useToastStore().add({
-          severity: 'error',
-          summary: t('g.error'),
-          detail: t('manager.legacyMenuNotAvailable'),
-          life: 3000
-        })
-      }
-      break
-
-    case ManagerUIState.NEW_UI:
-      useDialogService().showManagerDialog({
-        initialTab: ManagerTab.Missing
-      })
-      break
-  }
+  await managerState.openManager({
+    initialTab: ManagerTab.Missing,
+    showToastOnLegacyError: true
+  })
 }
 </script>
 

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -42,9 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
@@ -60,20 +59,11 @@ 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
-  }
-)
+// Use computed for reactive version tracking
+const currentComfyUIVersion = computed<string | null>(() => {
+  if (!hasMissingCoreNodes.value) return null
+  return systemStatsStore.systemStats?.system?.comfyui_version ?? null
+})
 
 const sortedMissingCoreNodes = computed(() => {
   return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {

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

@@ -34,7 +34,6 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import Tag from 'primevue/tag'
-import { onMounted } from 'vue'
 
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
@@ -44,10 +43,4 @@ import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
-
-onMounted(async () => {
-  if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
-  }
-})
 </script>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -142,11 +142,12 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
 import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
@@ -191,7 +192,6 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
-const dialogService = useDialogService()
 
 // Emits
 const emit = defineEmits<{
@@ -313,8 +313,11 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: PuzzleIcon,
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
-      action: () => {
-        dialogService.showManagerDialog()
+      action: async () => {
+        await useManagerState().openManager({
+          initialTab: ManagerTab.All,
+          showToastOnLegacyError: false
+        })
         emit('close')
       }
     },

src/components/topbar/CommandMenubar.vue

@@ -106,16 +106,13 @@ import { useI18n } from 'vue-i18n'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
-import { useDialogService } from '@/services/dialogService'
+import { useManagerState } from '@/composables/useManagerState'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
@@ -127,6 +124,8 @@ const dialogStore = useDialogStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
+const managerState = useManagerState()
+
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
@@ -159,29 +158,11 @@ const showSettings = (defaultPanel?: string) => {
   })
 }
 
-const managerStateStore = useManagerStateStore()
-
 const showManageExtensions = async () => {
-  const state = managerStateStore.managerUIState
-
-  switch (state) {
-    case ManagerUIState.DISABLED:
-      showSettings('extension')
-      break
-
-    case ManagerUIState.LEGACY_UI:
-      try {
-        await commandStore.execute('Comfy.Manager.Menu.ToggleVisibility')
-      } catch {
-        // If legacy command doesn't exist, fall back to extensions panel
-        showSettings('extension')
-      }
-      break
-
-    case ManagerUIState.NEW_UI:
-      useDialogService().showManagerDialog()
-      break
-  }
+  await managerState.openManager({
+    initialTab: ManagerTab.All,
+    showToastOnLegacyError: false
+  })
 }
 
 const extraMenuItems = computed<MenuItem[]>(() => [

src/composables/nodePack/useWorkflowPacks.ts

@@ -61,7 +61,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     const nodeDef = nodeDefStore.nodeDefsByName[nodeName]
     if (nodeDef?.nodeSource.type === 'core') {
       if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
+        await systemStatsStore.refetchSystemStats()
       }
       return {
         id: CORE_NODES_PACK_NAME,

src/composables/useConflictDetection.ts

@@ -1,3 +1,4 @@
+import { until } from '@vueuse/core'
 import { uniqBy } from 'es-toolkit/compat'
 import { computed, getCurrentInstance, onUnmounted, readonly, ref } from 'vue'
 
@@ -78,9 +79,8 @@ export function useConflictDetection() {
     try {
       // Get system stats from store (primary source of system information)
       const systemStatsStore = useSystemStatsStore()
-      if (!systemStatsStore.systemStats) {
-        await systemStatsStore.fetchSystemStats()
-      }
+      // Wait for systemStats to be initialized if not already
+      await until(systemStatsStore.isInitialized)
 
       // Fetch version information from backend (with error resilience)
       const [frontendVersion] = await Promise.allSettled([
@@ -127,7 +127,7 @@ export function useConflictDetection() {
       }
 
       systemEnvironment.value = environment
-      console.log(
+      console.debug(
         '[ConflictDetection] System environment detection completed:',
         environment
       )
@@ -427,7 +427,7 @@ export function useConflictDetection() {
         Object.entries(bulkResult).forEach(([packageId, failInfo]) => {
           if (failInfo !== null) {
             importFailures[packageId] = failInfo
-            console.log(
+            console.debug(
               `[ConflictDetection] Import failure found for ${packageId}:`,
               failInfo
             )
@@ -500,7 +500,7 @@ export function useConflictDetection() {
    */
   async function performConflictDetection(): Promise<ConflictDetectionResponse> {
     if (isDetecting.value) {
-      console.log('[ConflictDetection] Already detecting, skipping')
+      console.debug('[ConflictDetection] Already detecting, skipping')
       return {
         success: false,
         error_message: 'Already detecting conflicts',
@@ -556,7 +556,10 @@ export function useConflictDetection() {
       detectionSummary.value = summary
       lastDetectionTime.value = new Date().toISOString()
 
-      console.log('[ConflictDetection] Conflict detection completed:', summary)
+      console.debug(
+        '[ConflictDetection] Conflict detection completed:',
+        summary
+      )
 
       // Store conflict results for later UI display
       // Dialog will be shown based on specific events, not on app mount
@@ -568,7 +571,7 @@ export function useConflictDetection() {
         // Merge conflicts for packages with the same name
         const mergedConflicts = mergeConflictsByPackageName(conflictedResults)
 
-        console.log(
+        console.debug(
           '[ConflictDetection] Conflicts detected (stored for UI):',
           mergedConflicts
         )
@@ -632,11 +635,22 @@ export function useConflictDetection() {
   /**
    * Error-resilient initialization (called on app mount).
    * Async function that doesn't block UI setup.
-   * Ensures proper order: installed -> system_stats -> versions bulk -> import_fail_info_bulk
+   * Ensures proper order: system_stats -> manager state -> installed -> versions bulk -> import_fail_info_bulk
    */
   async function initializeConflictDetection(): Promise<void> {
     try {
-      // Simply perform conflict detection
+      // Check if manager is new Manager before proceeding
+      const { useManagerState } = await import('@/composables/useManagerState')
+      const managerState = useManagerState()
+
+      if (!managerState.isNewManagerUI.value) {
+        console.debug(
+          '[ConflictDetection] Manager is not new Manager, skipping conflict detection'
+        )
+        return
+      }
+
+      // Manager is new Manager, perform conflict detection
       // The useInstalledPacks will handle fetching installed list if needed
       await performConflictDetection()
     } catch (error) {
@@ -671,13 +685,13 @@ export function useConflictDetection() {
    * Check if conflicts should trigger modal display after "What's New" dismissal
    */
   async function shouldShowConflictModalAfterUpdate(): Promise<boolean> {
-    console.log(
+    console.debug(
       '[ConflictDetection] Checking if conflict modal should show after update...'
     )
 
     // Ensure conflict detection has run
     if (detectionResults.value.length === 0) {
-      console.log(
+      console.debug(
         '[ConflictDetection] No detection results, running conflict detection...'
       )
       await performConflictDetection()
@@ -689,7 +703,7 @@ export function useConflictDetection() {
     const hasActualConflicts = hasConflicts.value
     const canShowModal = acknowledgment.shouldShowConflictModal.value
 
-    console.log('[ConflictDetection] Modal check:', {
+    console.debug('[ConflictDetection] Modal check:', {
       hasConflicts: hasActualConflicts,
       canShowModal: canShowModal,
       conflictedPackagesCount: conflictedPackages.value.length