@flame0510/project-aether 1.7.0 → 1.8.0

package/app/components/ui/TimeSeriesChart.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+
+export interface TimeSeriesPoint {
+  /** Seconds since the epoch — the start of the bucket. */
+  ts: number;
+  /** The plotted value (an average over the bucket); null leaves a gap. */
+  value: number | null;
+  /** The bucket's peak, drawn as a light wash under the line and shown in the tooltip. */
+  peak?: number | null;
+}
+
+interface TimeSeriesChartProps {
+  /** What is plotted, for screen readers and the table caption. */
+  label: string;
+  points: TimeSeriesPoint[];
+  /** The x domain in seconds, so an empty stretch reads as "no data", not as a zoom. */
+  from: number;
+  to: number;
+  /** Seconds per point; two points further apart than 1.5 buckets are not joined. */
+  bucket: number;
+  yMax?: number;
+  unit?: string;
+  height?: number;
+  /** While a new range loads the previous render stays, dimmed. */
+  stale?: boolean;
+  formatTime: (ts: number) => string;
+}
+
+const PAD = { top: 12, right: 44, bottom: 22, left: 34 };
+
+/**
+ * One series over time: a 2px line for the value, a 10% wash up to the peak, a hairline
+ * grid at 0 / 50 / 100 %, the latest value labelled at the line's end. Hover or focus
+ * shows a crosshair snapped to the nearest point with its value and peak; the same data
+ * is available as a table. Plain SVG measured to its container, so text is never scaled.
+ */
+export function TimeSeriesChart({
+  label,
+  points,
+  from,
+  to,
+  bucket,
+  yMax = 100,
+  unit = '%',
+  height = 160,
+  stale = false,
+  formatTime,
+}: TimeSeriesChartProps) {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const clipId = `ts-clip-${useId().replace(/:/g, '')}`;
+  const [width, setWidth] = useState(0);
+  const [active, setActive] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => setWidth(Math.round(entry.contentRect.width)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const plotW = Math.max(0, width - PAD.left - PAD.right);
+  const plotH = height - PAD.top - PAD.bottom;
+  const span = Math.max(1, to - from);
+  const x = (ts: number) => PAD.left + ((ts - from) / span) * plotW;
+  const y = (v: number) => PAD.top + plotH - (Math.max(0, Math.min(yMax, v)) / yMax) * plotH;
+
+  const valid = useMemo(() => points.filter((p) => p.value !== null), [points]);
+
+  // Runs of points close enough in time to be joined; a gap means no samples there.
+  const runs = useMemo(() => {
+    const out: TimeSeriesPoint[][] = [];
+    let run: TimeSeriesPoint[] = [];
+    for (const p of valid) {
+      const prev = run[run.length - 1];
+      if (prev && p.ts - prev.ts > bucket * 1.5) {
+        out.push(run);
+        run = [];
+      }
+      run.push(p);
+    }
+    if (run.length) out.push(run);
+    return out;
+  }, [valid, bucket]);
+
+  const linePath = (run: TimeSeriesPoint[]) =>
+    run.map((p, i) => `${i ? 'L' : 'M'}${x(p.ts).toFixed(1)},${y(p.value as number).toFixed(1)}`).join('');
+  const peakArea = (run: TimeSeriesPoint[]) => {
+    const top = run.map((p, i) => `${i ? 'L' : 'M'}${x(p.ts).toFixed(1)},${y(p.peak ?? (p.value as number)).toFixed(1)}`).join('');
+    const base = y(0).toFixed(1);
+    return `${top}L${x(run[run.length - 1].ts).toFixed(1)},${base}L${x(run[0].ts).toFixed(1)},${base}Z`;
+  };
+
+  const last = valid[valid.length - 1];
+  const shown = active !== null ? valid[active] : null;
+  const fmt = (v: number | null | undefined) => (v === null || v === undefined ? '—' : `${Math.round(v * 10) / 10}${unit}`);
+
+  function onPointerMove(e: PointerEvent<SVGRectElement>) {
+    if (!valid.length || plotW <= 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ts = from + ((e.clientX - rect.left) / rect.width) * span;
+    let best = 0;
+    for (let i = 1; i < valid.length; i++) {
+      if (Math.abs(valid[i].ts - ts) < Math.abs(valid[best].ts - ts)) best = i;
+    }
+    setActive(best);
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    if (!valid.length) return;
+    if (e.key === 'ArrowLeft') setActive((a) => Math.max(0, (a ?? valid.length) - 1));
+    else if (e.key === 'ArrowRight') setActive((a) => Math.min(valid.length - 1, (a ?? -1) + 1));
+    else if (e.key === 'Escape') setActive(null);
+    else return;
+    e.preventDefault();
+  }
+
+  const ticks = [from, from + span / 2, to];
+  const tooltipLeft = shown ? Math.min(Math.max(x(shown.ts), 70), Math.max(70, width - 70)) : 0;
+
+  return (
+    <div className="ui-chart" style={{ opacity: stale ? 0.5 : 1 }}>
+      <div
+        ref={boxRef}
+        className="ui-chart__plot"
+        style={{ height }}
+        tabIndex={0}
+        role="img"
+        aria-label={last ? `${label}: latest ${fmt(last.value)}` : `${label}: no data`}
+        onKeyDown={onKeyDown}
+        onFocus={() => setActive((a) => a ?? (valid.length ? valid.length - 1 : null))}
+        onBlur={() => setActive(null)}
+      >
+        {width > 0 && (
+          <svg width={width} height={height} aria-hidden="true">
+            {[0, 50, 100].map((v) => (
+              <g key={v}>
+                <line x1={PAD.left} x2={PAD.left + plotW} y1={y((v / 100) * yMax)} y2={y((v / 100) * yMax)} className="ui-chart__grid" />
+                <text x={PAD.left - 6} y={y((v / 100) * yMax) + 3} textAnchor="end" className="ui-chart__tick">
+                  {Math.round((v / 100) * yMax)}{unit}
+                </text>
+              </g>
+            ))}
+            {ticks.map((ts, i) => (
+              <text
+                key={i}
+                x={x(ts)}
+                y={height - 6}
+                textAnchor={i === 0 ? 'start' : i === 2 ? 'end' : 'middle'}
+                className="ui-chart__tick"
+              >
+                {formatTime(ts)}
+              </text>
+            ))}
+            <defs>
+              {/* Marks stay inside the plot, never over the axis labels. */}
+              <clipPath id={clipId}>
+                <rect x={PAD.left} y={0} width={plotW} height={PAD.top + plotH} />
+              </clipPath>
+            </defs>
+            <g clipPath={`url(#${clipId})`}>
+            {runs.map((run, i) => (
+              <g key={i}>
+                <path d={peakArea(run)} className="ui-chart__wash" />
+                {run.length > 1 && <path d={linePath(run)} className="ui-chart__line" />}
+                {run.length === 1 && <circle cx={x(run[0].ts)} cy={y(run[0].value as number)} r={2} className="ui-chart__dot" />}
+              </g>
+            ))}
+            </g>
+            {last && !shown && (
+              <g>
+                <circle cx={x(last.ts)} cy={y(last.value as number)} r={4} className="ui-chart__marker" />
+                <text x={x(last.ts) + 8} y={y(last.value as number) + 3} className="ui-chart__end-label">{fmt(last.value)}</text>
+              </g>
+            )}
+            {shown && (
+              <g>
+                <line x1={x(shown.ts)} x2={x(shown.ts)} y1={PAD.top} y2={PAD.top + plotH} className="ui-chart__crosshair" />
+                <circle cx={x(shown.ts)} cy={y(shown.value as number)} r={4} className="ui-chart__marker" />
+              </g>
+            )}
+            {!valid.length && (
+              <text x={PAD.left + plotW / 2} y={PAD.top + plotH / 2} textAnchor="middle" className="ui-chart__tick">No samples in this range</text>
+            )}
+            <rect
+              x={PAD.left}
+              y={PAD.top}
+              width={plotW}
+              height={plotH}
+              fill="transparent"
+              onPointerMove={onPointerMove}
+              onPointerLeave={() => setActive(null)}
+            />
+          </svg>
+        )}
+        {shown && (
+          <div className="ui-chart__tooltip" style={{ left: tooltipLeft }}>
+            <strong>{fmt(shown.value)}</strong>
+            {shown.peak !== undefined && <span className="ui-muted"> · peak {fmt(shown.peak)}</span>}
+            <div className="ui-muted">{formatTime(shown.ts)}</div>
+          </div>
+        )}
+      </div>
+      <details className="ui-chart__table">
+        <summary>Table</summary>
+        <table>
+          <caption>{label}</caption>
+          <thead>
+            <tr><th scope="col">Time</th><th scope="col">Value</th>{valid.some((p) => p.peak !== undefined) && <th scope="col">Peak</th>}</tr>
+          </thead>
+          <tbody>
+            {valid.map((p) => (
+              <tr key={p.ts}>
+                <td>{formatTime(p.ts)}</td>
+                <td>{fmt(p.value)}</td>
+                {p.peak !== undefined && <td>{fmt(p.peak)}</td>}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </details>
+    </div>
+  );
+}

package/app/components/ui/index.ts

@@ -19,3 +19,5 @@ export * from './Tabs';
 export * from './ItemList';
 export * from './TemplateOption';
 export { default as ModalityIcons, parseModality, type ParsedModality } from './ModalityIcons';
+export * from './Meter';
+export * from './TimeSeriesChart';

package/app/globals.css

@@ -636,8 +636,49 @@ html, body { height: 100%; height: 100dvh; background: var(--bg); color: var(--t
 .ui-pill.ui-tone--info { border-color: rgba(99,102,241,0.28); color: #818cf8; background: rgba(99,102,241,0.12); }
 .ui-tone--info { border-color: rgba(99,102,241,0.28); }
 
+/* Meter: a 0-100 % fill whose colour carries the level; the level is also written out. */
+.ui-meter { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 15px; }
+.ui-meter__track { flex: 1; height: 6px; background: var(--bg3); border-radius: 0; overflow: hidden; }
+.ui-meter__fill { height: 100%; transition: width 0.3s; }
+.ui-meter__fill--ok { background: var(--violet); }
+.ui-meter__fill--warning { background: var(--yellow); }
+.ui-meter__fill--critical { background: var(--red); }
+.ui-meter__level { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; }
+.ui-meter__level--warning { color: var(--yellow); }
+.ui-meter__level--critical { color: var(--red); }
+
+/* TimeSeriesChart: one series, 2px line, 10% peak wash, hairline grid, text in text tokens. */
+.ui-chart { transition: opacity 0.2s; }
+.ui-chart__plot { position: relative; width: 100%; outline: none; }
+.ui-chart__plot:focus-visible { outline: 1px solid var(--violet-dim); outline-offset: -1px; }
+.ui-chart__grid { stroke: var(--border); stroke-width: 1; }
+.ui-chart__tick { fill: var(--text-dim); font-size: 10px; font-family: var(--font-mono-stack); font-variant-numeric: tabular-nums; }
+.ui-chart__line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.ui-chart__wash { fill: var(--violet); fill-opacity: 0.1; stroke: none; }
+.ui-chart__dot { fill: var(--violet); }
+.ui-chart__marker { fill: var(--violet); stroke: var(--bg2); stroke-width: 2; }
+.ui-chart__end-label { fill: var(--text); font-size: 11px; font-family: var(--font-mono-stack); }
+.ui-chart__crosshair { stroke: var(--text-dim); stroke-width: 1; }
+.ui-chart__tooltip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--bg); border: 1px solid var(--border); padding: 6px 8px; font-size: 11px; white-space: nowrap; }
+.ui-chart__table { margin-top: 6px; font-size: 11px; }
+.ui-chart__table summary { cursor: pointer; color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
+.ui-chart__table table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
+.ui-chart__table caption { text-align: left; color: var(--text-dim); padding-bottom: 4px; }
+.ui-chart__table th, .ui-chart__table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); font-weight: 400; }
+.ui-chart__table th { color: var(--text-dim); }
+
+/* System page: three cards, then one chart per metric; one column below lg (992px). */
+.system-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.system-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+@media (max-width: 991px) {
+  .system-cards, .system-charts { grid-template-columns: minmax(0, 1fr); }
+}
+
 .cockpit { overflow: auto; height: 100%; padding: 20px; }
 .cockpit__metrics { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
+.cockpit__machine-item { white-space: nowrap; color: var(--text); }
+.cockpit__machine-item--warning { color: var(--yellow); }
+.cockpit__machine-item--critical { color: var(--red); }
 .cockpit__health-row { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; }
 .cockpit__health { font-size: 34px; text-transform: uppercase; font-weight: 800; }
 .cockpit__health--ok { color: var(--green); }

package/app/system/PageClient.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { apiFetch } from '@/lib/apiFetch';
+import { useRev4aTimezone } from '@/lib/hooks/useRev4aTimezone';
+import { Meter, meterLevel, Page, PageHeader, Pill, Surface, Tabs, TimeSeriesChart } from '../components/ui';
+import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription } from './SystemSkeleton';
+
+type Range = '1h' | '24h' | '7d' | '30d';
+const RANGES: { id: Range; label: string; span: number }[] = [
+  { id: '1h', label: '1h', span: 3600 },
+  { id: '24h', label: '24h', span: 86_400 },
+  { id: '7d', label: '7d', span: 7 * 86_400 },
+  { id: '30d', label: '30d', span: 30 * 86_400 },
+];
+const POLL_MS = 30_000;
+
+/** Thresholds (%) for the meters: warning, critical. */
+const CPU_RAM_LEVELS = [85, 95] as const;
+const DISK_LEVELS = [80, 90] as const;
+
+interface Disk {
+  mount: string;
+  roles: string[];
+  used_mb: number;
+  avail_mb: number;
+  total_mb: number;
+  percent: number;
+}
+
+interface MetricsPayload {
+  latest: {
+    ts: number;
+    age_s: number;
+    cpu: number | null;
+    ram_used_mb: number | null;
+    ram_total_mb: number | null;
+    swap_used_mb: number | null;
+    swap_total_mb: number | null;
+    load_avg_1m: number | null;
+    load_avg_5m: number | null;
+    load_avg_15m: number | null;
+    disks: Disk[];
+  } | null;
+  host: { hostname: string; platform: string; cores: number; uptime_s: number };
+  interval_s: number;
+  range: Range;
+  bucket_s: number;
+  history: { ts: number; cpu_avg: number | null; cpu_max: number | null; ram_avg: number | null; ram_max: number | null }[];
+  disk_history: { mount: string; points: { ts: number; percent: number | null }[] }[];
+}
+
+const ROLE_LABEL: Record<string, string> = { root: 'system', docker: 'Docker data', data: 'Rev4a data' };
+
+function formatMb(mb: number | null | undefined): string {
+  if (mb === null || mb === undefined) return '—';
+  if (mb >= 1024 * 1024) return `${(mb / 1024 / 1024).toFixed(2)} TB`;
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${mb} MB`;
+}
+
+function formatUptime(s: number): string {
+  const d = Math.floor(s / 86_400);
+  const h = Math.floor((s % 86_400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  return d > 0 ? `${d} d ${h} h` : h > 0 ? `${h} h ${m} min` : `${m} min`;
+}
+
+function percentOf(used: number | null, total: number | null): number | null {
+  return used !== null && total ? Math.round((used / total) * 1000) / 10 : null;
+}
+
+function timeFormatter(range: Range, timeZone: string): (ts: number) => string {
+  const opts: Intl.DateTimeFormatOptions =
+    range === '1h' || range === '24h'
+      ? { hour: '2-digit', minute: '2-digit', hour12: false }
+      : { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12: false };
+  const fmt = new Intl.DateTimeFormat('en-GB', { ...opts, timeZone });
+  return (ts) => fmt.format(new Date(ts * 1000));
+}
+
+export default function SystemPageClient() {
+  const [range, setRange] = useState<Range>('1h');
+  const [data, setData] = useState<MetricsPayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  const load = useCallback(async (r: Range) => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const res = await apiFetch(`/api/metrics?range=${r}`, { signal: controller.signal });
+      const body = await res.json();
+      if (!res.ok) throw new Error(body?.error || `Error ${res.status}`);
+      setData(body as MetricsPayload);
+      setError('');
+    } catch (e: any) {
+      if (e?.name === 'AbortError') return;
+      setError(e?.message || 'Could not load the metrics');
+    } finally {
+      if (abortRef.current === controller) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load(range);
+    const timer = setInterval(() => load(range), POLL_MS);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [range, load]);
+
+  const latest = data?.latest ?? null;
+  const host = data?.host;
+  const span = RANGES.find((r) => r.id === range)!.span;
+  const to = Math.floor(Date.now() / 1000);
+  const from = to - span;
+  const timeZone = useRev4aTimezone();
+  const formatTime = timeFormatter(range, timeZone);
+  const stale = latest !== null && data !== null && latest.age_s > data.interval_s * 3;
+  const chartStale = loading && data !== null && data.range !== range;
+  // Before the first answer: placeholders shaped like the content (an error shows instead).
+  const firstLoad = data === null && !error;
+
+  const cpu = latest?.cpu ?? null;
+  const ramPct = latest ? percentOf(latest.ram_used_mb, latest.ram_total_mb) : null;
+
+  return (
+    <Page>
+      <PageHeader
+        eyebrow="Host"
+        title="System"
+        description={<SystemDescription host={host ? `${host.hostname} · ${host.cores} cores · up ${formatUptime(host.uptime_s)}` : null} />}
+      />
+
+      {error && <Surface tone="danger"><span style={{ color: 'var(--red)', fontSize: 12 }}>{error}</span></Surface>}
+
+      {data && !latest && (
+        <Surface tone="warning">
+          <div className="ui-kicker">No samples yet</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The Rev4a daemon records one every {data.interval_s} s. If this stays empty, check that `rev4a serve` is running.
+          </p>
+        </Surface>
+      )}
+
+      {stale && latest && (
+        <Surface tone="warning">
+          <div className="ui-kicker">Not collecting</div>
+          <p className="ui-muted" style={{ fontSize: 12, marginTop: 8 }}>
+            The latest sample is {formatUptime(latest.age_s)} old: the values below are not current. Check that the Rev4a daemon is running.
+          </p>
+        </Surface>
+      )}
+
+      {firstLoad ? <SystemCardsSkeleton /> : (
+      <div className="system-cards">
+        <Surface as="article">
+          <div className="ui-kicker">CPU</div>
+          <div className="ui-metric-value">{cpu !== null ? `${Math.round(cpu)}%` : '—'}</div>
+          {cpu !== null && <Meter percent={cpu} level={meterLevel(cpu, ...CPU_RAM_LEVELS)} label="CPU in use" />}
+          <div className="ui-key-values" style={{ marginTop: 12 }}>
+            <div className="ui-key-value"><span className="ui-muted">Cores</span><span>{host?.cores ?? '—'}</span></div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Load 1 / 5 / 15 min</span>
+              <span>{latest ? `${latest.load_avg_1m ?? '—'} / ${latest.load_avg_5m ?? '—'} / ${latest.load_avg_15m ?? '—'}` : '—'}</span>
+            </div>
+          </div>
+        </Surface>
+
+        <Surface as="article">
+          <div className="ui-kicker">Memory</div>
+          <div className="ui-metric-value">{ramPct !== null ? `${Math.round(ramPct)}%` : '—'}</div>
+          {ramPct !== null && <Meter percent={ramPct} level={meterLevel(ramPct, ...CPU_RAM_LEVELS)} label="Memory in use" />}
+          <div className="ui-key-values" style={{ marginTop: 12 }}>
+            <div className="ui-key-value">
+              <span className="ui-muted">Used / total</span>
+              <span>{latest ? `${formatMb(latest.ram_used_mb)} / ${formatMb(latest.ram_total_mb)}` : '—'}</span>
+            </div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Available</span>
+              <span>{latest && latest.ram_total_mb !== null && latest.ram_used_mb !== null ? formatMb(latest.ram_total_mb - latest.ram_used_mb) : '—'}</span>
+            </div>
+            <div className="ui-key-value">
+              <span className="ui-muted">Swap used / total</span>
+              <span>{latest && latest.swap_total_mb ? `${formatMb(latest.swap_used_mb)} / ${formatMb(latest.swap_total_mb)}` : 'none'}</span>
+            </div>
+          </div>
+        </Surface>
+
+        <Surface as="article">
+          <div className="ui-kicker">Storage</div>
+          {!latest?.disks.length && <div className="ui-metric-value">—</div>}
+          {latest?.disks.map((d) => (
+            <div key={d.mount} style={{ marginTop: 14 }}>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
+                <span style={{ fontSize: 13 }}>{d.mount}</span>
+                <span style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  {d.roles.map((r) => <Pill key={r}>{ROLE_LABEL[r] ?? r}</Pill>)}
+                </span>
+              </div>
+              <Meter percent={d.percent} level={meterLevel(d.percent, ...DISK_LEVELS)} label={`Storage in use on ${d.mount}`} />
+              <div className="ui-key-value" style={{ marginTop: 6 }}>
+                <span className="ui-muted">{d.percent}% · {formatMb(d.used_mb)} of {formatMb(d.total_mb)}</span>
+                <span>{formatMb(d.avail_mb)} free</span>
+              </div>
+            </div>
+          ))}
+        </Surface>
+      </div>
+      )}
+
+      <Tabs items={RANGES.map((r) => ({ label: r.label, active: range === r.id, onClick: () => setRange(r.id) }))} />
+
+      {firstLoad ? <SystemChartsSkeleton /> : (
+      <div className="system-charts">
+        <Surface as="section">
+          <div className="ui-kicker">CPU · average and peak</div>
+          <TimeSeriesChart
+            label="CPU in use"
+            points={(data?.history ?? []).map((p) => ({ ts: p.ts, value: p.cpu_avg, peak: p.cpu_max }))}
+            from={from}
+            to={to}
+            bucket={data?.bucket_s ?? 30}
+            stale={chartStale}
+            formatTime={formatTime}
+          />
+        </Surface>
+        <Surface as="section">
+          <div className="ui-kicker">Memory · average and peak</div>
+          <TimeSeriesChart
+            label="Memory in use"
+            points={(data?.history ?? []).map((p) => ({ ts: p.ts, value: p.ram_avg, peak: p.ram_max }))}
+            from={from}
+            to={to}
+            bucket={data?.bucket_s ?? 30}
+            stale={chartStale}
+            formatTime={formatTime}
+          />
+        </Surface>
+        {(data?.disk_history ?? []).map((d) => (
+          <Surface as="section" key={d.mount}>
+            <div className="ui-kicker">Storage · {d.mount}</div>
+            <TimeSeriesChart
+              label={`Storage in use on ${d.mount}`}
+              points={d.points.map((p) => ({ ts: p.ts, value: p.percent }))}
+              from={from}
+              to={to}
+              bucket={data?.bucket_s ?? 30}
+              stale={chartStale}
+              formatTime={formatTime}
+            />
+          </Surface>
+        ))}
+      </div>
+      )}
+    </Page>
+  );
+}

package/app/system/SystemSkeleton.tsx

@@ -0,0 +1,115 @@
+import { Skeleton } from '../components/Skeleton';
+import { Surface } from '../components/ui';
+
+/**
+ * Placeholders for the System page, used by `loading.tsx` while the route loads and by the
+ * page before its first answer. Each shimmer sits inside the same class as the text it
+ * stands in for (`ui-kicker`, `ui-metric-value`, `ui-key-value`, `ui-meter`), so the line
+ * boxes — and the card, grid and page heights — are the real ones and nothing jumps when
+ * the data lands. Measured against the loaded page, desktop and mobile.
+ */
+
+/**
+ * The header description: a fixed sentence, then the host facts on one line of their own —
+ * cut with an ellipsis rather than wrapped, so a long hostname cannot change the height.
+ */
+export function SystemDescription({ host }: { host: string | null }) {
+  return (
+    <>
+      CPU, memory and storage of the machine Rev4a runs on.
+      {/* width 0 + min-width 100%: the line takes the header's width without adding its own
+          (unwrapped) width to the header's minimum — else a long hostname widens the page. */}
+      <span style={{ display: 'block', width: 0, minWidth: '100%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {host ?? <Skeleton as="span" inline width={260} height={12} />}
+      </span>
+    </>
+  );
+}
+
+function KeyValueRow({ label, value }: { label: number; value: number }) {
+  return (
+    <div className="ui-key-value">
+      <span><Skeleton as="span" inline width={label} height={11} /></span>
+      <span><Skeleton as="span" inline width={value} height={11} /></span>
+    </div>
+  );
+}
+
+function MeterRow() {
+  return (
+    <div className="ui-meter">
+      <Skeleton height={6} style={{ flex: 1 }} />
+    </div>
+  );
+}
+
+function FigureCard({ title, rows }: { title: number; rows: [number, number][] }) {
+  return (
+    <Surface as="article">
+      <div className="ui-kicker"><Skeleton as="span" inline width={title} height={10} /></div>
+      <div className="ui-metric-value"><Skeleton as="span" inline width={72} height={26} accent /></div>
+      <MeterRow />
+      <div className="ui-key-values" style={{ marginTop: 12 }}>
+        {rows.map(([l, v], i) => <KeyValueRow key={i} label={l} value={v} />)}
+      </div>
+    </Surface>
+  );
+}
+
+export function SystemCardsSkeleton() {
+  return (
+    <div className="system-cards" aria-busy="true" aria-label="Loading machine metrics">
+      <FigureCard title={28} rows={[[40, 20], [120, 110]]} />
+      <FigureCard title={52} rows={[[80, 110], [64, 48], [110, 90]]} />
+      <Surface as="article">
+        <div className="ui-kicker"><Skeleton as="span" inline width={56} height={10} /></div>
+        <div style={{ marginTop: 14 }}>
+          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
+            <span style={{ fontSize: 13 }}><Skeleton as="span" inline width={24} height={12} /></span>
+            <span style={{ display: 'flex', gap: 4 }}>
+              <span className="ui-pill"><Skeleton as="span" inline width={40} height={9} /></span>
+              <span className="ui-pill"><Skeleton as="span" inline width={56} height={9} /></span>
+            </span>
+          </div>
+          <MeterRow />
+          <div style={{ marginTop: 6 }}>
+            <KeyValueRow label={150} value={80} />
+          </div>
+        </div>
+      </Surface>
+    </div>
+  );
+}
+
+/** The chart grid: CPU, memory and one disk, each at the real plot height (160 px). */
+export function SystemChartsSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="system-charts" aria-hidden="true">
+      {Array.from({ length: count }).map((_, i) => (
+        <Surface as="section" key={i}>
+          <div className="ui-kicker"><Skeleton as="span" inline width={150} height={10} /></div>
+          <Skeleton height={160} />
+          <div className="ui-chart__table">
+            <div style={{ fontSize: 10 }}><Skeleton as="span" inline width={48} height={9} /></div>
+          </div>
+        </Surface>
+      ))}
+    </div>
+  );
+}
+
+/** The range switch (1h · 24h · 7d · 30d) for the route's loading state, where the real tabs cannot render. */
+export function SystemRangeSkeleton() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ display: 'flex', borderBottom: '1px solid var(--border)', marginBottom: 20, height: 44, alignItems: 'center' }}
+    >
+      {[18, 24, 18, 24].map((w, i) => (
+        <div key={i} style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          <Skeleton width={w} height={11} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/system/loading.tsx

@@ -0,0 +1,13 @@
+import { Page, PageHeader } from '../components/ui';
+import { SystemCardsSkeleton, SystemChartsSkeleton, SystemDescription, SystemRangeSkeleton } from './SystemSkeleton';
+
+export default function SystemLoading() {
+  return (
+    <Page>
+      <PageHeader eyebrow="Host" title="System" description={<SystemDescription host={null} />} />
+      <SystemCardsSkeleton />
+      <SystemRangeSkeleton />
+      <SystemChartsSkeleton />
+    </Page>
+  );
+}