feat: update About panel (system stats and version info) to work on cloud (#6940)

## Summary

Updates the About Panel in the settings to work with the cloud-specific
`GET /system_stats` response schema.

| Before | After |
| ------ | ----- |
| <img width="1922" height="1436" alt="Selection_2392"
src="https://github.com/user-attachments/assets/3b97bf38-7eeb-4f46-9c59-eb681f5d7401"
/> | <img width="1922" height="1436" alt="Selection_2391"
src="https://github.com/user-attachments/assets/1d30e604-654a-4d48-ba05-4cac3b54c2ba"
/> |

## Screenshots (if applicable)

OSS version stays the same:

<img width="1922" height="1436" alt="Selection_2393"
src="https://github.com/user-attachments/assets/40e1eeeb-fc5a-4ad0-b37f-dc5d0374901e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6940-feat-update-About-panel-system-stats-and-version-info-to-work-on-cloud-2b66d73d365081f69b6fedfe9507ba92)
by [Unito](https://www.unito.io)

packages/shared-frontend-utils/src/formatUtil.ts

@@ -75,6 +75,17 @@ export function formatSize(value?: number) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
 
+/**
+ * Formats a commit hash by truncating long (40-char) hashes to 7 chars.
+ * Returns the original string if not a valid full commit hash.
+ */
+export function formatCommitHash(value: string): string {
+  if (/^[a-f0-9]{40}$/i.test(value)) {
+    return value.slice(0, 7)
+  }
+  return value
+}
+
 /**
  * Returns various filename components.
  * Example:

src/components/common/SystemStatsPanel.vue

@@ -9,29 +9,31 @@
           <div class="font-medium">
             {{ col.header }}
           </div>
-          <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
+          <div>{{ getDisplayValue(col) }}</div>
         </template>
       </div>
     </div>
 
-    <Divider />
+    <template v-if="hasDevices">
+      <Divider />
 
-    <div>
-      <h2 class="mb-4 text-2xl font-semibold">
-        {{ $t('g.devices') }}
-      </h2>
-      <TabView v-if="props.stats.devices.length > 1">
-        <TabPanel
-          v-for="device in props.stats.devices"
-          :key="device.index"
-          :header="device.name"
-          :value="device.index"
-        >
-          <DeviceInfo :device="device" />
-        </TabPanel>
-      </TabView>
-      <DeviceInfo v-else :device="props.stats.devices[0]" />
-    </div>
+      <div>
+        <h2 class="mb-4 text-2xl font-semibold">
+          {{ $t('g.devices') }}
+        </h2>
+        <TabView v-if="props.stats.devices.length > 1">
+          <TabPanel
+            v-for="device in props.stats.devices"
+            :key="device.index"
+            :header="device.name"
+            :value="device.index"
+          >
+            <DeviceInfo :device="device" />
+          </TabPanel>
+        </TabView>
+        <DeviceInfo v-else :device="props.stats.devices[0]" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -42,8 +44,9 @@ import TabView from 'primevue/tabview'
 import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
-import { formatSize } from '@/utils/formatUtil'
+import { formatCommitHash, formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -54,20 +57,53 @@ const systemInfo = computed(() => ({
   argv: props.stats.system.argv.join(' ')
 }))
 
-const systemColumns: { field: keyof SystemStats['system']; header: string }[] =
-  [
-    { field: 'os', header: 'OS' },
-    { field: 'python_version', header: 'Python Version' },
-    { field: 'embedded_python', header: 'Embedded Python' },
-    { field: 'pytorch_version', header: 'Pytorch Version' },
-    { field: 'argv', header: 'Arguments' },
-    { field: 'ram_total', header: 'RAM Total' },
-    { field: 'ram_free', header: 'RAM Free' }
-  ]
+const hasDevices = computed(() => props.stats.devices.length > 0)
 
-const formatValue = (value: any, field: string) => {
-  if (['ram_total', 'ram_free'].includes(field)) {
-    return formatSize(value)
+type SystemInfoKey = keyof SystemStats['system']
+
+type ColumnDef = {
+  field: SystemInfoKey
+  header: string
+  format?: (value: string) => string
+  formatNumber?: (value: number) => string
+}
+
+/** Columns for local distribution */
+const localColumns: ColumnDef[] = [
+  { field: 'os', header: 'OS' },
+  { field: 'python_version', header: 'Python Version' },
+  { field: 'embedded_python', header: 'Embedded Python' },
+  { 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 }
+]
+
+/** Columns for cloud distribution */
+const cloudColumns: ColumnDef[] = [
+  { field: 'cloud_version', header: 'Cloud Version' },
+  {
+    field: 'comfyui_version',
+    header: 'ComfyUI Version',
+    format: formatCommitHash
+  },
+  {
+    field: 'comfyui_frontend_version',
+    header: 'Frontend Version',
+    format: formatCommitHash
+  },
+  { field: 'workflow_templates_version', header: 'Templates Version' }
+]
+
+const systemColumns = computed(() => (isCloud ? cloudColumns : localColumns))
+
+const getDisplayValue = (column: ColumnDef) => {
+  const value = systemInfo.value[column.field]
+  if (column.formatNumber && typeof value === 'number') {
+    return column.formatNumber(value)
+  }
+  if (column.format && typeof value === 'string') {
+    return column.format(value)
   }
   return value
 }

src/schemas/apiSchema.ts

@@ -334,7 +334,11 @@ const zSystemStats = z.object({
     required_frontend_version: z.string().optional(),
     argv: z.array(z.string()),
     ram_total: z.number(),
-    ram_free: z.number()
+    ram_free: z.number(),
+    // Cloud-specific fields
+    cloud_version: z.string().optional(),
+    comfyui_frontend_version: z.string().optional(),
+    workflow_templates_version: z.string().optional()
   }),
   devices: z.array(zDeviceStats)
 })

src/stores/aboutPanelStore.ts

@@ -2,8 +2,10 @@ import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
 import { useExternalLink } from '@/composables/useExternalLink'
+import { isCloud } from '@/platform/distribution/types'
 import type { AboutPageBadge } from '@/types/comfy'
 import { electronAPI, isElectron } from '@/utils/envUtil'
+import { formatCommitHash } from '@/utils/formatUtil'
 
 import { useExtensionStore } from './extensionStore'
 import { useSystemStatsStore } from './systemStatsStore'
@@ -24,10 +26,10 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
       label: `ComfyUI ${
         isElectron()
           ? 'v' + electronAPI().getComfyUIVersion()
-          : coreVersion.value
+          : formatCommitHash(coreVersion.value)
       }`,
-      url: staticUrls.github,
-      icon: 'pi pi-github'
+      url: isCloud ? staticUrls.comfyOrg : staticUrls.github,
+      icon: isCloud ? 'pi pi-cloud' : 'pi pi-github'
     },
     {
       label: `ComfyUI_frontend v${frontendVersion}`,