[refactor] Migrate manager code from src/composables to src/workbench/extensions/manager (2/2) (#5722)

## Summary

Continuation of

- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5662

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5722-refactor-Migrate-manager-code-from-src-composables-to-src-workbench-extensions-manag-2766d73d36508165a4f5e1940967248f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/workbench/extensions/manager/composables/nodePack/useInstalledPacks.ts

@@ -0,0 +1,83 @@
+import { whenever } from '@vueuse/core'
+import { computed, onUnmounted, ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useNodePacks } from '@/workbench/extensions/manager/composables/nodePack/useNodePacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
+  const comfyManagerStore = useComfyManagerStore()
+
+  // Flag to prevent duplicate fetches during initialization
+  const isInitializing = ref(false)
+  const lastFetchedIds = ref<string>('')
+
+  const installedPackIds = computed(() =>
+    Array.from(comfyManagerStore.installedPacksIds)
+  )
+
+  const { startFetch, cleanup, error, isLoading, nodePacks, isReady } =
+    useNodePacks(installedPackIds, options)
+
+  const filterInstalledPack = (packs: components['schemas']['Node'][]) =>
+    packs.filter((pack) => comfyManagerStore.isPackInstalled(pack.id))
+
+  const startFetchInstalled = async () => {
+    // Prevent duplicate calls during initialization
+    if (isInitializing.value) {
+      return
+    }
+
+    isInitializing.value = true
+    try {
+      if (comfyManagerStore.installedPacksIds.size === 0) {
+        await comfyManagerStore.refreshInstalledList()
+      }
+      await startFetch()
+    } finally {
+      isInitializing.value = false
+    }
+  }
+
+  // When installedPackIds changes, we need to update the nodePacks
+  // But only if the IDs actually changed (not just array reference)
+  whenever(installedPackIds, async (newIds) => {
+    const newIdsStr = newIds.sort().join(',')
+    if (newIdsStr !== lastFetchedIds.value && !isInitializing.value) {
+      lastFetchedIds.value = newIdsStr
+      await startFetch()
+    }
+  })
+
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  // Create a computed property that provides installed pack info with versions
+  const installedPacksWithVersions = computed(() => {
+    const result: Array<{ id: string; version: string }> = []
+
+    for (const pack of Object.values(comfyManagerStore.installedPacks)) {
+      const id = pack.cnr_id || pack.aux_id
+      if (id) {
+        result.push({
+          id,
+          version: pack.ver ?? ''
+        })
+      }
+    }
+
+    return result
+  })
+
+  return {
+    error,
+    isLoading,
+    isReady,
+    installedPacks: nodePacks,
+    installedPacksWithVersions,
+    startFetchInstalled,
+    filterInstalledPack
+  }
+}

src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts

@@ -0,0 +1,77 @@
+import { groupBy } from 'es-toolkit/compat'
+import { computed, onMounted } from 'vue'
+
+import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+/**
+ * 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 = collectAllNodes(app.graph, 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/workbench/extensions/manager/composables/nodePack/useNodePacks.ts

@@ -0,0 +1,43 @@
+import { get, useAsyncState } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+/**
+ * Handles fetching node packs from the registry given a list of node pack IDs
+ */
+export const useNodePacks = (
+  packsIds: string[] | Ref<string[]>,
+  options: UseNodePacksOptions = {}
+) => {
+  const { immediate = false } = options
+  const { getPacksByIds } = useComfyRegistryStore()
+
+  const fetchPacks = () => getPacksByIds.call(get(packsIds).filter(Boolean))
+
+  const {
+    isReady,
+    isLoading,
+    error,
+    execute,
+    state: nodePacks
+  } = useAsyncState(fetchPacks, [], {
+    immediate
+  })
+
+  const cleanup = () => {
+    getPacksByIds.cancel()
+    isReady.value = false
+    isLoading.value = false
+  }
+
+  return {
+    error,
+    isLoading,
+    isReady,
+    nodePacks,
+    startFetch: execute,
+    cleanup
+  }
+}

src/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus.ts

@@ -0,0 +1,35 @@
+import { compare, valid } from 'semver'
+import { computed } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+export const usePackUpdateStatus = (
+  nodePack: components['schemas']['Node']
+) => {
+  const { isPackInstalled, getInstalledPackVersion } = useComfyManagerStore()
+
+  const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+  const installedVersion = computed(() =>
+    getInstalledPackVersion(nodePack.id ?? '')
+  )
+  const latestVersion = computed(() => nodePack.latest_version?.version)
+
+  const isNightlyPack = computed(
+    () => !!installedVersion.value && !valid(installedVersion.value)
+  )
+
+  const isUpdateAvailable = computed(() => {
+    if (!isInstalled.value || isNightlyPack.value || !latestVersion.value) {
+      return false
+    }
+    return compare(latestVersion.value, installedVersion.value) > 0
+  })
+
+  return {
+    isUpdateAvailable,
+    isNightlyPack,
+    installedVersion,
+    latestVersion
+  }
+}

src/workbench/extensions/manager/composables/nodePack/usePacksSelection.ts

@@ -0,0 +1,51 @@
+import { type Ref, computed } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+type NodePack = components['schemas']['Node']
+
+type SelectionState = 'all-installed' | 'none-installed' | 'mixed'
+
+/**
+ * Composable for managing multi-package selection states
+ * Handles installation status tracking and selection state determination
+ */
+export function usePacksSelection(nodePacks: Ref<NodePack[]>) {
+  const managerStore = useComfyManagerStore()
+
+  const installedPacks = computed(() =>
+    nodePacks.value.filter((pack) => managerStore.isPackInstalled(pack.id))
+  )
+
+  const notInstalledPacks = computed(() =>
+    nodePacks.value.filter((pack) => !managerStore.isPackInstalled(pack.id))
+  )
+
+  const isAllInstalled = computed(
+    () => installedPacks.value.length === nodePacks.value.length
+  )
+
+  const isNoneInstalled = computed(
+    () => notInstalledPacks.value.length === nodePacks.value.length
+  )
+
+  const isMixed = computed(
+    () => installedPacks.value.length > 0 && notInstalledPacks.value.length > 0
+  )
+
+  const selectionState = computed<SelectionState>(() => {
+    if (isAllInstalled.value) return 'all-installed'
+    if (isNoneInstalled.value) return 'none-installed'
+    return 'mixed'
+  })
+
+  return {
+    installedPacks,
+    notInstalledPacks,
+    isAllInstalled,
+    isNoneInstalled,
+    isMixed,
+    selectionState
+  }
+}

src/workbench/extensions/manager/composables/nodePack/usePacksStatus.ts

@@ -0,0 +1,63 @@
+import { type Ref, computed } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+
+type NodePack = components['schemas']['Node']
+type NodeStatus = components['schemas']['NodeStatus']
+type NodeVersionStatus = components['schemas']['NodeVersionStatus']
+
+const STATUS_PRIORITY = [
+  'NodeStatusBanned',
+  'NodeVersionStatusBanned',
+  'NodeStatusDeleted',
+  'NodeVersionStatusDeleted',
+  'NodeVersionStatusFlagged',
+  'NodeVersionStatusPending',
+  'NodeStatusActive',
+  'NodeVersionStatusActive'
+] as const
+
+/**
+ * Composable for managing package status with priority
+ * Handles import failures and determines the most important status
+ */
+export function usePacksStatus(nodePacks: Ref<NodePack[]>) {
+  const conflictDetectionStore = useConflictDetectionStore()
+
+  const hasImportFailed = computed(() => {
+    return nodePacks.value.some((pack) => {
+      if (!pack.id) return false
+      const conflicts = conflictDetectionStore.getConflictsForPackageByID(
+        pack.id
+      )
+      return (
+        conflicts?.conflicts?.some((c) => c.type === 'import_failed') || false
+      )
+    })
+  })
+
+  const overallStatus = computed<NodeStatus | NodeVersionStatus>(() => {
+    // Check for import failed first (highest priority for installed packages)
+    if (hasImportFailed.value) {
+      // Import failed doesn't have a specific status enum, so we return active
+      // but the PackStatusMessage will handle it via hasImportFailed prop
+      return 'NodeVersionStatusActive' as NodeVersionStatus
+    }
+
+    // Find the highest priority status from all packages
+    for (const priorityStatus of STATUS_PRIORITY) {
+      if (nodePacks.value.some((pack) => pack.status === priorityStatus)) {
+        return priorityStatus as NodeStatus | NodeVersionStatus
+      }
+    }
+
+    // Default to active if no specific status found
+    return 'NodeVersionStatusActive' as NodeVersionStatus
+  })
+
+  return {
+    hasImportFailed,
+    overallStatus
+  }
+}

src/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes.ts

@@ -0,0 +1,82 @@
+import { compare, valid } from 'semver'
+import { computed, onMounted } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+/**
+ * Composable to find NodePacks that have updates available
+ * Uses the same filtering approach as ManagerDialogContent.vue
+ * Automatically fetches installed pack data when initialized
+ */
+export const useUpdateAvailableNodes = () => {
+  const comfyManagerStore = useComfyManagerStore()
+  const { installedPacks, isLoading, error, startFetchInstalled } =
+    useInstalledPacks()
+
+  // Check if a pack has updates available (same logic as usePackUpdateStatus)
+  const isOutdatedPack = (pack: components['schemas']['Node']) => {
+    const isInstalled = comfyManagerStore.isPackInstalled(pack?.id)
+    if (!isInstalled) return false
+
+    const installedVersion = comfyManagerStore.getInstalledPackVersion(
+      pack.id ?? ''
+    )
+    const latestVersion = pack.latest_version?.version
+
+    const isNightlyPack = !!installedVersion && !valid(installedVersion)
+
+    if (isNightlyPack || !latestVersion) {
+      return false
+    }
+
+    return compare(latestVersion, installedVersion) > 0
+  }
+
+  // Same filtering logic as ManagerDialogContent.vue
+  const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+    packs.filter(isOutdatedPack)
+
+  // Filter only outdated packs from installed packs
+  const updateAvailableNodePacks = computed(() => {
+    if (!installedPacks.value.length) return []
+    return filterOutdatedPacks(installedPacks.value)
+  })
+
+  // Filter only enabled outdated packs
+  const enabledUpdateAvailableNodePacks = computed(() => {
+    return updateAvailableNodePacks.value.filter((pack) =>
+      comfyManagerStore.isPackEnabled(pack.id)
+    )
+  })
+
+  // Check if there are any enabled outdated packs
+  const hasUpdateAvailable = computed(() => {
+    return enabledUpdateAvailableNodePacks.value.length > 0
+  })
+
+  // Check if there are disabled packs with updates
+  const hasDisabledUpdatePacks = computed(() => {
+    return (
+      updateAvailableNodePacks.value.length >
+      enabledUpdateAvailableNodePacks.value.length
+    )
+  })
+
+  // Automatically fetch installed pack data when composable is used
+  onMounted(async () => {
+    if (!installedPacks.value.length && !isLoading.value) {
+      await startFetchInstalled()
+    }
+  })
+
+  return {
+    updateAvailableNodePacks,
+    enabledUpdateAvailableNodePacks,
+    hasUpdateAvailable,
+    hasDisabledUpdatePacks,
+    isLoading,
+    error
+  }
+}

src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts

@@ -0,0 +1,156 @@
+import { computed, onUnmounted, ref } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { app } from '@/scripts/app'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useNodePacks } from '@/workbench/extensions/manager/composables/nodePack/useNodePacks'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+type WorkflowPack = {
+  id:
+    | ComfyWorkflowJSON['nodes'][number]['properties']['cnr_id']
+    | ComfyWorkflowJSON['nodes'][number]['properties']['aux_id']
+  version: ComfyWorkflowJSON['nodes'][number]['properties']['ver']
+}
+
+const CORE_NODES_PACK_NAME = 'comfy-core'
+
+/**
+ * Handles parsing node pack metadata from nodes on the graph and fetching the
+ * associated node packs from the registry
+ */
+export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
+  const nodeDefStore = useNodeDefStore()
+  const systemStatsStore = useSystemStatsStore()
+  const { inferPackFromNodeName } = useComfyRegistryStore()
+
+  const workflowPacks = ref<WorkflowPack[]>([])
+
+  const getWorkflowNodePackId = (node: LGraphNode): string | undefined => {
+    if (typeof node.properties?.cnr_id === 'string') {
+      return node.properties.cnr_id
+    }
+    if (typeof node.properties?.aux_id === 'string') {
+      return node.properties.aux_id
+    }
+    return undefined
+  }
+
+  /**
+   * Clean the version string to be used in the registry search.
+   * Removes the leading 'v' and trims whitespace and line terminators.
+   */
+  const cleanVersionString = (version: string) =>
+    version.replace(/^v/, '').trim()
+
+  /**
+   * Infer the pack for a node by searching the registry for packs that have nodes
+   * with the same name.
+   */
+  const inferPack = async (
+    node: LGraphNode
+  ): Promise<WorkflowPack | undefined> => {
+    const nodeName = node.type
+
+    // Check if node is a core node
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeName]
+    if (nodeDef?.nodeSource.type === 'core') {
+      if (!systemStatsStore.systemStats) {
+        await systemStatsStore.refetchSystemStats()
+      }
+      return {
+        id: CORE_NODES_PACK_NAME,
+        version:
+          systemStatsStore.systemStats?.system?.comfyui_version ?? 'nightly'
+      }
+    }
+
+    // Query the registry to find which pack provides this node
+    const pack = await inferPackFromNodeName.call(nodeName)
+
+    if (pack) {
+      return {
+        id: pack.id,
+        version: pack.latest_version?.version ?? 'nightly'
+      }
+    }
+
+    // No pack found - this node doesn't exist in the registry or couldn't be
+    // extracted from the parent node pack successfully
+    return undefined
+  }
+
+  /**
+   * Map a workflow node to its pack using the node pack metadata.
+   * If the node pack metadata is not available, fallback to searching the
+   * registry for packs that have nodes with the same name.
+   */
+  const workflowNodeToPack = async (
+    node: LGraphNode
+  ): Promise<WorkflowPack | undefined> => {
+    const packId = getWorkflowNodePackId(node)
+    if (!packId) return inferPack(node) // Fallback
+    if (packId === CORE_NODES_PACK_NAME) return undefined
+
+    const version =
+      typeof node.properties.ver === 'string'
+        ? cleanVersionString(node.properties.ver)
+        : undefined
+
+    return {
+      id: packId,
+      version
+    }
+  }
+
+  /**
+   * Get the node packs for all nodes in the workflow (including subgraphs).
+   */
+  const getWorkflowPacks = async () => {
+    if (!app.graph) return []
+    const allNodes = collectAllNodes(app.graph)
+    if (!allNodes.length) return []
+    const packs = await Promise.all(allNodes.map(workflowNodeToPack))
+    workflowPacks.value = packs.filter((pack) => pack !== undefined)
+  }
+
+  const packsToUniqueIds = (packs: WorkflowPack[]) =>
+    packs.reduce((acc, pack) => {
+      if (pack?.id) acc.add(pack.id)
+      return acc
+    }, new Set<string>())
+
+  const workflowPacksIds = computed(() =>
+    Array.from(packsToUniqueIds(workflowPacks.value))
+  )
+
+  const { startFetch, cleanup, error, isLoading, nodePacks, isReady } =
+    useNodePacks(workflowPacksIds, options)
+
+  const isIdInWorkflow = (packId: string) =>
+    workflowPacksIds.value.includes(packId)
+
+  const filterWorkflowPack = (packs: components['schemas']['Node'][]) =>
+    packs.filter((pack) => !!pack.id && isIdInWorkflow(pack.id))
+
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  return {
+    error,
+    isLoading,
+    isReady,
+    workflowPacks: nodePacks,
+    startFetchWorkflowPacks: async () => {
+      await getWorkflowPacks() // Parse the packs from the workflow nodes
+      await startFetch() // Fetch the packs infos from the registry
+    },
+    filterWorkflowPack
+  }
+}