@hienlh/ppm 0.18.8 → 0.18.10

package/src/types/system-metrics.ts

@@ -0,0 +1,199 @@
+/** Whole-machine metrics contract shared by the collectors, the REST/SSE routes
+ *  and the web client. Types + constants only, no imports, so both bundles can
+ *  take it. Import RELATIVELY — the "@" alias points at src/web, not src. */
+
+export type MetricsPlatform = "win32" | "darwin" | "linux";
+
+/** `light` = node:os only, no child processes, status-bar cadence.
+ *  `full`  = every collector, process rows, groups. */
+export type MetricsTier = "light" | "full";
+
+/** Aggregate + per-core busy percentage over the last tick (0-100, 1 decimal). */
+export interface CpuMetrics {
+  total: number;
+  /** Index matches `os.cpus()` order. Core count is `cores.length`. */
+  cores: number[];
+  model: string;
+}
+
+export interface MemoryMetrics {
+  totalMB: number;
+  usedMB: number;
+  availableMB: number;
+  /** usedMB / totalMB × 100. */
+  percent: number;
+}
+
+/** Whole-machine throughput, bytes/second over the last tick. */
+export interface RateMetrics {
+  /** Disk: read. Net: received/down. */
+  inBps: number;
+  /** Disk: write. Net: sent/up. */
+  outBps: number;
+  /** False in the light tier, on a missing OS source, and on the first tick
+   *  (no baseline). The UI must render "n/a", never 0 B/s. */
+  available: boolean;
+}
+
+export interface GpuMetrics {
+  name: string;
+  /** 0-100. */
+  utilPercent: number;
+  vramUsedMB: number;
+  vramTotalMB: number;
+}
+
+export interface SystemMetrics {
+  cpu: CpuMetrics;
+  mem: MemoryMetrics;
+  /** light tier: available:false. */
+  disk: RateMetrics;
+  /** light tier: available:false. */
+  net: RateMetrics;
+  /** light tier: []. Empty also when no NVIDIA GPU — the UI hides the card. */
+  gpus: GpuMetrics[];
+  /** light tier: 0. Processes the collector could see this tick. */
+  processCount: number;
+}
+
+export interface ProcessInfo {
+  pid: number;
+  /** -1 when the parent is unknown. */
+  ppid: number;
+  /** Executable basename WITHOUT extension, lowercased for comparison by the
+   *  guard: "explorer", "node", "chrome". Never "explorer.exe". */
+  name: string;
+  /** Command line, secrets redacted then truncated to 160 chars. Falls back to
+   *  `name` when unreadable (Windows: ~53% of rows are unreadable unelevated). */
+  command: string;
+  /** Instantaneous machine-normalised CPU%: deltaCpuMs / (wallMs × coreCount) × 100.
+   *  Always 0 on a process's first observed tick. */
+  cpu: number;
+  ramMB: number;
+  /** Epoch ms UTC; 0 when unknown. Identity guard for CPU deltas, grouping and kill. */
+  startedAt: number;
+  /** PPM server, supervisor, edge forwarder, their descendants, PPM-managed
+   *  cloudflared. Drives the "PPM only" filter — NOT a safety mechanism. */
+  ppm: boolean;
+  /** The server will refuse to kill it. Produced by the same guard the route
+   *  enforces, so the disabled button and the 403 cannot disagree. */
+  protected: boolean;
+  /** Per-process throughput/GPU. `undefined` means this OS or tier cannot
+   *  measure it — the UI must render "—", never 0. All are omitted from the
+   *  JSON frame when undefined, so an unsupported host pays nothing.
+   *
+   *  Bytes/second, delta of a cumulative OS counter over the tick's wall
+   *  interval; 0 on a process's first observed tick, like `cpu`. */
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  /** Sum of this pid's GPU engine busy percentages (3D + Copy + Video + …),
+   *  clamped 0-100. Rate over the counter's OWN clock, not the wall tick. */
+  gpuPct?: number;
+  /** Dedicated (on-card) VRAM in MB attributed to this pid. */
+  gpuMemMB?: number;
+  /** macOS only: per-process network has no supported source on Windows (ETW
+   *  only) or Linux (packet capture). */
+  netInBps?: number;
+  netOutBps?: number;
+}
+
+export interface ProcessGroup {
+  /** Stable across ticks: "root:<pid>" for an ancestor roll-up, "exe:<name>" for
+   *  the orphan bucket. React key and history-series key. */
+  key: string;
+  label: string;
+  /** Roll-up root pid; null for an "exe:" bucket. */
+  rootPid: number | null;
+  cpu: number;
+  ramMB: number;
+  count: number;
+  /** True when any member is PPM-owned. */
+  ppm: boolean;
+  /** Member pids, CPU-desc. Full rows are in `MetricsSnapshot.processes`. */
+  pids: number[];
+  /** Roll-ups of the optional per-process columns, with the same optionality:
+   *  the sum over the members that HAVE a value, and `undefined` when no member
+   *  has one — so "nothing measurable" never renders as a hard 0. */
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  /** Summed engine busy across members, clamped 0-100. */
+  gpuPct?: number;
+  gpuMemMB?: number;
+  netInBps?: number;
+  netOutBps?: number;
+}
+
+/** Per-host availability of the optional process columns. A column is offered
+ *  once the collector has actually produced a value for it on this host. */
+export interface ProcessColumnAvailability {
+  disk: boolean;
+  gpu: boolean;
+  net: boolean;
+}
+
+/** CLIENT-SIDE history element: aggregates only. There is no server ring. */
+export interface MetricsHistoryPoint {
+  ts: number;
+  system: SystemMetrics;
+  /** group.key → roll-up, so group sparklines survive across ticks. */
+  groups: Record<string, { cpu: number; ramMB: number }>;
+}
+
+export interface MetricsSnapshot {
+  ts: number;
+  platform: MetricsPlatform;
+  tier: MetricsTier;
+  /** Poll cadence in ms for THIS tier, so the client can label chart axes. */
+  intervalMs: number;
+  system: SystemMetrics;
+  /** Empty in the light tier. */
+  groups: ProcessGroup[];
+  /** Empty in the light tier. Latest snapshot only — never retained. */
+  processes: ProcessInfo[];
+  /** Which optional process columns THIS host can actually fill, so the UI can
+   *  hide the unavailable ones instead of showing a wall of "—". All false in
+   *  the light tier (no process rows at all). */
+  processColumns: ProcessColumnAvailability;
+  /** DEPRECATED, remove one release after this ships. Mirrors cpu/mem/count so a
+   *  PWA-cached old bundle's `resource-status-bar.tsx:41` destructure of
+   *  `latest.total` does not TypeError on every page. */
+  total: { cpu: number; ramMB: number; processCount: number };
+  /** Non-fatal collector failures, human readable. Rendered in the UI. */
+  warnings: string[];
+}
+
+export interface KillProcessRequest {
+  pid: number;
+  /** Identity guard: the `startedAt` the client saw. The server re-queries the
+   *  live process and returns 409 on mismatch, so a recycled pid cannot be
+   *  killed against a stale name. */
+  startedAt: number;
+  /** Kill descendants too (`taskkill /T` on Windows, collected tree on POSIX). */
+  tree?: boolean;
+}
+
+export interface KillProcessResult {
+  pid: number;
+  tree: boolean;
+  method: "taskkill" | "signal";
+  /** Pids actually signalled. On win32 with tree:true this is always `[pid]` —
+   *  `taskkill /T` walks and kills the tree inside the OS and reports no member
+   *  list, so the real count is unknowable from here. */
+  killed: number[];
+}
+
+/** Sort columns offered by the process table. `disk` sorts by read + write,
+ *  `net` by in + out; rows without a value sort last. */
+export type SortKey = "cpu" | "ram" | "disk" | "gpu" | "gpuMem" | "net" | "name" | null;
+export type SortDir = "asc" | "desc";
+
+/** Full-tier poll cadence. A Windows tick (one CIM round trip) costs ~175-200 ms,
+ *  so 2 s leaves an order of magnitude of headroom before ticks would overlap. */
+export const METRICS_INTERVAL_MS = 2000;
+/** Light-tier poll cadence — node:os only, costs <0.1 ms. */
+export const METRICS_LIGHT_INTERVAL_MS = 5000;
+/** Client history cap: 30 min at METRICS_INTERVAL_MS. */
+export const METRICS_HISTORY_MAX = 900;
+/** Subscriber lease: client pings every 10 s, server reaps after 30 s silence. */
+export const METRICS_PING_INTERVAL_MS = 10_000;
+export const METRICS_LEASE_TIMEOUT_MS = 30_000;

package/src/web/components/floating-window/window-content-registry.ts

@@ -22,6 +22,7 @@ export interface WindowContentProps {
 export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
   explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
   "team-member": lazy(() => import("@/components/chat/team-member-window-content")),
+  "system-monitor": lazy(() => import("@/components/system/system-monitor-window-content")),
 };
 
 /**
@@ -46,6 +47,7 @@ export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>)
     const member = payload?.memberName;
     return typeof member === "string" && member ? `Session — ${member}` : "Team member";
   }
+  if (kind === "system-monitor") return "System Monitor";
   const path = payload?.path;
   if (kind === "explorer" && typeof path === "string" && path) {
     const segments = path.split(/[\\/]/).filter(Boolean);

package/src/web/components/floating-window/window-persistence.ts

@@ -20,7 +20,7 @@ export interface PersistedWindow {
   payload?: Record<string, unknown>;
 }
 
-const KINDS: WindowKind[] = ["explorer"];
+const KINDS: WindowKind[] = ["explorer", "system-monitor"];
 const STATES: WindowVisualState[] = ["normal", "maximized", "minimized"];
 
 function isRect(v: unknown): v is Rect {

package/src/web/components/floating-window/window-store-types.ts

@@ -3,7 +3,7 @@
 import type { Rect } from "./window-geometry";
 
 /** Content families the layer can host. The registry maps each kind to its body component. */
-export type WindowKind = "explorer" | "team-member";
+export type WindowKind = "explorer" | "team-member" | "system-monitor";
 
 export type WindowVisualState = "normal" | "maximized" | "minimized";
 

package/src/web/components/system/build-kill-request.ts

@@ -0,0 +1,36 @@
+import type { KillProcessRequest, ProcessGroup, ProcessInfo } from "../../../types/system-metrics";
+
+/** What the confirm dialog is about to end: one row, or a whole app group. */
+export type KillTarget =
+  | { kind: "process"; proc: ProcessInfo }
+  | { kind: "group"; group: ProcessGroup; members: ProcessInfo[] };
+
+/** Builds the kill request body from a process row's own identity fields — pulled out
+ *  of the dialog's confirm handler so the payload shape is unit-testable without
+ *  mounting the dialog. `startedAt` travels unchanged so the server can 409 a pid the
+ *  OS recycled between the snapshot and the click. */
+export function buildKillRequest(proc: ProcessInfo, tree: boolean): KillProcessRequest {
+  return { pid: proc.pid, startedAt: proc.startedAt, tree };
+}
+
+/**
+ * Requests that end every member of a group.
+ *
+ * An ancestor roll-up ("root:<pid>") is ended with ONE tree kill on its root — the
+ * server walks the same descendant set it grouped by, so this is atomic on Windows
+ * (`taskkill /T`) and cannot miss a child that forked between snapshot and click.
+ * An orphan bucket ("exe:<name>") has no common ancestor, so each member is a
+ * separate single-process kill. Protected members are never included: the caller
+ * disables the button when any exist, and the server would 403 anyway.
+ */
+export function buildGroupKillRequests(group: ProcessGroup, members: ProcessInfo[]): KillProcessRequest[] {
+  const root = group.rootPid !== null ? members.find((m) => m.pid === group.rootPid) : undefined;
+  if (root) return [buildKillRequest(root, true)];
+  return members.map((m) => buildKillRequest(m, false));
+}
+
+/** A group can be ended only when none of its members is refused by the guard —
+ *  the PPM instance and system groups stay un-endable as a whole. */
+export function isGroupProtected(members: ProcessInfo[]): boolean {
+  return members.some((m) => m.protected);
+}

package/src/web/components/system/chart-scale.ts

@@ -0,0 +1,28 @@
+/** Shared scale resolution for the canvas charts: a fixed ceiling (percentage axes)
+ *  or autoscale to the max of the visible window (byte-rate axes) — pulled out of
+ *  `metric-chart-canvas.tsx` so it is unit-testable without a canvas context. A
+ *  percentage axis must be pinned to 100, otherwise a 3% CPU reading autoscales to a
+ *  full-height line. */
+export function resolveScaleMax(data: number[], maxValue?: number): number {
+  if (maxValue !== undefined) return maxValue;
+  return Math.max(...data, 1);
+}
+
+/** The minimal surface of `CSSStyleDeclaration` this needs — lets a test pass a plain
+ *  fake object instead of a real computed style. */
+export interface ComputedColorSource {
+  getPropertyValue(property: string): string;
+}
+
+/** Canvas 2D's `strokeStyle`/`fillStyle` parse as a standalone CSS `<color>` — `var(...)`
+ *  is not resolvable without an element context, so assigning `"var(--color-primary)"`
+ *  directly is silently ignored and the shape draws black. Resolve once per draw call
+ *  against the canvas's own computed style (custom properties inherit from the
+ *  document, so any element's computed style works) and fall back to the original
+ *  string when it is not a `var(...)` reference or resolves to nothing. */
+export function resolveCssColor(color: string, styles: ComputedColorSource): string {
+  const match = /^var\((--[\w-]+)\)$/.exec(color.trim());
+  if (!match) return color;
+  const resolved = styles.getPropertyValue(match[1]!).trim();
+  return resolved || color;
+}

package/src/web/components/system/cpu-core-bars.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+function loadColor(pct: number): string {
+  if (pct > 80) return "bg-error";
+  if (pct > 50) return "bg-warning";
+  return "bg-success";
+}
+
+/** One vertical bar per core, tooltip shows the exact percentage. `min-h-11` keeps the
+ *  strip out of sub-44px touch-row territory even though nothing here is clickable —
+ *  a future click-to-isolate-core affordance should not need a layout change. */
+export function CpuCoreBars({ cores }: { cores: number[] }) {
+  return (
+    <div
+      className="flex items-end gap-0.5 min-h-11 w-full"
+      data-testid="sysmon-core-bars"
+      data-core-count={cores.length}
+    >
+      {cores.map((pct, i) => (
+        <div
+          key={i}
+          className="flex-1 h-11 flex items-end rounded-sm overflow-hidden bg-surface-hover"
+          title={`Core ${i}: ${pct.toFixed(0)}%`}
+        >
+          <div
+            className={cn("w-full transition-[height]", loadColor(pct))}
+            style={{ height: `${Math.max(2, Math.min(100, pct))}%` }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/web/components/system/kill-confirm-dialog.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { formatRam } from "@/lib/format-bytes";
+import type { KillTarget } from "./build-kill-request";
+
+export interface KillConfirmDialogProps {
+  target: KillTarget | null;
+  /** `tree` is only meaningful for a single process; a group is always ended whole. */
+  onConfirm: (target: KillTarget, tree: boolean) => void;
+  onCancel: () => void;
+}
+
+/** Confirm dialog for ending a process or a whole app group. Bottom sheet below
+ *  `md`, centered dialog at `md`+. The "end child processes" toggle defaults off and
+ *  the destructive action is never the default focus — Escape/backdrop cancels either
+ *  way. */
+export function KillConfirmDialog({ target, onConfirm, onCancel }: KillConfirmDialogProps) {
+  const isMobile = useIsMobile();
+  const [tree, setTree] = useState(false);
+
+  useEffect(() => {
+    if (!target) setTree(false);
+  }, [target]);
+
+  if (!target) return null;
+
+  const isGroup = target.kind === "group";
+  const title = isGroup ? "End app" : "End process";
+  const cpu = isGroup ? target.group.cpu : target.proc.cpu;
+  const ramMB = isGroup ? target.group.ramMB : target.proc.ramMB;
+
+  const body = (
+    <div className="space-y-4" data-testid="sysmon-kill-confirm" data-kill-kind={target.kind}>
+      {isGroup ? (
+        <p className="text-sm">
+          End <span className="font-medium">{target.group.label}</span> and all its{" "}
+          <span className="font-medium">{target.members.length}</span> processes?
+        </p>
+      ) : (
+        <p className="text-sm">
+          End <span className="font-medium">{target.proc.name}</span> (pid {target.proc.pid})?
+        </p>
+      )}
+      <p className="text-xs text-text-subtle">
+        CPU {cpu.toFixed(1)}% · RAM {formatRam(ramMB)}
+      </p>
+      {!isGroup && (
+        <label className="flex items-center justify-between gap-3 min-h-11 py-1">
+          <span className="text-sm">Also end child processes</span>
+          <Switch
+            checked={tree}
+            onCheckedChange={setTree}
+            data-testid="sysmon-kill-tree"
+            aria-label="Also end child processes"
+          />
+        </label>
+      )}
+      <div className="flex flex-col-reverse md:flex-row gap-2 md:justify-end pt-2">
+        <Button
+          variant="outline"
+          onClick={onCancel}
+          data-testid="sysmon-kill-confirm-cancel"
+          className="min-h-11"
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="destructive"
+          autoFocus={false}
+          onClick={() => onConfirm(target, tree)}
+          data-testid="sysmon-kill-confirm-ok"
+          className="min-h-11"
+        >
+          {isGroup ? `End ${target.members.length} processes` : "End process"}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onCancel}>
+        <div className="px-4 pb-4">
+          <h2 className="text-base font-semibold mb-3">{title}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { useRef, useEffect, memo } from "react";
+import { useElementWidth } from "@/hooks/use-element-width";
+import { resolveScaleMax, resolveCssColor } from "./chart-scale";
+
+export interface MetricSeries {
+  data: number[];
+  color: string;
+}
+
+interface MetricChartCanvasProps {
+  /** 1-2 series drawn on the same axis. */
+  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;
+}
+
+/** Generalised, filled, multi-series canvas chart for the Overview cards. Fills the
+ *  width of its parent — the cards live in a resizable floating window, so a fixed
+ *  pixel width overflows the card as soon as the window is narrower than designed.
+ *  No redraw throttle — one draw per prop change, which at a 2s tick cadence is
+ *  nowhere near a frame budget. */
+export const MetricChartCanvas = memo(function MetricChartCanvas({
+  series,
+  height,
+  maxValue,
+}: MetricChartCanvasProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const width = useElementWidth(wrapperRef);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || width === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, width, height);
+
+    // Resolved once per draw, not per point — `var(...)` is not a canvas-resolvable
+    // color, so every strokeStyle/fillStyle assignment below must go through this.
+    const style = getComputedStyle(canvas);
+    const colorOf = (c: string) => resolveCssColor(c, style);
+
+    const padding = 2;
+    const drawH = height - padding * 2;
+    const longest = Math.max(1, ...series.map((s) => s.data.length));
+
+    // 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) {
+      ctx.beginPath();
+      ctx.strokeStyle = colorOf("var(--color-border)");
+      ctx.lineWidth = 1;
+      ctx.moveTo(0, height - padding);
+      ctx.lineTo(width, height - padding);
+      ctx.stroke();
+      return;
+    }
+
+    const scaleMax = resolveScaleMax(series.flatMap((s) => s.data), maxValue);
+
+    for (const s of series) {
+      if (s.data.length < 2) continue;
+      const localStepX = width / (s.data.length - 1);
+
+      // Filled area under the line.
+      ctx.beginPath();
+      ctx.moveTo(0, height - padding);
+      for (let i = 0; i < s.data.length; i++) {
+        const x = i * localStepX;
+        const y = padding + drawH - (s.data[i]! / scaleMax) * drawH;
+        ctx.lineTo(x, y);
+      }
+      ctx.lineTo((s.data.length - 1) * localStepX, height - padding);
+      ctx.closePath();
+      ctx.fillStyle = colorOf(s.color);
+      ctx.globalAlpha = 0.12;
+      ctx.fill();
+      ctx.globalAlpha = 1;
+
+      // Line on top.
+      ctx.beginPath();
+      ctx.strokeStyle = colorOf(s.color);
+      ctx.lineWidth = 1.5;
+      ctx.lineJoin = "round";
+      for (let i = 0; i < s.data.length; i++) {
+        const x = i * localStepX;
+        const y = padding + drawH - (s.data[i]! / scaleMax) * drawH;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+    }
+  }, [series, width, height, maxValue]);
+
+  return (
+    <div ref={wrapperRef} className="w-full min-w-0 overflow-hidden" style={{ height }}>
+      <canvas ref={canvasRef} style={{ width: width || "100%", height }} className="block" />
+    </div>
+  );
+});

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

@@ -0,0 +1,39 @@
+import { MetricChartCanvas } from "../metric-chart-canvas";
+import { CpuCoreBars } from "../cpu-core-bars";
+
+export interface CpuCardProps {
+  total: number;
+  cores: number[];
+  model: string;
+  series: number[];
+}
+
+function cpuColor(pct: number): string {
+  if (pct > 80) return "text-error";
+  if (pct > 50) return "text-warning";
+  return "text-success";
+}
+
+export function CpuCard({ total, cores, model, series }: CpuCardProps) {
+  return (
+    <div
+      className="rounded-lg border border-border p-4 space-y-2"
+      data-testid="sysmon-card-cpu"
+      data-cpu-total={total}
+    >
+      <div className="flex items-baseline justify-between">
+        <h3 className="text-sm font-medium">CPU</h3>
+        <span className={`text-2xl font-semibold ${cpuColor(total)}`}>{total.toFixed(1)}%</span>
+      </div>
+      <MetricChartCanvas
+        series={[{ data: series, color: "var(--color-primary)" }]}
+        height={56}
+        maxValue={100}
+      />
+      <CpuCoreBars cores={cores} />
+      <p className="text-[11px] text-text-subtle truncate" title={model}>
+        {model}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { formatBps } from "@/lib/format-bytes";
+import { MetricChartCanvas } from "../metric-chart-canvas";
+
+export interface DiskCardProps {
+  available: boolean;
+  inBps: number;
+  outBps: number;
+  readSeries: number[];
+  writeSeries: number[];
+  /** 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;
+}
+
+export function DiskCard({ available, inBps, outBps, readSeries, writeSeries, measuring }: DiskCardProps) {
+  return (
+    <div
+      className="rounded-lg border border-border p-4 space-y-2"
+      data-testid="sysmon-card-disk"
+      data-available={available}
+    >
+      <h3 className="text-sm font-medium">Disk</h3>
+      {available ? (
+        <>
+          <MetricChartCanvas
+            series={[
+              { data: readSeries, color: "var(--color-primary)" },
+              { data: writeSeries, color: "var(--color-warning)" },
+            ]}
+            height={56}
+          />
+          <p className="text-[11px] text-text-subtle">
+            Read {formatBps(inBps)} · Write {formatBps(outBps)}
+          </p>
+        </>
+      ) : (
+        <p className="text-[11px] text-text-subtle">{measuring ? "measuring…" : "n/a"}</p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { formatRam } from "@/lib/format-bytes";
+import { MetricChartCanvas } from "../metric-chart-canvas";
+
+export interface GpuCardProps {
+  name: string;
+  utilPercent: number;
+  vramUsedMB: number;
+  vramTotalMB: number;
+  series: number[];
+}
+
+/** 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) {
+  return (
+    <div className="rounded-lg border border-border p-4 space-y-2" data-testid="sysmon-card-gpu">
+      <div className="flex items-baseline justify-between gap-2">
+        <h3 className="text-sm font-medium truncate" title={name}>
+          {name}
+        </h3>
+        <span className="text-2xl font-semibold shrink-0">{utilPercent.toFixed(0)}%</span>
+      </div>
+      <MetricChartCanvas
+        series={[{ data: series, color: "var(--color-primary)" }]}
+        height={56}
+        maxValue={100}
+      />
+      <p className="text-[11px] text-text-subtle">
+        VRAM {formatRam(vramUsedMB)} / {formatRam(vramTotalMB)}
+      </p>
+    </div>
+  );
+}