@hienlh/ppm 0.23.6 → 0.23.8

package/src/web/components/system/metric-chart-canvas.tsx

@@ -8,12 +8,33 @@ export interface MetricSeries {
 }
 
 interface MetricChartCanvasProps {
-  /** 1-2 series drawn on the same axis. */
+  /** Series drawn on the same axis. Overlaid by default; see `stacked`. */
   series: MetricSeries[];
   height: number;
   /** Fixed scale ceiling (e.g. 100 for a percentage axis). Omitted = autoscale to
    *  the max across all series in the visible window. */
   maxValue?: number;
+  /** Mission Center's faint ruled background. Off by default — the Overview cards
+   *  are 56px tall and a grid in there is noise rather than a reading aid. */
+  grid?: boolean;
+  /** Stack the series instead of overlaying them: each is drawn on top of the sum
+   *  of the ones before it, so the top edge is the total. The caller supplies
+   *  values that already sum to the scale (24 threads each divided by 24), because
+   *  only the caller knows what the total is supposed to mean. */
+  stacked?: boolean;
+}
+
+/** Mission Center's ruling: ten columns and five rows, fixed rather than derived
+ *  from the point count, so the background does not crawl as the window fills. */
+const GRID_COLS = 10;
+const GRID_ROWS = 5;
+
+/** The per-column sums a stack reaches, which is what its axis has to fit. */
+function stackedTotals(series: MetricSeries[]): number[] {
+  const len = Math.max(0, ...series.map((s) => s.data.length));
+  const totals = new Array(len).fill(0);
+  for (const s of series) for (let i = 0; i < s.data.length; i++) totals[i] += s.data[i] ?? 0;
+  return totals;
 }
 
 /** Generalised, filled, multi-series canvas chart for the Overview cards. Fills the
@@ -25,6 +46,8 @@ export const MetricChartCanvas = memo(function MetricChartCanvas({
   series,
   height,
   maxValue,
+  grid = false,
+  stacked = false,
 }: MetricChartCanvasProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -51,6 +74,26 @@ export const MetricChartCanvas = memo(function MetricChartCanvas({
     const drawH = height - padding * 2;
     const longest = Math.max(1, ...series.map((s) => s.data.length));
 
+    // Behind everything, so a curve is never cut by a rule.
+    if (grid) {
+      ctx.strokeStyle = colorOf("var(--color-border)");
+      ctx.globalAlpha = 0.5;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (let c = 1; c < GRID_COLS; c++) {
+        const x = Math.round((width / GRID_COLS) * c) + 0.5;
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+      for (let r = 1; r < GRID_ROWS; r++) {
+        const y = Math.round((height / GRID_ROWS) * r) + 0.5;
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      ctx.stroke();
+      ctx.globalAlpha = 1;
+    }
+
     // A flat baseline when there isn't enough data yet to draw a meaningful line —
     // a freshly-opened window otherwise shows nothing at all for the first tick.
     if (longest < 2) {
@@ -63,7 +106,40 @@ export const MetricChartCanvas = memo(function MetricChartCanvas({
       return;
     }
 
-    const scaleMax = resolveScaleMax(series.flatMap((s) => s.data), maxValue);
+    const scaleMax = resolveScaleMax(
+      stacked ? stackedTotals(series) : series.flatMap((s) => s.data),
+      maxValue,
+    );
+
+    if (stacked) {
+      // Each band is the area between the running sum before it and after it, so
+      // the visible height of a band IS that series' contribution. Drawn bottom-up
+      // with a closed polygon per band rather than one fill per series over a
+      // shared baseline, which would hide every series behind the first.
+      const below: number[] = new Array(Math.max(0, ...series.map((x) => x.data.length))).fill(0);
+      for (const s of series) {
+        if (s.data.length < 2) continue;
+        const stepX = width / (s.data.length - 1);
+        const yOf = (v: number) => padding + drawH - (v / scaleMax) * drawH;
+        ctx.beginPath();
+        for (let i = 0; i < s.data.length; i++) {
+          const top = (below[i] ?? 0) + (s.data[i] ?? 0);
+          const p = [i * stepX, yOf(top)] as const;
+          if (i === 0) ctx.moveTo(p[0], p[1]);
+          else ctx.lineTo(p[0], p[1]);
+        }
+        for (let i = s.data.length - 1; i >= 0; i--) {
+          ctx.lineTo(i * stepX, yOf(below[i] ?? 0));
+        }
+        ctx.closePath();
+        ctx.fillStyle = colorOf(s.color);
+        ctx.globalAlpha = 0.75;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        for (let i = 0; i < s.data.length; i++) below[i] = (below[i] ?? 0) + (s.data[i] ?? 0);
+      }
+      return;
+    }
 
     for (const s of series) {
       if (s.data.length < 2) continue;
@@ -97,7 +173,7 @@ export const MetricChartCanvas = memo(function MetricChartCanvas({
       }
       ctx.stroke();
     }
-  }, [series, width, height, maxValue]);
+  }, [series, width, height, maxValue, grid, stacked]);
 
   return (
     <div ref={wrapperRef} className="w-full min-w-0 overflow-hidden" style={{ height }}>

package/src/web/components/system/overview-cards/card-shell.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface CardShellProps {
+  testId: string;
+  /** Extra `data-*` the card publishes for tests, e.g. `data-available`. */
+  data?: Record<string, string | number | boolean>;
+  /** Present when this card has a Performance device to open. A card with no
+   *  target — a host reporting no drives at all — stays a plain `div`, because a
+   *  button that does nothing is worse than no button. */
+  onOpen?: () => void;
+  /** What the button announces. Required with `onOpen`: a button's name is
+   *  otherwise computed from its contents, which here is the whole card
+   *  ("CPU 6.9% 12th Gen Intel(R) Core(TM) i9-12900K"). */
+  openLabel?: string;
+  children: ReactNode;
+}
+
+/**
+ * The frame every Overview card shares, and the click that opens its Performance
+ * page. Extracted because all five cards had a byte-identical wrapper and this
+ * adds a conditional element type to each of them.
+ *
+ * It is one button over the whole card rather than a small "details" affordance
+ * in a corner: a 44px target is the mobile floor and the card is the thing the
+ * reader is already pointing at. That does mean the heading inside it stops being
+ * a navigable heading for a screen reader, which is why the name is given
+ * explicitly instead of being read off the contents.
+ */
+export function CardShell({ testId, data, onOpen, openLabel, children }: CardShellProps) {
+  const frame = "rounded-lg border border-border p-4 space-y-2";
+  const attrs = { "data-testid": testId, ...data };
+
+  if (!onOpen) return <div className={frame} {...attrs}>{children}</div>;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={openLabel}
+      {...attrs}
+      className={cn(
+        frame,
+        // `text-left` because a button centres its content, and `w-full` because
+        // it is a grid item that would otherwise shrink to its content.
+        "w-full text-left cursor-pointer transition-colors",
+        "hover:bg-surface-hover hover:border-primary/40",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/web/components/system/overview-cards/cpu-card.tsx

@@ -1,11 +1,14 @@
 import { MetricChartCanvas } from "../metric-chart-canvas";
 import { CpuCoreBars } from "../cpu-core-bars";
+import { CardShell } from "./card-shell";
 
 export interface CpuCardProps {
   total: number;
   cores: number[];
   model: string;
   series: number[];
+  /** Opens the Performance page on this device. */
+  onOpen?: () => void;
 }
 
 function cpuColor(pct: number): string {
@@ -14,12 +17,13 @@ function cpuColor(pct: number): string {
   return "text-success";
 }
 
-export function CpuCard({ total, cores, model, series }: CpuCardProps) {
+export function CpuCard({ total, cores, model, series, onOpen }: CpuCardProps) {
   return (
-    <div
-      className="rounded-lg border border-border p-4 space-y-2"
-      data-testid="sysmon-card-cpu"
-      data-cpu-total={total}
+    <CardShell
+      testId="sysmon-card-cpu"
+      data={{ "data-cpu-total": total }}
+      onOpen={onOpen}
+      openLabel="CPU details"
     >
       <div className="flex items-baseline justify-between">
         <h3 className="text-sm font-medium">CPU</h3>
@@ -29,11 +33,12 @@ export function CpuCard({ total, cores, model, series }: CpuCardProps) {
         series={[{ data: series, color: "var(--color-primary)" }]}
         height={56}
         maxValue={100}
+        grid
       />
       <CpuCoreBars cores={cores} />
       <p className="text-[11px] text-text-subtle truncate" title={model}>
         {model}
       </p>
-    </div>
+    </CardShell>
   );
 }

package/src/web/components/system/overview-cards/disk-card.tsx

@@ -1,5 +1,6 @@
 import { formatBps } from "@/lib/format-bytes";
 import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CardShell } from "./card-shell";
 
 export interface DiskCardProps {
   available: boolean;
@@ -10,14 +11,17 @@ export interface DiskCardProps {
   /** True while the stream has not yet delivered a second tick — a rate needs two
    *  samples, so `available:false` here is expected, not a missing collector. */
   measuring?: boolean;
+  /** Opens the Performance page on the busiest device of this kind. */
+  onOpen?: () => void;
 }
 
-export function DiskCard({ available, inBps, outBps, readSeries, writeSeries, measuring }: DiskCardProps) {
+export function DiskCard({ available, inBps, outBps, readSeries, writeSeries, measuring, onOpen }: DiskCardProps) {
   return (
-    <div
-      className="rounded-lg border border-border p-4 space-y-2"
-      data-testid="sysmon-card-disk"
-      data-available={available}
+    <CardShell
+      testId="sysmon-card-disk"
+      data={{ "data-available": available }}
+      onOpen={onOpen}
+      openLabel="Disk details"
     >
       <h3 className="text-sm font-medium">Disk</h3>
       {available ? (
@@ -28,6 +32,7 @@ export function DiskCard({ available, inBps, outBps, readSeries, writeSeries, me
               { data: writeSeries, color: "var(--color-warning)" },
             ]}
             height={56}
+            grid
           />
           <p className="text-[11px] text-text-subtle">
             Read {formatBps(inBps)} · Write {formatBps(outBps)}
@@ -36,6 +41,6 @@ export function DiskCard({ available, inBps, outBps, readSeries, writeSeries, me
       ) : (
         <p className="text-[11px] text-text-subtle">{measuring ? "measuring…" : "n/a"}</p>
       )}
-    </div>
+    </CardShell>
   );
 }

package/src/web/components/system/overview-cards/gpu-card.tsx

@@ -1,5 +1,6 @@
 import { formatRam } from "@/lib/format-bytes";
 import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CardShell } from "./card-shell";
 
 export interface GpuCardProps {
   name: string;
@@ -7,13 +8,15 @@ export interface GpuCardProps {
   vramUsedMB: number;
   vramTotalMB: number;
   series: number[];
+  /** Opens the Performance page on this GPU. */
+  onOpen?: () => void;
 }
 
 /** One card per GPU. The caller (`overview-panel.tsx`) renders zero of these when
  *  `system.gpus` is empty — hide, never a disabled placeholder card. */
-export function GpuCard({ name, utilPercent, vramUsedMB, vramTotalMB, series }: GpuCardProps) {
+export function GpuCard({ name, utilPercent, vramUsedMB, vramTotalMB, series, onOpen }: GpuCardProps) {
   return (
-    <div className="rounded-lg border border-border p-4 space-y-2" data-testid="sysmon-card-gpu">
+    <CardShell testId="sysmon-card-gpu" onOpen={onOpen} openLabel={`${name} details`}>
       <div className="flex items-baseline justify-between gap-2">
         <h3 className="text-sm font-medium truncate" title={name}>
           {name}
@@ -24,10 +27,17 @@ export function GpuCard({ name, utilPercent, vramUsedMB, vramTotalMB, series }:
         series={[{ data: series, color: "var(--color-primary)" }]}
         height={56}
         maxValue={100}
+        grid
       />
-      <p className="text-[11px] text-text-subtle">
-        VRAM {formatRam(vramUsedMB)} / {formatRam(vramTotalMB)}
-      </p>
-    </div>
+      {/* A total of 0 is the contract's "this device has no dedicated memory" — an
+          integrated GPU — not a card with an empty one. Saying "0 MB / 0 MB" states
+          a measurement that was never taken, and disagrees with the Performance
+          page's GPU detail, which renders the same case as an em dash. */}
+      {vramTotalMB > 0 && (
+        <p className="text-[11px] text-text-subtle">
+          VRAM {formatRam(vramUsedMB)} / {formatRam(vramTotalMB)}
+        </p>
+      )}
+    </CardShell>
   );
 }

package/src/web/components/system/overview-cards/mem-card.tsx

@@ -1,19 +1,23 @@
 import { formatRam } from "@/lib/format-bytes";
 import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CardShell } from "./card-shell";
 
 export interface MemCardProps {
   usedMB: number;
   totalMB: number;
   percent: number;
   series: number[];
+  /** Opens the Performance page on this device. */
+  onOpen?: () => void;
 }
 
-export function MemCard({ usedMB, totalMB, percent, series }: MemCardProps) {
+export function MemCard({ usedMB, totalMB, percent, series, onOpen }: MemCardProps) {
   return (
-    <div
-      className="rounded-lg border border-border p-4 space-y-2"
-      data-testid="sysmon-card-mem"
-      data-mem-percent={percent}
+    <CardShell
+      testId="sysmon-card-mem"
+      data={{ "data-mem-percent": percent }}
+      onOpen={onOpen}
+      openLabel="Memory details"
     >
       <div className="flex items-baseline justify-between">
         <h3 className="text-sm font-medium">Memory</h3>
@@ -23,10 +27,11 @@ export function MemCard({ usedMB, totalMB, percent, series }: MemCardProps) {
         series={[{ data: series, color: "var(--color-primary)" }]}
         height={56}
         maxValue={100}
+        grid
       />
       <p className="text-[11px] text-text-subtle">
         {formatRam(usedMB)} / {formatRam(totalMB)}
       </p>
-    </div>
+    </CardShell>
   );
 }

package/src/web/components/system/overview-cards/net-card.tsx

@@ -1,5 +1,6 @@
 import { formatBps } from "@/lib/format-bytes";
 import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CardShell } from "./card-shell";
 
 export interface NetCardProps {
   available: boolean;
@@ -10,14 +11,17 @@ export interface NetCardProps {
   /** True while the stream has not yet delivered a second tick — a rate needs two
    *  samples, so `available:false` here is expected, not a missing collector. */
   measuring?: boolean;
+  /** Opens the Performance page on the busiest device of this kind. */
+  onOpen?: () => void;
 }
 
-export function NetCard({ available, inBps, outBps, downSeries, upSeries, measuring }: NetCardProps) {
+export function NetCard({ available, inBps, outBps, downSeries, upSeries, measuring, onOpen }: NetCardProps) {
   return (
-    <div
-      className="rounded-lg border border-border p-4 space-y-2"
-      data-testid="sysmon-card-net"
-      data-available={available}
+    <CardShell
+      testId="sysmon-card-net"
+      data={{ "data-available": available }}
+      onOpen={onOpen}
+      openLabel="Network details"
     >
       <h3 className="text-sm font-medium">Network</h3>
       {available ? (
@@ -28,6 +32,7 @@ export function NetCard({ available, inBps, outBps, downSeries, upSeries, measur
               { data: upSeries, color: "var(--color-warning)" },
             ]}
             height={56}
+            grid
           />
           <p className="text-[11px] text-text-subtle">
             Down {formatBps(inBps)} · Up {formatBps(outBps)}
@@ -36,6 +41,6 @@ export function NetCard({ available, inBps, outBps, downSeries, upSeries, measur
       ) : (
         <p className="text-[11px] text-text-subtle">{measuring ? "measuring…" : "n/a"}</p>
       )}
-    </div>
+    </CardShell>
   );
 }

package/src/web/components/system/overview-device-target.ts

@@ -0,0 +1,69 @@
+/**
+ * Which Performance device an Overview card opens.
+ *
+ * Three of the five cards have a 1-to-1 target and need no logic: CPU is `cpu`,
+ * Memory is `memory`, and each GPU card already knows its own GPU. The Disk and
+ * Network cards are the awkward pair — they show **whole-machine** rates while
+ * the Performance sidebar lists every drive and every interface separately (two
+ * drives and seven interfaces on an ordinary desktop), so a card click has to
+ * choose one.
+ *
+ * It chooses the busiest, because that is what the reader was looking at: you
+ * click a Disk card that says "Write 191 MB/s" to find out which drive is doing
+ * it. The cost, accepted deliberately: the destination is not fixed, so the same
+ * card can open Disk 1 now and Disk 0 later. The alternative — always the first
+ * device — is predictable and usually wrong, since `Disk 0` on this host is an
+ * idle Toshiba while the loaded drive is `Disk 1`.
+ *
+ * Each metric matches the figure its own surface already shows, so the jump never
+ * contradicts what was on screen: **active time** for a drive (what the sidebar
+ * prints, and Mission Center's choice — a drive at 100% busy moving very little
+ * still matters) and **raw throughput** for an interface (what the card prints;
+ * normalising by link speed would rank a 100 Mbit NIC at 50% above a 10 Gbit one
+ * carrying ten times the traffic).
+ *
+ * Pure, React-free, relative imports only. The keys are `DeviceEntry.key`
+ * strings, so they are coupled to `performance/device-list.ts` by format — which
+ * is why the test asserts the key against a real `buildDeviceList` rather than
+ * against a literal. A key that matches no entry is not an error anywhere:
+ * `resolveSelected` silently falls back to the first entry, so the jump would
+ * quietly land on CPU.
+ */
+import type { SystemMetrics } from "../../../types/system-metrics";
+
+/** Highest-scoring entry, or null when there is nothing to pick from. Ties go to
+ *  the first, so a wholly idle machine is at least deterministic. */
+function busiest<T>(items: readonly T[], score: (item: T) => number | null): T | null {
+  let best: T | null = null;
+  let bestScore = -Infinity;
+  for (const item of items) {
+    const s = score(item);
+    if (s === null) continue;
+    if (s > bestScore) {
+      best = item;
+      bestScore = s;
+    }
+  }
+  // Every device unmeasurable (every `available: false`, i.e. the very first
+  // tick) still has to go somewhere, so fall back to the first one and let its
+  // page render the em dashes honestly.
+  return best ?? items[0] ?? null;
+}
+
+/** The drive with the most active time. Null when the host reports no drives. */
+export function busiestDiskKey(system: SystemMetrics): string | null {
+  const disk = busiest(system.disks ?? [], (d) => (d.available ? d.busyPercent : null));
+  return disk ? `disk:${disk.id}` : null;
+}
+
+/** The interface carrying the most traffic. Null when the host reports none. */
+export function busiestNicKey(system: SystemMetrics): string | null {
+  const nic = busiest(system.nics ?? [], (n) => (n.available ? n.rxBps + n.txBps : null));
+  return nic ? `nic:${nic.id}` : null;
+}
+
+/** The sidebar key for one GPU, matching `buildDeviceList`'s own fallback to the
+ *  index for a device with no PCI address. */
+export function gpuKey(id: string | undefined, index: number): string {
+  return `gpu:${id ?? index}`;
+}

package/src/web/components/system/overview-panel.tsx

@@ -5,10 +5,14 @@ import { MemCard } from "./overview-cards/mem-card";
 import { DiskCard } from "./overview-cards/disk-card";
 import { NetCard } from "./overview-cards/net-card";
 import { GpuCard } from "./overview-cards/gpu-card";
+import { busiestDiskKey, busiestNicKey, gpuKey } from "./overview-device-target";
 
 export interface OverviewPanelProps {
   system: SystemMetrics;
   history: MetricsHistoryPoint[];
+  /** Opens the Performance tab on one device. Absent in a read-only render (and
+   *  then every card stays a plain frame rather than a button that does nothing). */
+  onOpenDevice?: (key: string) => void;
 }
 
 const SERIES_POINTS = 200;
@@ -42,12 +46,17 @@ function useOverviewSeries(history: MetricsHistoryPoint[]) {
   }, [history]);
 }
 
-export function OverviewPanel({ system, history }: OverviewPanelProps) {
+export function OverviewPanel({ system, history, onOpenDevice }: OverviewPanelProps) {
   const series = useOverviewSeries(history);
   // Disk/net rates need a delta between two samples — `available:false` on the very
   // first frame(s) is the collector doing exactly what it should, not a missing
   // source, so the card says so instead of the flat, indistinguishable "n/a".
   const measuring = history.length <= 1;
+  // Undefined rather than a no-op handler when there is no device to open, so
+  // `CardShell` renders a frame instead of a dead button. Computed per render
+  // because the busiest drive and interface change with the tick.
+  const open = (key: string | null) =>
+    onOpenDevice && key ? () => onOpenDevice(key) : undefined;
 
   return (
     <div
@@ -59,12 +68,14 @@ export function OverviewPanel({ system, history }: OverviewPanelProps) {
         cores={system.cpu.cores}
         model={system.cpu.model}
         series={series.cpu}
+        onOpen={open("cpu")}
       />
       <MemCard
         usedMB={system.mem.usedMB}
         totalMB={system.mem.totalMB}
         percent={system.mem.percent}
         series={series.mem}
+        onOpen={open("memory")}
       />
       <DiskCard
         available={system.disk.available}
@@ -73,6 +84,7 @@ export function OverviewPanel({ system, history }: OverviewPanelProps) {
         readSeries={series.diskRead}
         writeSeries={series.diskWrite}
         measuring={measuring}
+        onOpen={open(busiestDiskKey(system))}
       />
       <NetCard
         available={system.net.available}
@@ -81,6 +93,7 @@ export function OverviewPanel({ system, history }: OverviewPanelProps) {
         downSeries={series.netDown}
         upSeries={series.netUp}
         measuring={measuring}
+        onOpen={open(busiestNicKey(system))}
       />
       {system.gpus.map((gpu, i) => (
         <GpuCard
@@ -90,6 +103,7 @@ export function OverviewPanel({ system, history }: OverviewPanelProps) {
           vramUsedMB={gpu.vramUsedMB}
           vramTotalMB={gpu.vramTotalMB}
           series={series.gpuUtil[i] ?? []}
+          onOpen={open(gpuKey(gpu.id, i))}
         />
       ))}
     </div>

package/src/web/components/system/performance/cpu-core-grid.tsx

@@ -0,0 +1,74 @@
+/**
+ * One graph per logical processor — Mission Center's "Logical Processors" top
+ * graph, which is the view that makes a hybrid part legible: on a 12900K the
+ * eight P-cores and their SMT siblings move quite differently from the eight
+ * E-cores, and a single overall line says none of that.
+ *
+ * Each cell draws its OWN history rather than a bar of the current value, so a
+ * thread that spiked two seconds ago is still visible — which is the whole point
+ * of a graph over a meter.
+ */
+import { useRef, useMemo } from "react";
+import { useElementWidth } from "@/hooks/use-element-width";
+import { coreGridLayout } from "@/lib/cpu-graph-mode";
+import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CHART_COLORS } from "./detail-parts";
+import type { MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+export interface CpuCoreGridProps {
+  /** Current reading per logical processor — the length is what decides the grid. */
+  cores: readonly number[];
+  history: readonly MetricsHistoryPoint[];
+  points?: number;
+  /** Total height the grid may use; each row gets an equal share. */
+  height?: number;
+}
+
+export function CpuCoreGrid({ cores, history, points = 200, height = 260 }: CpuCoreGridProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(ref);
+  const { cols, rows } = coreGridLayout(cores.length, width);
+
+  // One pass over the window building every cell's series together, rather than
+  // twenty-four separate `.map`s over the same 200 points on every tick.
+  const series = useMemo(() => {
+    const window = history.slice(-points);
+    const out: number[][] = Array.from({ length: cores.length }, () => []);
+    for (const point of window) {
+      const values = point.system.cpu.cores;
+      for (let i = 0; i < out.length; i++) out[i]!.push(values[i] ?? 0);
+    }
+    return out;
+  }, [history, points, cores.length]);
+
+  if (cores.length === 0) return null;
+
+  // A cell is short; the ruled background would be denser than the curve, so only
+  // the frame is drawn and the grid stays on the full-width graphs.
+  const cellHeight = Math.max(28, Math.floor(height / Math.max(1, rows)) - 6);
+
+  return (
+    <div
+      ref={ref}
+      className="grid gap-1.5"
+      style={{ gridTemplateColumns: `repeat(${Math.max(1, cols)}, minmax(0, 1fr))` }}
+      data-testid="sysmon-core-grid"
+      data-core-count={cores.length}
+      data-cols={cols}
+    >
+      {series.map((data, i) => (
+        <div
+          key={i}
+          className="rounded-sm border border-border/70 overflow-hidden px-0.5"
+          title={`CPU ${i}: ${(cores[i] ?? 0).toFixed(0)}%`}
+        >
+          <MetricChartCanvas
+            series={[{ data, color: CHART_COLORS.primary }]}
+            height={cellHeight}
+            maxValue={100}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}