feat: migrate Treemap and PunchcardHeatmap to Recharts

Replace custom SVG chart implementations with Recharts components:
- Treemap: uses Recharts Treemap with custom content renderer for
  SLA-colored cells, labels, and click navigation
- PunchcardHeatmap: uses Recharts ScatterChart with custom Rectangle
  shape for weekday x hour heatmap grid cells

Both use ResponsiveContainer (no more explicit width/height props) and
rechartsTheme from the design system for consistent tooltip styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/DashboardTab/PunchcardHeatmap.tsx

@@ -1,4 +1,9 @@
 import { useMemo } from 'react';
+import {
+  ScatterChart, Scatter, XAxis, YAxis, Tooltip,
+  ResponsiveContainer, Rectangle,
+} from 'recharts';
+import { rechartsTheme } from '@cameleer/design-system';
 
 export interface PunchcardCell {
   weekday: number;
@@ -10,116 +15,121 @@ export interface PunchcardCell {
 interface PunchcardHeatmapProps {
   cells: PunchcardCell[];
   mode: 'transactions' | 'errors';
-  width: number;
-  height: number;
 }
 
 const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-const LEFT_MARGIN = 28;
-const TOP_MARGIN = 18;
-const BOTTOM_MARGIN = 4;
-const RIGHT_MARGIN = 4;
 
 function transactionColor(ratio: number): string {
-  if (ratio === 0) return 'hsl(220, 15%, 95%)';
+  if (ratio === 0) return 'var(--bg-inset)';
   const lightness = 90 - ratio * 55;
   return `hsl(220, 60%, ${Math.round(lightness)}%)`;
 }
 
 function errorColor(ratio: number): string {
-  if (ratio === 0) return 'hsl(0, 10%, 95%)';
+  if (ratio === 0) return 'var(--bg-inset)';
   const lightness = 90 - ratio * 55;
   return `hsl(0, 65%, ${Math.round(lightness)}%)`;
 }
 
-export function PunchcardHeatmap({ cells, mode, width, height }: PunchcardHeatmapProps) {
-  const grid = useMemo(() => {
-    const map = new Map<string, PunchcardCell>();
-    for (const c of cells) {
-      map.set(`${c.weekday}-${c.hour}`, c);
-    }
+interface HeatmapPoint {
+  weekday: number;
+  hour: number;
+  value: number;
+  fill: string;
+}
 
-    const values: number[] = [];
-    for (const c of cells) {
-      values.push(mode === 'errors' ? c.failedCount : c.totalCount);
-    }
+function HeatmapCell(props: Record<string, unknown>) {
+  const { cx, cy, payload } = props as {
+    cx: number; cy: number; payload: HeatmapPoint;
+  };
+  if (!payload) return null;
+  // Cell size: chart area / grid divisions. Approximate from scatter positioning.
+  const cellW = 32;
+  const cellH = 10;
+  return (
+    <Rectangle
+      x={cx - cellW / 2}
+      y={cy - cellH / 2}
+      width={cellW}
+      height={cellH}
+      fill={payload.fill}
+      radius={2}
+    />
+  );
+}
+
+function formatDay(value: number): string {
+  return DAYS[value] ?? '';
+}
+
+function formatHour(value: number): string {
+  return String(value).padStart(2, '0');
+}
+
+export function PunchcardHeatmap({ cells, mode }: PunchcardHeatmapProps) {
+  const data: HeatmapPoint[] = useMemo(() => {
+    const values = cells.map(c => mode === 'errors' ? c.failedCount : c.totalCount);
     const maxVal = Math.max(...values, 1);
 
-    const gridWidth = width - LEFT_MARGIN - RIGHT_MARGIN;
-    const gridHeight = height - TOP_MARGIN - BOTTOM_MARGIN;
-    const cellW = gridWidth / 7;
-    const cellH = gridHeight / 24;
-
-    const rects: { x: number; y: number; w: number; h: number; fill: string; value: number; day: string; hour: number }[] = [];
+    // Build full 7x24 grid
+    const points: HeatmapPoint[] = [];
+    const cellMap = new Map<string, PunchcardCell>();
+    for (const c of cells) cellMap.set(`${c.weekday}-${c.hour}`, c);
 
     for (let d = 0; d < 7; d++) {
       for (let h = 0; h < 24; h++) {
-        const cell = map.get(`${d}-${h}`);
+        const cell = cellMap.get(`${d}-${h}`);
         const val = cell ? (mode === 'errors' ? cell.failedCount : cell.totalCount) : 0;
         const ratio = maxVal > 0 ? val / maxVal : 0;
-        const fill = mode === 'errors' ? errorColor(ratio) : transactionColor(ratio);
-
-        rects.push({
-          x: LEFT_MARGIN + d * cellW,
-          y: TOP_MARGIN + h * cellH,
-          w: cellW,
-          h: cellH,
-          fill,
-          value: val,
-          day: DAYS[d],
+        points.push({
+          weekday: d,
           hour: h,
+          value: val,
+          fill: mode === 'errors' ? errorColor(ratio) : transactionColor(ratio),
         });
       }
     }
-    return { rects, cellW, cellH };
-  }, [cells, mode, width, height]);
+    return points;
+  }, [cells, mode]);
 
   return (
-    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
-      {/* Day labels (top) */}
-      {DAYS.map((day, i) => (
-        <text
-          key={day}
-          x={LEFT_MARGIN + i * grid.cellW + grid.cellW / 2}
-          y={12}
-          textAnchor="middle"
-          fill="var(--text-muted)"
-          fontSize={9}
-          fontFamily="var(--font-mono)"
-        >
-          {day}
-        </text>
-      ))}
-
-      {/* Hour labels (left, every 4 hours) */}
-      {[0, 4, 8, 12, 16, 20].map((h) => (
-        <text
-          key={h}
-          x={LEFT_MARGIN - 4}
-          y={TOP_MARGIN + h * grid.cellH + grid.cellH / 2 + 3}
-          textAnchor="end"
-          fill="var(--text-muted)"
-          fontSize={8}
-          fontFamily="var(--font-mono)"
-        >
-          {String(h).padStart(2, '0')}
-        </text>
-      ))}
-
-      {/* Cells */}
-      {grid.rects.map((r) => (
-        <rect
-          key={`${r.day}-${r.hour}`}
-          x={r.x + 0.5}
-          y={r.y + 0.5}
-          width={Math.max(r.w - 1, 0)}
-          height={Math.max(r.h - 1, 0)}
-          rx={1.5}
-          fill={r.fill}
-        >
-          <title>{`${r.day} ${String(r.hour).padStart(2, '0')}:00 — ${r.value.toLocaleString()} ${mode}`}</title>
-        </rect>
-      ))}
-    </svg>
+    <ResponsiveContainer width="100%" height={300}>
+      <ScatterChart margin={{ top: 10, right: 10, bottom: 10, left: 10 }}>
+        <XAxis
+          type="number"
+          dataKey="weekday"
+          domain={[0, 6]}
+          ticks={[0, 1, 2, 3, 4, 5, 6]}
+          tickFormatter={formatDay}
+          {...rechartsTheme.xAxis}
+        />
+        <YAxis
+          type="number"
+          dataKey="hour"
+          domain={[0, 23]}
+          ticks={[0, 4, 8, 12, 16, 20]}
+          tickFormatter={formatHour}
+          reversed
+          {...rechartsTheme.yAxis}
+        />
+        <Tooltip
+          contentStyle={rechartsTheme.tooltip.contentStyle}
+          labelStyle={rechartsTheme.tooltip.labelStyle}
+          itemStyle={rechartsTheme.tooltip.itemStyle}
+          cursor={false}
+          formatter={(_val: unknown, _name: string, entry: { payload?: HeatmapPoint }) => {
+            const p = entry.payload;
+            if (!p) return '';
+            return [`${p.value.toLocaleString()} ${mode}`, `${DAYS[p.weekday]} ${formatHour(p.hour)}:00`];
+          }}
+          labelFormatter={() => ''}
+        />
+        <Scatter
+          data={data}
+          shape={HeatmapCell as unknown as React.FC}
+          isAnimationActive={false}
+        />
+      </ScatterChart>
+    </ResponsiveContainer>
   );
 }