@opengeni/react 0.12.0 → 0.15.0

package/src/components/machine-dock-bar.tsx

@@ -22,10 +22,9 @@ export type MachineDockBarProps = {
  * render IDENTICALLY regardless of backend — this bar is the only backend-aware
  * chrome (the dock-parity contract: selfhosted == Modal for the surfaces).
  */
-export function MachineDockBar({ name, kind, state, sharedSessionCount, className }: MachineDockBarProps) {
+export function MachineDockBar({ name, kind, state, className }: MachineDockBarProps) {
   const Icon = kind === "selfhosted" ? LaptopIcon : CpuIcon;
   const stateBadge = MACHINE_STATE_BADGE_META[state];
-  const shared = (sharedSessionCount ?? 0) > 1;
   return (
     <div
       data-machine-dock-bar
@@ -40,13 +39,20 @@ export function MachineDockBar({ name, kind, state, sharedSessionCount, classNam
         {stateBadge ? (
           <span
             data-state-badge={state}
-            className={cn("shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium", stateBadge.badgeClassName)}
+            className={cn(
+              "shrink-0 rounded-full border px-1.5 py-px text-[10px] font-medium",
+              stateBadge.badgeClassName,
+            )}
           >
             {stateBadge.label}
           </span>
         ) : null}
       </div>
-      <ConnectionStatusPill status={connectionStatusForState(state)} size="sm" className="shrink-0" />
+      <ConnectionStatusPill
+        status={connectionStatusForState(state)}
+        size="sm"
+        className="shrink-0"
+      />
     </div>
   );
 }
@@ -63,21 +69,27 @@ export type SharedMachineDisclosureProps = {
  * dock (and reused on the desktop take-control gate) so the user knows others are
  * driving the same whole-machine lease. Render when `sharedSessionCount > 1`.
  */
-export function SharedMachineDisclosure({ sharedSessionCount, density = "compact", className }: SharedMachineDisclosureProps) {
+export function SharedMachineDisclosure({
+  sharedSessionCount,
+  density = "compact",
+  className,
+}: SharedMachineDisclosureProps) {
   const others = Math.max(0, sharedSessionCount - 1);
   return (
     <div
       data-shared-disclosure
       className={cn(
         "flex items-center gap-1.5 border-og-accent/25 bg-og-accent-soft text-og-fg-muted",
-        density === "full" ? "rounded-og-md border px-3 py-2 text-[12px]" : "border-b px-2.5 py-1 text-[11px]",
+        density === "full"
+          ? "rounded-og-md border px-3 py-2 text-[12px]"
+          : "border-b px-2.5 py-1 text-[11px]",
         className,
       )}
     >
       <UsersIcon className="size-3.5 shrink-0 text-og-accent" aria-hidden />
       <span>
-        Shared — {others === 1 ? "another session is" : `${others} other sessions are`} on this machine. They see the same
-        terminal, files, and desktop.
+        Shared — {others === 1 ? "another session is" : `${others} other sessions are`} on this
+        machine. They see the same terminal, files, and desktop.
       </span>
     </div>
   );

package/src/components/machine-health-pill.tsx

@@ -0,0 +1,68 @@
+// The card's primary status: the fused HEALTH verdict (dot + label), which
+// subsumes plain connection state (offline/reconnecting fall out of it) and adds
+// resource-pressure + staleness. Capability limitations (consent / no display /
+// enrolling) are orthogonal to reachability, so they ride alongside as their own
+// quiet chip — reusing the existing badge meta so the two surfaces never drift.
+import { cn } from "../lib/cn";
+import type { MachineState, MetricSample } from "../types/machines";
+import { deriveHealth, HEALTH_TOKEN, healthPulses } from "./machines/health";
+import { MACHINE_STATE_BADGE_META } from "./machine-status-pill";
+
+export type MachineHealthPillProps = {
+  state: MachineState;
+  metrics: MetricSample | null;
+  now?: number | undefined;
+  size?: "sm" | "md" | undefined;
+  className?: string | undefined;
+};
+
+export function MachineHealthPill({
+  state,
+  metrics,
+  now,
+  size = "sm",
+  className,
+}: MachineHealthPillProps) {
+  const health = deriveHealth(state, metrics, now ?? Date.now());
+  const tone = HEALTH_TOKEN[health.level];
+  const badge = MACHINE_STATE_BADGE_META[state];
+  const pad = size === "md" ? "px-2.5 py-1 text-og-sm" : "px-2 py-0.5 text-og-xs";
+
+  return (
+    <div className={cn("flex shrink-0 items-center gap-1.5", className)}>
+      {badge ? (
+        <span
+          className={cn(
+            "rounded-full border px-2 py-0.5 text-og-xs font-medium",
+            badge.badgeClassName,
+          )}
+        >
+          {badge.label}
+        </span>
+      ) : null}
+      <span
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-full border font-medium",
+          pad,
+          tone.soft,
+          tone.text,
+        )}
+        data-health={health.level}
+        title={health.reason}
+      >
+        <span className="relative flex size-2">
+          {healthPulses(health.level) && (
+            <span
+              className={cn(
+                "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                tone.dot,
+              )}
+            />
+          )}
+          <span className={cn("relative inline-flex size-2 rounded-full", tone.dot)} />
+        </span>
+        {health.label}
+      </span>
+    </div>
+  );
+}

package/src/components/machine-metrics.tsx

@@ -28,12 +28,20 @@ function Meter({
   fillPct: number;
   tone: "ok" | "warn" | "hot";
 }) {
+  // Traffic-light ramp, aligned with the fused health verdict: calm resources
+  // read green (idle), pressure ambers (running), near-the-wall reds (failed).
   const fillClass =
-    tone === "hot" ? "bg-og-status-failed" : tone === "warn" ? "bg-og-status-waiting" : "bg-og-status-running";
+    tone === "hot"
+      ? "bg-og-status-failed"
+      : tone === "warn"
+        ? "bg-og-status-running"
+        : "bg-og-status-idle";
   return (
     <div className="flex min-w-0 flex-col gap-1" data-metric={label.toLowerCase()}>
       <div className="flex items-baseline justify-between gap-2">
-        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">{label}</span>
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+          {label}
+        </span>
         <span className="font-og-mono text-[11px] tabular-nums text-og-fg-muted">{value}</span>
       </div>
       <div className="h-1 w-full overflow-hidden rounded-full bg-og-surface-2">
@@ -53,16 +61,12 @@ function toneFor(p: number): "ok" | "warn" | "hot" {
   return "ok";
 }
 
-/** The token text color for a tone (matches the `Meter` fill ramp). */
-function toneTextClass(tone: "ok" | "warn" | "hot"): string {
-  return tone === "hot" ? "text-og-status-failed" : tone === "warn" ? "text-og-status-waiting" : "text-og-status-running";
-}
-
 /**
  * Load average as three labeled mini-stats (1m / 5m / 15m) — an honest triple of
- * numbers, NOT a fake gauge. The whole triple is tinted by `load1`'s tone (load
- * isn't a 0..100 ratio, so we tone it but never draw a bar). Run queue rides
- * alongside as a quiet chip when there's pending work.
+ * numbers, NOT a fake gauge. Load is not a 0..100 ratio and we don't know the
+ * core count, so a raw load of 2 or 8 is not inherently "bad" — we render it
+ * NEUTRAL rather than falsely alarming. The real saturation signal is the run
+ * queue, which rides alongside as a quiet chip when there's pending work.
  */
 function StatTriple({
   load1,
@@ -75,9 +79,6 @@ function StatTriple({
   load15: number;
   runQueue: number;
 }) {
-  // Load isn't a percent — tone by load1 against a nominal single-core ceiling
-  // (≥0.9/core ≈ saturated). Used only to tint the labels/values, never a bar.
-  const tone = toneFor(load1 * 100);
   const stats: Array<{ label: string; value: number }> = [
     { label: "1m", value: load1 },
     { label: "5m", value: load5 },
@@ -86,14 +87,16 @@ function StatTriple({
   return (
     <div className="flex items-center justify-between gap-3" data-metric="load">
       <div className="flex min-w-0 flex-col gap-1">
-        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">Load</span>
+        <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+          Load
+        </span>
         <div className="flex items-baseline gap-3">
           {stats.map((s) => (
             <div key={s.label} className="flex items-baseline gap-1">
-              <span className={cn("text-[10px] font-medium uppercase tracking-wide", toneTextClass(tone))}>
+              <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
                 {s.label}
               </span>
-              <span className={cn("font-og-mono text-[12px] tabular-nums", toneTextClass(tone))}>
+              <span className="font-og-mono text-[12px] tabular-nums text-og-fg">
                 {s.value.toFixed(2)}
               </span>
             </div>
@@ -128,8 +131,10 @@ export function MachineMetrics({ metrics, density = "compact", className }: Mach
     );
   }
 
-  const memPct = metrics.memTotalBytes > 0 ? (metrics.memUsedBytes / metrics.memTotalBytes) * 100 : 0;
-  const diskPct = metrics.diskTotalBytes > 0 ? (metrics.diskUsedBytes / metrics.diskTotalBytes) * 100 : 0;
+  const memPct =
+    metrics.memTotalBytes > 0 ? (metrics.memUsedBytes / metrics.memTotalBytes) * 100 : 0;
+  const diskPct =
+    metrics.diskTotalBytes > 0 ? (metrics.diskUsedBytes / metrics.diskTotalBytes) * 100 : 0;
   const hasGpu = metrics.gpuUtilPct !== null;
   const gpuMemLabel = metrics.gpuMemBytes !== null ? formatBytes(metrics.gpuMemBytes) : null;
   // Memory & disk are honest used/total ratios → full-width meters; stack them in
@@ -165,7 +170,11 @@ export function MachineMetrics({ metrics, density = "compact", className }: Mach
         {hasGpu ? (
           <Meter
             label="GPU"
-            value={gpuMemLabel ? `${metrics.gpuUtilPct!.toFixed(0)}% · ${gpuMemLabel}` : `${metrics.gpuUtilPct!.toFixed(0)}%`}
+            value={
+              gpuMemLabel
+                ? `${metrics.gpuUtilPct!.toFixed(0)}% · ${gpuMemLabel}`
+                : `${metrics.gpuUtilPct!.toFixed(0)}%`
+            }
             fillPct={metrics.gpuUtilPct!}
             tone={toneFor(metrics.gpuUtilPct!)}
           />

package/src/components/machine-status-pill.tsx

@@ -73,7 +73,12 @@ export type ConnectionStatusPillProps = {
  * the Machines dashboard, the dock header, and the session timeline. Reconnecting
  * breathes (the resiliency-as-headline blip), online/offline hold still.
  */
-export function ConnectionStatusPill({ status, label, size = "md", className }: ConnectionStatusPillProps) {
+export function ConnectionStatusPill({
+  status,
+  label,
+  size = "md",
+  className,
+}: ConnectionStatusPillProps) {
   const meta = CONNECTION_STATUS_META[status];
   return (
     <span
@@ -100,8 +105,16 @@ export type ConnectionDotProps = {
 export function ConnectionDot({ status, className }: ConnectionDotProps) {
   const meta = CONNECTION_STATUS_META[status];
   return (
-    <span className={cn("relative inline-flex size-1.5 shrink-0 rounded-full", meta.dotClassName, className)}>
-      {meta.pulse ? <span className={cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName)} /> : null}
+    <span
+      className={cn(
+        "relative inline-flex size-1.5 shrink-0 rounded-full",
+        meta.dotClassName,
+        className,
+      )}
+    >
+      {meta.pulse ? (
+        <span className={cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName)} />
+      ) : null}
     </span>
   );
 }
@@ -121,11 +134,19 @@ export type MachineStatusPillProps = {
  * dashboard row, the dock header, and the timeline all reuse so the status
  * language is identical everywhere.
  */
-export function MachineStatusPill({ state, sharedSessionCount, size = "md", className }: MachineStatusPillProps) {
+export function MachineStatusPill({
+  state,
+  sharedSessionCount,
+  size = "md",
+  className,
+}: MachineStatusPillProps) {
   const stateBadge = MACHINE_STATE_BADGE_META[state];
   const shared = (sharedSessionCount ?? 0) > 1;
   return (
-    <span className={cn("og-root inline-flex flex-wrap items-center gap-1", className)} data-machine-state={state}>
+    <span
+      className={cn("og-root inline-flex flex-wrap items-center gap-1", className)}
+      data-machine-state={state}
+    >
       <ConnectionStatusPill status={connectionStatusForState(state)} size={size} />
       {stateBadge ? (
         <span

package/src/components/machines/health.ts

@@ -0,0 +1,146 @@
+// ----------------------------------------------------------------------------
+// Machine health — the single derived signal.
+//
+// The dashboard already shows connection state (a pill) and per-resource meters
+// (independently tinted). What it lacks is ONE verdict that fuses the three
+// things that actually make a machine "in trouble":
+//
+//   1. reachability   — is the control plane still hearing from it?
+//   2. resource load  — is a resource (mem/disk/cpu) near the wall?
+//   3. freshness      — is the latest sample recent, or has telemetry gone quiet?
+//
+// This module is a PURE function from a machine's state + latest sample + clock
+// to a `HealthVerdict`. No React, no tokens — the UI maps `level` to a color.
+// Keeping it pure means it is trivially testable and reused by cards, the detail
+// hero, and any future fleet-summary count.
+// ----------------------------------------------------------------------------
+import type { MachineState, MetricSample } from "../../types/machines";
+
+export type HealthLevel = "healthy" | "degraded" | "critical" | "offline" | "unknown";
+
+export type HealthVerdict = {
+  level: HealthLevel;
+  /** Title-case label for the pill ("Healthy", "Under load", "Critical", …). */
+  label: string;
+  /** One short human clause naming the dominant cause ("Memory 94%", "No display"…). */
+  reason: string;
+  /** The latest sample is older than we'd expect from a live agent (~5s cadence). */
+  stale: boolean;
+};
+
+// Resource pressure thresholds. `warn` mirrors the existing meter ramp (>=70
+// tints), `crit` is the "near the wall" line. Disk is stricter than CPU/mem
+// because a full disk is a hard failure, whereas transient CPU/mem spikes are
+// normal on a working machine.
+const PRESSURE = {
+  cpu: { warn: 90, crit: 98 },
+  mem: { warn: 85, crit: 95 },
+  disk: { warn: 90, crit: 96 },
+} as const;
+
+// A live agent samples ~every 5s and the series downsamples to ~1/min. We treat
+// a latest sample older than 45s as "telemetry has gone quiet" — enough slack to
+// not flap on a single missed beat, tight enough to notice a wedged sampler.
+const STALE_AFTER_MS = 45_000;
+
+function pct(used: number, total: number): number {
+  if (!Number.isFinite(used) || !Number.isFinite(total) || total <= 0) return 0;
+  return (used / total) * 100;
+}
+
+/** Fold a machine's reachability + latest sample + wall-clock into one verdict. */
+export function deriveHealth(
+  state: MachineState,
+  metrics: MetricSample | null,
+  now: number = Date.now(),
+): HealthVerdict {
+  // Reachability dominates: an offline machine has no meaningful resource story.
+  if (state === "offline") {
+    return { level: "offline", label: "Offline", reason: "Not reachable", stale: true };
+  }
+  if (state === "enrolling") {
+    return { level: "unknown", label: "Enrolling", reason: "Completing enrollment", stale: false };
+  }
+
+  const stale = metrics ? now - new Date(metrics.sampledAt).getTime() > STALE_AFTER_MS : true;
+
+  // Reconnecting, or online-but-quiet: reachable yet we can't trust the numbers.
+  if (state === "reconnecting") {
+    return { level: "degraded", label: "Reconnecting", reason: "Re-establishing link", stale };
+  }
+  if (!metrics) {
+    return { level: "unknown", label: "Online", reason: "Awaiting first sample", stale };
+  }
+  if (stale) {
+    return { level: "degraded", label: "Telemetry stale", reason: "No recent sample", stale: true };
+  }
+
+  // Reachable + fresh: the verdict is now the worst resource pressure. Evaluate
+  // each resource, keep the most severe, and name it in the reason.
+  const memPct = pct(metrics.memUsedBytes, metrics.memTotalBytes);
+  const diskPct = pct(metrics.diskUsedBytes, metrics.diskTotalBytes);
+  const cpu = metrics.cpuPct;
+
+  const pressures: Array<{ level: HealthLevel; reason: string; sev: number }> = [
+    resolve("Disk", diskPct, PRESSURE.disk),
+    resolve("Memory", memPct, PRESSURE.mem),
+    resolve("CPU", cpu, PRESSURE.cpu),
+  ];
+  const worst = pressures.reduce((a, b) => (b.sev > a.sev ? b : a));
+
+  if (worst.sev === 2) return { level: "critical", label: "Critical", reason: worst.reason, stale };
+  if (worst.sev === 1)
+    return { level: "degraded", label: "Under load", reason: worst.reason, stale };
+  return { level: "healthy", label: "Healthy", reason: "All systems nominal", stale };
+}
+
+function resolve(
+  name: string,
+  value: number,
+  t: { warn: number; crit: number },
+): { level: HealthLevel; reason: string; sev: number } {
+  const rounded = Math.round(value);
+  if (value >= t.crit) return { level: "critical", reason: `${name} ${rounded}%`, sev: 2 };
+  if (value >= t.warn) return { level: "degraded", reason: `${name} ${rounded}%`, sev: 1 };
+  return { level: "healthy", reason: `${name} ${rounded}%`, sev: 0 };
+}
+
+// --- UI mapping helpers (color/token names live here so every surface agrees) --
+
+/**
+ * The token color ramp for a health level. Green/amber/red/grey is the
+ * universally-legible traffic model; we reserve it for the HEALTH verdict
+ * specifically (per-resource meters keep their own ramp in `machine-metrics`).
+ */
+export const HEALTH_TOKEN: Record<HealthLevel, { text: string; dot: string; soft: string }> = {
+  healthy: {
+    text: "text-og-status-idle",
+    dot: "bg-og-status-idle",
+    soft: "bg-og-status-idle/10 border-og-status-idle/25",
+  },
+  degraded: {
+    text: "text-og-status-running",
+    dot: "bg-og-status-running",
+    soft: "bg-og-status-running/10 border-og-status-running/25",
+  },
+  critical: {
+    text: "text-og-status-failed",
+    dot: "bg-og-status-failed",
+    soft: "bg-og-status-failed/10 border-og-status-failed/30",
+  },
+  offline: {
+    text: "text-og-fg-subtle",
+    dot: "bg-og-fg-subtle",
+    soft: "bg-og-surface-2 border-og-border",
+  },
+  unknown: {
+    text: "text-og-fg-muted",
+    dot: "bg-og-fg-muted",
+    soft: "bg-og-surface-2 border-og-border",
+  },
+};
+
+/** Live/transient levels breathe; settled levels hold still. */
+export function healthPulses(level: HealthLevel): boolean {
+  return level === "degraded" || level === "critical";
+}

package/src/components/machines/machine-detail.tsx

@@ -0,0 +1,220 @@
+// ----------------------------------------------------------------------------
+// MachineDetail — the marquee per-machine telemetry view.
+//
+// Opens from a machine card. Answers, at a glance and then in depth: is this
+// machine healthy right now (one fused verdict), what are its live numbers, and
+// how have they moved over the chosen window. Built entirely on the existing
+// `og-*` token system — no new visual language, just the missing depth.
+// ----------------------------------------------------------------------------
+import { ArrowLeftIcon, CpuIcon, LaptopIcon, RadioIcon, ServerIcon } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { formatRelativeTime } from "../../lib/format";
+import type { MachineView, MetricSample } from "../../types/machines";
+import { deriveHealth, HEALTH_TOKEN, healthPulses } from "./health";
+import { MetricHistoryChart } from "./metric-history-chart";
+import { MetricSparkline } from "./metric-sparkline";
+import { METRICS, METRIC_WINDOWS, pointsFor, WINDOW_LABEL, type MetricWindow } from "./series";
+
+export type MachineDetailProps = {
+  machine: MachineView;
+  /** Downsampled history for the active window (from `fetchSeries`). */
+  series: MetricSample[];
+  window: MetricWindow;
+  onWindowChange: (w: MetricWindow) => void;
+  loadingSeries?: boolean | undefined;
+  onBack?: (() => void) | undefined;
+  now?: number | undefined;
+  className?: string | undefined;
+};
+
+function KindIcon({ kind, session }: { kind: string; session: boolean }) {
+  if (session) return <ServerIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  if (kind === "modal") return <CpuIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+  return <LaptopIcon className="size-4 text-og-fg-subtle" aria-hidden />;
+}
+
+export function MachineDetail({
+  machine,
+  series,
+  window,
+  onWindowChange,
+  loadingSeries,
+  onBack,
+  now = Date.now(),
+  className,
+}: MachineDetailProps) {
+  const health = deriveHealth(machine.state, machine.metrics, now);
+  const tone = HEALTH_TOKEN[health.level];
+  const latest = machine.metrics;
+  const sampledAgo = latest ? formatRelativeTime(latest.sampledAt, new Date(now)) : null;
+
+  // Only render metrics that have a value (GPU is dropped on headless boxes).
+  const visible = METRICS.filter((m) => !(m.key === "gpu" && latest?.gpuUtilPct == null));
+  // The tile grid tracks the metric count exactly so it never leaves a dead cell.
+  const tileCols =
+    visible.length >= 5
+      ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5"
+      : "grid-cols-2 sm:grid-cols-4";
+
+  return (
+    <div className={cn("og-root mx-auto flex w-full max-w-5xl flex-col gap-5", className)}>
+      {/* ── top bar ─────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2.5">
+          {onBack && (
+            <button
+              type="button"
+              onClick={onBack}
+              className="flex size-7 shrink-0 items-center justify-center rounded-og-sm border border-og-border bg-og-surface-1 text-og-fg-muted transition-colors hover:bg-og-surface-2 hover:text-og-fg"
+              aria-label="Back to machines"
+            >
+              <ArrowLeftIcon className="size-3.5" aria-hidden />
+            </button>
+          )}
+          <KindIcon kind={machine.kind} session={machine.isSessionGroup} />
+          <h1 className="truncate text-og-md font-semibold text-og-fg">{machine.name}</h1>
+          <span className="hidden shrink-0 rounded-og-sm border border-og-border bg-og-surface-1 px-1.5 py-0.5 font-og-mono text-og-xs text-og-fg-subtle sm:inline">
+            {machine.os} · {machine.arch}
+          </span>
+        </div>
+
+        {/* range selector */}
+        <div className="flex shrink-0 items-center gap-0.5 rounded-og-md border border-og-border bg-og-surface-1 p-0.5">
+          {METRIC_WINDOWS.map((w) => (
+            <button
+              key={w}
+              type="button"
+              onClick={() => onWindowChange(w)}
+              data-active={w === window}
+              className={cn(
+                "rounded-og-sm px-2 py-1 font-og-mono text-og-xs transition-colors",
+                w === window
+                  ? "bg-og-surface-3 text-og-fg shadow-og-sm"
+                  : "text-og-fg-subtle hover:text-og-fg-muted",
+              )}
+            >
+              {w}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── health hero ─────────────────────────────────────────────────── */}
+      <div
+        className={cn(
+          "relative flex flex-col gap-4 overflow-hidden rounded-og-lg border p-5 shadow-og-sm",
+          tone.soft,
+        )}
+      >
+        <span aria-hidden className={cn("absolute inset-y-0 left-0 w-1", tone.dot)} />
+        <div className="flex flex-wrap items-center justify-between gap-3 pl-1">
+          <div className="flex items-center gap-3">
+            <span className="relative flex size-3">
+              {healthPulses(health.level) && (
+                <span
+                  className={cn(
+                    "absolute inline-flex size-full animate-og-pulse rounded-full opacity-60",
+                    tone.dot,
+                  )}
+                />
+              )}
+              <span className={cn("relative inline-flex size-3 rounded-full", tone.dot)} />
+            </span>
+            <div className="flex flex-col">
+              <span className={cn("text-og-md font-semibold", tone.text)}>{health.label}</span>
+              <span className="text-og-sm text-og-fg-muted">{health.reason}</span>
+            </div>
+          </div>
+          <div className="flex items-start gap-5 pr-1">
+            {sampledAgo && (
+              <div className="flex flex-col items-end gap-0.5">
+                <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+                  Sampled
+                </span>
+                <span className="flex items-center gap-1 font-og-mono text-og-sm tabular-nums text-og-fg">
+                  <RadioIcon
+                    className={cn("size-3", health.stale ? "text-og-fg-subtle" : tone.text)}
+                    aria-hidden
+                  />
+                  {sampledAgo === "now" ? "live" : `${sampledAgo} ago`}
+                </span>
+              </div>
+            )}
+            {machine.lastSeenAt && (
+              <div className="hidden flex-col items-end gap-0.5 sm:flex">
+                <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+                  Last seen
+                </span>
+                <span className="font-og-mono text-og-sm tabular-nums text-og-fg-muted">
+                  {formatRelativeTime(machine.lastSeenAt, new Date(now))}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* current-stat tiles */}
+        {latest && (
+          <div
+            className={cn(
+              "grid gap-px overflow-hidden rounded-og-md border border-og-border bg-og-border",
+              tileCols,
+            )}
+          >
+            {visible.map((m) => {
+              const pts = pointsFor(m, series);
+              return (
+                <div key={m.key} className="flex flex-col gap-1.5 bg-og-surface-1 p-3">
+                  <span className="text-[10px] font-medium uppercase tracking-wide text-og-fg-subtle">
+                    {m.title}
+                  </span>
+                  <span className="font-og-mono text-og-md font-medium tabular-nums text-og-fg">
+                    {m.current(latest)}
+                  </span>
+                  <MetricSparkline points={pts} color={m.color} yMax={m.yMax} height={22} />
+                  {m.sub && (
+                    <span className="truncate font-og-mono text-[10px] text-og-fg-subtle">
+                      {m.sub(latest)}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ── history charts ──────────────────────────────────────────────── */}
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        {visible.map((m) => {
+          const pts = pointsFor(m, series);
+          return (
+            <div
+              key={m.key}
+              className="flex flex-col gap-3 rounded-og-lg border border-og-border bg-og-surface-1 p-4 shadow-og-sm"
+            >
+              <div className="flex items-baseline justify-between">
+                <span className="text-og-sm font-medium text-og-fg">{m.title}</span>
+                {latest && (
+                  <span className="font-og-mono text-og-sm tabular-nums text-og-fg-muted">
+                    {m.current(latest)}
+                  </span>
+                )}
+              </div>
+              <MetricHistoryChart
+                points={pts}
+                yMax={m.yMax}
+                unit={m.unit}
+                color={m.color}
+                thresholds={m.thresholds}
+                rangeLabel={WINDOW_LABEL[window]}
+                height={128}
+                className={cn(loadingSeries && "opacity-50 transition-opacity")}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}