fix(admin): KeyViz heatmap honours devicePixelRatio

Phase 2-B follow-up to PR #680. Claude bot's round-1 review flagged
that the canvas buffer was sized at CSS-pixel dimensions, leaving
every cell edge blurry on 2x displays. Scale the buffer to physical
pixels via window.devicePixelRatio, keep the CSS style at logical
pixels, and reset the transform with setTransform on every render
so repeated useEffect runs do not stack scales.

The DPR is clamped at 4 so a browser reporting an absurd ratio
(e.g. zoom-aware DPR > 8) cannot balloon the canvas buffer beyond
the rendering budget; at the maximum matrix size 4x DPR is already
16384 x 16384 px.

Author: bootjp

web/admin/src/pages/KeyViz.tsx

@@ -111,10 +111,22 @@ function Heatmap({ matrix }: HeatmapProps) {
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    canvas.width = width;
-    canvas.height = height;
+    // Scale the backing buffer to physical pixels and keep CSS at
+    // logical pixels: on a 2× display every cell edge is otherwise
+    // rendered against a half-resolution buffer and reads as blurry.
+    // We clamp the ratio so a future browser quirk reporting an
+    // absurd value (e.g. Firefox's experimental zoom-aware DPR > 8)
+    // does not balloon canvas memory beyond reason — at the maximum
+    // matrix size 4 × dpr is already 16384 × 16384 px of buffer.
+    const dpr = Math.min(window.devicePixelRatio || 1, 4);
+    canvas.width = Math.max(1, Math.floor(width * dpr));
+    canvas.height = Math.max(1, Math.floor(height * dpr));
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    // setTransform (not scale) so the matrix is reset cleanly on
+    // every render — repeated useEffect runs would otherwise stack
+    // scales on top of the previous one.
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, width, height);
     if (matrix.rows.length === 0 || matrix.column_unix_ms.length === 0) return;