@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/system/services/service-details-sheet.tsx

@@ -0,0 +1,97 @@
+/** One unit's details and this boot's journal. Bottom sheet below `md`, dialog
+ *  above — the rule every PPM dialog follows. */
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { fetchServiceDetails } from "./use-services";
+import { serviceStatusText } from "./service-rows";
+import type { ServiceDetails, ServiceInfo } from "../../../../types/system-services";
+
+export interface ServiceDetailsSheetProps {
+  target: ServiceInfo | null;
+  onClose: () => void;
+}
+
+export function ServiceDetailsSheet({ target, onClose }: ServiceDetailsSheetProps) {
+  const isMobile = useIsMobile();
+  const [details, setDetails] = useState<ServiceDetails | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!target) {
+      setDetails(null);
+      setError(null);
+      return;
+    }
+    let live = true;
+    setDetails(null);
+    setError(null);
+    fetchServiceDetails(target.scope, target.unit)
+      .then((d) => { if (live) setDetails(d); })
+      .catch((e: unknown) => { if (live) setError(e instanceof Error ? e.message : "Could not read the unit"); });
+    return () => { live = false; };
+  }, [target]);
+
+  if (!target) return null;
+
+  const body = (
+    <div className="space-y-3" data-testid="sysmon-service-details" data-unit={target.unit}>
+      <p className="text-xs text-text-subtle">{details?.description || target.description || serviceStatusText(target)}</p>
+      <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+        <Field label="State" value={serviceStatusText(details ?? target)} />
+        <Field label="Main PID" value={(details ?? target).mainPid ?? "—"} />
+        <Field label="User" value={details?.user ?? "—"} />
+        <Field label="Group" value={details?.group ?? "—"} />
+        <Field label="Scope" value={target.scope} />
+        <Field label="Unit file" value={details?.fragmentPath ?? "—"} />
+      </dl>
+      <div className="space-y-1">
+        <h4 className="text-xs font-medium text-text-secondary">Log (this boot)</h4>
+        <div className="rounded-md border border-border bg-surface-hover/40 max-h-64 overflow-y-auto p-2">
+          {error && <p className="text-xs text-error">{error}</p>}
+          {!error && details === null && <p className="text-xs text-text-subtle">Reading the journal…</p>}
+          {details?.logs.length === 0 && <p className="text-xs text-text-subtle">No entries this boot.</p>}
+          {details?.logs.map((line, i) => (
+            <p key={`${line.ts}-${i}`} className="text-[11px] font-mono whitespace-pre-wrap break-words">
+              <span className="text-text-subtle">{new Date(line.ts).toLocaleTimeString()} </span>
+              {line.message}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onClose}>
+        <div className="px-4 pb-4 space-y-3">
+          <h2 className="text-base font-semibold break-all">{target.unit}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      {/* `sm:` because the primitive caps at `sm:max-w-lg`: a bare `max-w-2xl`
+          loses to it at every width where it would have mattered. */}
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="break-all">{target.unit}</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Field({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-text-subtle">{label}</dt>
+      <dd className="truncate" title={String(value)}>{value}</dd>
+    </div>
+  );
+}

package/src/web/components/system/services/service-resources.ts

@@ -0,0 +1,105 @@
+/**
+ * Live figures per unit for the Services page — Mission Center's PID, CPU,
+ * Memory, Swap, Drive, GPU and GPU Memory columns.
+ *
+ * The roll-up is done HERE, from the metrics stream's process rows, rather than
+ * server-side in the Services route. The route is two `systemctl` spawns on a 3 s
+ * poll with no counter state of its own, so computing CPU% there would mean a
+ * second set of deltas over a second interval — and the same process would then
+ * report two different CPU figures on two pages of the same window. Every figure
+ * below is the one the Processes tab is already showing, summed.
+ *
+ * Pure and React-free; relative imports only.
+ */
+import type { ProcessInfo } from "../../../../types/system-metrics";
+import type { ServiceInfo } from "../../../../types/system-services";
+
+export interface UnitResources {
+  /** Processes in the unit's cgroup, which is not the same as its `MainPID`:
+   *  a unit with forked workers has one main pid and many processes. */
+  count: number;
+  cpu: number;
+  ramMB: number;
+  /** Optional exactly as on `ProcessInfo`: the sum over members that HAVE a
+   *  value, `undefined` when none does — so an unmeasurable column stays an em
+   *  dash instead of collapsing to a confident 0. */
+  swapMB?: number;
+  diskReadBps?: number;
+  diskWriteBps?: number;
+  gpuPct?: number;
+  gpuMemMB?: number;
+}
+
+function addOptional(sum: number | undefined, value: number | undefined): number | undefined {
+  if (value === undefined) return sum;
+  return (sum ?? 0) + value;
+}
+
+/** `"<scope>:<unit>"` → summed figures. Rows with no `unitKey` — kernel threads,
+ *  anything outside a unit — are simply not in any bucket. */
+export function rollUpByUnit(processes: readonly ProcessInfo[]): Map<string, UnitResources> {
+  const byUnit = new Map<string, UnitResources>();
+  for (const p of processes) {
+    if (!p.unitKey) continue;
+    const row = byUnit.get(p.unitKey) ?? { count: 0, cpu: 0, ramMB: 0 };
+    row.count += 1;
+    row.cpu += p.cpu;
+    row.ramMB += p.ramMB;
+    row.swapMB = addOptional(row.swapMB, p.swapMB);
+    row.diskReadBps = addOptional(row.diskReadBps, p.diskReadBps);
+    row.diskWriteBps = addOptional(row.diskWriteBps, p.diskWriteBps);
+    row.gpuPct = addOptional(row.gpuPct, p.gpuPct);
+    row.gpuMemMB = addOptional(row.gpuMemMB, p.gpuMemMB);
+    byUnit.set(p.unitKey, row);
+  }
+  // A GPU engine can only be busy for the interval that passed, however many of
+  // a unit's processes were queueing work on it.
+  for (const row of byUnit.values()) {
+    row.cpu = Math.round(row.cpu * 10) / 10;
+    row.ramMB = Math.round(row.ramMB * 10) / 10;
+    if (row.gpuPct !== undefined) row.gpuPct = Math.min(100, Math.round(row.gpuPct * 10) / 10);
+  }
+  return byUnit;
+}
+
+export function unitKeyOf(service: ServiceInfo): string {
+  return `${service.scope}:${service.unit}`;
+}
+
+/** What a unit with no processes gets: zeros, not dashes. Owning nothing really
+ *  is using nothing, which is a reading — the em dash is reserved for a figure
+ *  this host cannot measure at all. */
+export const IDLE_UNIT: UnitResources = Object.freeze({
+  count: 0, cpu: 0, ramMB: 0, swapMB: 0, diskReadBps: 0, diskWriteBps: 0, gpuPct: 0, gpuMemMB: 0,
+});
+
+/** Unit types that can hold processes at all. Everything else on this page —
+ *  `.socket`, `.mount` — owns nothing by construction: a socket's processes live
+ *  in the *service* it activates, and the socket itself has no `MainPID` and
+ *  `TasksCurrent=0` even while systemd calls it `running`. */
+const PROCESS_OWNING_SUFFIXES = [".service", ".scope"] as const;
+
+/**
+ * `ActiveState` cannot decide whether a unit ought to have processes, and using
+ * it puts an em dash on 97 of this host's 222 rows: systemd reports a mount as
+ * `active (mounted)`, a socket as `active (listening)` and a finished oneshot as
+ * `active (exited)`, and every one of those owns nothing by construction. Those
+ * are real zeros.
+ *
+ * `SubState` is most of the discriminator — only `running` asserts there are live
+ * processes — but not all of it, because a LISTENING socket is also reported as
+ * `running`: `systemctl show -p SubState docker.socket` answers `running` beside
+ * an empty `MainPID` and `TasksCurrent=0`. That accounted for 14 of the 15 rows
+ * still dashed after the `SubState` fix, so the unit's own type has to agree.
+ */
+export function resourcesFor(
+  service: ServiceInfo,
+  byUnit: ReadonlyMap<string, UnitResources> | null,
+): UnitResources | undefined {
+  if (!byUnit) return undefined;
+  const found = byUnit.get(unitKeyOf(service));
+  if (found) return found;
+  const couldHaveProcesses = service.subState === "running"
+    && PROCESS_OWNING_SUFFIXES.some((suffix) => service.unit.endsWith(suffix));
+  return couldHaveProcesses ? undefined : IDLE_UNIT;
+}

package/src/web/components/system/services/service-row.tsx

@@ -0,0 +1,146 @@
+/**
+ * One unit in the Services list.
+ *
+ * The row's tap opens the details; the actions live in an adaptive context menu
+ * (right-click on a mouse, long-press on a touch screen). The tap target is a
+ * real button INSIDE the trigger, because the adaptive menu only suppresses the
+ * click that follows a long press — it has no tap handler of its own.
+ *
+ * The row is a CSS grid on the same template as the header above it, so a cell
+ * and its column name line up. Every figure it shows is `undefined` when this
+ * host or this tick could not measure it, and renders as an em dash: a unit that
+ * owns no processes is a real zero, a unit whose processes have not been sampled
+ * yet is not.
+ */
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { cn } from "@/lib/utils";
+import { formatDiskCell } from "../process-row-format";
+import { formatRam } from "@/lib/format-bytes";
+import { serviceStatusText, serviceTone, type ServiceTone } from "./service-rows";
+import { SERVICE_COLUMNS, SERVICE_ROW_GRID_CLASS, columnVisibilityClass } from "./service-columns";
+import type { UnitResources } from "./service-resources";
+import type { ServiceColumnKey } from "./service-columns";
+import type { ServiceAction, ServiceInfo } from "../../../../types/system-services";
+import { SERVICE_ACTIONS } from "../../../../types/system-services";
+
+const TONE_CLASS: Record<ServiceTone, string> = {
+  failed: "bg-error",
+  running: "bg-success",
+  busy: "bg-warning animate-pulse",
+  idle: "bg-text-subtle/40",
+};
+
+const ACTION_LABELS: Record<ServiceAction, string> = {
+  start: "Start",
+  stop: "Stop",
+  restart: "Restart",
+  enable: "Enable at boot",
+  disable: "Disable at boot",
+};
+
+/** Stopping something is destructive in the menu's sense; starting it is not. */
+const DESTRUCTIVE: readonly ServiceAction[] = ["stop", "disable"];
+
+/** Visibility per column key, taken from the same table the grid template is
+ *  built from so a cell cannot be shown at a width that has no track for it. */
+const CELL_CLASS: Record<ServiceColumnKey, string> = Object.fromEntries(
+  SERVICE_COLUMNS.map((c) => [c.key, columnVisibilityClass(c)]),
+) as Record<ServiceColumnKey, string>;
+
+/** `undefined` is "not measured", never 0 — the rule every cell on this page
+ *  follows, and the reason these are not `?? 0`. */
+const ramCell = (mb?: number) => (mb === undefined ? "—" : formatRam(mb));
+const pctCell = (pct: number | undefined, digits: number) =>
+  pct === undefined ? "—" : `${pct.toFixed(digits)}%`;
+
+function Cell({ column, children }: { column: ServiceColumnKey; children: React.ReactNode }) {
+  return (
+    <span className={cn("text-right text-[11px] tabular-nums text-text-subtle truncate", CELL_CLASS[column])}>
+      {children}
+    </span>
+  );
+}
+
+export interface ServiceRowProps {
+  service: ServiceInfo;
+  /** Live roll-up over the unit's cgroup. Undefined = not measured this tick,
+   *  which renders as em dashes rather than as an idle unit. */
+  resources?: UnitResources;
+  onOpen: (service: ServiceInfo) => void;
+  onAction: (service: ServiceInfo, action: ServiceAction) => void;
+}
+
+export function ServiceRow({ service, resources, onOpen, onAction }: ServiceRowProps) {
+  const tone = serviceTone(service);
+  const allowed = SERVICE_ACTIONS.filter((a) => service.refused?.[a] === undefined);
+  // Every reason is the same sentence when a unit is refused wholesale, so the
+  // footer shows it once rather than repeating it per hidden item.
+  const reason = SERVICE_ACTIONS.map((a) => service.refused?.[a]).find(Boolean);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="select-none">
+          <button
+            type="button"
+            onClick={() => onOpen(service)}
+            data-testid="sysmon-service-row"
+            data-unit={service.unit}
+            data-tone={tone}
+            data-cpu={resources?.cpu}
+            data-ram-mb={resources?.ramMB}
+            className={cn(
+              "w-full min-h-11 px-3 py-2 items-center text-left hover:bg-surface-hover transition-colors",
+              SERVICE_ROW_GRID_CLASS,
+            )}
+          >
+            <span className="flex items-center gap-2 min-w-0">
+              <span className={cn("size-2 rounded-full shrink-0", TONE_CLASS[tone])} aria-hidden />
+              <span className="flex-1 min-w-0">
+                <span className="flex items-center gap-1.5 min-w-0">
+                  <span className="text-sm truncate">{service.unit}</span>
+                  {/* Beside the name rather than in a column of its own: it is a
+                      property of the unit file, not a measurement, and a ninth
+                      track would cost the name column 60px on every row. */}
+                  {service.enabled && (
+                    <span className="shrink-0 text-[10px] px-1 py-px rounded bg-surface-hover text-text-subtle">
+                      enabled
+                    </span>
+                  )}
+                </span>
+                <span className="block text-[11px] text-text-subtle truncate">
+                  {service.description || serviceStatusText(service)}
+                </span>
+              </span>
+            </span>
+            <Cell column="pid">{service.mainPid ?? "—"}</Cell>
+            <Cell column="cpu">{pctCell(resources?.cpu, 1)}</Cell>
+            <Cell column="ram">{ramCell(resources?.ramMB)}</Cell>
+            <Cell column="swap">{ramCell(resources?.swapMB)}</Cell>
+            <Cell column="disk">{formatDiskCell(resources?.diskReadBps, resources?.diskWriteBps)}</Cell>
+            <Cell column="gpu">{pctCell(resources?.gpuPct, 0)}</Cell>
+            <Cell column="gpuMem">{ramCell(resources?.gpuMemMB)}</Cell>
+          </button>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {allowed.map((action) => (
+          <ContextMenuItem
+            key={action}
+            variant={DESTRUCTIVE.includes(action) ? "destructive" : undefined}
+            onSelect={() => onAction(service, action)}
+          >
+            {ACTION_LABELS[action]}
+          </ContextMenuItem>
+        ))}
+        {allowed.length > 0 && <ContextMenuSeparator />}
+        <ContextMenuItem onSelect={() => onOpen(service)}>Details and log</ContextMenuItem>
+        {reason && (
+          <p className="px-2 py-1.5 text-[11px] text-text-subtle max-w-64">{reason}</p>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/web/components/system/services/service-rows.ts

@@ -0,0 +1,92 @@
+/**
+ * The Services page's list shaping - search, filter, ordering and the header
+ * counts. Pure and React-free; relative imports only.
+ *
+ * Mission Center shows one flat list per scope with a search box. PPM keeps the
+ * two scopes as sections because a user unit and a system unit of the same name
+ * are different units with very different consequences, and a flat list gives no
+ * way to tell them apart.
+ */
+import type { ServiceInfo, ServiceScope } from "../../../../types/system-services";
+
+export type ServiceFilter = "all" | "running" | "failed" | "enabled";
+
+export const SERVICE_FILTERS: readonly ServiceFilter[] = ["all", "running", "failed", "enabled"];
+
+export function matchesFilter(service: ServiceInfo, filter: ServiceFilter): boolean {
+  switch (filter) {
+    case "running": return service.running;
+    case "failed": return service.failed;
+    case "enabled": return service.enabled;
+    default: return true;
+  }
+}
+
+/** Matches the unit name and the description, which is where a user looks for
+ *  "bluetooth" when the unit is called `bluez`. */
+export function matchesQuery(service: ServiceInfo, query: string): boolean {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return true;
+  return service.unit.toLowerCase().includes(needle)
+    || service.description.toLowerCase().includes(needle);
+}
+
+/**
+ * Failed first, then running, then everything else, alphabetically within each
+ * band. The point of the page is usually a unit that is not doing what it should,
+ * so it must not be hundreds of rows down.
+ */
+export function compareServices(a: ServiceInfo, b: ServiceInfo): number {
+  const band = (s: ServiceInfo) => (s.failed ? 0 : s.running ? 1 : 2);
+  const diff = band(a) - band(b);
+  return diff !== 0 ? diff : a.unit.localeCompare(b.unit);
+}
+
+export function shapeServices(
+  services: readonly ServiceInfo[],
+  scope: ServiceScope,
+  filter: ServiceFilter,
+  query: string,
+): ServiceInfo[] {
+  return services
+    .filter((s) => s.scope === scope && matchesFilter(s, filter) && matchesQuery(s, query))
+    .sort(compareServices);
+}
+
+export interface ServiceCounts {
+  total: number;
+  running: number;
+  failed: number;
+}
+
+export function serviceCounts(services: readonly ServiceInfo[], scope?: ServiceScope): ServiceCounts {
+  const scoped = scope ? services.filter((s) => s.scope === scope) : services;
+  return {
+    total: scoped.length,
+    running: scoped.filter((s) => s.running).length,
+    failed: scoped.filter((s) => s.failed).length,
+  };
+}
+
+/** The dot beside a row. `activating` and `reloading` are deliberately neither
+ *  running nor failed, so they get their own colour rather than borrowing one. */
+export type ServiceTone = "failed" | "running" | "busy" | "idle";
+
+export function serviceTone(service: ServiceInfo): ServiceTone {
+  if (service.failed) return "failed";
+  if (service.running) return "running";
+  if (service.activeState === "activating" || service.activeState === "deactivating"
+    || service.activeState === "reloading") return "busy";
+  return "idle";
+}
+
+/** What the row says under the unit name when there is no description. */
+export function serviceStatusText(service: ServiceInfo): string {
+  const state = `${service.activeState} (${service.subState})`;
+  return service.unitFileState ? `${state} · ${service.unitFileState}` : state;
+}
+
+/** True when every action is refused, so the row's menu is offered at all. */
+export function hasAnyAction(service: ServiceInfo, actions: readonly string[]): boolean {
+  return actions.some((a) => service.refused?.[a as keyof typeof service.refused] === undefined);
+}

package/src/web/components/system/services/service-sort.ts

@@ -0,0 +1,90 @@
+/**
+ * Ordering for the Services table.
+ *
+ * Separate from `process-table-sort.ts` rather than sharing it, for two reasons
+ * that are both about this page's data and not about tidiness. A service row's
+ * figures are `UnitResources | undefined` — the WHOLE row can be unmeasured,
+ * where a process row always has a CPU and a memory number — and `SortableFields`
+ * types those two as required, so sharing it would mean passing 0 for "not
+ * measured" and losing exactly the distinction the sort has to respect. And the
+ * Services table sorts on `pid`, which is a systemd property rather than a
+ * metric and is not in `SortKey` at all.
+ *
+ * The rule it does share, deliberately: **an unmeasured value sorts last in
+ * either direction**. It is not a small value, it is the absence of one, and a
+ * column of em dashes at the top of an ascending sort would read as "these units
+ * use the least".
+ *
+ * Pure, React-free, relative imports only.
+ */
+import { compareServices } from "./service-rows";
+import type { UnitResources } from "./service-resources";
+import type { ServiceColumnKey } from "./service-columns";
+import type { ServiceInfo } from "../../../../types/system-services";
+import type { SortDir } from "../../../../types/system-metrics";
+
+export type ServiceSortKey = ServiceColumnKey;
+
+/** A unit paired with the roll-up over its cgroup for this tick. */
+export interface ServiceListRow {
+  service: ServiceInfo;
+  resources?: UnitResources;
+}
+
+/** `undefined` only when NEITHER half is measured — the same rule the Drive cell
+ *  formats by, so the column sorts on the number it is showing. */
+function sumPair(a?: number, b?: number): number | undefined {
+  if (a === undefined && b === undefined) return undefined;
+  return (a ?? 0) + (b ?? 0);
+}
+
+/** The comparable number behind a column, or `undefined` for "not measured".
+ *  `name` is not here because it compares as text. */
+export function sortValueOf(row: ServiceListRow, key: Exclude<ServiceSortKey, "name">): number | undefined {
+  const r = row.resources;
+  switch (key) {
+    // A unit with no main process is not a unit with pid 0.
+    case "pid": return row.service.mainPid ?? undefined;
+    case "cpu": return r?.cpu;
+    case "ram": return r?.ramMB;
+    case "swap": return r?.swapMB;
+    case "disk": return sumPair(r?.diskReadBps, r?.diskWriteBps);
+    case "gpu": return r?.gpuPct;
+    case "gpuMem": return r?.gpuMemMB;
+  }
+}
+
+/**
+ * `key === null` is the page's own default — failed first, then running, then
+ * alphabetically — which is what the third click of a column header returns to.
+ * That default is the reason the page is usually opened at all, so it has to
+ * remain reachable rather than being replaced by whichever column was last used.
+ *
+ * Ties break on the unit name in every branch. Without it the list is re-sorted
+ * from a fresh array on each 2 s tick, and the hundred-odd units that all read
+ * 0% would swap places on every one of them.
+ */
+export function sortServiceRows(
+  rows: readonly ServiceListRow[],
+  key: ServiceSortKey | null,
+  dir: SortDir,
+): ServiceListRow[] {
+  if (key === null) return [...rows].sort((a, b) => compareServices(a.service, b.service));
+
+  if (key === "name") {
+    return [...rows].sort((a, b) => {
+      const cmp = a.service.unit.localeCompare(b.service.unit);
+      return dir === "asc" ? cmp : -cmp;
+    });
+  }
+
+  return [...rows].sort((a, b) => {
+    const av = sortValueOf(a, key);
+    const bv = sortValueOf(b, key);
+    if (av === undefined && bv === undefined) return a.service.unit.localeCompare(b.service.unit);
+    if (av === undefined) return 1;
+    if (bv === undefined) return -1;
+    if (av === bv) return a.service.unit.localeCompare(b.service.unit);
+    return dir === "asc" ? av - bv : bv - av;
+  });
+}

package/src/web/components/system/services/services-header.tsx

@@ -0,0 +1,51 @@
+/**
+ * The Services table's header row: the column names, and the click that sorts by
+ * them.
+ *
+ * It is `sticky` rather than a fixed band above the scroller because the list is
+ * one scroll container shared with the rows — a header that scrolls away on a
+ * 222-unit list stops answering the only question it exists to answer, which is
+ * what the fourth number along is.
+ */
+import { cn } from "@/lib/utils";
+import { SortableHeader } from "../sortable-header";
+import {
+  SERVICE_COLUMNS, SERVICE_ROW_GRID_CLASS, columnVisibilityClass,
+} from "./service-columns";
+import type { ServiceSortKey } from "./service-sort";
+import type { SortDir } from "../../../../types/system-metrics";
+
+export interface ServicesHeaderProps {
+  sortKey: ServiceSortKey | null;
+  sortDir: SortDir;
+  onSort: (key: ServiceSortKey) => void;
+}
+
+export function ServicesHeader({ sortKey, sortDir, onSort }: ServicesHeaderProps) {
+  return (
+    <div
+      role="row"
+      data-testid="sysmon-services-header"
+      className={cn(
+        "sticky top-0 z-10 px-3 bg-background border-b border-border text-[11px] text-text-subtle",
+        SERVICE_ROW_GRID_CLASS,
+      )}
+    >
+      {SERVICE_COLUMNS.map((column) => (
+        <SortableHeader
+          key={column.key}
+          label={column.label}
+          field={column.key}
+          activeKey={sortKey}
+          activeDir={sortDir}
+          onClick={onSort}
+          align={column.align}
+          testId={`sysmon-services-sort-${column.key}`}
+          // `px-0` beats the header's own `px-2`: the cells below have none, and
+          // 8px of padding on one of the two is how a column stops lining up.
+          className={cn("px-0", columnVisibilityClass(column))}
+        />
+      ))}
+    </div>
+  );
+}