implement cpu temperature

ui/src/components/LineChart.tsx

@@ -73,7 +73,7 @@ export function LineChart({ data, height = 200 }: LineChartProps) {
         },
         plugins: {
             legend: {
-                display: data.datasets.length > 1,
+                display: data.datasets.length > 0,
                 position: "top" as const,
                 labels: {
                     color: "rgba(156, 163, 175, 0.8)",

ui/src/hooks/useChartData.tsx

@@ -14,6 +14,7 @@ export type ChartData = {
 
 type ChartDataReturns = {
     cpuData: ChartData;
+    cpuTempData: ChartData;
     memoryData: ChartData;
     networkData: ChartData;
 };
@@ -29,9 +30,11 @@ export function useChartData(
         addDataPoint(data);
     }, [data]);
 
+    const labels = currentData.map((p) => formatTimestamp(p.timestamp));
+
     return {
         cpuData: {
-            labels: currentData.map((p) => formatTimestamp(p.timestamp)),
+            labels,
             datasets: [
                 {
                     label: "Total CPU (%)",
@@ -75,8 +78,20 @@ export function useChartData(
                 },
             ],
         },
+        cpuTempData: {
+            labels,
+            datasets: [
+                {
+                    label: "CPU Temp (°C)",
+                    data: currentData.map(
+                        ({ metrics }) => metrics.cpu.temperature,
+                    ),
+                    color: "#17abad",
+                },
+            ],
+        },
         memoryData: {
-            labels: currentData.map((p) => formatTimestamp(p.timestamp)),
+            labels,
             datasets: [
                 {
                     label: "Memory Usage (%)",
@@ -101,7 +116,7 @@ export function useChartData(
             ],
         },
         networkData: {
-            labels: currentData.map((p) => formatTimestamp(p.timestamp)),
+            labels,
             datasets: [
                 {
                     label: "Upload (bps)",

ui/src/pages/agent.tsx

@@ -37,7 +37,7 @@ export function AgentPage() {
     }, [agent, period]);
 
     const { metrics } = message ?? {};
-    const { cpuData, memoryData, networkData } = useChartData(
+    const { cpuData, cpuTempData, memoryData, networkData } = useChartData(
         period === "realtime" ? message! : history,
     );
 
@@ -177,6 +177,10 @@ export function AgentPage() {
 
                         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-8">
                             <LineChartCard title="CPU Usage" data={cpuData} />
+                            <LineChartCard
+                                title="CPU Temperature"
+                                data={cpuTempData}
+                            />
                             <LineChartCard
                                 title="Memory Usage"
                                 data={memoryData}

ui/src/services/types.ts

@@ -18,6 +18,7 @@ export interface CPUMetrics {
     usage: number;
     threads: number;
     breakdown: CPUBreakdown;
+    temperature: number;
 }
 
 export interface CPUBreakdown {