feat: add treemap and punchcard heatmap to dashboard L1/L2 (#94)

Treemap: rectangle area = transaction volume, color = SLA compliance
(green→red). Shows apps at L1, routes at L2. Click navigates deeper.

Punchcard heatmap: 7-day rolling weekday x 24-hour grid showing
transaction volume and error patterns. Two side-by-side views
(transactions + errors) reveal temporal clustering.

Backend: new GET /search/stats/punchcard endpoint aggregating
stats_1m_all/app by DOW x hour over rolling 7 days.

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

ui/src/api/queries/dashboard.ts

@@ -92,6 +92,25 @@ export function useTopErrors(from?: string, to?: string, application?: string, r
   });
 }
 
+// ── Punchcard (weekday x hour heatmap, rolling 7 days) ────────────────
+
+export interface PunchcardCell {
+  weekday: number;
+  hour: number;
+  totalCount: number;
+  failedCount: number;
+}
+
+export function usePunchcard(application?: string) {
+  const refetchInterval = useRefreshInterval(60_000);
+  return useQuery({
+    queryKey: ['dashboard', 'punchcard', application],
+    queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application }),
+    placeholderData: (prev: PunchcardCell[] | undefined) => prev,
+    refetchInterval,
+  });
+}
+
 // ── App settings ──────────────────────────────────────────────────────
 
 export interface AppSettings {