@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/system/performance/gpu-detail.tsx

@@ -0,0 +1,116 @@
+/** One GPU — Mission Center's GPU page: three graphs (utilisation, video
+ *  encode/decode, memory usage) over the driver's static facts. Every row here is
+ *  optional in the contract: a driver that publishes no clock or no power reports
+ *  nothing rather than zero, so the row shows an em dash. */
+import { formatRam } from "@/lib/format-bytes";
+import { historySpanLabel } from "@/lib/cpu-graph-mode";
+import { formatTemp } from "@/lib/temperature";
+import { useSettingsStore } from "@/stores/settings-store";
+import { CHART_COLORS, DetailChart, DetailHeader, Stat, StatGrid, useSeries } from "./detail-parts";
+import type { GpuInfo } from "../../../../types/system-metrics";
+import type { GpuMetrics, MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+function pcie(gen: number | undefined, lanes: number | undefined): string | undefined {
+  if (gen === undefined && lanes === undefined) return undefined;
+  return `${gen === undefined ? "?" : `Gen ${gen}`} x${lanes ?? "?"}`;
+}
+
+export function GpuDetail({
+  gpu, info, index, history,
+}: { gpu: GpuMetrics; info?: GpuInfo; index: number; history: readonly MetricsHistoryPoint[] }) {
+  const tempUnit = useSettingsStore((s) => s.sysmonTempUnit);
+  const pick = (p: MetricsHistoryPoint) =>
+    p.system.gpus.find((g) => (gpu.id ? g.id === gpu.id : g.name === gpu.name));
+  const util = useSeries(history, (p) => pick(p)?.utilPercent);
+  const encode = useSeries(history, (p) => pick(p)?.encodePercent);
+  const decode = useSeries(history, (p) => pick(p)?.decodePercent);
+  // Dedicated memory where the card has some, its share of system RAM where it
+  // does not — the two are never both drawn, because they are the same graph
+  // answering "how much memory is this GPU using" from whichever source exists.
+  const hasVram = gpu.vramTotalMB > 0;
+  const hasShared = !hasVram && gpu.sharedTotalMB !== undefined;
+  const memory = useSeries(history, (p) => {
+    const g = pick(p);
+    return hasVram ? g?.vramUsedMB : g?.sharedUsedMB;
+  });
+  const memoryTotalMB = hasVram ? gpu.vramTotalMB : gpu.sharedTotalMB ?? 0;
+
+  const hasVideo = gpu.encodePercent !== undefined || gpu.decodePercent !== undefined;
+  // Intel runs one engine for both directions, so there is one series with the
+  // combined label rather than a decode line that would always trace the encode.
+  const videoShared = info?.encodeDecodeShared === true;
+  const span = historySpanLabel(history.map((p) => p.ts));
+  const caption = (what: string) => (span ? `${what} ${span}` : what);
+
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-gpu" data-gpu-id={gpu.id ?? index}>
+      <DetailHeader title={`GPU ${index}`} subtitle={gpu.name} value={`${gpu.utilPercent.toFixed(0)}%`} />
+
+      <DetailChart
+        grid
+        maxValue={100}
+        caption={caption("Utilisation")}
+        ceiling="100%"
+        series={[{ data: util, color: CHART_COLORS.primary }]}
+      />
+
+      {hasVideo && (
+        <DetailChart
+          grid
+          height={90}
+          maxValue={100}
+          caption={caption(videoShared ? "Video encode/decode utilisation" : "Video encode and decode utilisation")}
+          ceiling="100%"
+          legend={videoShared ? undefined : ["Encode", "Decode"]}
+          series={videoShared
+            ? [{ data: encode, color: CHART_COLORS.secondary }]
+            : [
+              { data: encode, color: CHART_COLORS.secondary },
+              { data: decode, color: CHART_COLORS.error },
+            ]}
+        />
+      )}
+
+      {(hasVram || hasShared) && (
+        <DetailChart
+          grid
+          height={90}
+          maxValue={memoryTotalMB}
+          caption={caption(hasVram ? "Video memory usage" : "Memory usage")}
+          ceiling={formatRam(memoryTotalMB)}
+          series={[{ data: memory, color: CHART_COLORS.success }]}
+        />
+      )}
+
+      <StatGrid>
+        <Stat label="Video memory" value={hasVram
+          ? `${formatRam(gpu.vramUsedMB)} / ${formatRam(gpu.vramTotalMB)}` : undefined} />
+        <Stat label={hasVram ? "Shared memory" : "Memory usage"} value={gpu.sharedTotalMB === undefined ? undefined
+          : `${formatRam(gpu.sharedUsedMB ?? 0)} / ${formatRam(gpu.sharedTotalMB)}`} />
+        <Stat
+          label={videoShared ? "Video encode/decode" : "Video encode"}
+          value={gpu.encodePercent === undefined ? undefined : `${gpu.encodePercent.toFixed(0)}%`}
+        />
+        {!videoShared && (
+          <Stat label="Video decode" value={gpu.decodePercent === undefined ? undefined
+            : `${gpu.decodePercent.toFixed(0)}%`} />
+        )}
+        <Stat label="Clock" value={gpu.clockMHz === undefined ? undefined
+          : `${gpu.clockMHz} MHz${gpu.clockMaxMHz ? ` / ${gpu.clockMaxMHz}` : ""}`} />
+        <Stat label="Memory clock" value={gpu.memClockMHz === undefined ? undefined
+          : `${gpu.memClockMHz} MHz${gpu.memClockMaxMHz ? ` / ${gpu.memClockMaxMHz}` : ""}`} />
+        <Stat label="Power" value={gpu.powerW === undefined ? undefined
+          : `${gpu.powerW.toFixed(1)} W${gpu.powerMaxW ? ` / ${gpu.powerMaxW}` : ""}`} />
+        <Stat label="Temperature" value={formatTemp(gpu.tempC, tempUnit)} />
+        <Stat label="Vendor" value={info?.vendor} />
+        <Stat label="Driver" value={info?.driver === undefined ? undefined
+          : [info.driver, info.driverVersion].filter(Boolean).join(" ")} />
+        <Stat label="OpenGL" value={info?.openglVersion} />
+        <Stat label="Vulkan" value={info?.vulkanVersion} />
+        <Stat label="PCI bus address" value={gpu.id} />
+        <Stat label="PCIe link" value={pcie(info?.pcieGen, info?.pcieLanes)} />
+        <Stat label="PCIe maximum" value={pcie(info?.pcieMaxGen, info?.pcieMaxLanes)} />
+      </StatGrid>
+    </div>
+  );
+}

package/src/web/components/system/performance/memory-detail.tsx

@@ -0,0 +1,109 @@
+/** Memory page — Mission Center's Memory tab: the usage graph, the composition
+ *  strip whose four parts add up to the total exactly, and the SMBIOS slot table. */
+import { formatBytes, formatRam } from "@/lib/format-bytes";
+import { historySpanLabel } from "@/lib/cpu-graph-mode";
+import { CHART_COLORS, CompositionBar, DetailChart, DetailHeader, Stat, StatGrid, useSeries } from "./detail-parts";
+import type { MemoryInfo } from "../../../../types/system-hardware";
+import type { MemoryMetrics, MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+export function MemoryDetail({
+  mem, info, history,
+}: { mem: MemoryMetrics; info?: MemoryInfo; history: readonly MetricsHistoryPoint[] }) {
+  const used = useSeries(history, (p) => p.system.mem.percent);
+  // Percent of the swap that is in use, so the graph shares the utilisation axis
+  // with the memory one above it rather than autoscaling to whatever megabyte
+  // figure happens to be the window's maximum.
+  const swap = useSeries(history, (p) => {
+    const total = p.system.mem.swapTotalMB ?? 0;
+    return total > 0 ? ((p.system.mem.swapUsedMB ?? 0) / total) * 100 : 0;
+  });
+  // The four byte figures are produced together or not at all, so one of them
+  // being present is enough to know the strip can be drawn.
+  const composed = mem.inUseBytes !== undefined;
+  const span = historySpanLabel(history.map((p) => p.ts));
+  const caption = (what: string) => (span ? `${what} ${span}` : what);
+  // A host with swap off gets no swap graph at all: a flat zero line over an
+  // axis that does not exist reads as "nothing is swapping", which is a
+  // different claim from "there is nowhere to swap to".
+  const hasSwap = (mem.swapTotalMB ?? 0) > 0;
+
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-memory">
+      <DetailHeader
+        title="Memory"
+        subtitle={`${formatRam(mem.usedMB)} of ${formatRam(mem.totalMB)} in use`}
+        value={`${mem.percent.toFixed(1)}%`}
+      />
+      <DetailChart
+        grid
+        maxValue={100}
+        caption={caption("Memory usage")}
+        ceiling={formatRam(mem.totalMB)}
+        series={[{ data: used, color: CHART_COLORS.primary }]}
+      />
+
+      {hasSwap && (
+        <DetailChart
+          grid
+          height={90}
+          maxValue={100}
+          caption={caption("Swap usage")}
+          ceiling={formatRam(mem.swapTotalMB ?? 0)}
+          series={[{ data: swap, color: CHART_COLORS.success }]}
+        />
+      )}
+
+      {composed && (
+        <div className="space-y-2">
+          <CompositionBar segments={[
+            { label: "In use", value: mem.inUseBytes ?? 0, color: "var(--color-primary)" },
+            { label: "Modified", value: mem.modifiedBytes ?? 0, color: "var(--color-warning)" },
+            { label: "Standby", value: mem.standbyBytes ?? 0, color: "var(--color-success)" },
+            { label: "Free", value: mem.freeBytes ?? 0, color: "var(--color-border)" },
+          ]} />
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-text-subtle">
+            <span>In use {formatBytes(mem.inUseBytes ?? 0)}</span>
+            <span>Modified {formatBytes(mem.modifiedBytes ?? 0)}</span>
+            <span>Standby {formatBytes(mem.standbyBytes ?? 0)}</span>
+            <span>Free {formatBytes(mem.freeBytes ?? 0)}</span>
+          </div>
+        </div>
+      )}
+
+      <StatGrid>
+        <Stat label="Available" value={formatRam(mem.availableMB)} />
+        <Stat label="Cached" value={mem.cachedMB === undefined ? undefined : formatRam(mem.cachedMB)} />
+        <Stat label="Committed" value={mem.committedMB === undefined ? undefined
+          : `${formatRam(mem.committedMB)} / ${mem.commitLimitMB === undefined ? "?" : formatRam(mem.commitLimitMB)}`} />
+        <Stat label="Swap" value={mem.swapTotalMB === undefined ? undefined
+          : `${formatRam(mem.swapUsedMB ?? 0)} / ${formatRam(mem.swapTotalMB)}`} />
+        <Stat label="Compressed (zram)" value={mem.zramCompressedMB === undefined ? undefined
+          : formatRam(mem.zramCompressedMB)} />
+        <Stat label="Savings (zram)" value={mem.zramSavingsMB === undefined ? undefined
+          : formatRam(mem.zramSavingsMB)} />
+        <Stat label="Slots used" value={info === undefined ? undefined
+          : `${info.devices.length}${info.slotsTotal ? ` of ${info.slotsTotal}` : ""}`} />
+        <Stat label="Maximum capacity" value={info?.maxCapacityBytes === undefined ? undefined
+          : formatBytes(info.maxCapacityBytes)} />
+      </StatGrid>
+
+      {info && info.devices.length > 0 && (
+        <div className="space-y-1">
+          <h4 className="text-xs font-medium text-text-secondary">Slots</h4>
+          <div className="rounded-md border border-border divide-y divide-border">
+            {info.devices.map((device) => (
+              <div key={device.locator} className="flex items-center justify-between gap-3 px-3 py-2 text-xs">
+                <span className="font-medium shrink-0">{device.locator}</span>
+                <span className="text-text-subtle truncate">
+                  {[device.manufacturer, device.ramType, device.formFactor,
+                    device.speedMts ? `${device.speedMts} MT/s` : null].filter(Boolean).join(" · ")}
+                </span>
+                <span className="tabular-nums shrink-0">{formatBytes(device.sizeBytes)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/system/performance/nic-detail.tsx

@@ -0,0 +1,55 @@
+/** One network interface — Mission Center's per-interface page. */
+import { formatBps, formatBytes } from "@/lib/format-bytes";
+import { CHART_COLORS, DetailChart, DetailHeader, Stat, StatGrid, useSeries } from "./detail-parts";
+import { NIC_KIND_LABELS } from "./device-list";
+import type { NicInfo } from "../../../../types/system-hardware";
+import type { MetricsHistoryPoint, NicMetrics, NicState } from "../../../../types/system-metrics";
+
+const STATE_LABELS: Record<NicState, string> = {
+  connected: "Connected",
+  connecting: "Connecting",
+  disconnected: "Disconnected",
+  unavailable: "Unavailable",
+  unknown: "Unknown",
+};
+
+export function NicDetail({
+  nic, info, history,
+}: { nic: NicMetrics; info?: NicInfo; history: readonly MetricsHistoryPoint[] }) {
+  const pick = (p: MetricsHistoryPoint) => p.system.nics?.find((n) => n.id === nic.id);
+  const rx = useSeries(history, (p) => pick(p)?.rxBps);
+  const tx = useSeries(history, (p) => pick(p)?.txBps);
+
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-nic" data-nic-id={nic.id}>
+      <DetailHeader
+        title={NIC_KIND_LABELS[info?.kind ?? "other"]}
+        subtitle={[nic.id, info?.deviceName].filter(Boolean).join(" · ")}
+        value={nic.available ? formatBps(nic.rxBps + nic.txBps) : "—"}
+      />
+      <DetailChart
+        legend={["Receive", "Send"]}
+        series={[
+          { data: rx, color: CHART_COLORS.primary },
+          { data: tx, color: CHART_COLORS.secondary },
+        ]}
+      />
+      <StatGrid>
+        <Stat label="State" value={STATE_LABELS[nic.state]} />
+        <Stat label="Receive" value={nic.available ? formatBps(nic.rxBps) : undefined} />
+        <Stat label="Send" value={nic.available ? formatBps(nic.txBps) : undefined} />
+        <Stat label="Maximum bitrate" value={nic.linkMbps === undefined ? undefined : `${nic.linkMbps} Mbps`} />
+        <Stat label="Total received" value={formatBytes(nic.rxTotal)} />
+        <Stat label="Total sent" value={formatBytes(nic.txTotal)} />
+        <Stat label="Network name" value={nic.ssid} />
+        <Stat label="Signal" value={nic.signalPercent === undefined ? undefined : `${nic.signalPercent}%`} />
+        <Stat label="Frequency" value={nic.frequencyMHz === undefined ? undefined
+          : `${(nic.frequencyMHz / 1000).toFixed(1)} GHz`} />
+        <Stat label="Driver" value={info?.driver} />
+        <Stat label="Hardware address" value={info?.mac} />
+        <Stat label="IPv4" value={info?.ipv4.join(", ")} title={info?.ipv4.join("\n")} />
+        <Stat label="IPv6" value={info?.ipv6.join(", ")} title={info?.ipv6.join("\n")} />
+      </StatGrid>
+    </div>
+  );
+}

package/src/web/components/system/performance/partition-list.tsx

@@ -0,0 +1,79 @@
+/**
+ * A drive's partitions — Mission Center's Partitions section.
+ *
+ * One row per partition, not per mount: a partition's usage belongs to its
+ * FILESYSTEM, and a btrfs subvolume layout mounts one filesystem at seven places
+ * that all report the same figures. Seven identical bars would be noise, so the
+ * mount points are listed together above one bar.
+ */
+import { formatBytes } from "@/lib/format-bytes";
+import { cn } from "@/lib/utils";
+import type { PartitionInfo } from "../../../../types/system-hardware";
+
+/** Above this a bar earns a warning colour — a filesystem this full is a problem
+ *  worth noticing before it is one. */
+const FULL_PERCENT = 90;
+const BUSY_PERCENT = 75;
+
+function barColor(percent: number): string {
+  if (percent >= FULL_PERCENT) return "bg-error";
+  if (percent >= BUSY_PERCENT) return "bg-warning";
+  return "bg-primary";
+}
+
+export function PartitionList({ partitions }: { partitions: readonly PartitionInfo[] }) {
+  if (partitions.length === 0) return null;
+  return (
+    <section className="space-y-2" data-testid="sysmon-partitions">
+      <h4 className="text-sm font-medium">Partitions</h4>
+      <ul className="space-y-2">
+        {partitions.map((part) => (
+          <PartitionRow key={part.id} part={part} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function PartitionRow({ part }: { part: PartitionInfo }) {
+  // The first mount that answered: every mount of one filesystem reports the
+  // same statfs, so there is nothing to choose between them.
+  const usage = part.mounts.find((m) => m.usedBytes !== undefined && m.totalBytes);
+  const percent = usage ? Math.min(100, (usage.usedBytes! / usage.totalBytes!) * 100) : undefined;
+
+  return (
+    <li className="rounded-md border border-border px-3 py-2 space-y-1.5" data-testid="sysmon-partition">
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="text-sm font-medium truncate" title={part.devicePath}>{part.devicePath}</span>
+        <span className="text-[11px] text-text-subtle shrink-0 tabular-nums">
+          {part.filesystem ?? "—"} · {formatBytes(part.sizeBytes)}
+        </span>
+      </div>
+
+      {part.mounts.length === 0 ? (
+        <p className="text-[11px] text-text-subtle">Not mounted</p>
+      ) : (
+        <>
+          <p className="text-[11px] text-text-subtle truncate" title={part.mounts.map((m) => m.mountPoint).join(", ")}>
+            {part.mounts.map((m) => m.mountPoint).join(", ")}
+          </p>
+          {percent === undefined ? (
+            // Mounted but statfs refused. An unreadable filesystem is not an
+            // empty one, so it gets no bar rather than a bar at zero.
+            <p className="text-[11px] text-text-subtle">Usage unavailable</p>
+          ) : (
+            <div className="space-y-1">
+              <div className="h-1.5 w-full rounded-full bg-surface-hover overflow-hidden">
+                <div className={cn("h-full rounded-full", barColor(percent))} style={{ width: `${percent}%` }} />
+              </div>
+              <div className="flex items-baseline justify-between gap-2 text-[11px] text-text-subtle tabular-nums">
+                <span>{formatBytes(usage!.usedBytes!)} of {formatBytes(usage!.totalBytes!)}</span>
+                <span>{percent.toFixed(0)}%</span>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </li>
+  );
+}

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

@@ -0,0 +1,206 @@
+/**
+ * The Performance page — Mission Center's device sidebar plus one detail page.
+ *
+ * Two presentations from one tree: at `md` and above the sidebar and the detail
+ * sit side by side; below it the sidebar IS the page and tapping a device drills
+ * into it, because a 200px sidebar beside a detail grid on a phone leaves neither
+ * of them usable.
+ */
+import { useMemo, type ComponentType } from "react";
+import { Activity, ChevronLeft, ChevronRight, Cpu, HardDrive, Layers, Monitor, Wifi } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { buildDeviceList, resolveSelected, type DeviceEntry, type DeviceKind } from "./device-list";
+import { useHardwareInventory } from "./use-hardware-inventory";
+import { CpuDetail } from "./cpu-detail";
+import { MemoryDetail } from "./memory-detail";
+import { DiskDetail } from "./disk-detail";
+import { NicDetail } from "./nic-detail";
+import { GpuDetail } from "./gpu-detail";
+import { FansDetail } from "./fans-detail";
+import type { HardwareInventory } from "../../../../types/system-hardware";
+import type { MetricsHistoryPoint, SystemMetrics } from "../../../../types/system-metrics";
+
+const KIND_ICONS: Record<DeviceKind, ComponentType<{ className?: string }>> = {
+  cpu: Cpu, memory: Layers, disk: HardDrive, nic: Wifi, gpu: Monitor, fans: Activity,
+};
+
+function barColor(percent: number): string {
+  if (percent > 80) return "bg-error";
+  if (percent > 50) return "bg-warning";
+  return "bg-primary";
+}
+
+function DeviceRow({
+  entry, selected, showChevron, onSelect,
+}: { entry: DeviceEntry; selected: boolean; showChevron: boolean; onSelect: (key: string) => void }) {
+  const Icon = KIND_ICONS[entry.kind];
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(entry.key)}
+      aria-current={selected}
+      data-testid="sysmon-device-row"
+      data-device-key={entry.key}
+      className={cn(
+        "w-full min-h-11 px-3 py-2 flex items-center gap-3 text-left transition-colors",
+        selected ? "bg-primary/10 text-text-primary" : "hover:bg-surface-hover",
+      )}
+    >
+      <Icon className="size-4 shrink-0 text-text-subtle" />
+      <span className="flex-1 min-w-0">
+        <span className="block text-sm truncate">{entry.label}</span>
+        <span className="block text-[11px] text-text-subtle truncate" title={entry.sublabel}>
+          {entry.sublabel}
+        </span>
+        {/* No bar at all when the device has no percentage — an empty track would
+            read as "measured, and it is zero". */}
+        {entry.percent !== null && (
+          <span className="mt-1 block h-1 w-full rounded-full bg-surface-hover overflow-hidden">
+            <span
+              className={cn("block h-full transition-[width]", barColor(entry.percent))}
+              style={{ width: `${Math.max(1, Math.min(100, entry.percent))}%` }}
+            />
+          </span>
+        )}
+      </span>
+      <span className="text-xs tabular-nums text-text-secondary shrink-0">{entry.detail}</span>
+      {showChevron && <ChevronRight className="size-4 shrink-0 text-text-subtle" />}
+    </button>
+  );
+}
+
+function DeviceDetail({
+  entry, system, inventory, history,
+}: {
+  entry: DeviceEntry;
+  system: SystemMetrics;
+  inventory: HardwareInventory | null;
+  history: readonly MetricsHistoryPoint[];
+}) {
+  switch (entry.kind) {
+    case "cpu":
+      return <CpuDetail cpu={system.cpu} info={inventory?.cpu} history={history} processCount={system.processCount} />;
+    case "memory":
+      return <MemoryDetail mem={system.mem} info={inventory?.memory} history={history} />;
+    case "disk": {
+      const index = (system.disks ?? []).findIndex((d) => d.id === entry.id);
+      const disk = index >= 0 ? system.disks?.[index] : undefined;
+      if (!disk) return null;
+      return (
+        <DiskDetail
+          disk={disk}
+          index={index}
+          info={inventory?.disks.find((d) => d.id === disk.id)}
+          history={history}
+        />
+      );
+    }
+    case "nic": {
+      const nic = (system.nics ?? []).find((n) => n.id === entry.id);
+      if (!nic) return null;
+      return <NicDetail nic={nic} info={inventory?.nics.find((n) => n.id === nic.id)} history={history} />;
+    }
+    case "gpu": {
+      const index = system.gpus.findIndex((g) => (entry.id ? g.id === entry.id : true));
+      const gpu = index >= 0 ? system.gpus[index] : undefined;
+      if (!gpu) return null;
+      return (
+        <GpuDetail
+          gpu={gpu}
+          index={index}
+          info={inventory?.gpus.find((g) => g.id === gpu.id)}
+          history={history}
+        />
+      );
+    }
+    case "fans":
+      return <FansDetail fans={system.fans ?? []} />;
+    default:
+      return null;
+  }
+}
+
+export interface PerformancePanelProps {
+  system: SystemMetrics;
+  history: MetricsHistoryPoint[];
+  /** Selected device key, owned by the parent so an Overview card can jump
+   *  straight to one. `null` means "nothing chosen": the desktop sidebar then
+   *  falls back to the first entry and the phone shows the device list. */
+  device: string | null;
+  onDeviceChange: (key: string | null) => void;
+}
+
+export function PerformancePanel({
+  system, history, device, onDeviceChange,
+}: PerformancePanelProps) {
+  const isMobile = useIsMobile();
+
+  // Derived from the tick rather than from the device list, so the inventory
+  // fetch does not depend on the list that depends on the inventory.
+  const deviceIds = useMemo(
+    () => [
+      ...(system.disks ?? []).map((d) => d.id),
+      ...(system.nics ?? []).map((n) => n.id),
+      ...system.gpus.map((g) => g.id).filter((id): id is string => !!id),
+    ].join(","),
+    [system.disks, system.nics, system.gpus],
+  );
+  const inventory = useHardwareInventory(deviceIds);
+  const entries = useMemo(() => buildDeviceList(system, inventory), [system, inventory]);
+
+  // A device that disappears (a drive unplugged) falls back rather than leaving
+  // the page blank.
+  const selectedKey = resolveSelected(entries, device);
+  const selected = entries.find((e) => e.key === selectedKey);
+
+  const list = (
+    <div className="divide-y divide-border" role="list" data-testid="sysmon-device-list">
+      {entries.map((entry) => (
+        <DeviceRow
+          key={entry.key}
+          entry={entry}
+          selected={!isMobile && entry.key === selectedKey}
+          showChevron={isMobile}
+          onSelect={onDeviceChange}
+        />
+      ))}
+    </div>
+  );
+
+  if (isMobile) {
+    // The phone shows one thing at a time, so a key that resolves to something
+    // OTHER than what was asked for goes back to the list rather than drilling
+    // into the fallback. On desktop that fallback is harmless — the sidebar is on
+    // screen saying which device is current — and here there is nothing to say it.
+    if (device === null || !selected || selectedKey !== device) {
+      return <div className="h-full overflow-y-auto" data-testid="sysmon-performance">{list}</div>;
+    }
+    return (
+      <div className="h-full flex flex-col" data-testid="sysmon-performance">
+        <button
+          type="button"
+          onClick={() => onDeviceChange(null)}
+          className="shrink-0 min-h-11 px-3 flex items-center gap-2 text-sm border-b border-border"
+        >
+          <ChevronLeft className="size-4" />
+          Devices
+        </button>
+        <div className="flex-1 min-h-0 overflow-y-auto p-4 @container">
+          <DeviceDetail entry={selected} system={system} inventory={inventory} history={history} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex min-h-0" data-testid="sysmon-performance">
+      <div className="w-56 shrink-0 border-r border-border overflow-y-auto">{list}</div>
+      <div className="flex-1 min-w-0 overflow-y-auto p-4 @container">
+        {selected && (
+          <DeviceDetail entry={selected} system={system} inventory={inventory} history={history} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/system/performance/use-hardware-inventory.ts

@@ -0,0 +1,48 @@
+/**
+ * Static device facts for the Performance page.
+ *
+ * Fetched once, then again only when a snapshot names a device id the inventory
+ * has never heard of — a USB drive plugged in, an interface created. It is a
+ * ~2.8 KB payload of things that do not change tick to tick (models, capacities,
+ * MAC addresses, DIMM layout), so putting it on the 2 s stream would be pure
+ * waste over a tunnel.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api } from "@/lib/api-client";
+import type { HardwareInventory } from "../../../../types/system-hardware";
+
+/** `deviceIds` is a JOINED string, not an array: an array literal is a fresh
+ *  identity every render, which would turn the refetch effect into a loop. */
+export function useHardwareInventory(deviceIds: string): HardwareInventory | null {
+  const [inventory, setInventory] = useState<HardwareInventory | null>(null);
+  const inFlight = useRef(false);
+
+  const load = useCallback(async () => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    try {
+      setInventory(await api.get<HardwareInventory>("/api/system/hardware"));
+    } catch {
+      // The pages degrade to the ids the tick already carries rather than
+      // showing an error over a whole page of otherwise-live figures.
+    } finally {
+      inFlight.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!inventory) return;
+    const known = new Set<string>([
+      ...inventory.disks.map((d) => d.id),
+      ...inventory.nics.map((n) => n.id),
+      ...inventory.gpus.map((g) => g.id),
+    ]);
+    if (deviceIds.split(",").filter(Boolean).some((id) => !known.has(id))) void load();
+  }, [inventory, deviceIds, load]);
+
+  return inventory;
+}

package/src/web/components/system/process-columns-grid.ts

@@ -9,7 +9,7 @@
 import type { CSSProperties } from "react";
 import type { ProcessColumnAvailability, SortKey } from "../../../types/system-metrics";
 
-export type OptionalColumnKey = "disk" | "gpu" | "net";
+export type OptionalColumnKey = "swap" | "disk" | "gpu" | "net";
 /** Every column whose width the user can drag. The name column takes the rest. */
 export type ResizableColumnKey = "cpu" | "ram" | OptionalColumnKey;
 
@@ -20,13 +20,15 @@ export type ProcessColumnsFlags = ProcessColumnAvailability;
 /** px overrides from a drag; missing keys fall back to `DEFAULT_COLUMN_WIDTH`. */
 export type ColumnWidths = Partial<Record<ResizableColumnKey, number>>;
 
-const OPTIONAL_COLUMN_ORDER: OptionalColumnKey[] = ["disk", "gpu", "net"];
+/** Mission Center's own order on both its tables: Memory, Swap, then the rest. */
+const OPTIONAL_COLUMN_ORDER: OptionalColumnKey[] = ["swap", "disk", "gpu", "net"];
 
 /** Disk/Net cells show two values ("↓ read ↑ write"); GPU shows one composite
  *  ("12% · 1.1 GB") and fits narrower. */
 export const DEFAULT_COLUMN_WIDTH: Record<ResizableColumnKey, number> = {
   cpu: 64,
   ram: 80,
+  swap: 80,
   disk: 120,
   gpu: 90,
   net: 120,
@@ -54,7 +56,7 @@ export interface ProcessGridResult {
 }
 
 function isOptionalColumnKey(key: SortKey): key is OptionalColumnKey {
-  return key === "disk" || key === "gpu" || key === "net";
+  return key === "swap" || key === "disk" || key === "gpu" || key === "net";
 }
 
 export function clampColumnWidth(px: number): number {