feat: show template version in system info for local builds (#9018)

## Summary
<img width="985" height="417" alt="스크린샷 2026-02-21 오전 1 05 10"
src="https://github.com/user-attachments/assets/4543a5aa-d1ae-4be7-971e-7b1454625829"
/>



- Add `installed_templates_version` and `required_templates_version` to
the system stats schema
- Display the template version as a badge on the About page alongside
ComfyUI and Frontend badges
- Display the template version as a row in the local System Info table
- Highlight badge (red severity) and table row (red text) when installed
version doesn't match required version, so users can quickly spot
outdated templates

Fixes #4006

## Test plan

- [x] Open Settings > About and verify "Templates v{version}" badge
appears
- [x] Verify "Templates Version" row appears in System Info table
- [ ] When `installed_templates_version` matches
`required_templates_version`: badge is default color, table row is
default color
- [ ] When versions don't match: badge turns red, table row turns red
- [ ] When `installed_templates_version` is absent (package not
installed): badge is hidden, table row shows empty

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

src/components/common/SystemStatsPanel.vue

@@ -6,10 +6,12 @@
       </h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
-          <div class="font-medium">
+          <div :class="cn('font-medium', isOutdated(col) && 'text-danger-100')">
             {{ col.header }}
           </div>
-          <div>{{ getDisplayValue(col) }}</div>
+          <div :class="cn(isOutdated(col) && 'text-danger-100')">
+            {{ getDisplayValue(col) }}
+          </div>
         </template>
       </div>
     </div>
@@ -47,6 +49,7 @@ import DeviceInfo from '@/components/common/DeviceInfo.vue'
 import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
+import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -76,7 +79,8 @@ const localColumns: ColumnDef[] = [
   { field: 'pytorch_version', header: 'Pytorch Version' },
   { field: 'argv', header: 'Arguments' },
   { field: 'ram_total', header: 'RAM Total', formatNumber: formatSize },
-  { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize }
+  { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize },
+  { field: 'installed_templates_version', header: 'Templates Version' }
 ]
 
 /** Columns for cloud distribution */
@@ -97,6 +101,13 @@ const cloudColumns: ColumnDef[] = [
 
 const systemColumns = computed(() => (isCloud ? cloudColumns : localColumns))
 
+function isOutdated(column: ColumnDef): boolean {
+  if (column.field !== 'installed_templates_version') return false
+  const installed = props.stats.system.installed_templates_version
+  const required = props.stats.system.required_templates_version
+  return !!installed && !!required && installed !== required
+}
+
 const getDisplayValue = (column: ColumnDef) => {
   const value = systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {

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

@@ -13,7 +13,7 @@
         class="about-badge inline-flex items-center no-underline"
         :title="badge.url"
       >
-        <Tag class="mr-2">
+        <Tag class="mr-2" :severity="badge.severity">
           <template #icon>
             <i :class="[badge.icon, 'mr-2 text-xl']" />
           </template>

src/schemas/apiSchema.ts

@@ -248,7 +248,9 @@ const zSystemStats = z.object({
     // Cloud-specific fields
     cloud_version: z.string().optional(),
     comfyui_frontend_version: z.string().optional(),
-    workflow_templates_version: z.string().optional()
+    workflow_templates_version: z.string().optional(),
+    installed_templates_version: z.string().optional(),
+    required_templates_version: z.string().optional()
   }),
   devices: z.array(zDeviceStats)
 })

src/stores/aboutPanelStore.ts

@@ -18,6 +18,20 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
   const coreVersion = computed(
     () => systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
   )
+  const templatesVersion = computed(
+    () =>
+      systemStatsStore?.systemStats?.system?.installed_templates_version ?? ''
+  )
+  const requiredTemplatesVersion = computed(
+    () =>
+      systemStatsStore?.systemStats?.system?.required_templates_version ?? ''
+  )
+  const isTemplatesOutdated = computed(
+    () =>
+      templatesVersion.value !== '' &&
+      requiredTemplatesVersion.value !== '' &&
+      templatesVersion.value !== requiredTemplatesVersion.value
+  )
 
   const coreBadges = computed<AboutPageBadge[]>(() => [
     // In electron, the ComfyUI is packaged without the git repo,
@@ -36,6 +50,18 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
       url: staticUrls.githubFrontend,
       icon: 'pi pi-github'
     },
+    ...(templatesVersion.value
+      ? [
+          {
+            label: `Templates v${templatesVersion.value}`,
+            url: 'https://pypi.org/project/comfyui-workflow-templates/',
+            icon: 'pi pi-book',
+            ...(isTemplatesOutdated.value
+              ? { severity: 'danger' as const }
+              : {})
+          }
+        ]
+      : []),
     {
       label: 'Discord',
       url: staticUrls.discord,

src/types/comfy.ts

@@ -20,6 +20,7 @@ export interface AboutPageBadge {
   label: string
   url: string
   icon: string
+  severity?: 'danger' | 'warn'
 }
 
 type MenuCommandGroup = {