From e1316214637043b3a974407ccf4c61b6b26e259a Mon Sep 17 00:00:00 2001
From: shivansh-gupta4 <shivansh672004@gmail.com>
Date: Sat, 12 Jul 2025 15:42:01 +0530
Subject: [PATCH] Created a computed for generating current_version_key and
 added semver validation

---
 .../dialog/content/VersionMismatchWarning.vue |  9 +++--
 src/stores/versionCompatibilityStore.ts       | 33 ++++++++++++-------
 .../store/versionCompatibilityStore.test.ts   | 15 +++++++++
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/dialog/content/VersionMismatchWarning.vue b/src/components/dialog/content/VersionMismatchWarning.vue
index eaf2c2a573..0465e6dca7 100644
--- a/src/components/dialog/content/VersionMismatchWarning.vue
+++ b/src/components/dialog/content/VersionMismatchWarning.vue
@@ -71,10 +71,9 @@ const handleDismiss = () => {
 
 const handleUpdate = () => {
   // Open ComfyUI documentation or update instructions
-  window.open('https://docs.comfy.org/get_started/introduction', '_blank')
+  window.open(
+    'https://docs.comfy.org/installation/update_comfyui#missing-or-outdated-frontend%2C-workflow-templates%2C-node-after-updates',
+    '_blank'
+  )
 }
 </script>
-
-<style scoped>
-/* Custom styles if needed */
-</style>
diff --git a/src/stores/versionCompatibilityStore.ts b/src/stores/versionCompatibilityStore.ts
index c57cd886cd..236d31b9ff 100644
--- a/src/stores/versionCompatibilityStore.ts
+++ b/src/stores/versionCompatibilityStore.ts
@@ -4,7 +4,7 @@ import { computed, ref } from 'vue'
 import config from '@/config'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { compareVersions } from '@/utils/formatUtil'
+import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 export const useVersionCompatibilityStore = defineStore(
   'versionCompatibility',
@@ -25,7 +25,12 @@ export const useVersionCompatibilityStore = defineStore(
     )
 
     const isFrontendOutdated = computed(() => {
-      if (!frontendVersion.value || !requiredFrontendVersion.value) {
+      if (
+        !frontendVersion.value ||
+        !requiredFrontendVersion.value ||
+        !isSemVer(frontendVersion.value) ||
+        !isSemVer(requiredFrontendVersion.value)
+      ) {
         return false
       }
       return (
@@ -35,7 +40,12 @@ export const useVersionCompatibilityStore = defineStore(
     })
 
     const isFrontendNewer = computed(() => {
-      if (!frontendVersion.value || !backendVersion.value) {
+      if (
+        !frontendVersion.value ||
+        !backendVersion.value ||
+        !isSemVer(frontendVersion.value) ||
+        !isSemVer(backendVersion.value)
+      ) {
         return false
       }
       const versionDiff = compareVersions(
@@ -49,13 +59,16 @@ export const useVersionCompatibilityStore = defineStore(
       return isFrontendOutdated.value || isFrontendNewer.value
     })
 
+    const currentVersionKey = computed(
+      () =>
+        `${frontendVersion.value}-${backendVersion.value}-${requiredFrontendVersion.value}`
+    )
+
     const shouldShowWarning = computed(() => {
       if (!hasVersionMismatch.value || isDismissed.value) {
         return false
       }
-
-      const currentVersionKey = `${frontendVersion.value}-${backendVersion.value}-${requiredFrontendVersion.value}`
-      return dismissedVersion.value !== currentVersionKey
+      return dismissedVersion.value !== currentVersionKey.value
     })
 
     const warningMessage = computed(() => {
@@ -83,12 +96,11 @@ export const useVersionCompatibilityStore = defineStore(
 
     async function dismissWarning() {
       isDismissed.value = true
-      const currentVersionKey = `${frontendVersion.value}-${backendVersion.value}-${requiredFrontendVersion.value}`
-      dismissedVersion.value = currentVersionKey
+      dismissedVersion.value = currentVersionKey.value
 
       await settingStore.set(
         'Comfy.VersionMismatch.DismissedVersion',
-        currentVersionKey
+        currentVersionKey.value
       )
     }
 
@@ -98,8 +110,7 @@ export const useVersionCompatibilityStore = defineStore(
       )
       if (dismissed) {
         dismissedVersion.value = dismissed
-        const currentVersionKey = `${frontendVersion.value}-${backendVersion.value}-${requiredFrontendVersion.value}`
-        isDismissed.value = dismissed === currentVersionKey
+        isDismissed.value = dismissed === currentVersionKey.value
       }
     }
 
diff --git a/tests-ui/tests/store/versionCompatibilityStore.test.ts b/tests-ui/tests/store/versionCompatibilityStore.test.ts
index d044bfb023..4f72f62305 100644
--- a/tests-ui/tests/store/versionCompatibilityStore.test.ts
+++ b/tests-ui/tests/store/versionCompatibilityStore.test.ts
@@ -98,6 +98,21 @@ describe('useVersionCompatibilityStore', () => {
       expect(store.isFrontendNewer).toBe(false)
       expect(store.hasVersionMismatch).toBe(false)
     })
+
+    it('should not detect mismatch when versions are not valid semver', async () => {
+      mockSystemStatsStore.systemStats = {
+        system: {
+          comfyui_version: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be', // git hash
+          required_frontend_version: '1.29.2.45' // invalid semver
+        }
+      }
+
+      await store.checkVersionCompatibility()
+
+      expect(store.isFrontendOutdated).toBe(false)
+      expect(store.isFrontendNewer).toBe(false)
+      expect(store.hasVersionMismatch).toBe(false)
+    })
   })
 
   describe('warning display logic', () => {