Diff mode: voxel stats (+/- counts, net sum) under heatmap histogram

Adds a small 3-column readout below the heatmap cutoff scrubber in diff
mode:

           count          sum
  + voxels  12,345        +123.4
  − voxels  11,987         -120.1
       net  358            +3.3

The sum-net (Σpos + Σneg) is near zero when the model conserves charge
globally; a sustained nonzero net flags a systematic bias. Voxel counts
are computed in the same single pass as \`maxDensity\` / \`dataAbsMax\`,
so no perf hit. Hidden outside diff mode (where signed math is moot).

Author: ryan-williams

pkgs/core/src/components/Controls.tsx

@@ -107,6 +107,10 @@ interface ControlsProps {
   /** Symmetric absolute-max for the heatmap histogram x-axis. Defaults to
    *  `maxDensity` (unsigned data); diff mode passes `max(|min|, |max|)`. */
   dataAbsMax?: number
+  /** Signed-volume voxel statistics, surfaced under the heatmap histogram in
+   *  diff mode. `sumPos + sumNeg` (a near-zero number for a well-conserved
+   *  diff) is shown as "net". */
+  voxelStats?: { posCount: number; negCount: number; sumPos: number; sumNeg: number }
   heatmapStepCount?: number
   onHeatmapStepCountChange?: (v: number) => void
   /** Zarr data-source toggle (prefer chunked multi-res zarr where available). */
@@ -202,6 +206,7 @@ export function Controls({
   heatmapCutoffAnim,
   onHeatmapCutoffAnimChange,
   dataAbsMax,
+  voxelStats,
   heatmapStepCount = 256,
   onHeatmapStepCountChange,
   useZarr,
@@ -500,6 +505,27 @@ export function Controls({
                 Animate cutoff changes
               </label>
             )}
+            {isDiff && voxelStats && (
+              <div
+                title="Voxel-level sums for the signed diff. Net (≈ sumPos + sumNeg) should be near zero when the model conserves charge globally."
+                style={{
+                  display: 'grid', gridTemplateColumns: 'auto 1fr auto', columnGap: 8, rowGap: 2,
+                  fontSize: 11, color: '#aaa', fontVariantNumeric: 'tabular-nums',
+                  padding: '4px 6px', marginTop: 4,
+                  background: '#1a1a2a', border: '1px solid #2a2a3e', borderRadius: 3,
+                }}
+              >
+                <span style={{ color: '#5be080' }}>+ voxels</span>
+                <span style={{ textAlign: 'right' }}>{voxelStats.posCount.toLocaleString()}</span>
+                <span style={{ color: '#5be080', textAlign: 'right' }}>+{voxelStats.sumPos.toFixed(1)}</span>
+                <span style={{ color: '#ff5040' }}>− voxels</span>
+                <span style={{ textAlign: 'right' }}>{voxelStats.negCount.toLocaleString()}</span>
+                <span style={{ color: '#ff5040', textAlign: 'right' }}>{voxelStats.sumNeg.toFixed(1)}</span>
+                <span>net</span>
+                <span style={{ textAlign: 'right' }}>{(voxelStats.posCount - voxelStats.negCount).toLocaleString()}</span>
+                <span style={{ textAlign: 'right' }}>{((voxelStats.sumPos + voxelStats.sumNeg) >= 0 ? '+' : '') + (voxelStats.sumPos + voxelStats.sumNeg).toFixed(1)}</span>
+              </div>
+            )}
             <div className={styles.controlLabel}>
               <div className={styles.sliderHeader}>
                 <span title="Ray-march sample count — higher is smoother but slower">Steps: {heatmapStepCount}</span>

pkgs/static/src/App.tsx

@@ -1529,18 +1529,22 @@ export default function App() {
     e.target.value = ''
   }, [])
 
-  const { maxDensity, dataAbsMax } = useMemo(() => {
-    if (!primaryFile) return { maxDensity: 1, dataAbsMax: 1 }
+  const { maxDensity, dataAbsMax, posCount, negCount, sumPos, sumNeg } = useMemo(() => {
+    if (!primaryFile) return { maxDensity: 1, dataAbsMax: 1, posCount: 0, negCount: 0, sumPos: 0, sumNeg: 0 }
     let max = 0
     let absMax = 0
+    let posCount = 0, negCount = 0
+    let sumPos = 0, sumNeg = 0
     const arr = primaryFile.data.grid.data
     for (let i = 0; i < arr.length; i++) {
       const v = arr[i]
       if (v > max) max = v
       const a = Math.abs(v)
       if (a > absMax) absMax = a
+      if (v > 0) { posCount++; sumPos += v }
+      else if (v < 0) { negCount++; sumNeg += v }
     }
-    return { maxDensity: max, dataAbsMax: absMax || 1 }
+    return { maxDensity: max, dataAbsMax: absMax || 1, posCount, negCount, sumPos, sumNeg }
   }, [primaryFile])
 
   const densityQuantiles = useMemo(() => {
@@ -1986,6 +1990,7 @@ export default function App() {
               heatmapCutoffAnim={settings.heatmapCutoffAnim}
               onHeatmapCutoffAnimChange={v => updateSettings({ heatmapCutoffAnim: v })}
               dataAbsMax={dataAbsMax}
+              voxelStats={srcRole === 'diff' ? { posCount, negCount, sumPos, sumNeg } : undefined}
               heatmapStepCount={heatmapStepCount}
               onHeatmapStepCountChange={setHeatmapStepCount}
               heatmapOpacity={heatmapOpacity}