keyviz spa: round-3 follow-ups (PR #680)

Addresses Claude bot round-2 + round-3:

- KeyViz.tsx: TimeAxis moved inside the overflow-auto scroll
  container so its absolutely-positioned labels track the canvas
  when the heatmap overflows horizontally. Round-2 raised this and
  the round-2 commit missed it; round-3 re-flagged.
- KeyViz.tsx: drop the dead `maxValue === 0 ? 0 :` ternary in the
  render loop — the v === 0 short-circuit above guarantees we
  never reach that path with maxValue at zero. Add a one-line
  comment explaining the invariant.
- Design doc 6 lens 3: replace the stale "single putImageData"
  claim with the fillRect-per-non-zero-cell description so the
  five-lens summary matches 4.3.
- Design doc 4.2: drop the route-axis-label paragraph that
  described an alternative the implementation never adopted; note
  the row-detail flyout supersedes it.

Author: bootjp

docs/design/2026_04_27_proposed_keyviz_spa_integration.md

@@ -167,8 +167,11 @@ ceil(56 px / cellW))` so adjacent labels never overlap at small cell
 widths — at `cellW = 2 px` a naive every-tenth stride would pack
 ~54 px of monospace label into 2 px of horizontal space.
 
-Route axis labels: `bucket_id` truncated to 12 chars with a tooltip
-on hover. The full row data is available in the row-detail flyout.
+No inline labels are drawn on the route (Y) axis. At `cellH = 2 px`
+text would not fit, and at `cellH = 4 px` it would crowd into the
+heatmap. Instead, hovering over a row reveals the full `bucket_id`,
+key range, route count, and route IDs in a row-detail flyout below
+the canvas — the flyout supersedes the inline label idea.
 
 ### 4.3 Performance budget
 
@@ -223,8 +226,9 @@ Per `CLAUDE.md`, recorded for completeness even on a frontend change:
 2. **Concurrency / distributed failures** — n/a; a single browser tab
    polls a single handler instance. The handler itself is already
    tested for concurrent observers.
-3. **Performance** — Phase 2 §10 budget honoured by canvas + single
-   `putImageData`. No new dependency. Polling defaults to off.
+3. **Performance** — Phase 2 §10 budget honoured by canvas +
+   `fillRect` per non-zero cell (see §4.3 for why we deliberately
+   avoid `putImageData`). No new dependency. Polling defaults to off.
 4. **Data consistency** — The SPA renders whatever the handler
    returns; consistency guarantees come from the existing sampler
    (in-memory, leader-issued counters per Phase 2 design §5.1).

web/admin/src/pages/KeyViz.tsx

@@ -122,12 +122,15 @@ function Heatmap({ matrix }: HeatmapProps) {
     // 1024 × 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
+    // time we reach the divide, so an explicit zero-divide guard is
+    // unreachable: every row that would trip it has already continued.
     for (let i = 0; i < matrix.rows.length; i++) {
       const row = matrix.rows[i];
       for (let j = 0; j < row.values.length; j++) {
         const v = row.values[j];
         if (v === 0) continue;
-        const t = maxValue === 0 ? 0 : v / maxValue;
+        const t = v / maxValue;
         const [r, g, b, a] = ramp(t);
         ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
         ctx.fillRect(j * cellW, i * cellH, cellW, cellH);
@@ -163,16 +166,21 @@ function Heatmap({ matrix }: HeatmapProps) {
           No tracked routes — drive some traffic and refresh.
         </div>
       ) : (
+        // TimeAxis lives inside the scroll container so its labels —
+        // which are absolutely positioned at `idx * cellW` — track the
+        // canvas as the user scrolls horizontally. Putting it outside
+        // would freeze the labels under the left edge whenever the
+        // canvas overflows.
         <div className="overflow-auto border border-border rounded">
           <canvas
             ref={canvasRef}
             onMouseMove={onMove}
             onMouseLeave={onLeave}
             style={{ display: "block", width, height }}
           />
+          <TimeAxis columnUnixMs={matrix.column_unix_ms} cellW={cellW} />
         </div>
       )}
-      <TimeAxis columnUnixMs={matrix.column_unix_ms} cellW={cellW} />
       {hoverRow !== null && matrix.rows[hoverRow] && (
         <RowDetail row={matrix.rows[hoverRow]} index={hoverRow} />
       )}