feat: template version display

src/scripts/api.ts

@@ -733,6 +733,14 @@ export class ComfyApi extends EventTarget {
     return await res.json()
   }
 
+  async getTemplatesVersion(): Promise<{ version: string }> {
+    const res = await this.fetchApi('/templates_version')
+    if (!res.ok) {
+      throw new Error(`Failed to fetch /templates_version: ${res.statusText}`)
+    }
+    return res.json()
+  }
+
   /**
    * Sends a POST request to the API
    * @param {*} type The endpoint to post to

src/stores/aboutPanelStore.ts

@@ -1,19 +1,29 @@
 import { defineStore } from 'pinia'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 import { AboutPageBadge } from '@/types/comfy'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
 import { useExtensionStore } from './extensionStore'
 import { useSystemStatsStore } from './systemStatsStore'
+import { useTemplateVersionStore } from './templateVersionStore'
 
 export const useAboutPanelStore = defineStore('aboutPanel', () => {
   const frontendVersion = __COMFYUI_FRONTEND_VERSION__
   const extensionStore = useExtensionStore()
   const systemStatsStore = useSystemStatsStore()
+  const templateVersionStore = useTemplateVersionStore()
+
   const coreVersion = computed(
     () => systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
   )
+  const workflowsTemplatesVersion = computed(
+    () => templateVersionStore?.workflowsTemplatesVersion
+  )
+
+  onMounted(async () => {
+    await templateVersionStore.fetchTemplateVersion()
+  })
 
   const coreBadges = computed<AboutPageBadge[]>(() => [
     // In electron, the ComfyUI is packaged without the git repo,
@@ -37,7 +47,12 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
       url: 'https://www.comfy.org/discord',
       icon: 'pi pi-discord'
     },
-    { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
+    { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' },
+    {
+      label: `Workflows_Templates v${workflowsTemplatesVersion.value}`,
+      url: 'https://github.com/Comfy-Org/workflow_templates',
+      icon: 'pi pi-globe'
+    }
   ])
 
   const allBadges = computed<AboutPageBadge[]>(() => [

src/stores/templateVersionStore.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { api } from '@/scripts/api'
+
+export const useTemplateVersionStore = defineStore('templateVersion', () => {
+  const workflowsTemplatesVersion = ref('')
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchTemplateVersion() {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await api.getTemplatesVersion()
+      workflowsTemplatesVersion.value = response.version
+    } catch (err) {
+      error.value =
+        err instanceof Error ? err.message : 'Failed to fetch template version'
+      console.error('Error fetching template version:', err)
+      workflowsTemplatesVersion.value = ''
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return {
+    workflowsTemplatesVersion,
+    isLoading,
+    error,
+    fetchTemplateVersion
+  }
+})