Top: one beat — graphs, numbers and the process table change on the same tick

Graphs stepped once a history point (1 s at a 5 min window) while the numbers changed every
tick; they now slide a fraction of a column each tick. The process table (and the GPU boxes,
MHz and watts it carries) was polled on its own timer; it is now read per sample and committed
with it. GPU clients are walked every sample, and the 1–2 s floors on the gallery, Network,
Docker and ZFS ARC live views are gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/scripts/test-graphcols.mjs

@@ -8,7 +8,7 @@ import { join } from 'node:path'
 
 const out = join(mkdtempSync(join(tmpdir(), 'graphcols-')), 'graphcols.mjs')
 buildSync({ entryPoints: [new URL('../src/graphcols.ts', import.meta.url).pathname], outfile: out, format: 'esm', logLevel: 'error' })
-const { columnsOf } = await import(pathToFileURL(out).href)
+const { columnsOf, columnsAt } = await import(pathToFileURL(out).href)
 
 const fails = []
 const check = (ok, what, detail) => { if (!ok) fails.push(what + (detail !== undefined ? ' — ' + JSON.stringify(detail).slice(0, 200) : '')) }
@@ -38,5 +38,28 @@ const wide = columnsOf(base, CAP - 1, CAP, 390)
 check(wide.length === 390 && Math.max(...wide) === 900, 'a box wider than the history is filled, nothing invented', wide.length)
 check(columnsOf([], 0, CAP, COLS).length === 0 && columnsOf([5], 0, 2, 50).length >= 1, 'empty and single-point curves')
 
+// Sliding with the ticks: four ticks to a point (a 250 ms rate, a 1 s stride). Every tick moves
+// the graph left by the same fraction of a column, the newest column grows in from the right, and
+// a column, once finished, keeps its value wherever it has slid to.
+for (const cols of [COLS, 390]) {
+  let v = base.slice(), adv = CAP - 1, prevAt = null, back = 0, jump = 0, held = 0
+  const was = new Map() // a finished column's value, by its number
+  for (let t = 0; t < 4 * 30; t++) {
+    const now = adv + ((t % 4) + 1) / 4
+    const { cols: seen, edge, last } = columnsAt(v, adv, now, CAP, cols)
+    check(edge > 0 && edge <= 1, `edge in (0, 1] (${cols} cols)`, edge)
+    check(seen.length >= cols - 2 && seen.length <= cols + 1, `the box is filled, give or take the sliver (${cols} cols)`, seen.length)
+    const at = last + edge // how far the graph has slid, in columns
+    if (prevAt !== null) { if (at < prevAt - 1e-9) back++; if (at > prevAt + 1 + 1e-9) jump++; if (Math.abs(at - prevAt) < 1e-9) held++ }
+    prevAt = at
+    seen.forEach((x, i) => { const k = last - (seen.length - 1 - i); if (k < last - 1) { if (was.has(k) && was.get(k) !== x) fails.push(`column ${k} changed after it was finished`); was.set(k, x) } })
+    if ((t % 4) === 3) { v.push(10); v.shift(); adv++ }
+  }
+  check(back === 0 && jump === 0, `the graph only slides left, less than a column a tick (${cols} cols)`, { back, jump })
+  check(held < 4 * 30 / 4, `the graph moves on almost every tick, not once a point (${cols} cols)`, held)
+}
+// a point per tick (stride == rate) is the old layout exactly
+check(JSON.stringify(columnsAt(base, CAP - 1, CAP, CAP, COLS).cols.slice(-COLS)) === JSON.stringify(columnsOf(base, CAP - 1, CAP, COLS)), 'columnsOf is columnsAt at a whole point')
+
 if (fails.length) { console.error('graphcols: FAIL\n  ' + fails.join('\n  ')); process.exit(1) }
 console.log('graphcols: ok')