1
import type { Telemetry } from '@/shared/contracts/robot.ts';
2
import { formatTime } from '@/client/ui/format.ts';
3
 
4
export function TelemetryReadout({ telemetry }: { telemetry?: Telemetry }) {
5
  const hardware = telemetry?.hardware;
6
  const temperature = hardware?.chipTemperatureMc;
7
  const internal = hardware?.internal.free ?? telemetry?.heap;
8
  return (
9
    <div className="border-b border-line pb-3.5">
10
      <dl className="grid grid-cols-2 gap-x-3 gap-y-3 sm:grid-cols-4 sm:gap-2 [&_dt]:text-[10px] [&_dt]:text-muted [&_dd]:mt-1 [&_dd]:font-mono [&_dd]:text-lg [&_small]:text-[10px] [&_small]:text-muted">
11
        <div>
12
          <dt>Chip temperature</dt>
13
          <dd data-testid="chip-temperature">
14
            {temperature == null ? '––' : Math.round(temperature / 1000)}
15
            <small> °C</small>
16
          </dd>
17
        </div>
18
        <div>
19
          <dt>Wi-Fi</dt>
20
          <dd>
21
            {telemetry?.rssi ?? '––'}
22
            <small> dBm</small>
23
          </dd>
24
        </div>
25
        <div>
26
          <dt>Free internal RAM</dt>
27
          <dd data-testid="internal-free">
28
            {internal === undefined ? '––' : Math.round(internal / 1024)}
29
            <small> KiB</small>
30
          </dd>
31
        </div>
32
        <div>
33
          <dt>Free PSRAM</dt>
34
          <dd data-testid="psram-free">
35
            {hardware ? (hardware.psram.free / (1024 * 1024)).toFixed(1) : '––'}
36
            <small> MiB</small>
37
          </dd>
38
        </div>
39
      </dl>
40
      <p className="mt-3 text-[10px] text-muted">
41
        Uptime{' '}
42
        <span className="font-mono">{telemetry ? formatTime(telemetry.uptimeMs) : '–:––'}</span>
43
      </p>
44
    </div>
45
  );
46
}