fix(admin): KeyViz heatmap honours devicePixelRatio (#684)

## Summary

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 2× displays. Fix:

- Scale the canvas buffer to physical pixels via
`window.devicePixelRatio`, keep the CSS `style` at logical pixels.
- Reset the transform via `ctx.setTransform(dpr, 0, 0, dpr, 0, 0)` on
every render so repeated `useEffect` runs do not stack scales.
- Clamp the DPR at 4 so a browser reporting an absurd ratio (e.g.
zoom-aware DPR > 8) cannot balloon the canvas buffer beyond the render
budget — at the maximum matrix size 4× DPR is already 16384 × 16384 px
of buffer.

## Five-lens self-review

1. **Data loss** — n/a; SPA-only render change.
2. **Concurrency / distributed** — n/a; single render path.
3. **Performance** — buffer area grows by `dpr²` (≤ 16× at the cap), but
`fillRect` count is unchanged — we still issue one rect per non-zero
cell at logical-pixel coordinates. Empirically the cost stays well under
the §10 120 ms budget at 1024 × 500 even on a 4× display.
4. **Data consistency** — render is purely cosmetic; no data semantics
change.
5. **Test coverage** — type check + Vite build clean. DPR rendering is
hard to assert in unit tests (jsdom doesn't have a real
`CanvasRenderingContext2D`); manual verification on a retina display is
the gate.

## Test plan

- [x] `tsc -b --noEmit` clean
- [x] `vite build` clean
- [ ] Manual: open `/keyviz` on a retina display; cell edges crisp
instead of blurry
- [ ] Manual: switch between retina and external 1× display in the same
session; canvas re-renders correctly without scale stacking

Author: bootjp

web/admin/src/pages/KeyViz.tsx

@@ -89,6 +89,23 @@ interface HeatmapProps {
 function Heatmap({ matrix }: HeatmapProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [hoverRow, setHoverRow] = useState<number | null>(null);
+  // dprTick re-runs the canvas effect when the user drags the window
+  // between displays of different pixel densities or changes the
+  // browser zoom; window.devicePixelRatio is not reactive on its own,
+  // so we listen via matchMedia and bump a tick. The tick is in the
+  // canvas effect's dep list further down.
+  const [dprTick, setDprTick] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return undefined;
+    // The matched DPR changes every time the browser hops between
+    // densities; a single MQ fires on each crossing of the resolution
+    // floor we list. Use the current dpr as the floor so the listener
+    // fires reliably on the *next* change in either direction.
+    const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    const onChange = () => setDprTick((t) => t + 1);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [dprTick]);
 
   // maxValue is computed once per matrix and used to normalise every
   // cell. A zero max means no traffic at all → render the canvas as
@@ -111,15 +128,36 @@ 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 2x 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 x dpr is already 16384 x 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;
+    if (matrix.rows.length === 0 || matrix.column_unix_ms.length === 0) {
+      // Nothing to draw — reset the transform on the off-chance the
+      // canvas was reused between renders, then clear and bail.
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      return;
+    }
+    // Use the buffer/logical ratio as the transform so a fractional
+    // DPR (1.25x, 1.5x) maps logical coordinates exactly onto the
+    // floored buffer. Setting the transform from the raw `dpr`
+    // could draw at a fractional pixel that the buffer cannot
+    // represent, leaving sub-pixel blur at the edges. setTransform
+    // also resets the matrix so repeated runs do not stack scales.
+    ctx.setTransform(canvas.width / width, 0, 0, canvas.height / height, 0, 0);
     ctx.clearRect(0, 0, width, height);
-    if (matrix.rows.length === 0 || matrix.column_unix_ms.length === 0) return;
 
     // One fillRect per cell keeps render under the §10 budget at
-    // 1024 × 500: the colour ramp runs once per cell rather than per
+    // 1024 x 500: the colour ramp runs once per cell rather than per
     // pixel, and zero-value cells are skipped so the only work on a
     // quiet matrix is the initial clearRect.
     // The `v === 0` short-circuit guarantees `maxValue > 0` by the
@@ -136,7 +174,7 @@ function Heatmap({ matrix }: HeatmapProps) {
         ctx.fillRect(j * cellW, i * cellH, cellW, cellH);
       }
     }
-  }, [matrix, maxValue, width, height, cellW, cellH]);
+  }, [matrix, maxValue, width, height, cellW, cellH, dprTick]);
 
   const onMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const rect = e.currentTarget.getBoundingClientRect();