feat: template version display

browser_tests/tests/aboutPanel.spec.ts

@@ -0,0 +1,51 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+/**
+ * This file contains End-to-End (E2E) tests for the About Panel.
+ *
+ * It tests the real integration between the frontend and the live backend API.
+ *
+ * Pre-requisites for running these tests:
+ * 1. The ComfyUI backend server must be running.
+ * 2. The custom API endpoint '/templates_version' must be active on the backend
+ *    (e.g., via `custom_nodes/templates_version.py`).
+ */
+test.describe('About Panel - E2E', () => {
+  test('should display templates_version version from the real API', async ({
+    comfyPage
+  }) => {
+    // 1. Fetch the expected version directly from the REAL API endpoint.
+    // This makes the test adaptable to changes in the backend's response.
+    const response = await comfyPage.request.get(
+      `${comfyPage.url}/templates_version`
+    )
+    expect(
+      response.ok(),
+      'The real /templates_version API endpoint must be available and return a 200 OK status.'
+    ).toBeTruthy()
+
+    const { version: expectedVersion } = await response.json()
+    expect(
+      expectedVersion,
+      'The real /templates_version API response should contain a "version" field.'
+    ).toBeDefined()
+
+    // 2. Open the Settings dialog and navigate to the About tab.
+    await comfyPage.page.getByRole('button', { name: '⚙' }).click()
+    await comfyPage.page.getByLabel('About').click()
+
+    // 3. Find the link element that contains the core text "Workflows_Templates".
+    const linkLocator = comfyPage.page.getByRole('link', {
+      name: /Workflows_Templates/
+    })
+
+    // 4. Assert that the base link element is visible.
+    // We give it a slightly longer timeout to account for real network latency.
+    await expect(linkLocator).toBeVisible({ timeout: 10000 })
+
+    // 5. Assert that the element's text contains the version fetched from the real API.
+    await expect(linkLocator).toHaveText(new RegExp(expectedVersion))
+  })
+})

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
+  }
+})

vite.config.mts

@@ -31,6 +31,9 @@ export default defineConfig({
   server: {
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     proxy: {
+      '/templates_version': {
+        target: DEV_SERVER_COMFYUI_URL
+      },
       '/internal': {
         target: DEV_SERVER_COMFYUI_URL
       },