fix: resolve TypeScript strict mode errors failing CI

- StatusDot: status → variant (correct prop name)
- Badge: color="muted" → color="auto" (valid BadgeColor)
- AreaChart: remove stacked prop (not in AreaChartProps)
- DataTable: remove defaultSort prop (not in DataTableProps)
- TopError → ErrorRow with id field (DataTable requires T extends {id})
- slaCompliance: type assertion for runtime field not in TS schema
- PunchcardHeatmap Scatter shape: proper typing for custom renderer

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

ui/src/pages/DashboardTab/DashboardL1.tsx

@@ -51,7 +51,7 @@ const APP_COLUMNS: Column<AppRow>[] = [
   {
     key: 'health',
     header: '',
-    render: (_, row) => <StatusDot status={row.health} />,
+    render: (_, row) => <StatusDot variant={row.health} />,
   },
   {
     key: 'appId',
@@ -142,7 +142,7 @@ function aggregateByApp(
 
     // SLA compliance: weighted average of per-route slaCompliance from backend
     const appSettings = settingsMap.get(appId);
-    const slaWeightedSum = routes.reduce((s, r) => s + (r.slaCompliance ?? 100) * r.exchangeCount, 0);
+    const slaWeightedSum = routes.reduce((s, r) => s + ((r as Record<string, unknown>).slaCompliance as number ?? 100) * r.exchangeCount, 0);
     const slaCompliance = totalExchanges > 0 ? slaWeightedSum / totalExchanges : 100;
 
     const errorCount = Math.round(totalFailed);
@@ -413,7 +413,7 @@ export default function DashboardL1() {
           <span className={styles.tableTitle}>Application Health</span>
           <div className={styles.tableRight}>
             <span className={styles.tableMeta}>{appRows.length} applications</span>
-            <Badge label="ALL" color="muted" />
+            <Badge label="ALL" color="auto" />
           </div>
         </div>
         <DataTable
@@ -431,7 +431,6 @@ export default function DashboardL1() {
             <AreaChart
               series={throughputByAppSeries}
               yLabel="msg/s"
-              stacked
               height={200}
               className={styles.chart}
             />

ui/src/pages/DashboardTab/DashboardL2.tsx

@@ -113,7 +113,9 @@ const ROUTE_COLUMNS: Column<RouteRow>[] = [
 
 // ── Top errors columns ──────────────────────────────────────────────────────
 
-const ERROR_COLUMNS: Column<TopError>[] = [
+type ErrorRow = TopError & { id: string };
+
+const ERROR_COLUMNS: Column<ErrorRow>[] = [
   {
     key: 'errorType',
     header: 'Error Type',
@@ -394,7 +396,6 @@ export default function DashboardL2() {
             <AreaChart
               series={throughputByRouteSeries}
               yLabel="msg/s"
-              stacked
               height={200}
               className={styles.chart}
             />

ui/src/pages/DashboardTab/DashboardL3.tsx

@@ -56,7 +56,7 @@ const PROCESSOR_COLUMNS: Column<ProcessorRow>[] = [
     key: 'processorType',
     header: 'Type',
     sortable: true,
-    render: (_, row) => <Badge label={row.processorType} color="muted" />,
+    render: (_, row) => <Badge label={row.processorType} color="auto" />,
   },
   {
     key: 'totalCount',
@@ -411,7 +411,6 @@ export default function DashboardL3() {
           columns={PROCESSOR_COLUMNS}
           data={processorRows}
           sortable
-          defaultSort={{ key: 'p99DurationMs', direction: 'desc' }}
         />
       </div>
 

ui/src/pages/DashboardTab/PunchcardHeatmap.tsx

@@ -126,7 +126,7 @@ export function PunchcardHeatmap({ cells, mode }: PunchcardHeatmapProps) {
         />
         <Scatter
           data={data}
-          shape={HeatmapCell as unknown as React.FC}
+          shape={(props: unknown) => <HeatmapCell {...(props as Record<string, unknown>)} />}
           isAnimationActive={false}
         />
       </ScatterChart>