fix(devtools): guard canvas ref access for Chart.js pages

Add null checks on useRef().current before calling getContext('2d')
on index, metrics, and queue-details pages. Prevents crash when
canvas elements aren't in the DOM yet during mount.

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

Author: glennmichael123

packages/devtools/src/pages/index.stx

@@ -201,6 +201,7 @@
       })
       .then((metricsRes: Response) => metricsRes.json())
       .then((metrics: MetricsData) => {
+        if (!throughputCanvas.current) return
         if (throughputChart) throughputChart.destroy()
         const ctx1 = throughputCanvas.current.getContext('2d')
         throughputChart = new Chart(ctx1, {
@@ -234,6 +235,7 @@
       })
       .then((statsRes2: Response) => statsRes2.json())
       .then((stats: DashboardStats) => {
+        if (!queueStatusCanvas.current) return
         if (queueStatusChart) queueStatusChart.destroy()
         const ctx2 = queueStatusCanvas.current.getContext('2d')
         queueStatusChart = new Chart(ctx2, {

packages/devtools/src/pages/metrics.stx

@@ -138,6 +138,7 @@
         )
         statUptime.set(String(Math.round(sData.uptime / 3600)))
 
+        if (!throughputRef.current || !latencyRef.current || !errorRateRef.current) return
         if (throughputChart) throughputChart.destroy()
         throughputChart = new Chart(throughputRef.current.getContext('2d'), {
           type: 'line',

packages/devtools/src/pages/queue-details.stx

@@ -222,6 +222,7 @@
         const labels: string[] = data.throughput ? data.throughput.map((d: ThroughputPoint) => d.label || d.time || '') : []
         const values: number[] = data.throughput ? data.throughput.map((d: ThroughputPoint) => d.value || d.count || 0) : []
 
+        if (!throughputRef.current) return
         const ctx = throughputRef.current.getContext('2d')
 
         if (throughputChart) throughputChart.destroy()