From 12989e8b63f2c8e1711d33a0ddb14e8d5b3d1d57 Mon Sep 17 00:00:00 2001
From: Robin Huang <robin.j.huang@gmail.com>
Date: Tue, 10 Mar 2026 13:57:11 -0700
Subject: [PATCH] feat: add copy button to System Info panel (#9719)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Adds a "Copy System Info" button next to the System Info heading in
Settings > About. Copies all system and device details as markdown text
for easy pasting into Slack or Notion.
<img width="1175" height="725" alt="Screenshot 2026-03-10 at 1 30 51 PM"
src="https://github.com/user-attachments/assets/6a091b6d-2246-4dc7-bc1d-8b5ebc2f9f9b"
/>


## Test plan
- Open Settings > About
- Click "Copy System Info" button
- Paste into Slack/Notion and verify formatting

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9719-feat-add-copy-button-to-System-Info-panel-31f6d73d36508148a06ae5f478ba62bf)
by [Unito](https://www.unito.io)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/common/SystemStatsPanel.vue | 47 ++++++++++++++++++++--
 src/locales/en/main.json                   |  1 +
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue
index e9b01a9299..76389290e5 100644
--- a/src/components/common/SystemStatsPanel.vue
+++ b/src/components/common/SystemStatsPanel.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="mb-4 text-2xl font-semibold">
-        {{ $t('g.systemInfo') }}
-      </h2>
+      <div class="mb-4 flex items-center gap-2">
+        <h2 class="text-2xl font-semibold">
+          {{ $t('g.systemInfo') }}
+        </h2>
+        <Button variant="secondary" @click="copySystemInfo">
+          <i class="pi pi-copy" />
+          {{ $t('g.copySystemInfo') }}
+        </Button>
+      </div>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
           <div :class="cn('font-medium', isOutdated(col) && 'text-danger-100')">
@@ -46,6 +52,8 @@ import TabView from 'primevue/tabview'
 import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
@@ -55,6 +63,8 @@ const props = defineProps<{
   stats: SystemStats
 }>()
 
+const { copyToClipboard } = useCopyToClipboard()
+
 const systemInfo = computed(() => ({
   ...props.stats.system,
   argv: props.stats.system.argv.join(' ')
@@ -108,7 +118,7 @@ function isOutdated(column: ColumnDef): boolean {
   return !!installed && !!required && installed !== required
 }
 
-const getDisplayValue = (column: ColumnDef) => {
+function getDisplayValue(column: ColumnDef) {
   const value = systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {
     return column.formatNumber(value)
@@ -118,4 +128,33 @@ const getDisplayValue = (column: ColumnDef) => {
   }
   return value
 }
+
+function formatSystemInfoText(): string {
+  const lines: string[] = ['## System Info']
+
+  for (const col of systemColumns.value) {
+    const display = getDisplayValue(col)
+    if (display !== undefined && display !== '') {
+      lines.push(`${col.header}: ${display}`)
+    }
+  }
+
+  if (hasDevices.value) {
+    lines.push('')
+    lines.push('## Devices')
+    for (const device of props.stats.devices) {
+      lines.push(`- ${device.name} (${device.type})`)
+      lines.push(`  VRAM Total: ${formatSize(device.vram_total)}`)
+      lines.push(`  VRAM Free: ${formatSize(device.vram_free)}`)
+      lines.push(`  Torch VRAM Total: ${formatSize(device.torch_vram_total)}`)
+      lines.push(`  Torch VRAM Free: ${formatSize(device.torch_vram_free)}`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+function copySystemInfo() {
+  copyToClipboard(formatSystemInfoText())
+}
 </script>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index a0d8ad442a..9d3b7f1baa 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -93,6 +93,7 @@
     "reportIssueTooltip": "Submit the error report to Comfy Org",
     "reportSent": "Report Submitted",
     "copyToClipboard": "Copy to Clipboard",
+    "copySystemInfo": "Copy System Info",
     "copyAll": "Copy All",
     "openNewIssue": "Open New Issue",
     "showReport": "Show Report",