@hienlh/ppm 0.23.6 → 0.23.7

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

@@ -0,0 +1,220 @@
+/**
+ * CPU page — Mission Center's CPU tab.
+ *
+ * Two graphs, both of which the right-click menu re-points: the top one between
+ * overall utilisation, a grid of one graph per logical processor, and every
+ * thread overlaid or stacked; the bottom one between temperature, package power,
+ * clock speed and nothing at all. The menu is the feature — an i9's eight P-cores
+ * and eight E-cores behave nothing alike, and one averaged line hides that.
+ */
+import { useMemo } from "react";
+import { formatBytes } from "@/lib/format-bytes";
+import { formatTemp } from "@/lib/temperature";
+import { useSettingsStore } from "@/stores/settings-store";
+import {
+  CPU_BOTTOM_GRAPHS, CPU_BOTTOM_LABELS, CPU_GRAPH_LABELS, CPU_GRAPH_MODES, historySpanLabel,
+} from "@/lib/cpu-graph-mode";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuRadioGroup, ContextMenuRadioItem,
+  ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { CpuCoreGrid } from "./cpu-core-grid";
+import { CHART_COLORS, DetailChart, DetailHeader, Stat, StatGrid, useSeries } from "./detail-parts";
+import type { CpuInfo } from "../../../../types/system-hardware";
+import type { CpuMetrics, MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+function uptime(seconds: number | undefined): string | undefined {
+  if (seconds === undefined) return undefined;
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  return d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m`;
+}
+
+const GHZ = (mhz: number | undefined) => (mhz === undefined ? undefined : `${(mhz / 1000).toFixed(2)} GHz`);
+
+export function CpuDetail({
+  cpu, info, history, processCount,
+}: {
+  cpu: CpuMetrics;
+  info?: CpuInfo;
+  history: readonly MetricsHistoryPoint[];
+  processCount?: number;
+}) {
+  const tempUnit = useSettingsStore((s) => s.sysmonTempUnit);
+  const kernelTimes = useSettingsStore((s) => s.sysmonKernelTimes);
+  const setKernelTimes = useSettingsStore((s) => s.setSysmonKernelTimes);
+  const mode = useSettingsStore((s) => s.sysmonCpuGraph);
+  const setMode = useSettingsStore((s) => s.setSysmonCpuGraph);
+  const bottom = useSettingsStore((s) => s.sysmonCpuBottomGraph);
+  const setBottom = useSettingsStore((s) => s.setSysmonCpuBottomGraph);
+
+  const total = useSeries(history, (p) => p.system.cpu.total);
+  const kernel = useSeries(history, (p) => p.system.cpu.kernelPercent);
+  const tempSeries = useSeries(history, (p) => p.system.cpu.tempC);
+  const powerSeries = useSeries(history, (p) => p.system.cpu.powerW);
+  const clockSeries = useSeries(history, (p) => p.system.cpu.currentMHz);
+
+  // The kernel line is a SUBSET of the total and is only drawn where the host
+  // reports it — otherwise a flat zero line would read as "no kernel time". The
+  // preference can only take it away, never conjure one the host never sent.
+  const hasKernel = kernelTimes && cpu.kernelPercent !== undefined;
+  const span = historySpanLabel(history.map((p) => p.ts));
+  const caption = (what: string) => (span ? `${what} ${span}` : what);
+
+  // One pass over the window for every thread at once, shared by the overlaid and
+  // the stacked mode. Stacked divides by the thread count so the stack's top edge
+  // is the machine's overall utilisation rather than 2400%.
+  const threads = useMemo(() => {
+    const window = history.slice(-200);
+    const n = cpu.cores.length;
+    const out: number[][] = Array.from({ length: n }, () => []);
+    for (const point of window) {
+      const values = point.system.cpu.cores;
+      for (let i = 0; i < n; i++) out[i]!.push(values[i] ?? 0);
+    }
+    return out;
+  }, [history, cpu.cores.length]);
+
+  const threadSeries = threads.map((data) => ({ data, color: CHART_COLORS.primary }));
+  const stackedSeries = threads.map((data) => ({
+    data: data.map((v) => v / Math.max(1, threads.length)),
+    color: CHART_COLORS.primary,
+  }));
+
+  const bottomChart = () => {
+    if (bottom === "none") return null;
+    if (bottom === "temperature") {
+      if (cpu.tempC === undefined) return null;
+      return (
+        <DetailChart
+          grid
+          height={100}
+          caption={caption("Temperature")}
+          ceiling={formatTemp(Math.max(...tempSeries, 1), tempUnit)}
+          series={[{ data: tempSeries, color: CHART_COLORS.error }]}
+        />
+      );
+    }
+    if (bottom === "power") {
+      if (cpu.powerW === undefined) return null;
+      return (
+        <DetailChart
+          grid
+          height={100}
+          caption={caption("Power draw")}
+          ceiling={`${Math.max(...powerSeries, 1).toFixed(1)} W`}
+          series={[{ data: powerSeries, color: CHART_COLORS.secondary }]}
+        />
+      );
+    }
+    if (cpu.currentMHz === undefined) return null;
+    return (
+      <DetailChart
+        grid
+        height={100}
+        caption={caption("Clock speed")}
+        ceiling={GHZ(info?.maxMHz ?? Math.max(...clockSeries, 1))}
+        maxValue={info?.maxMHz}
+        series={[{ data: clockSeries, color: CHART_COLORS.success }]}
+      />
+    );
+  };
+
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-cpu">
+      <DetailHeader title="CPU" subtitle={info?.name ?? cpu.model} value={`${cpu.total.toFixed(1)}%`} />
+
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <div className="space-y-3 select-none" data-testid="sysmon-cpu-graphs">
+            {mode === "logical" ? (
+              <div className="space-y-1">
+                <div className="flex items-baseline justify-between gap-2 text-[11px] text-text-subtle">
+                  <span className="truncate">{caption("Utilisation")}</span>
+                  <span className="shrink-0 tabular-nums">100%</span>
+                </div>
+                <CpuCoreGrid cores={cpu.cores} history={history} />
+              </div>
+            ) : (
+              <DetailChart
+                grid
+                maxValue={100}
+                caption={caption("Utilisation")}
+                ceiling="100%"
+                stacked={mode === "threads-stacked"}
+                legend={mode === "overall" && hasKernel ? ["Utilisation", "Kernel"] : undefined}
+                series={
+                  mode === "threads" ? threadSeries
+                  : mode === "threads-stacked" ? stackedSeries
+                  : hasKernel
+                    ? [{ data: total, color: CHART_COLORS.primary }, { data: kernel, color: CHART_COLORS.secondary }]
+                    : [{ data: total, color: CHART_COLORS.primary }]
+                }
+              />
+            )}
+            {bottomChart()}
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Change top graph to</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuRadioGroup value={mode} onValueChange={(v) => setMode(v as typeof mode)}>
+                {CPU_GRAPH_MODES.map((m) => (
+                  <ContextMenuRadioItem key={m} value={m} data-testid={`sysmon-cpu-graph-${m}`}>
+                    {CPU_GRAPH_LABELS[m]}
+                  </ContextMenuRadioItem>
+                ))}
+              </ContextMenuRadioGroup>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Change bottom graph to</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuRadioGroup value={bottom} onValueChange={(v) => setBottom(v as typeof bottom)}>
+                {CPU_BOTTOM_GRAPHS.map((m) => (
+                  <ContextMenuRadioItem key={m} value={m} data-testid={`sysmon-cpu-bottom-${m}`}>
+                    {CPU_BOTTOM_LABELS[m]}
+                  </ContextMenuRadioItem>
+                ))}
+              </ContextMenuRadioGroup>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+          <ContextMenuSeparator />
+          {/* A plain item rather than a checkbox one: the same switch is in
+              Preferences, and this is the place Mission Center puts it. */}
+          <ContextMenuItem
+            onSelect={() => setKernelTimes(!kernelTimes)}
+            data-testid="sysmon-cpu-kernel-toggle"
+          >
+            {kernelTimes ? "Hide kernel times" : "Show kernel times"}
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+
+      <StatGrid>
+        <Stat label="Speed" value={GHZ(cpu.currentMHz)} />
+        <Stat label="Base speed" value={GHZ(info?.baseMHz)} />
+        <Stat label="Max speed" value={GHZ(info?.maxMHz)} />
+        <Stat label="Temperature" value={formatTemp(cpu.tempC, tempUnit)} />
+        <Stat label="Power" value={cpu.powerW === undefined ? undefined : `${cpu.powerW.toFixed(1)} W`} />
+        <Stat label="Processes" value={processCount} />
+        <Stat label="Threads running" value={cpu.threadCount} />
+        <Stat label="Open handles" value={cpu.handleCount} />
+        <Stat label="Up time" value={uptime(cpu.uptimeSec)} />
+        <Stat label="Sockets" value={info?.sockets} />
+        <Stat label="Cores" value={info?.physicalCores} />
+        <Stat label="Logical processors" value={info?.logicalCores ?? cpu.cores.length} />
+        <Stat label="Virtualisation" value={info?.isVirtualMachine ? "Running in a VM" : info?.virtualization} />
+        <Stat label="L1 cache" value={info?.l1CacheBytes === undefined ? undefined : formatBytes(info.l1CacheBytes)} />
+        <Stat label="L2 cache" value={info?.l2CacheBytes === undefined ? undefined : formatBytes(info.l2CacheBytes)} />
+        <Stat label="L3 cache" value={info?.l3CacheBytes === undefined ? undefined : formatBytes(info.l3CacheBytes)} />
+        <Stat label="Cpufreq driver" value={info?.freqDriver} />
+        <Stat label="Governor" value={info?.freqGovernor} />
+        <Stat label="Power preference" value={info?.powerPreference} />
+      </StatGrid>
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+/**
+ * Shared furniture for every Performance detail page, so the six of them differ
+ * only in which figures they name.
+ *
+ * The one rule they all obey: a figure this host cannot measure is `undefined` in
+ * the contract and renders as an em dash, never as 0. A zero is a claim.
+ */
+import { useMemo, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { MetricChartCanvas, type MetricSeries } from "../metric-chart-canvas";
+import type { MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+export interface DetailHeaderProps {
+  title: string;
+  subtitle?: string;
+  /** Headline figure, already formatted. */
+  value?: string;
+  valueClassName?: string;
+}
+
+export function DetailHeader({ title, subtitle, value, valueClassName }: DetailHeaderProps) {
+  return (
+    <div className="flex items-baseline justify-between gap-3">
+      <div className="min-w-0">
+        <h3 className="text-base font-semibold truncate">{title}</h3>
+        {subtitle && <p className="text-xs text-text-subtle truncate" title={subtitle}>{subtitle}</p>}
+      </div>
+      {value !== undefined && (
+        <span className={cn("text-2xl font-semibold tabular-nums shrink-0", valueClassName)}>{value}</span>
+      )}
+    </div>
+  );
+}
+
+/** Two columns on a phone, four on a wide window. Driven by the panel's OWN width
+ *  (`@container`), because a floating window is routinely narrower than the screen. */
+export function StatGrid({ children }: { children: ReactNode }) {
+  return <dl className="grid grid-cols-2 @2xl:grid-cols-4 gap-x-4 gap-y-3">{children}</dl>;
+}
+
+export interface StatProps {
+  label: string;
+  /** Undefined renders as an em dash: this host cannot measure it. */
+  value?: string | number | null;
+  title?: string;
+}
+
+export function Stat({ label, value, title }: StatProps) {
+  const text = value === undefined || value === null || value === "" ? "—" : String(value);
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-text-subtle truncate">{label}</dt>
+      <dd className="text-sm tabular-nums truncate" title={title ?? text}>{text}</dd>
+    </div>
+  );
+}
+
+export interface DetailChartProps {
+  series: MetricSeries[];
+  /** Fixed ceiling, e.g. 100 for a percentage axis. Omitted autoscales. */
+  maxValue?: number;
+  height?: number;
+  /** One entry per series, in the same order. */
+  legend?: string[];
+  /** Mission Center's line above the graph — "Utilisation over 6 minutes". */
+  caption?: string;
+  /** What the top of the axis means, right-aligned opposite the caption. A graph
+   *  with no stated ceiling is a shape, not a reading. */
+  ceiling?: string;
+  grid?: boolean;
+  stacked?: boolean;
+}
+
+export function DetailChart({
+  series, maxValue, height = 120, legend, caption, ceiling, grid, stacked,
+}: DetailChartProps) {
+  return (
+    <div className="space-y-1">
+      {(caption || ceiling) && (
+        <div className="flex items-baseline justify-between gap-2 text-[11px] text-text-subtle">
+          <span className="truncate">{caption}</span>
+          <span className="shrink-0 tabular-nums">{ceiling}</span>
+        </div>
+      )}
+      <MetricChartCanvas
+        series={series}
+        height={height}
+        maxValue={maxValue}
+        grid={grid}
+        stacked={stacked}
+      />
+      {legend && legend.length > 0 && (
+        <div className="flex flex-wrap gap-x-4 gap-y-1">
+          {legend.map((label, i) => (
+            <span key={label} className="flex items-center gap-1.5 text-[11px] text-text-subtle">
+              <span className="size-2 rounded-full" style={{ background: series[i]?.color }} />
+              {label}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * One series out of the history window. `pick` returning undefined for a point
+ * contributes 0 rather than a gap — the canvas draws a continuous line, and a
+ * device that appeared midway through the window has no earlier readings to draw.
+ */
+export function useSeries(
+  history: readonly MetricsHistoryPoint[],
+  pick: (point: MetricsHistoryPoint) => number | undefined,
+  points = 200,
+): number[] {
+  return useMemo(
+    () => history.slice(-points).map((p) => pick(p) ?? 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `pick` is written inline at every call site; only the data should retrigger
+    [history, points],
+  );
+}
+
+/** A proportional bar made of labelled segments — Mission Center's memory
+ *  composition strip. Segments whose values do not add to the total are scaled to
+ *  whatever they do add to, so the bar is never wider than its track. */
+export function CompositionBar({ segments }: { segments: { label: string; value: number; color: string }[] }) {
+  const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+  if (total <= 0) return null;
+  return (
+    <div className="flex h-3 w-full overflow-hidden rounded-sm bg-surface-hover" role="img"
+      aria-label={segments.map((s) => s.label).join(", ")}>
+      {segments.map((s) => (
+        <div
+          key={s.label}
+          className="h-full"
+          style={{ width: `${(Math.max(0, s.value) / total) * 100}%`, background: s.color }}
+          title={s.label}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const CHART_COLORS = {
+  primary: "var(--color-primary)",
+  secondary: "var(--color-warning)",
+  success: "var(--color-success)",
+  error: "var(--color-error)",
+} as const;

package/src/web/components/system/performance/device-list.ts

@@ -0,0 +1,139 @@
+/**
+ * The Performance page's device sidebar, as data - Mission Center's left column.
+ *
+ * Pure and React-free so the labelling and the summary figures are unit-tested
+ * without mounting anything. Imports are relative rather than through the "@"
+ * alias for the same reason: everything under `@/` risks reaching a zustand store,
+ * which reads localStorage at module scope and throws under bun:test.
+ */
+import type { HardwareInventory, NicInfo, NicKind } from "../../../../types/system-hardware";
+import type { SystemMetrics } from "../../../../types/system-metrics";
+import { formatBps } from "../../../lib/format-bytes";
+
+export type DeviceKind = "cpu" | "memory" | "disk" | "nic" | "gpu" | "fans";
+
+export interface DeviceEntry {
+  /** Stable across ticks: the selection key and the React key. */
+  key: string;
+  kind: DeviceKind;
+  /** Sidebar title: "CPU", "Disk 0", "Ethernet". */
+  label: string;
+  /** Second line: the model or interface name. Empty when there is nothing to add. */
+  sublabel: string;
+  /** The metrics id this entry is keyed by (disk/nic/gpu), else null. */
+  id: string | null;
+  /** Right-hand summary: "12%", "21.0/62.5 GB", "1.2 MB/s". */
+  detail: string;
+  /** 0-100 for the row's mini bar. Null when the device has no percentage to show,
+   *  which must render as no bar rather than as an empty one. */
+  percent: number | null;
+}
+
+/** Mission Center's interface names, in its own wording. */
+export const NIC_KIND_LABELS: Record<NicKind, string> = {
+  wired: "Ethernet",
+  wireless: "Wi-Fi",
+  bluetooth: "Bluetooth",
+  bridge: "Bridge",
+  docker: "Docker",
+  infiniband: "InfiniBand",
+  multipass: "Multipass",
+  virtual: "Virtual",
+  vpn: "VPN",
+  other: "Other",
+};
+
+const GB = 1024;
+const round = (n: number) => Math.round(n);
+
+export function nicLabel(info: NicInfo | undefined): string {
+  return NIC_KIND_LABELS[info?.kind ?? "other"];
+}
+
+/**
+ * A NIC's bar is its share of the negotiated link speed. Null when the link speed
+ * is unknown - a tunnel or a virtual interface has no ceiling to be a share of,
+ * and a bar drawn against a guessed one is worse than no bar.
+ */
+export function nicPercent(rxBps: number, txBps: number, linkMbps: number | undefined): number | null {
+  if (!linkMbps || linkMbps <= 0) return null;
+  const usedMbps = ((rxBps + txBps) * 8) / 1_000_000;
+  return Math.min(100, Math.max(0, (usedMbps / linkMbps) * 100));
+}
+
+export function memoryDetail(usedMB: number, totalMB: number): string {
+  return `${(usedMB / GB).toFixed(1)}/${(totalMB / GB).toFixed(1)} GB`;
+}
+
+/**
+ * Every device this host can show, in Mission Center's order: CPU, Memory, then
+ * the drives, the interfaces, the GPUs, and fans last.
+ *
+ * A device the tick did not report is absent rather than listed as zero - the
+ * per-device arrays are optional in the contract precisely because a host may not
+ * measure them at all.
+ */
+export function buildDeviceList(system: SystemMetrics, inventory: HardwareInventory | null): DeviceEntry[] {
+  const diskInfo = new Map((inventory?.disks ?? []).map((d) => [d.id, d]));
+  const nicInfo = new Map((inventory?.nics ?? []).map((n) => [n.id, n]));
+  const entries: DeviceEntry[] = [
+    {
+      key: "cpu", kind: "cpu", label: "CPU", sublabel: system.cpu.model, id: null,
+      detail: `${round(system.cpu.total)}%`, percent: system.cpu.total,
+    },
+    {
+      key: "memory", kind: "memory", label: "Memory",
+      sublabel: memoryDetail(system.mem.usedMB, system.mem.totalMB), id: null,
+      detail: `${round(system.mem.percent)}%`, percent: system.mem.percent,
+    },
+  ];
+
+  (system.disks ?? []).forEach((disk, index) => {
+    entries.push({
+      key: `disk:${disk.id}`, kind: "disk", label: `Disk ${index}`,
+      sublabel: diskInfo.get(disk.id)?.model ?? disk.id, id: disk.id,
+      // "Active time" is the figure Mission Center puts in the sidebar, not
+      // throughput: a drive at 100% busy moving very little still matters.
+      detail: disk.available ? `${round(disk.busyPercent)}%` : "—",
+      percent: disk.available ? disk.busyPercent : null,
+    });
+  });
+
+  (system.nics ?? []).forEach((nic) => {
+    const info = nicInfo.get(nic.id);
+    entries.push({
+      key: `nic:${nic.id}`, kind: "nic", label: nicLabel(info), sublabel: nic.id, id: nic.id,
+      detail: nic.available ? formatBps(nic.rxBps + nic.txBps) : "—",
+      percent: nic.available ? nicPercent(nic.rxBps, nic.txBps, nic.linkMbps) : null,
+    });
+  });
+
+  system.gpus.forEach((gpu, index) => {
+    entries.push({
+      key: `gpu:${gpu.id ?? index}`, kind: "gpu", label: `GPU ${index}`,
+      sublabel: gpu.name, id: gpu.id ?? null,
+      detail: `${round(gpu.utilPercent)}%`, percent: gpu.utilPercent,
+    });
+  });
+
+  const fans = system.fans ?? [];
+  if (fans.length > 0) {
+    const fastest = Math.max(...fans.map((f) => f.rpm));
+    entries.push({
+      key: "fans", kind: "fans", label: "Fans",
+      sublabel: `${fans.length} sensor${fans.length === 1 ? "" : "s"}`, id: null,
+      detail: `${fastest} RPM`, percent: null,
+    });
+  }
+
+  return entries;
+}
+
+/**
+ * The entry to show when the previous selection is gone - a USB drive unplugged,
+ * an interface removed. Falls back to the CPU, which every host has.
+ */
+export function resolveSelected(entries: readonly DeviceEntry[], wanted: string | null): string {
+  if (wanted && entries.some((e) => e.key === wanted)) return wanted;
+  return entries[0]?.key ?? "cpu";
+}

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

@@ -0,0 +1,64 @@
+/** One drive — Mission Center's per-disk page: active time, response time and the
+ *  two transfer rates, over the static facts udev already knows. */
+import { formatBps, formatBytes } from "@/lib/format-bytes";
+import { formatTemp } from "@/lib/temperature";
+import { useSettingsStore } from "@/stores/settings-store";
+import { CHART_COLORS, DetailChart, DetailHeader, Stat, StatGrid, useSeries } from "./detail-parts";
+import { PartitionList } from "./partition-list";
+import type { DiskInfo } from "../../../../types/system-hardware";
+import type { DiskMetrics, MetricsHistoryPoint } from "../../../../types/system-metrics";
+
+const KIND_LABELS: Record<string, string> = {
+  hdd: "Hard disk", ssd: "SSD", nvme: "NVMe", emmc: "eMMC",
+  sd: "SD card", optical: "Optical", thumb: "Removable", unknown: "Unknown",
+};
+
+export function DiskDetail({
+  disk, info, index, history,
+}: { disk: DiskMetrics; info?: DiskInfo; index: number; history: readonly MetricsHistoryPoint[] }) {
+  const tempUnit = useSettingsStore((s) => s.sysmonTempUnit);
+  const pick = (p: MetricsHistoryPoint) => p.system.disks?.find((d) => d.id === disk.id);
+  const busy = useSeries(history, (p) => pick(p)?.busyPercent);
+  const read = useSeries(history, (p) => pick(p)?.readBps);
+  const write = useSeries(history, (p) => pick(p)?.writeBps);
+
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-disk" data-disk-id={disk.id}>
+      <DetailHeader
+        title={`Disk ${index}`}
+        subtitle={info?.model ?? disk.id}
+        value={disk.available ? `${disk.busyPercent.toFixed(0)}%` : "—"}
+      />
+      <div className="space-y-1">
+        <p className="text-[11px] text-text-subtle">Active time</p>
+        <DetailChart maxValue={100} series={[{ data: busy, color: CHART_COLORS.primary }]} height={90} />
+      </div>
+      <div className="space-y-1">
+        <p className="text-[11px] text-text-subtle">Transfer rate</p>
+        <DetailChart
+          height={90}
+          legend={["Read", "Write"]}
+          series={[
+            { data: read, color: CHART_COLORS.success },
+            { data: write, color: CHART_COLORS.secondary },
+          ]}
+        />
+      </div>
+      <StatGrid>
+        <Stat label="Read speed" value={disk.available ? formatBps(disk.readBps) : undefined} />
+        <Stat label="Write speed" value={disk.available ? formatBps(disk.writeBps) : undefined} />
+        <Stat label="Avg. response time" value={disk.available ? `${disk.responseMs.toFixed(2)} ms` : undefined} />
+        <Stat label="Temperature" value={formatTemp(disk.tempC, tempUnit)} />
+        <Stat label="Total read" value={formatBytes(disk.readTotal)} />
+        <Stat label="Total written" value={formatBytes(disk.writeTotal)} />
+        <Stat label="Capacity" value={info === undefined ? undefined : formatBytes(info.capacityBytes)} />
+        <Stat label="Type" value={info === undefined ? undefined : KIND_LABELS[info.kind] ?? info.kind} />
+        <Stat label="System disk" value={info === undefined ? undefined : info.systemDisk ? "Yes" : "No"} />
+        <Stat label="Removable" value={info === undefined ? undefined : info.removable ? "Yes" : "No"} />
+        <Stat label="Rotation" value={info?.rotationRpm === undefined ? undefined : `${info.rotationRpm} RPM`} />
+        <Stat label="Serial" value={info?.serial} />
+      </StatGrid>
+      <PartitionList partitions={info?.partitions ?? []} />
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+/** Fans — Mission Center's Fan page. One row per tachometer, with the duty cycle
+ *  and the temperature the same chip reports beside it. */
+import { formatTemp } from "@/lib/temperature";
+import { useSettingsStore } from "@/stores/settings-store";
+import { DetailHeader, Stat, StatGrid } from "./detail-parts";
+import type { FanMetrics } from "../../../../types/system-metrics";
+
+export function FansDetail({ fans }: { fans: readonly FanMetrics[] }) {
+  const tempUnit = useSettingsStore((s) => s.sysmonTempUnit);
+  const fastest = fans.length > 0 ? Math.max(...fans.map((f) => f.rpm)) : 0;
+  return (
+    <div className="space-y-4" data-testid="sysmon-detail-fans" data-fan-count={fans.length}>
+      <DetailHeader
+        title="Fans"
+        subtitle={`${fans.length} sensor${fans.length === 1 ? "" : "s"}`}
+        value={`${fastest} RPM`}
+      />
+      <div className="rounded-md border border-border divide-y divide-border">
+        {fans.map((fan) => (
+          <div key={fan.id} className="px-3 py-2 space-y-2" data-testid="sysmon-fan-row">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="text-sm font-medium truncate" title={fan.id}>{fan.label}</span>
+              <span className="text-sm tabular-nums shrink-0">{fan.rpm} RPM</span>
+            </div>
+            <StatGrid>
+              <Stat label="Duty cycle" value={fan.pwmPercent === undefined ? undefined
+                : `${fan.pwmPercent.toFixed(0)}%`} />
+              <Stat label={fan.tempName ?? "Temperature"} value={formatTemp(fan.tempC, tempUnit)} />
+            </StatGrid>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}