fix(web): rail polish — waveform fits, mirror is smooth

- WaveformCanvas: a ResizeObserver keeps the drawing buffer matched to the
  element size (was measured once at mount), so the trace is centered and peaks
  never clip; taller 100px window; clamp to ±45% height.
- useTelemetry: signed oscilloscope signal (idle wave at rest, decaying ring on
  impact, bounded ±0.95) instead of a one-sided magnitude that overshot the box.
- useMatrixMirror: poll 8 → 15 fps. The board renders at ~12 fps and a matrix_get
  round-trip is only ~15 ms, so 8 fps under-sampled (stutter); 15 fps oversamples
  cleanly, well under the ~68 fps ceiling.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

src/components/cockpit/WaveformCanvas.tsx

@@ -3,7 +3,9 @@ import { useEffect, useRef } from 'react'
 /**
  * The live-acceleration waveform. Reads the magnitude history from a ref and
  * redraws via requestAnimationFrame — independent of React renders, so it stays
- * smooth. Line turns to the spike colour during an impact event.
+ * smooth. A ResizeObserver keeps the drawing buffer exactly matched to the
+ * element's pixel size (so the trace is always centered and peaks never clip),
+ * and the line turns to the spike colour during an impact event.
  */
 export function WaveformCanvas({
   wave,
@@ -21,16 +23,23 @@ export function WaveformCanvas({
     if (!cv) return
     const ctx = cv.getContext('2d')
     if (!ctx) return
-    const dpr = window.devicePixelRatio || 1
-    const resize = () => {
-      cv.width = cv.clientWidth * dpr
-      cv.height = cv.clientHeight * dpr
+    const dpr = Math.max(1, window.devicePixelRatio || 1)
+
+    // Keep the drawing buffer matched to the element's actual size. Setting
+    // width/height clears the canvas, so only assign when it actually changed.
+    const sync = () => {
+      const w = Math.round(cv.clientWidth * dpr)
+      const h = Math.round(cv.clientHeight * dpr)
+      if (w && cv.width !== w) cv.width = w
+      if (h && cv.height !== h) cv.height = h
     }
-    resize()
-    window.addEventListener('resize', resize)
+    sync()
+    const ro = new ResizeObserver(sync)
+    ro.observe(cv)
 
     let raf = 0
     const draw = () => {
+      sync()
       const w = cv.width
       const h = cv.height
       ctx.clearRect(0, 0, w, h)
@@ -41,26 +50,30 @@ export function WaveformCanvas({
       ctx.moveTo(0, h / 2)
       ctx.lineTo(w, h / 2)
       ctx.stroke()
-      // waveform
+      // waveform — centered, clamped to ±45% of height so peaks never clip
       const buf = wave.current
       const n = buf.length
-      ctx.strokeStyle = impactRef.current ? '#ff8a5c' : '#7fa8ff'
-      ctx.lineWidth = 1.5 * dpr
-      ctx.beginPath()
-      for (let i = 0; i < n; i++) {
-        const x = (i / (n - 1)) * w
-        const y = h / 2 - buf[i] * (h * 0.42)
-        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
+      if (n > 1) {
+        ctx.strokeStyle = impactRef.current ? '#ff8a5c' : '#7fa8ff'
+        ctx.lineWidth = 1.6 * dpr
+        ctx.lineJoin = 'round'
+        ctx.beginPath()
+        for (let i = 0; i < n; i++) {
+          const x = (i / (n - 1)) * w
+          const v = Math.max(-1, Math.min(1, buf[i]))
+          const y = h / 2 - v * (h * 0.45)
+          i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
+        }
+        ctx.stroke()
       }
-      ctx.stroke()
       raf = requestAnimationFrame(draw)
     }
     raf = requestAnimationFrame(draw)
     return () => {
       cancelAnimationFrame(raf)
-      window.removeEventListener('resize', resize)
+      ro.disconnect()
     }
   }, [wave])
 
-  return <canvas ref={ref} className="block h-[78px] w-full rounded-[10px] border border-rail-line bg-rail-inset" />
+  return <canvas ref={ref} className="block h-[100px] w-full rounded-[10px] border border-rail-line bg-rail-inset" />
 }