Add host temperature telemetry and history

src/routes/capacity/+page.svelte

@@ -17,6 +17,7 @@
     import Select from '$ui/components/primitives/Select.svelte';
     import CapacityHosts from '$ui/components/capacity/CapacityHosts.svelte';
     import CapacityChart from '$ui/components/capacity/CapacityChart.svelte';
+    import TemperatureChart from '$ui/components/capacity/TemperatureChart.svelte';
     import RebalancePanel from '$ui/components/capacity/RebalancePanel.svelte';
     import Freshness from '$ui/components/Freshness.svelte';
     import { plural } from '$ui/plural.js';
@@ -319,16 +320,20 @@
                 : 'Waiting for host reports.'} Refreshes every 30 seconds while visible.
         </p>
     </details>
-    <CapacityChart history={report.history} scope={scopeName}>
-        {#snippet controls()}<nav class="ranges" aria-label="History range">
-                {#each ranges as range}<a
-                        href={scopeUrl({ range: range.value })}
-                        aria-current={report.query.range === range.value ? 'page' : undefined}
-                        data-sveltekit-keepfocus
-                        data-sveltekit-noscroll>{range.label}</a
-                    >{/each}
-            </nav>{/snippet}
-    </CapacityChart>
+    {#snippet historyRanges()}<nav class="ranges" aria-label="History range">
+            {#each ranges as range}<a
+                    href={scopeUrl({ range: range.value })}
+                    aria-current={report.query.range === range.value ? 'page' : undefined}
+                    data-sveltekit-keepfocus
+                    data-sveltekit-noscroll>{range.label}</a
+                >{/each}
+        </nav>{/snippet}
+    <CapacityChart history={report.history} scope={scopeName} controls={historyRanges} />
+    {#key report.query.hostId}<TemperatureChart
+            history={report.history}
+            scope={scopeName}
+            controls={historyRanges}
+        />{/key}
 </div>
 
 <style>

src/routes/hosts/[id]/+page.svelte

@@ -28,6 +28,7 @@
     import DeleteHostDialog from '$ui/components/DeleteHostDialog.svelte';
     import HostPreparation from '$ui/components/HostPreparation.svelte';
     import CapacitySamples from '$ui/components/CapacitySamples.svelte';
+    import HostTemperatures from '$ui/components/HostTemperatures.svelte';
     import ServerCard from '$ui/components/ServerCard.svelte';
     import type { ServerObservation } from '$lib/server-observation.js';
     import { syncServerTime } from '$ui/stores/servers.js';
@@ -300,6 +301,8 @@
                                 : `${host.inventory.cpuUsagePercent.toFixed(1)}%`}{#if !host.connected && host.inventory.cpuUsagePercent !== undefined}
                                 (last reported){/if}
                         </dd>
+                        <dt>CPU temperature</dt>
+                        <dd><HostTemperatures {host} /></dd>
                         <dt>Memory available / total</dt>
                         <dd>
                             {bytes(host.inventory.memoryAvailable)} / {bytes(