@hienlh/ppm 0.18.9 → 0.18.10

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

@@ -5,44 +5,60 @@ 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";
+import type { KillTarget } from "./build-kill-request";
 
 export interface KillConfirmDialogProps {
-  process: ProcessInfo | null;
-  onConfirm: (proc: ProcessInfo, tree: boolean) => void;
+  target: KillTarget | null;
+  /** `tree` is only meaningful for a single process; a group is always ended whole. */
+  onConfirm: (target: KillTarget, 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) {
+/** Confirm dialog for ending a process or a whole app group. 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({ target, onConfirm, onCancel }: KillConfirmDialogProps) {
   const isMobile = useIsMobile();
   const [tree, setTree] = useState(false);
 
   useEffect(() => {
-    if (!process) setTree(false);
-  }, [process]);
+    if (!target) setTree(false);
+  }, [target]);
 
-  if (!process) return null;
+  if (!target) return null;
+
+  const isGroup = target.kind === "group";
+  const title = isGroup ? "End app" : "End process";
+  const cpu = isGroup ? target.group.cpu : target.proc.cpu;
+  const ramMB = isGroup ? target.group.ramMB : target.proc.ramMB;
 
   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>
+    <div className="space-y-4" data-testid="sysmon-kill-confirm" data-kill-kind={target.kind}>
+      {isGroup ? (
+        <p className="text-sm">
+          End <span className="font-medium">{target.group.label}</span> and all its{" "}
+          <span className="font-medium">{target.members.length}</span> processes?
+        </p>
+      ) : (
+        <p className="text-sm">
+          End <span className="font-medium">{target.proc.name}</span> (pid {target.proc.pid})?
+        </p>
+      )}
       <p className="text-xs text-text-subtle">
-        CPU {process.cpu.toFixed(1)}% · RAM {formatRam(process.ramMB)}
+        CPU {cpu.toFixed(1)}% · RAM {formatRam(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>
+      {!isGroup && (
+        <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"
@@ -55,11 +71,11 @@ export function KillConfirmDialog({ process, onConfirm, onCancel }: KillConfirmD
         <Button
           variant="destructive"
           autoFocus={false}
-          onClick={() => onConfirm(process, tree)}
+          onClick={() => onConfirm(target, tree)}
           data-testid="sysmon-kill-confirm-ok"
           className="min-h-11"
         >
-          End process
+          {isGroup ? `End ${target.members.length} processes` : "End process"}
         </Button>
       </div>
     </div>
@@ -69,7 +85,7 @@ export function KillConfirmDialog({ process, onConfirm, onCancel }: KillConfirmD
     return (
       <BottomSheet open onClose={onCancel}>
         <div className="px-4 pb-4">
-          <h2 className="text-base font-semibold mb-3">End process</h2>
+          <h2 className="text-base font-semibold mb-3">{title}</h2>
           {body}
         </div>
       </BottomSheet>
@@ -80,7 +96,7 @@ export function KillConfirmDialog({ process, onConfirm, onCancel }: KillConfirmD
     <Dialog open onOpenChange={(open) => !open && onCancel()}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>End process</DialogTitle>
+          <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
         {body}
       </DialogContent>

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

@@ -20,8 +20,7 @@ interface MetricChartCanvasProps {
  *  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. */
+ *  nowhere near a frame budget. */
 export const MetricChartCanvas = memo(function MetricChartCanvas({
   series,
   height,

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

@@ -1,45 +1,50 @@
 /** 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.
+ *  rules (which optional columns exist, which one survives below `@lg`) and the
+ *  user-resized widths 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. */
+ *  string; the var() value itself can vary at runtime. */
 import type { CSSProperties } from "react";
 import type { ProcessColumnAvailability, SortKey } from "../../../types/system-metrics";
 
 export type OptionalColumnKey = "disk" | "gpu" | "net";
+/** Every column whose width the user can drag. The name column takes the rest. */
+export type ResizableColumnKey = "cpu" | "ram" | OptionalColumnKey;
 
 /** 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;
 
+/** px overrides from a drag; missing keys fall back to `DEFAULT_COLUMN_WIDTH`. */
+export type ColumnWidths = Partial<Record<ResizableColumnKey, number>>;
+
 const OPTIONAL_COLUMN_ORDER: OptionalColumnKey[] = ["disk", "gpu", "net"];
 
 /** 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",
+export const DEFAULT_COLUMN_WIDTH: Record<ResizableColumnKey, number> = {
+  cpu: 64,
+  ram: 80,
+  disk: 120,
+  gpu: 90,
+  net: 120,
 };
+/** Drag bounds: below 48px a "1.2 MB/s" no longer fits; above 400px the name
+ *  column starves in a default-size window. */
+export const MIN_COLUMN_WIDTH = 48;
+export const MAX_COLUMN_WIDTH = 400;
 
-/** 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 NAME_TRACK = "minmax(0,1fr)";
 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. */
+   *  in a fixed order + 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. */
+   *  currently sorted by (if enabled) + kill button. */
   narrowTemplate: string;
   /** Which optional columns are enabled at all (host can measure them). */
   columns: ProcessColumnsFlags;
@@ -52,22 +57,27 @@ function isOptionalColumnKey(key: SortKey): key is OptionalColumnKey {
   return key === "disk" || key === "gpu" || key === "net";
 }
 
-export function buildProcessGrid(columns: ProcessColumnsFlags, sortKey: SortKey): ProcessGridResult {
+export function clampColumnWidth(px: number): number {
+  return Math.round(Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, px)));
+}
+
+export function columnWidthPx(key: ResizableColumnKey, widths: ColumnWidths): number {
+  const w = widths[key];
+  return typeof w === "number" && Number.isFinite(w) ? clampColumnWidth(w) : DEFAULT_COLUMN_WIDTH[key];
+}
+
+export function buildProcessGrid(
+  columns: ProcessColumnsFlags,
+  sortKey: SortKey,
+  widths: ColumnWidths = {},
+): ProcessGridResult {
   const enabled = OPTIONAL_COLUMN_ORDER.filter((k) => columns[k]);
   const narrowExtra = isOptionalColumnKey(sortKey) && columns[sortKey] ? sortKey : null;
+  const track = (k: ResizableColumnKey) => `${columnWidthPx(k, widths)}px`;
+  const base = [NAME_TRACK, track("cpu"), track("ram")];
 
-  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(" ");
+  const wideTemplate = [...base, ...enabled.map(track), KILL_TRACK].join(" ");
+  const narrowTemplate = [...base, ...(narrowExtra ? [track(narrowExtra)] : []), KILL_TRACK].join(" ");
 
   return { wideTemplate, narrowTemplate, columns, narrowExtra };
 }

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

@@ -1,25 +1,28 @@
-import { ChevronRight, ChevronDown } from "lucide-react";
+import { ChevronRight, ChevronDown, X } 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";
 
+const PROTECTED_GROUP_TOOLTIP = "Protected: this app contains a PPM or OS-critical process — cannot be ended as a whole.";
+
 export interface ProcessGroupRowProps {
   group: ProcessGroup;
   expanded: boolean;
-  spark: number[];
   grid: ProcessGridResult;
+  /** True when any member is refused by the kill guard — the whole-app button is disabled. */
+  killProtected: boolean;
   onToggle: (key: string) => void;
+  onKillClick: (group: ProcessGroup) => void;
 }
 
-export function ProcessGroupRow({ group, expanded, spark, grid, onToggle }: ProcessGroupRowProps) {
+export function ProcessGroupRow({ group, expanded, grid, killProtected, onToggle, onKillClick }: 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)]"
+      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 group/proc 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}
@@ -62,10 +65,30 @@ export function ProcessGroupRow({ group, expanded, spark, grid, onToggle }: Proc
           {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} />}
+      {/* Same 44px track as the leaf rows' kill button, so ending a whole app (Notion
+          and its 7 helpers) is one click instead of seven. */}
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onKillClick(group);
+          }}
+          disabled={killProtected}
+          aria-label={`End ${group.label} and its ${group.count} processes`}
+          title={killProtected ? PROTECTED_GROUP_TOOLTIP : `End ${group.label} (${group.count} processes)`}
+          data-testid="sysmon-group-kill-btn"
+          className={cn(
+            "flex items-center justify-center size-11 md:size-7 rounded transition-all",
+            "can-hover:opacity-0 can-hover:group-hover/proc:opacity-100",
+            killProtected
+              ? "opacity-40 cursor-not-allowed"
+              : "hover:bg-error/20 hover:text-error active:bg-error/30",
+          )}
+        >
+          <X className="size-3.5" />
+        </button>
       </div>
-      <div className="hidden @lg:block" />
     </div>
   );
 }

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

@@ -26,9 +26,14 @@ export function ProcessRow({ proc, indent, grid, onKillClick }: ProcessRowProps)
       data-gpu-pct={proc.gpuPct}
       data-net-bps={sumOptionalBps(proc.netInBps, proc.netOutBps)}
     >
+      {/* Uptime lives in the tooltip: a dedicated column cost 130px for a figure
+          that matters only when you are already looking at one row. */}
       <div className={cn("flex items-start gap-1.5 min-w-0", indent && "pl-6")}>
         <span className="text-text-subtle shrink-0">{proc.pid}</span>
-        <span className="truncate text-text-secondary" title={proc.command}>
+        <span
+          className="truncate text-text-secondary"
+          title={proc.startedAt ? `${proc.command}\nRunning ${formatAge(proc.startedAt)}` : proc.command}
+        >
           {proc.command}
         </span>
       </div>
@@ -49,12 +54,6 @@ export function ProcessRow({ proc, indent, grid, onKillClick }: ProcessRowProps)
           {formatNetCell(proc.netInBps, proc.netOutBps)}
         </span>
       )}
-      <span
-        className="hidden @lg:block text-text-subtle text-right"
-        title={proc.startedAt ? new Date(proc.startedAt).toLocaleString() : ""}
-      >
-        {formatAge(proc.startedAt || undefined)}
-      </span>
       <div className="flex justify-end">
         <button
           type="button"

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

@@ -2,26 +2,19 @@
  *  filter/sort/expand/rollup rules are unit-testable without mounting a component.
  *  Sort comparator lives in `process-table-sort.ts`, totals accumulator in
  *  `process-table-totals.ts` — both split out to stay under the file-size guideline. */
-import type {
-  MetricsHistoryPoint,
-  ProcessGroup,
-  ProcessInfo,
-  SortDir,
-  SortKey,
-} from "../../../types/system-metrics";
+import type { ProcessGroup, ProcessInfo, SortDir, SortKey } from "../../../types/system-metrics";
 import { sortByKey, sortFields } from "./process-table-sort";
 import { accumulateTotals, EMPTY_TOTALS, type Totals } from "./process-table-totals";
 
 export type { Totals } from "./process-table-totals";
 
 export type TableRow =
-  | { kind: "group"; group: ProcessGroup; expanded: boolean; spark: number[] }
+  | { kind: "group"; group: ProcessGroup; expanded: boolean }
   | { kind: "process"; proc: ProcessInfo; indent: boolean };
 
 export interface BuildRowsInput {
   processes: ProcessInfo[];
   groups: ProcessGroup[];
-  history: MetricsHistoryPoint[];
   mode: "grouped" | "flat";
   ppmOnly: boolean;
   query: string;
@@ -37,8 +30,6 @@ export interface BuildRowsResult {
   autoExpanded: Set<string>;
 }
 
-const SPARK_POINTS = 60;
-
 function matches(text: string, query: string): boolean {
   return text.toLowerCase().includes(query);
 }
@@ -47,13 +38,9 @@ function processMatches(proc: ProcessInfo, query: string): boolean {
   return matches(proc.name, query) || matches(proc.command, query);
 }
 
-function sparkFor(history: MetricsHistoryPoint[], groupKey: string): number[] {
-  return history.slice(-SPARK_POINTS).map((h) => h.groups[groupKey]?.cpu ?? 0);
-}
-
 /** Order fixed: filter (ppmOnly) -> filter (query) -> sort -> flatten (expand). */
 export function buildRows(input: BuildRowsInput): BuildRowsResult {
-  const { processes, groups, history, mode, ppmOnly, query, sortKey, sortDir, expanded } = input;
+  const { processes, groups, mode, ppmOnly, query, sortKey, sortDir, expanded } = input;
   const q = query.trim().toLowerCase();
   const byPid = new Map(processes.map((p) => [p.pid, p]));
 
@@ -93,12 +80,7 @@ export function buildRows(input: BuildRowsInput): BuildRowsResult {
   const rows: TableRow[] = [];
   for (const group of filteredGroups) {
     const isExpanded = q ? autoExpanded.has(group.key) || expanded.has(group.key) : expanded.has(group.key);
-    rows.push({
-      kind: "group",
-      group,
-      expanded: isExpanded,
-      spark: sparkFor(history, group.key),
-    });
+    rows.push({ kind: "group", group, expanded: isExpanded });
     if (!isExpanded) continue;
 
     // Skip pids the current snapshot no longer has — a process can exit between the

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

@@ -5,7 +5,7 @@ import { formatRam } from "@/lib/format-bytes";
 import { cpuColor, formatDiskCell, formatGpuCell, formatNetCell } 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 } from "./sortable-header";
+import { SortableHeader, type ColumnResizeHandlers } from "./sortable-header";
 import type { SortDir, SortKey } from "../../../types/system-metrics";
 
 const SEARCH_DEBOUNCE_MS = 150;
@@ -83,12 +83,15 @@ export interface ProcessTableHeaderProps {
   sortDir: SortDir;
   grid: ProcessGridResult;
   onSort: (field: Exclude<SortKey, null>) => void;
+  resize: ColumnResizeHandlers;
 }
 
 /** Sticky column header row, grid-aligned with the rows below it. 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. */
-export function ProcessTableHeader({ sortKey, sortDir, grid, onSort }: ProcessTableHeaderProps) {
+ *  (`grid.columns.<x>`); below `@lg` only the one currently sorted survives. Every
+ *  fixed-width column carries a drag handle on its right edge. */
+export function ProcessTableHeader({ sortKey, sortDir, grid, onSort, resize }: ProcessTableHeaderProps) {
+  const common = { activeKey: sortKey, activeDir: sortDir, onClick: onSort, resize };
   return (
     <div
       role="row"
@@ -97,51 +100,18 @@ export function ProcessTableHeader({ sortKey, sortDir, grid, onSort }: ProcessTa
         PROCESS_ROW_GRID_CLASS,
       )}
     >
-      <SortableHeader
-        label="Process"
-        field="name"
-        activeKey={sortKey}
-        activeDir={sortDir}
-        onClick={onSort}
-        align="left"
-        testId="sysmon-sort-name"
-      />
-      <SortableHeader label="CPU" field="cpu" activeKey={sortKey} activeDir={sortDir} onClick={onSort} testId="sysmon-sort-cpu" />
-      <SortableHeader label="RAM" field="ram" activeKey={sortKey} activeDir={sortDir} onClick={onSort} testId="sysmon-sort-ram" />
+      <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.disk && (
-        <SortableHeader
-          label="Disk"
-          field="disk"
-          activeKey={sortKey}
-          activeDir={sortDir}
-          onClick={onSort}
-          testId="sysmon-col-disk"
-          className={optionalCellClassName(grid, "disk")}
-        />
+        <SortableHeader label="Disk" field="disk" {...common} resizeKey="disk" testId="sysmon-col-disk" className={optionalCellClassName(grid, "disk")} />
       )}
       {grid.columns.gpu && (
-        <SortableHeader
-          label="GPU"
-          field="gpu"
-          activeKey={sortKey}
-          activeDir={sortDir}
-          onClick={onSort}
-          testId="sysmon-col-gpu"
-          className={optionalCellClassName(grid, "gpu")}
-        />
+        <SortableHeader label="GPU" field="gpu" {...common} resizeKey="gpu" testId="sysmon-col-gpu" className={optionalCellClassName(grid, "gpu")} />
       )}
       {grid.columns.net && (
-        <SortableHeader
-          label="Net"
-          field="net"
-          activeKey={sortKey}
-          activeDir={sortDir}
-          onClick={onSort}
-          testId="sysmon-col-net"
-          className={optionalCellClassName(grid, "net")}
-        />
+        <SortableHeader label="Net" field="net" {...common} resizeKey="net" testId="sysmon-col-net" className={optionalCellClassName(grid, "net")} />
       )}
-      <span className="text-right hidden @lg:block">Trend</span>
       <span />
     </div>
   );
@@ -183,7 +153,6 @@ export function ProcessTableFooter({ totals, grid, gpuUtilPercent }: ProcessTabl
           {formatNetCell(totals.netInBps, totals.netOutBps)}
         </span>
       )}
-      <span className="hidden @lg:block" />
       <span />
     </div>
   );

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

@@ -1,24 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { toast } from "sonner";
-import { getAuthToken } from "@/lib/api-client";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { buildRows, toggleSort } from "./process-table-model";
-import { buildKillRequest } from "./build-kill-request";
 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 { KillConfirmDialog } from "./kill-confirm-dialog";
-import type {
-  KillProcessRequest,
-  KillProcessResult,
-  MetricsHistoryPoint,
-  MetricsSnapshot,
-  ProcessInfo,
-  SortDir,
-  SortKey,
-} from "../../../types/system-metrics";
+import { useProcessKill } from "./use-process-kill";
+import { useColumnWidths } from "./use-column-widths";
+import type { MetricsSnapshot, 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. */
@@ -26,39 +17,9 @@ const NO_OPTIONAL_COLUMNS = { disk: false, gpu: false, net: false };
 
 export interface ProcessTableProps {
   snapshot: MetricsSnapshot;
-  history: MetricsHistoryPoint[];
 }
 
-/** `api.post` (src/web/lib/api-client.ts) has no way to add a bespoke header, and the
- *  kill route requires `X-PPM-Request: 1` — CSRF hardening, since a cross-origin HTML
- *  form cannot set a custom header, so a preflight becomes mandatory. A raw fetch here
- *  mirrors `handleResponse`'s single-Error-on-any-failure contract exactly, so the
- *  caller still has exactly one catch path. */
-async function killProcess(request: KillProcessRequest): Promise<KillProcessResult> {
-  const token = getAuthToken();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-PPM-Request": "1",
-  };
-  if (token) headers.Authorization = `Bearer ${token}`;
-
-  const res = await fetch("/api/system/resources/kill", {
-    method: "POST",
-    headers,
-    body: JSON.stringify(request),
-  });
-
-  let json: { ok: boolean; data?: KillProcessResult; error?: string };
-  try {
-    json = await res.json();
-  } catch {
-    throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
-  }
-  if (json.ok === false) throw new Error(json.error ?? `HTTP ${res.status}`);
-  return json.data as KillProcessResult;
-}
-
-export function ProcessTable({ snapshot, history }: ProcessTableProps) {
+export function ProcessTable({ snapshot }: ProcessTableProps) {
   const isMobile = useIsMobile();
   const parentRef = useRef<HTMLDivElement>(null);
 
@@ -68,14 +29,15 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
   const [sortKey, setSortKey] = useState<SortKey>(null);
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
-  const [pendingKill, setPendingKill] = useState<ProcessInfo | null>(null);
+  const { pendingKill, groupProtected, requestKillProcess, requestKillGroup, confirmKill, cancelKill } =
+    useProcessKill(snapshot);
+  const { widths, begin: onResizeStart, reset: onResizeReset } = useColumnWidths();
 
   const { rows, totals } = useMemo(
     () =>
       buildRows({
         processes: snapshot.processes,
         groups: snapshot.groups,
-        history,
         mode,
         ppmOnly,
         query,
@@ -83,11 +45,11 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
         sortDir,
         expanded,
       }),
-    [snapshot.processes, snapshot.groups, history, mode, ppmOnly, query, sortKey, sortDir, expanded],
+    [snapshot.processes, snapshot.groups, mode, ppmOnly, query, sortKey, sortDir, expanded],
   );
 
   const columns = snapshot.processColumns ?? NO_OPTIONAL_COLUMNS;
-  const grid = useMemo(() => buildProcessGrid(columns, sortKey), [columns, sortKey]);
+  const grid = useMemo(() => buildProcessGrid(columns, sortKey, widths), [columns, sortKey, widths]);
   const gpuUtilPercent = snapshot.system.gpus[0]?.utilPercent;
 
   const virtualizer = useVirtualizer({
@@ -115,16 +77,6 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
     });
   }, []);
 
-  const handleConfirmKill = useCallback(async (proc: ProcessInfo, tree: boolean) => {
-    setPendingKill(null);
-    try {
-      await killProcess(buildKillRequest(proc, tree));
-      toast.success(`Ended ${proc.name} (${proc.pid})`);
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : `Failed to end ${proc.name}`);
-    }
-  }, []);
-
   // `@container`: the trend/age track is toggled on the table's own width, not the
   // viewport — a floating window is routinely narrower than the screen it sits on.
   // `gridCssVars` sets `--sysmon-grid-n`/`--sysmon-grid-w` once here; CSS custom
@@ -143,7 +95,13 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
         onPpmOnlyChange={setPpmOnly}
         onQueryChange={setQuery}
       />
-      <ProcessTableHeader sortKey={sortKey} sortDir={sortDir} grid={grid} onSort={handleSort} />
+      <ProcessTableHeader
+        sortKey={sortKey}
+        sortDir={sortDir}
+        grid={grid}
+        onSort={handleSort}
+        resize={{ onResizeStart, onResizeReset }}
+      />
       <div ref={parentRef} className="flex-1 min-h-0 overflow-y-auto">
         <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
           {virtualizer.getVirtualItems().map((item) => {
@@ -164,12 +122,13 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
                   <ProcessGroupRow
                     group={row.group}
                     expanded={row.expanded}
-                    spark={row.spark}
                     grid={grid}
+                    killProtected={groupProtected.get(row.group.key) ?? true}
                     onToggle={handleToggleGroup}
+                    onKillClick={requestKillGroup}
                   />
                 ) : (
-                  <ProcessRow proc={row.proc} indent={row.indent} grid={grid} onKillClick={setPendingKill} />
+                  <ProcessRow proc={row.proc} indent={row.indent} grid={grid} onKillClick={requestKillProcess} />
                 )}
               </div>
             );
@@ -178,9 +137,9 @@ export function ProcessTable({ snapshot, history }: ProcessTableProps) {
       </div>
       <ProcessTableFooter totals={totals} grid={grid} gpuUtilPercent={gpuUtilPercent} />
       <KillConfirmDialog
-        process={pendingKill}
-        onConfirm={handleConfirmKill}
-        onCancel={() => setPendingKill(null)}
+        target={pendingKill}
+        onConfirm={confirmKill}
+        onCancel={cancelKill}
       />
     </div>
   );