@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/system/process-details-dialog.tsx

@@ -0,0 +1,116 @@
+/**
+ * One process's properties — Mission Center's Details dialog.
+ *
+ * Fetched when the dialog opens rather than ridden on the tick: it is a handful
+ * of `/proc` reads per process and nobody needs a working directory at 0.5 Hz.
+ * A field this user cannot read (another user's `exe`, `cwd`) comes back null,
+ * which is the normal case on a shared machine and renders as an em dash.
+ */
+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 { api } from "@/lib/api-client";
+import type { ProcessDetails } from "../../../types/system-metrics";
+
+export interface ProcessDetailsDialogProps {
+  pid: number | null;
+  name: string;
+  onClose: () => void;
+}
+
+function started(ms: number): string {
+  return ms > 0 ? new Date(ms).toLocaleString() : "—";
+}
+
+export function ProcessDetailsDialog({ pid, name, onClose }: ProcessDetailsDialogProps) {
+  const isMobile = useIsMobile();
+  const [details, setDetails] = useState<ProcessDetails | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (pid === null) {
+      setDetails(null);
+      setError(null);
+      return;
+    }
+    let live = true;
+    setDetails(null);
+    setError(null);
+    api.get<ProcessDetails>(`/api/system/resources/process/${pid}`)
+      .then((d) => { if (live) setDetails(d); })
+      .catch((e: unknown) => {
+        if (live) setError(e instanceof Error ? e.message : "Could not read the process");
+      });
+    return () => { live = false; };
+  }, [pid]);
+
+  if (pid === null) return null;
+
+  const body = (
+    <div className="space-y-3" data-testid="sysmon-process-details" data-pid={pid}>
+      {error && <p className="text-sm text-error">{error}</p>}
+      {!error && details === null && <p className="text-sm text-text-subtle">Reading /proc…</p>}
+      {details && (
+        <>
+          <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+            <Field label="PID" value={details.pid} />
+            <Field label="Parent PID" value={details.ppid} />
+            <Field label="User" value={details.user} />
+            <Field label="State" value={details.state} />
+            <Field label="Threads" value={details.threads} />
+            <Field label="Nice" value={details.nice} />
+            <Field label="Started" value={started(details.startedAt)} />
+            <Field label="Control group" value={details.cgroup} />
+          </dl>
+          <Block label="Executable" value={details.exe} />
+          <Block label="Working directory" value={details.cwd} />
+          {/* The whole line, not the table row's 160 characters: showing it is
+              what this dialog is for. Secrets are redacted server-side. */}
+          <Block label="Command line" value={details.command} mono />
+        </>
+      )}
+    </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">{name}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      {/* `sm:` or the primitive's own `sm:max-w-lg` wins and this is dead. */}
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="break-all">{name}</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Field({ label, value }: { label: string; value: string | number | null }) {
+  const text = value === null || value === "" ? "—" : String(value);
+  return (
+    <div className="min-w-0">
+      <dt className="text-text-subtle">{label}</dt>
+      <dd className="truncate" title={text}>{text}</dd>
+    </div>
+  );
+}
+
+function Block({ label, value, mono }: { label: string; value: string | null; mono?: boolean }) {
+  return (
+    <div className="space-y-1">
+      <p className="text-[11px] text-text-subtle">{label}</p>
+      <p className={`text-xs break-all ${mono ? "font-mono" : ""}`}>{value ?? "—"}</p>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { ChevronRight, ChevronDown, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { formatRam } from "@/lib/format-bytes";
-import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell, sumOptionalBps } from "./process-row-format";
+import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell, formatSwapCell, sumOptionalBps } from "./process-row-format";
 import { optionalCellClassName, type ProcessGridResult } from "./process-columns-grid";
 import type { ProcessGroup } from "../../../types/system-metrics";
 
@@ -50,6 +50,11 @@ export function ProcessGroupRow({ group, expanded, grid, killProtected, onToggle
       </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.swap && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "swap"))}>
+          {formatSwapCell(group.swapMB)}
+        </span>
+      )}
       {grid.columns.disk && (
         <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "disk"))}>
           {formatDiskCell(group.diskReadBps, group.diskWriteBps)}

package/src/web/components/system/process-row-format.ts

@@ -32,6 +32,12 @@ export function formatDiskCell(readBps?: number, writeBps?: number): string {
   return `↓ ${formatBps(readBps ?? 0)} ↑ ${formatBps(writeBps ?? 0)}`;
 }
 
+/** Swap has no second half, so it is the one optional cell where `undefined`
+ *  and 0 are the only two cases — a kernel thread really does swap nothing. */
+export function formatSwapCell(swapMB?: number): string {
+  return swapMB === undefined ? "—" : formatRam(swapMB);
+}
+
 export function formatNetCell(inBps?: number, outBps?: number): string {
   if (inBps === undefined && outBps === undefined) return "—";
   return `↓ ${formatBps(inBps ?? 0)} ↑ ${formatBps(outBps ?? 0)}`;

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

@@ -0,0 +1,72 @@
+/**
+ * A process row's actions — Mission Center's right-click menu: Details, End, and
+ * the Send Signal submenu.
+ *
+ * Right-click on a mouse, long-press on a touch screen, via the adaptive menu.
+ * That component only SUPPRESSES the click following a long press; it has no tap
+ * handler of its own, so the row's own tap target stays a real button inside the
+ * trigger and is passed through as `children` untouched.
+ */
+import type { ReactNode } from "react";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
+  ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { SIGNAL_LABELS, UNCATCHABLE_SIGNALS } from "./use-process-signal";
+import type { ProcessInfo, ProcessSignal } from "../../../types/system-metrics";
+
+export interface ProcessRowMenuProps {
+  proc: ProcessInfo;
+  /** Signals this host can deliver, straight off the snapshot. Empty or absent
+   *  hides the submenu entirely rather than offering something that would 400. */
+  signals: readonly ProcessSignal[];
+  onDetails: (proc: ProcessInfo) => void;
+  onKill: (proc: ProcessInfo) => void;
+  onSignal: (proc: ProcessInfo, signal: ProcessSignal, tree: boolean) => void;
+  children: ReactNode;
+}
+
+export function ProcessRowMenu({
+  proc, signals, onDetails, onKill, onSignal, children,
+}: ProcessRowMenuProps) {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="select-none">{children}</div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onSelect={() => onDetails(proc)}>Details…</ContextMenuItem>
+        {signals.length > 0 && (
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Send signal</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              {signals.map((signal) => (
+                <ContextMenuItem
+                  key={signal}
+                  variant={UNCATCHABLE_SIGNALS.includes(signal) ? "destructive" : undefined}
+                  disabled={proc.protected}
+                  onSelect={() => { if (!proc.protected) onSignal(proc, signal, false); }}
+                >
+                  {SIGNAL_LABELS[signal]}
+                </ContextMenuItem>
+              ))}
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        )}
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          variant="destructive"
+          disabled={proc.protected}
+          onSelect={() => { if (!proc.protected) onKill(proc); }}
+        >
+          End process
+        </ContextMenuItem>
+        {proc.protected && (
+          <p className="px-2 py-1.5 text-[11px] text-text-subtle max-w-64">
+            PPM or OS-critical process — it cannot be ended or signalled.
+          </p>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { formatRam } from "@/lib/format-bytes";
-import { cpuColor, formatAge, formatDiskCell, formatGpuCell, formatNetCell, sumOptionalBps } from "./process-row-format";
+import { cpuColor, formatAge, formatDiskCell, formatGpuCell, formatNetCell, formatSwapCell, sumOptionalBps } from "./process-row-format";
 import { optionalCellClassName, type ProcessGridResult } from "./process-columns-grid";
 import type { ProcessInfo } from "../../../types/system-metrics";
 
@@ -22,6 +22,7 @@ export function ProcessRow({ proc, indent, grid, onKillClick }: ProcessRowProps)
       data-pid={proc.pid}
       data-ppm={proc.ppm}
       data-protected={proc.protected}
+      data-swap-mb={proc.swapMB}
       data-disk-bps={sumOptionalBps(proc.diskReadBps, proc.diskWriteBps)}
       data-gpu-pct={proc.gpuPct}
       data-net-bps={sumOptionalBps(proc.netInBps, proc.netOutBps)}
@@ -39,6 +40,11 @@ export function ProcessRow({ proc, indent, grid, onKillClick }: ProcessRowProps)
       </div>
       <span className={cn("text-right", cpuColor(proc.cpu))}>{proc.cpu.toFixed(1)}%</span>
       <span className="text-right text-text-secondary">{formatRam(proc.ramMB)}</span>
+      {grid.columns.swap && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "swap"))}>
+          {formatSwapCell(proc.swapMB)}
+        </span>
+      )}
       {grid.columns.disk && (
         <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "disk"))}>
           {formatDiskCell(proc.diskReadBps, proc.diskWriteBps)}

package/src/web/components/system/process-table-model.ts

@@ -102,7 +102,7 @@ export function buildRows(input: BuildRowsInput): BuildRowsResult {
 }
 
 /** Three-state sort toggle: desc -> asc -> off, shared by every sortable column. */
-export function toggleSort(current: SortKey, dir: SortDir, clicked: Exclude<SortKey, null>): [SortKey, SortDir] {
+export function toggleSort<K extends string>(current: K | null, dir: SortDir, clicked: K): [K | null, SortDir] {
   if (current !== clicked) return [clicked, "desc"];
   if (dir === "desc") return [clicked, "asc"];
   return [null, "desc"];

package/src/web/components/system/process-table-sort.ts

@@ -11,6 +11,7 @@ export interface SortableFields {
   cpu: number;
   ramMB: number;
   name: string;
+  swapMB?: number;
   diskReadBps?: number;
   diskWriteBps?: number;
   gpuPct?: number;
@@ -25,6 +26,7 @@ export interface SortableFields {
 export function sortFields(m: {
   cpu: number;
   ramMB: number;
+  swapMB?: number;
   diskReadBps?: number;
   diskWriteBps?: number;
   gpuPct?: number;
@@ -36,6 +38,7 @@ export function sortFields(m: {
     cpu: m.cpu,
     ramMB: m.ramMB,
     name,
+    swapMB: m.swapMB,
     diskReadBps: m.diskReadBps,
     diskWriteBps: m.diskWriteBps,
     gpuPct: m.gpuPct,
@@ -52,15 +55,16 @@ function sumPair(a?: number, b?: number): number | undefined {
   return (a ?? 0) + (b ?? 0);
 }
 
-function optionalValueFor(key: "disk" | "gpu" | "gpuMem" | "net", f: SortableFields): number | undefined {
+function optionalValueFor(key: "swap" | "disk" | "gpu" | "gpuMem" | "net", f: SortableFields): number | undefined {
+  if (key === "swap") return f.swapMB;
   if (key === "disk") return sumPair(f.diskReadBps, f.diskWriteBps);
   if (key === "net") return sumPair(f.netInBps, f.netOutBps);
   if (key === "gpu") return f.gpuPct;
   return f.gpuMemMB;
 }
 
-function isOptionalSortKey(key: SortKey): key is "disk" | "gpu" | "gpuMem" | "net" {
-  return key === "disk" || key === "gpu" || key === "gpuMem" || key === "net";
+function isOptionalSortKey(key: SortKey): key is "swap" | "disk" | "gpu" | "gpuMem" | "net" {
+  return key === "swap" || key === "disk" || key === "gpu" || key === "gpuMem" || key === "net";
 }
 
 export function sortByKey<T>(items: T[], key: SortKey, dir: SortDir, get: (item: T) => SortableFields): T[] {
@@ -75,7 +79,7 @@ export function sortByKey<T>(items: T[], key: SortKey, dir: SortDir, get: (item:
     if (key === "cpu") return dir === "asc" ? av.cpu - bv.cpu : bv.cpu - av.cpu;
     if (key === "ram") return dir === "asc" ? av.ramMB - bv.ramMB : bv.ramMB - av.ramMB;
 
-    // disk/gpu/gpuMem/net: optional metrics. Undefined always sorts last, in
+    // swap/disk/gpu/gpuMem/net: optional metrics. Undefined always sorts last, in
     // EITHER direction — it means "unmeasurable", not "smallest value".
     if (isOptionalSortKey(key)) {
       const aVal = optionalValueFor(key, av);

package/src/web/components/system/process-table-toolbar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Search } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { formatRam } from "@/lib/format-bytes";
-import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell } from "./process-row-format";
+import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell, formatSwapCell } from "./process-row-format";
 import { optionalCellClassName, PROCESS_ROW_GRID_CLASS, type ProcessGridResult } from "./process-columns-grid";
 import type { Totals } from "./process-table-totals";
 import { SortableHeader, type ColumnResizeHandlers } from "./sortable-header";
@@ -86,7 +86,7 @@ export interface ProcessTableHeaderProps {
   resize: ColumnResizeHandlers;
 }
 
-/** Sticky column header row, grid-aligned with the rows below it. Disk/GPU/Net
+/** Sticky column header row, grid-aligned with the rows below it. Swap/Disk/GPU/Net
  *  headers only render when the host reported that column as measurable
  *  (`grid.columns.<x>`); below `@lg` only the one currently sorted survives. Every
  *  fixed-width column carries a drag handle on its right edge. */
@@ -103,6 +103,9 @@ export function ProcessTableHeader({ sortKey, sortDir, grid, onSort, resize }: P
       <SortableHeader label="Process" field="name" {...common} resize={undefined} align="left" testId="sysmon-sort-name" />
       <SortableHeader label="CPU" field="cpu" {...common} resizeKey="cpu" testId="sysmon-sort-cpu" />
       <SortableHeader label="RAM" field="ram" {...common} resizeKey="ram" testId="sysmon-sort-ram" />
+      {grid.columns.swap && (
+        <SortableHeader label="Swap" field="swap" {...common} resizeKey="swap" testId="sysmon-col-swap" className={optionalCellClassName(grid, "swap")} />
+      )}
       {grid.columns.disk && (
         <SortableHeader label="Disk" field="disk" {...common} resizeKey="disk" testId="sysmon-col-disk" className={optionalCellClassName(grid, "disk")} />
       )}
@@ -138,6 +141,11 @@ export function ProcessTableFooter({ totals, grid, gpuUtilPercent }: ProcessTabl
       <span className="truncate">Total ({totals.count} processes)</span>
       <span className={cn("text-right", cpuColor(totals.cpu))}>{totals.cpu.toFixed(1)}%</span>
       <span className="text-right text-text-secondary">{formatRam(totals.ramMB)}</span>
+      {grid.columns.swap && (
+        <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "swap"))}>
+          {formatSwapCell(totals.swapMB)}
+        </span>
+      )}
       {grid.columns.disk && (
         <span className={cn("text-right text-text-secondary tabular-nums truncate", optionalCellClassName(grid, "disk"))}>
           {formatDiskCell(totals.diskReadBps, totals.diskWriteBps)}

package/src/web/components/system/process-table-totals.ts

@@ -7,6 +7,7 @@ export interface Totals {
   count: number;
   /** Sums over rows with a defined value; `undefined` when NO visible row measured
    *  that metric — mirrors the "undefined = host can't measure" rule on ProcessInfo. */
+  swapMB?: number;
   diskReadBps?: number;
   diskWriteBps?: number;
   gpuMemMB?: number;
@@ -28,6 +29,7 @@ export function accumulateTotals(
   item: {
     cpu: number;
     ramMB: number;
+    swapMB?: number;
     diskReadBps?: number;
     diskWriteBps?: number;
     gpuMemMB?: number;
@@ -40,6 +42,7 @@ export function accumulateTotals(
     cpu: acc.cpu + item.cpu,
     ramMB: acc.ramMB + item.ramMB,
     count: acc.count + countDelta,
+    swapMB: addOptional(acc.swapMB, item.swapMB),
     diskReadBps: addOptional(acc.diskReadBps, item.diskReadBps),
     diskWriteBps: addOptional(acc.diskWriteBps, item.diskWriteBps),
     gpuMemMB: addOptional(acc.gpuMemMB, item.gpuMemMB),

package/src/web/components/system/process-table.tsx

@@ -6,10 +6,13 @@ import { buildProcessGrid, gridCssVars } from "./process-columns-grid";
 import { ProcessTableToolbar, ProcessTableHeader, ProcessTableFooter } from "./process-table-toolbar";
 import { ProcessGroupRow } from "./process-group-row";
 import { ProcessRow } from "./process-row";
+import { ProcessRowMenu } from "./process-row-menu";
+import { ProcessDetailsDialog } from "./process-details-dialog";
 import { KillConfirmDialog } from "./kill-confirm-dialog";
 import { useProcessKill } from "./use-process-kill";
+import { useProcessSignal } from "./use-process-signal";
 import { useColumnWidths } from "./use-column-widths";
-import type { MetricsSnapshot, SortDir, SortKey } from "../../../types/system-metrics";
+import type { MetricsSnapshot, ProcessInfo, SortDir, SortKey } from "../../../types/system-metrics";
 
 /** Older cached bundles/snapshots (mid-rollout) predate `processColumns` — default
  *  every optional column off rather than let a missing field throw. */
@@ -31,6 +34,13 @@ export function ProcessTable({ snapshot }: ProcessTableProps) {
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
   const { pendingKill, groupProtected, requestKillProcess, requestKillGroup, confirmKill, cancelKill } =
     useProcessKill(snapshot);
+  const { send: sendSignal } = useProcessSignal();
+  // Held as the whole row rather than a pid: the dialog needs a name to show while
+  // it is fetching, and the row can leave the table before the answer arrives.
+  const [details, setDetails] = useState<ProcessInfo | null>(null);
+  // Absent on a light-tier frame and on any host with no signal support, in which
+  // case the menu simply has no Send-signal submenu.
+  const signals = snapshot.signals ?? [];
   const { widths, begin: onResizeStart, reset: onResizeReset } = useColumnWidths();
 
   const { rows, totals } = useMemo(
@@ -128,7 +138,15 @@ export function ProcessTable({ snapshot }: ProcessTableProps) {
                     onKillClick={requestKillGroup}
                   />
                 ) : (
-                  <ProcessRow proc={row.proc} indent={row.indent} grid={grid} onKillClick={requestKillProcess} />
+                  <ProcessRowMenu
+                    proc={row.proc}
+                    signals={signals}
+                    onDetails={setDetails}
+                    onKill={requestKillProcess}
+                    onSignal={(proc, signal, tree) => void sendSignal(proc, signal, tree)}
+                  >
+                    <ProcessRow proc={row.proc} indent={row.indent} grid={grid} onKillClick={requestKillProcess} />
+                  </ProcessRowMenu>
                 )}
               </div>
             );
@@ -141,6 +159,11 @@ export function ProcessTable({ snapshot }: ProcessTableProps) {
         onConfirm={confirmKill}
         onCancel={cancelKill}
       />
+      <ProcessDetailsDialog
+        pid={details?.pid ?? null}
+        name={details?.name ?? ""}
+        onClose={() => setDetails(null)}
+      />
     </div>
   );
 }

package/src/web/components/system/services/service-action-confirm.tsx

@@ -0,0 +1,100 @@
+/**
+ * Confirm before a service action that takes something away.
+ *
+ * Mission Center asks nothing and lets polkit decide. PPM asks, because its
+ * Services page is reachable from a phone on a LAN where a mis-tap on "Stop" has
+ * no undo — and because the actions that would be catastrophic are refused by the
+ * server anyway, so what is left here is exactly the consequential-but-allowed
+ * middle. Start and enable are not confirmed: they take nothing away.
+ */
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { ServiceAction, ServiceInfo } from "../../../../types/system-services";
+
+/** The actions worth a question. */
+export const CONFIRMED_ACTIONS: readonly ServiceAction[] = ["stop", "restart", "disable"];
+
+export function needsConfirm(action: ServiceAction): boolean {
+  return CONFIRMED_ACTIONS.includes(action);
+}
+
+const WORDING: Partial<Record<ServiceAction, { title: string; body: (unit: string) => string; cta: string }>> = {
+  stop: {
+    title: "Stop service",
+    body: (unit) => `Stop ${unit}? Anything depending on it stops too.`,
+    cta: "Stop",
+  },
+  restart: {
+    title: "Restart service",
+    body: (unit) => `Restart ${unit}? It will be briefly unavailable.`,
+    cta: "Restart",
+  },
+  disable: {
+    title: "Disable at boot",
+    body: (unit) => `${unit} will no longer start at boot. It keeps running now.`,
+    cta: "Disable",
+  },
+};
+
+export interface PendingServiceAction {
+  service: ServiceInfo;
+  action: ServiceAction;
+}
+
+export interface ServiceActionConfirmProps {
+  pending: PendingServiceAction | null;
+  onConfirm: (pending: PendingServiceAction) => void;
+  onCancel: () => void;
+}
+
+export function ServiceActionConfirm({ pending, onConfirm, onCancel }: ServiceActionConfirmProps) {
+  const isMobile = useIsMobile();
+  if (!pending) return null;
+  const wording = WORDING[pending.action];
+  if (!wording) return null;
+
+  const body = (
+    <div className="space-y-4" data-testid="sysmon-service-confirm" data-action={pending.action}>
+      <p className="text-sm break-words">{wording.body(pending.service.unit)}</p>
+      <p className="text-xs text-text-subtle">
+        {pending.service.scope === "system" ? "System service" : "User service"}
+        {pending.service.mainPid !== null && ` · pid ${pending.service.mainPid}`}
+      </p>
+      <div className="flex flex-col-reverse md:flex-row gap-2 md:justify-end pt-2">
+        <Button variant="outline" onClick={onCancel} className="min-h-11">Cancel</Button>
+        <Button
+          variant="destructive"
+          autoFocus={false}
+          onClick={() => onConfirm(pending)}
+          data-testid="sysmon-service-confirm-ok"
+          className="min-h-11"
+        >
+          {wording.cta}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onCancel}>
+        <div className="px-4 pb-4">
+          <h2 className="text-base font-semibold mb-3">{wording.title}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{wording.title}</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,103 @@
+/**
+ * The Services table's columns — Mission Center's own set, in its own order:
+ * Name, PID, CPU, Memory, Swap, Drive, GPU, GPU Memory.
+ *
+ * One table drives three things that have to agree or the page silently
+ * misaligns: the header labels, each cell's visibility, and the grid template at
+ * each width. They are derived from this list rather than written out three
+ * times, because a column added to the header and forgotten in the template does
+ * not fail — it shifts every cell after it one track to the left.
+ *
+ * Widths are fixed pixels for every column but the name. They cannot be `auto`:
+ * each row is its own grid element, so an `auto` track is sized by *that row's*
+ * content and two rows with different-length numbers would not line up.
+ *
+ * Pure, React-free, relative imports only.
+ */
+import type { CSSProperties } from "react";
+
+export type ServiceColumnKey = "name" | "pid" | "cpu" | "ram" | "swap" | "disk" | "gpu" | "gpuMem";
+
+/** The container width at which a column appears. `base` is always present. */
+export type ColumnBreakpoint = "base" | "@2xl" | "@3xl" | "@4xl";
+
+export interface ServiceColumn {
+  key: ServiceColumnKey;
+  label: string;
+  /** Track width in px; `null` is the one flexible column (the name). */
+  width: number | null;
+  from: ColumnBreakpoint;
+  align: "left" | "right";
+}
+
+/**
+ * The ladder is by *usefulness per pixel*: CPU and Memory are the two figures
+ * worth a narrow window, PID and Swap come next, and the three widest cells
+ * (Drive carries two rates) only once there is room for them beside a readable
+ * unit name. A 60-character unit name squeezed into 90px to show a GPU column
+ * that reads 0% for almost every unit is a worse table, not a fuller one.
+ */
+export const SERVICE_COLUMNS: readonly ServiceColumn[] = [
+  { key: "name", label: "Name", width: null, from: "base", align: "left" },
+  { key: "pid", label: "PID", width: 56, from: "@3xl", align: "right" },
+  { key: "cpu", label: "CPU", width: 56, from: "@2xl", align: "right" },
+  { key: "ram", label: "Memory", width: 72, from: "@2xl", align: "right" },
+  { key: "swap", label: "Swap", width: 72, from: "@3xl", align: "right" },
+  { key: "disk", label: "Drive", width: 112, from: "@4xl", align: "right" },
+  { key: "gpu", label: "GPU", width: 56, from: "@4xl", align: "right" },
+  { key: "gpuMem", label: "GPU Memory", width: 80, from: "@4xl", align: "right" },
+];
+
+/** Narrowest first; a column appears at its own breakpoint and every wider one. */
+export const BREAKPOINT_ORDER: readonly ColumnBreakpoint[] = ["base", "@2xl", "@3xl", "@4xl"];
+
+/**
+ * Written out as literal strings, never built from `col.from` at runtime:
+ * Tailwind scans source text for class names, so a class assembled as
+ * `` `hidden ${bp}:block` `` emits no rule at all and the column would be
+ * visible at every width — the same silent failure as a colour class naming a
+ * token that does not exist.
+ */
+const VISIBILITY: Record<ColumnBreakpoint, string> = {
+  base: "",
+  "@2xl": "hidden @2xl:block",
+  "@3xl": "hidden @3xl:block",
+  "@4xl": "hidden @4xl:block",
+};
+
+export function columnVisibilityClass(column: ServiceColumn): string {
+  return VISIBILITY[column.from];
+}
+
+export function visibleColumnsAt(breakpoint: ColumnBreakpoint): ServiceColumn[] {
+  const width = BREAKPOINT_ORDER.indexOf(breakpoint);
+  return SERVICE_COLUMNS.filter((c) => BREAKPOINT_ORDER.indexOf(c.from) <= width);
+}
+
+export function gridTemplateAt(breakpoint: ColumnBreakpoint): string {
+  return visibleColumnsAt(breakpoint)
+    .map((c) => (c.width === null ? "minmax(0,1fr)" : `${c.width}px`))
+    .join(" ");
+}
+
+/**
+ * Static class names for the four templates; the templates themselves arrive as
+ * CSS custom properties set once on the panel and inherited by every row, which
+ * is the same arrangement the process table uses. `gap-2` rather than `gap-3`:
+ * eight columns pay seven gaps, and 28px of them is a tenth of the name column.
+ */
+export const SERVICE_ROW_GRID_CLASS = [
+  "grid gap-2 grid-cols-[var(--svc-cols-base)]",
+  "@2xl:grid-cols-[var(--svc-cols-2xl)]",
+  "@3xl:grid-cols-[var(--svc-cols-3xl)]",
+  "@4xl:grid-cols-[var(--svc-cols-4xl)]",
+].join(" ");
+
+export function serviceGridCssVars(): CSSProperties {
+  return {
+    "--svc-cols-base": gridTemplateAt("base"),
+    "--svc-cols-2xl": gridTemplateAt("@2xl"),
+    "--svc-cols-3xl": gridTemplateAt("@3xl"),
+    "--svc-cols-4xl": gridTemplateAt("@4xl"),
+  } as CSSProperties;
+}