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/DashboardL1.tsx

@@ -454,17 +454,15 @@ export default function DashboardL1() {
           <Card title="Application Volume vs SLA Compliance">
             <Treemap
               items={treemapItems}
-              width={600}
-              height={300}
               onItemClick={(id) => navigate(`/dashboard/${id}`)}
             />
           </Card>
           <div className={styles.punchcardStack}>
             <Card title="Transactions (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" width={400} height={140} />
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" />
             </Card>
             <Card title="Errors (7-day pattern)">
-              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" width={400} height={140} />
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" />
             </Card>
           </div>
         </div>