@hienlh/ppm 0.18.7 → 0.18.9

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

@@ -0,0 +1,89 @@
+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 { ProcessInfo } from "../../../types/system-metrics";
+
+export interface KillConfirmDialogProps {
+  process: ProcessInfo | null;
+  onConfirm: (proc: ProcessInfo, tree: boolean) => void;
+  onCancel: () => void;
+}
+
+/** Confirm dialog for ending a process. 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({ process, onConfirm, onCancel }: KillConfirmDialogProps) {
+  const isMobile = useIsMobile();
+  const [tree, setTree] = useState(false);
+
+  useEffect(() => {
+    if (!process) setTree(false);
+  }, [process]);
+
+  if (!process) return null;
+
+  const body = (
+    <div className="space-y-4" data-testid="sysmon-kill-confirm">
+      <p className="text-sm">
+        End <span className="font-medium">{process.name}</span> (pid {process.pid})?
+      </p>
+      <p className="text-xs text-text-subtle">
+        CPU {process.cpu.toFixed(1)}% · RAM {formatRam(process.ramMB)}
+      </p>
+      <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(process, tree)}
+          data-testid="sysmon-kill-confirm-ok"
+          className="min-h-11"
+        >
+          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">End process</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>End process</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,108 @@
+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. `SparklineCanvas` stays the small inline variant
+ *  used by process rows. */
+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>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { formatRam } from "@/lib/format-bytes";
+import { MetricChartCanvas } from "../metric-chart-canvas";
+
+export interface MemCardProps {
+  usedMB: number;
+  totalMB: number;
+  percent: number;
+  series: number[];
+}
+
+export function MemCard({ usedMB, totalMB, percent, series }: MemCardProps) {
+  return (
+    <div
+      className="rounded-lg border border-border p-4 space-y-2"
+      data-testid="sysmon-card-mem"
+      data-mem-percent={percent}
+    >
+      <div className="flex items-baseline justify-between">
+        <h3 className="text-sm font-medium">Memory</h3>
+        <span className="text-2xl font-semibold">{percent.toFixed(1)}%</span>
+      </div>
+      <MetricChartCanvas
+        series={[{ data: series, color: "var(--color-primary)" }]}
+        height={56}
+        maxValue={100}
+      />
+      <p className="text-[11px] text-text-subtle">
+        {formatRam(usedMB)} / {formatRam(totalMB)}
+      </p>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import type { MetricsHistoryPoint, SystemMetrics } from "../../../types/system-metrics";
+import { CpuCard } from "./overview-cards/cpu-card";
+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";
+
+export interface OverviewPanelProps {
+  system: SystemMetrics;
+  history: MetricsHistoryPoint[];
+}
+
+const SERIES_POINTS = 200;
+
+/** One pass over the recent history window building every card's series together,
+ *  rather than one `.slice(-200).map(...)` per card. */
+function useOverviewSeries(history: MetricsHistoryPoint[]) {
+  return useMemo(() => {
+    const recent = history.slice(-SERIES_POINTS);
+    const cpu: number[] = [];
+    const mem: number[] = [];
+    const diskRead: number[] = [];
+    const diskWrite: number[] = [];
+    const netDown: number[] = [];
+    const netUp: number[] = [];
+    const gpuUtil: number[][] = [];
+
+    for (const point of recent) {
+      cpu.push(point.system.cpu.total);
+      mem.push(point.system.mem.percent);
+      diskRead.push(point.system.disk.available ? point.system.disk.inBps : 0);
+      diskWrite.push(point.system.disk.available ? point.system.disk.outBps : 0);
+      netDown.push(point.system.net.available ? point.system.net.inBps : 0);
+      netUp.push(point.system.net.available ? point.system.net.outBps : 0);
+      point.system.gpus.forEach((g, i) => {
+        (gpuUtil[i] ??= []).push(g.utilPercent);
+      });
+    }
+
+    return { cpu, mem, diskRead, diskWrite, netDown, netUp, gpuUtil };
+  }, [history]);
+}
+
+export function OverviewPanel({ system, history }: 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;
+
+  return (
+    <div
+      className="p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
+      data-testid="sysmon-overview"
+    >
+      <CpuCard
+        total={system.cpu.total}
+        cores={system.cpu.cores}
+        model={system.cpu.model}
+        series={series.cpu}
+      />
+      <MemCard
+        usedMB={system.mem.usedMB}
+        totalMB={system.mem.totalMB}
+        percent={system.mem.percent}
+        series={series.mem}
+      />
+      <DiskCard
+        available={system.disk.available}
+        inBps={system.disk.inBps}
+        outBps={system.disk.outBps}
+        readSeries={series.diskRead}
+        writeSeries={series.diskWrite}
+        measuring={measuring}
+      />
+      <NetCard
+        available={system.net.available}
+        inBps={system.net.inBps}
+        outBps={system.net.outBps}
+        downSeries={series.netDown}
+        upSeries={series.netUp}
+        measuring={measuring}
+      />
+      {system.gpus.map((gpu, i) => (
+        <GpuCard
+          key={`${gpu.name}-${i}`}
+          name={gpu.name}
+          utilPercent={gpu.utilPercent}
+          vramUsedMB={gpu.vramUsedMB}
+          vramTotalMB={gpu.vramTotalMB}
+          series={series.gpuUtil[i] ?? []}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+/** Pure grid-template builder for the process table. No React, so the visibility
+ *  rules (which optional columns exist, which one survives below `@lg`) are
+ *  unit-testable without mounting a component.
+ *
+ *  Two responsive templates are computed up front and switched via CSS custom
+ *  properties + a `@lg:` Tailwind class (see `PROCESS_ROW_GRID_CLASS` below) —
+ *  Tailwind's arbitrary-value scan only needs the class NAME to be a static
+ *  string; the var() value itself can vary at runtime. This mirrors the fixed
+ *  two-template approach the process table already used for the trend/age
+ *  track, just parameterised by which optional columns the host can measure. */
+import type { CSSProperties } from "react";
+import type { ProcessColumnAvailability, SortKey } from "../../../types/system-metrics";
+
+export type OptionalColumnKey = "disk" | "gpu" | "net";
+
+/** Alias kept local so call sites don't need to know the exact server-contract
+ *  type name — this module only cares about the three boolean flags. */
+export type ProcessColumnsFlags = ProcessColumnAvailability;
+
+const OPTIONAL_COLUMN_ORDER: OptionalColumnKey[] = ["disk", "gpu", "net"];
+
+/** Disk/Net cells show two values ("↓ read ↑ write"); GPU shows one composite
+ *  ("12% · 1.1 GB") and fits narrower. */
+const OPTIONAL_COLUMN_WIDTH: Record<OptionalColumnKey, string> = {
+  disk: "120px",
+  gpu: "90px",
+  net: "120px",
+};
+
+/** Fixed tracks that exist regardless of optional columns: Process name (flexible),
+ *  CPU, RAM at the start; the trend/age track (wide only) and the kill button at
+ *  the end. */
+const NAME_CPU_RAM = ["minmax(0,1fr)", "64px", "80px"];
+const TREND_TRACK = "130px";
+const KILL_TRACK = "44px";
+
+export interface ProcessGridResult {
+  /** Grid template for `@lg` and up: Name/CPU/RAM + every enabled optional column
+   *  in a fixed order + the trend/age track + kill button. */
+  wideTemplate: string;
+  /** Grid template below `@lg`: Name/CPU/RAM + AT MOST the one optional column
+   *  currently sorted by (if enabled) + kill button. No trend/age track. */
+  narrowTemplate: string;
+  /** Which optional columns are enabled at all (host can measure them). */
+  columns: ProcessColumnsFlags;
+  /** The single optional column visible below `@lg`, or null when the current
+   *  sort isn't on an optional column (or that column isn't enabled). */
+  narrowExtra: OptionalColumnKey | null;
+}
+
+function isOptionalColumnKey(key: SortKey): key is OptionalColumnKey {
+  return key === "disk" || key === "gpu" || key === "net";
+}
+
+export function buildProcessGrid(columns: ProcessColumnsFlags, sortKey: SortKey): ProcessGridResult {
+  const enabled = OPTIONAL_COLUMN_ORDER.filter((k) => columns[k]);
+  const narrowExtra = isOptionalColumnKey(sortKey) && columns[sortKey] ? sortKey : null;
+
+  const wideTemplate = [
+    ...NAME_CPU_RAM,
+    ...enabled.map((k) => OPTIONAL_COLUMN_WIDTH[k]),
+    TREND_TRACK,
+    KILL_TRACK,
+  ].join(" ");
+
+  const narrowTemplate = [
+    ...NAME_CPU_RAM,
+    ...(narrowExtra ? [OPTIONAL_COLUMN_WIDTH[narrowExtra]] : []),
+    KILL_TRACK,
+  ].join(" ");
+
+  return { wideTemplate, narrowTemplate, columns, narrowExtra };
+}
+
+/** Static class names (Tailwind can see both arbitrary-value strings at build
+ *  time); the actual template text is supplied per-render via the two CSS
+ *  custom properties in `gridCssVars`. */
+export const PROCESS_ROW_GRID_CLASS = "grid-cols-[var(--sysmon-grid-n)] @lg:grid-cols-[var(--sysmon-grid-w)]";
+
+export function gridCssVars(grid: ProcessGridResult): CSSProperties {
+  return {
+    "--sysmon-grid-n": grid.narrowTemplate,
+    "--sysmon-grid-w": grid.wideTemplate,
+  } as CSSProperties;
+}
+
+/** Visibility className for an optional column's cell: always visible when it is
+ *  the narrow-mode survivor, otherwise hidden below `@lg` and shown at `@lg`+.
+ *  Caller must only render the cell at all when `columns[key]` is true — when
+ *  disabled, the column has no track in either template. */
+export function optionalCellClassName(grid: ProcessGridResult, key: OptionalColumnKey): string {
+  return grid.narrowExtra === key ? "block" : "hidden @lg:block";
+}

package/src/web/components/system/process-group-row.tsx

@@ -0,0 +1,71 @@
+import { ChevronRight, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatRam } from "@/lib/format-bytes";
+import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell, sumOptionalBps } from "./process-row-format";
+import { optionalCellClassName, type ProcessGridResult } from "./process-columns-grid";
+import { SparklineCanvas } from "./sparkline-canvas";
+import type { ProcessGroup } from "../../../types/system-metrics";
+
+export interface ProcessGroupRowProps {
+  group: ProcessGroup;
+  expanded: boolean;
+  spark: number[];
+  grid: ProcessGridResult;
+  onToggle: (key: string) => void;
+}
+
+export function ProcessGroupRow({ group, expanded, spark, grid, onToggle }: ProcessGroupRowProps) {
+  const Chevron = expanded ? ChevronDown : ChevronRight;
+
+  return (
+    <div
+      className="grid items-center gap-1 min-h-11 md:min-h-7 px-3 text-xs cursor-pointer hover:bg-surface-hover transition-colors grid-cols-[var(--sysmon-grid-n)] @lg:grid-cols-[var(--sysmon-grid-w)]"
+      onClick={() => onToggle(group.key)}
+      data-testid="sysmon-group-row"
+      data-group-key={group.key}
+      data-count={group.count}
+      data-disk-bps={sumOptionalBps(group.diskReadBps, group.diskWriteBps)}
+      data-gpu-pct={group.gpuPct}
+      data-net-bps={sumOptionalBps(group.netInBps, group.netOutBps)}
+    >
+      <div className="flex items-center gap-1.5 min-w-0">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggle(group.key);
+          }}
+          aria-expanded={expanded}
+          aria-label={`${expanded ? "Collapse" : "Expand"} ${group.label}`}
+          data-testid="sysmon-group-expand"
+          className="flex items-center justify-center size-11 md:size-7 -ml-2 shrink-0"
+        >
+          <Chevron className="size-3.5 text-text-subtle" />
+        </button>
+        <span className="truncate font-medium">{group.label}</span>
+        <span className="text-text-subtle shrink-0">({group.count})</span>
+      </div>
+      <span className={cn("text-right", cpuColor(group.cpu))}>{group.cpu.toFixed(1)}%</span>
+      <span className="text-right text-text-secondary">{formatRam(group.ramMB)}</span>
+      {grid.columns.disk && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "disk"))}>
+          {formatDiskCell(group.diskReadBps, group.diskWriteBps)}
+        </span>
+      )}
+      {grid.columns.gpu && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "gpu"))}>
+          {formatGpuCell(group.gpuPct, group.gpuMemMB)}
+        </span>
+      )}
+      {grid.columns.net && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "net"))}>
+          {formatNetCell(group.netInBps, group.netOutBps)}
+        </span>
+      )}
+      <div className="hidden @lg:flex items-center justify-end">
+        {spark.length > 1 && <SparklineCanvas data={spark} width={120} height={20} maxValue={100} />}
+      </div>
+      <div className="hidden @lg:block" />
+    </div>
+  );
+}