fix: include heapDeltaBytes in perf-report baseline comparison

Add heapDeltaBytes to REPORTED_METRICS so heap regressions appear
in baseline diff tables and CI logs alongside taskDurationMs, style
recalcs, and layouts. Update formatValue to use formatBytes for
human-readable heap delta display.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/10495#discussion_r2985278220

browser_tests/tests/performance.spec.ts

@@ -390,6 +390,58 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     }
   )
 
+  test('fast pan memory pressure', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const canvas = comfyPage.canvas
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    await comfyPage.perf.startMeasuring()
+
+    // Rapidly pan back and forth across the large graph (245 nodes).
+    // Each pan pass triggers reactive node instrumentation as nodes
+    // enter/leave the viewport. Without idempotent instrumentation,
+    // each pass leaks ComputedRefImpl, Link, Dep, and EventListener
+    // objects (~198K ComputedRefImpl and 1.5M Link objects observed
+    // in the original heap snapshot analysis).
+    const centerX = box.x + box.width / 2
+    const centerY = box.y + box.height / 2
+
+    for (let pass = 0; pass < 5; pass++) {
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.down({ button: 'middle' })
+      for (let i = 0; i < 60; i++) {
+        await comfyPage.page.mouse.move(
+          centerX + i * 8,
+          centerY + (i % 2 === 0 ? i * 3 : -i * 3)
+        )
+        await comfyPage.nextFrame()
+      }
+      await comfyPage.page.mouse.up({ button: 'middle' })
+
+      // Return to center for next pass
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.down({ button: 'middle' })
+      for (let i = 0; i < 60; i++) {
+        await comfyPage.page.mouse.move(
+          centerX - i * 8,
+          centerY - (i % 2 === 0 ? i * 3 : -i * 3)
+        )
+        await comfyPage.nextFrame()
+      }
+      await comfyPage.page.mouse.up({ button: 'middle' })
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('fast-pan-memory')
+    recordMeasurement(m)
+    console.log(
+      `Fast pan memory: ${(m.heapDeltaBytes / 1024 / 1024).toFixed(1)}MB heap delta, ${m.eventListeners} event listeners, ${m.taskDurationMs.toFixed(1)}ms task`
+    )
+  })
+
   test('workflow execution', async ({ comfyPage }) => {
     // Uses lightweight PrimitiveString → PreviewAny workflow (no GPU needed)
     await comfyPage.workflow.loadWorkflow('execution/partial_execution')

scripts/perf-report.ts

@@ -57,6 +57,7 @@ type MetricKey =
   | 'frameDurationMs'
   | 'p95FrameDurationMs'
   | 'heapUsedBytes'
+  | 'heapDeltaBytes'
 
 interface MetricDef {
   key: MetricKey
@@ -86,6 +87,7 @@ const REPORTED_METRICS: MetricDef[] = [
   { key: 'scriptDurationMs', label: 'script duration', unit: 'ms' },
   { key: 'totalBlockingTimeMs', label: 'TBT', unit: 'ms' },
   { key: 'heapUsedBytes', label: 'heap used', unit: 'bytes' },
+  { key: 'heapDeltaBytes', label: 'heap delta', unit: 'bytes' },
   { key: 'domNodes', label: 'DOM nodes', unit: '', minAbsDelta: 5 },
   { key: 'eventListeners', label: 'event listeners', unit: '', minAbsDelta: 5 }
 ]