spb/claude-remote

1'use client';2import type { SystemStatus } from '@cr/shared';3import { DASH, fmtDuration, fmtNum } from '@/lib/format';4import { MetricBar } from './metric-bar';56export function HostMetrics({ host }: { host: SystemStatus['host'] }) {7  const mem = host.memUsedMb != null && host.memTotalMb ? host.memUsedMb / host.memTotalMb : null;8  const disk = host.diskFreeGb != null && host.diskTotalGb ? 1 - host.diskFreeGb / host.diskTotalGb : null;9  return (10    <div className="flex flex-col gap-3" data-testid="host-metrics">11      <MetricBar label="CPU" fraction={host.cpuPct == null ? null : host.cpuPct / 100} value={host.cpuPct == null ? `${DASH} not measured` : `${host.cpuPct.toFixed(1)} %`} />12      <MetricBar label="Memory" fraction={mem} value={host.memUsedMb == null || host.memTotalMb == null ? DASH : `${(host.memUsedMb / 1024).toFixed(1)} / ${(host.memTotalMb / 1024).toFixed(1)} GB`} />13      <MetricBar label="Disk used" fraction={disk} value={host.diskFreeGb == null || host.diskTotalGb == null ? DASH : `${fmtNum(host.diskFreeGb, 1)} GB free of ${fmtNum(host.diskTotalGb, 0)} GB`} />14      <dl className="tnum grid grid-cols-2 gap-x-4 gap-y-1 text-xs">15        <dt className="text-text-2">Load (1 / 5 / 15 min)</dt>16        <dd className="text-right">{host.load.length ? host.load.map((l) => l.toFixed(2)).join(' / ') : DASH}</dd>17        <dt className="text-text-2">Uptime</dt>18        <dd className="text-right">{fmtDuration(host.uptimeSec)}</dd>19      </dl>20    </div>21  );22}23