@hienlh/ppm 0.18.9 → 0.18.10

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

@@ -1,12 +1,18 @@
 import { ArrowUp, ArrowDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { SortDir, SortKey } from "../../../types/system-metrics";
+import type { ResizableColumnKey } from "./process-columns-grid";
 
-/** Sortable column header shared by the process table toolbar, salvaged from
- *  the deleted `system-monitor-group-row.tsx`. Renders as a `columnheader` `<div>`,
- *  not a `<th>` — the parent row is a CSS-grid `<div role="row">`, and a `<th>`
- *  inside a non-table ancestor both triggers React's DOM-nesting warning and makes
- *  `aria-sort` meaningless to assistive tech outside an actual table. */
+export interface ColumnResizeHandlers {
+  onResizeStart: (key: ResizableColumnKey, e: { clientX: number; preventDefault: () => void }) => void;
+  onResizeReset: (key: ResizableColumnKey) => void;
+}
+
+/** Sortable column header shared by the process table toolbar. Renders as a
+ *  `columnheader` `<div>`, not a `<th>` — the parent row is a CSS-grid
+ *  `<div role="row">`, and a `<th>` inside a non-table ancestor both triggers React's
+ *  DOM-nesting warning and makes `aria-sort` meaningless to assistive tech outside
+ *  an actual table. */
 export function SortableHeader({
   label,
   field,
@@ -16,6 +22,8 @@ export function SortableHeader({
   align = "right",
   testId,
   className,
+  resizeKey,
+  resize,
 }: {
   label: string;
   field: Exclude<SortKey, null>;
@@ -29,6 +37,9 @@ export function SortableHeader({
   /** Extra classes on the outer `columnheader` — e.g. the `hidden @lg:block`
    *  visibility rule an optional (Disk/GPU/Net) column needs below `@lg`. */
   className?: string;
+  /** Present for fixed-width columns: renders the drag handle on the right edge. */
+  resizeKey?: ResizableColumnKey;
+  resize?: ColumnResizeHandlers;
 }) {
   const isActive = activeKey === field;
   const Arrow = isActive ? (activeDir === "asc" ? ArrowUp : ArrowDown) : null;
@@ -39,7 +50,7 @@ export function SortableHeader({
       role="columnheader"
       aria-sort={ariaSort}
       className={cn(
-        "py-1.5 px-2 font-medium select-none",
+        "relative py-1.5 px-2 font-medium select-none",
         align === "left" ? "text-left" : "text-right",
         className,
       )}
@@ -57,9 +68,23 @@ export function SortableHeader({
           isActive && "text-text-primary",
         )}
       >
-        <span>{label}</span>
-        {Arrow && <Arrow className="size-3" />}
+        <span className="truncate">{label}</span>
+        {Arrow && <Arrow className="size-3 shrink-0" />}
       </button>
+      {/* Drag handle: pointer-only (hidden below `md`, where the table is a
+          single narrow column set and there is nothing worth resizing). Double-click
+          returns the column to its default width. */}
+      {resizeKey && resize && (
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label={`Resize ${label} column`}
+          data-testid={testId ? `${testId}-resize` : undefined}
+          onPointerDown={(e) => resize.onResizeStart(resizeKey, e)}
+          onDoubleClick={() => resize.onResizeReset(resizeKey)}
+          className="hidden md:block absolute top-0 -right-1 h-full w-2 cursor-col-resize hover:bg-primary/40 active:bg-primary/60"
+        />
+      )}
     </div>
   );
 }

package/src/web/components/system/system-monitor-body.tsx

@@ -137,7 +137,7 @@ export const SystemMonitorBody = memo(function SystemMonitorBody({
           ) : tab === "overview" ? (
             <OverviewPanel system={latest.system} history={history} />
           ) : (
-            <ProcessTable snapshot={latest} history={history} />
+            <ProcessTable snapshot={latest} />
           )}
         </Suspense>
       </div>

package/src/web/components/system/use-column-widths.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clampColumnWidth, columnWidthPx, type ColumnWidths, type ResizableColumnKey } from "./process-columns-grid";
+
+/** One entry for the whole app: column widths are a per-device preference, not
+ *  per-window state, so they survive reloads and apply to the mobile tab too. */
+export const COLUMN_WIDTHS_STORAGE_KEY = "ppm-sysmon-col-widths";
+
+function loadWidths(): ColumnWidths {
+  try {
+    const raw = localStorage.getItem(COLUMN_WIDTHS_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const out: ColumnWidths = {};
+    for (const k of ["cpu", "ram", "disk", "gpu", "net"] as ResizableColumnKey[]) {
+      const v = parsed[k];
+      if (typeof v === "number" && Number.isFinite(v)) out[k] = clampColumnWidth(v);
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+function saveWidths(widths: ColumnWidths): void {
+  try {
+    if (Object.keys(widths).length === 0) localStorage.removeItem(COLUMN_WIDTHS_STORAGE_KEY);
+    else localStorage.setItem(COLUMN_WIDTHS_STORAGE_KEY, JSON.stringify(widths));
+  } catch {
+    /* private mode / quota — widths just don't persist */
+  }
+}
+
+/**
+ * Drag-to-resize state for the process table's fixed-width columns.
+ *
+ * `begin(key, event)` is wired to `pointerdown` on a header's right-edge handle;
+ * the drag then follows `pointermove`/`pointerup` on `window`, so the pointer may
+ * leave the handle (or the window body) without dropping the drag. Widths persist
+ * on release, not on every move. `reset(key)` (double-click) returns one column
+ * to its default.
+ */
+export function useColumnWidths() {
+  const [widths, setWidths] = useState<ColumnWidths>(() => (typeof localStorage === "undefined" ? {} : loadWidths()));
+  const drag = useRef<{ key: ResizableColumnKey; startX: number; startWidth: number } | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: PointerEvent) => {
+      const d = drag.current;
+      if (!d) return;
+      const next = clampColumnWidth(d.startWidth + (e.clientX - d.startX));
+      setWidths((prev) => (prev[d.key] === next ? prev : { ...prev, [d.key]: next }));
+    };
+    const onUp = () => {
+      if (!drag.current) return;
+      drag.current = null;
+      document.body.style.cursor = "";
+      setWidths((prev) => {
+        saveWidths(prev);
+        return prev;
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, []);
+
+  const begin = useCallback(
+    (key: ResizableColumnKey, e: { clientX: number; preventDefault: () => void }) => {
+      e.preventDefault(); // no text selection while dragging
+      drag.current = { key, startX: e.clientX, startWidth: columnWidthPx(key, widths) };
+      document.body.style.cursor = "col-resize";
+    },
+    [widths],
+  );
+
+  const reset = useCallback((key: ResizableColumnKey) => {
+    setWidths((prev) => {
+      if (!(key in prev)) return prev;
+      const { [key]: _dropped, ...rest } = prev;
+      saveWidths(rest);
+      return rest;
+    });
+  }, []);
+
+  return { widths, begin, reset };
+}

package/src/web/components/system/use-process-kill.ts

@@ -0,0 +1,100 @@
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { getAuthToken } from "@/lib/api-client";
+import { buildGroupKillRequests, buildKillRequest, isGroupProtected, type KillTarget } from "./build-kill-request";
+import type {
+  KillProcessRequest,
+  KillProcessResult,
+  MetricsSnapshot,
+  ProcessGroup,
+  ProcessInfo,
+} from "../../../types/system-metrics";
+
+/** `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. */
+export 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;
+}
+
+/**
+ * Pending-kill state plus the confirm handler for single processes and whole app
+ * groups. Members are resolved against the CURRENT snapshot at click time, so a
+ * helper that exited since the row was drawn is simply not in the list.
+ */
+export function useProcessKill(snapshot: MetricsSnapshot) {
+  const [pendingKill, setPendingKill] = useState<KillTarget | null>(null);
+
+  const membersOf = useCallback(
+    (group: ProcessGroup): ProcessInfo[] => {
+      const byPid = new Map(snapshot.processes.map((p) => [p.pid, p]));
+      return group.pids.map((pid) => byPid.get(pid)).filter((p): p is ProcessInfo => !!p);
+    },
+    [snapshot.processes],
+  );
+
+  /** group key → true when any member is refused by the guard (button disabled). */
+  const groupProtected = useMemo(
+    () => new Map(snapshot.groups.map((g) => [g.key, isGroupProtected(membersOf(g))])),
+    [snapshot.groups, membersOf],
+  );
+
+  const requestKillProcess = useCallback((proc: ProcessInfo) => setPendingKill({ kind: "process", proc }), []);
+  const requestKillGroup = useCallback(
+    (group: ProcessGroup) => setPendingKill({ kind: "group", group, members: membersOf(group) }),
+    [membersOf],
+  );
+  const cancelKill = useCallback(() => setPendingKill(null), []);
+
+  const confirmKill = useCallback(async (target: KillTarget, tree: boolean) => {
+    setPendingKill(null);
+    if (target.kind === "process") {
+      const { proc } = target;
+      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}`);
+      }
+      return;
+    }
+    // Whole app: one tree kill on the root when it exists, else one per member.
+    // Requests run sequentially so the guard's 403/409 for one member is reported,
+    // not lost in a Promise.all rejection.
+    const { group, members } = target;
+    const failures: string[] = [];
+    for (const req of buildGroupKillRequests(group, members)) {
+      try {
+        await killProcess(req);
+      } catch (e) {
+        failures.push(e instanceof Error ? e.message : `pid ${req.pid}`);
+      }
+    }
+    if (failures.length === 0) toast.success(`Ended ${group.label} (${members.length} processes)`);
+    else toast.error(`${group.label}: ${failures.length} of ${members.length} could not be ended — ${failures[0]}`);
+  }, []);
+
+  return { pendingKill, groupProtected, requestKillProcess, requestKillGroup, confirmKill, cancelKill };
+}

package/src/web/styles/globals.css

@@ -74,13 +74,15 @@
 /*
  * Default token values (Aurora Dark). Present before JS runs so the first
  * paint is correct; apply-theme overrides these on <html> at runtime.
+ * Surfaces stay opaque here for the same reason they are in the theme itself:
+ * a translucent panel lets content bleed through dropdowns and sheets.
  */
 :root {
   --bg: radial-gradient(120% 120% at 0% 0%, #0e1626 0%, #0a0e17 55%, #080b12 100%);
   --bg-solid: #0a0e17;
-  --rail: rgba(255, 255, 255, 0.04);
-  --panel: rgba(255, 255, 255, 0.04);
-  --panel-2: rgba(20, 28, 46, 0.85);
+  --rail: #141820;
+  --panel: #141820;
+  --panel-2: #141c2e;
   --border: rgba(255, 255, 255, 0.12);
   --border-soft: rgba(255, 255, 255, 0.06);
   --text: #eaeefb;

package/src/web/theme/builtin/aurora.ts

@@ -51,16 +51,19 @@ export const auroraLight: PpmTheme = {
   mode: "light",
   swatch: ["#f3f7ff", "#2f6bff", "#7c4dff"],
   syntax: { shikiTheme: "github-light" },
+  // Surfaces are opaque on purpose: translucent panels let underlying content
+  // bleed through dropdowns, sheets and stacked windows and hurt legibility.
+  // Values are the old glass tints pre-blended over bgSolid.
   mobileOverrides: {
-    panel: "rgba(255,255,255,0.82)",
-    panel2: "rgba(255,255,255,0.96)",
+    panel: "#ffffff",
+    panel2: "#ffffff",
   },
   tokens: {
     bg: "radial-gradient(120% 120% at 0% 0%, #f3f7ff 0%, #eef2fb 55%, #e8edf7 100%)",
     bgSolid: "#f3f7ff",
-    rail: "rgba(255,255,255,0.62)",
-    panel: "rgba(255,255,255,0.62)",
-    panel2: "rgba(255,255,255,0.94)",
+    rail: "#fafcff",
+    panel: "#fafcff",
+    panel2: "#ffffff",
     border: "rgba(20,30,60,0.12)",
     borderSoft: "rgba(20,30,60,0.07)",
     text: "#0f1a33",

package/dist/web/assets/format-bytes-Dk7B73B7.js

@@ -1 +0,0 @@
-function e(e,t){return t===void 0?Math.max(...e,1):t}function t(e,t){let n=/^var\((--[\w-]+)\)$/.exec(e.trim());return n&&t.getPropertyValue(n[1]).trim()||e}function n(e){return e<1024?`${e.toFixed(0)} MB`:`${(e/1024).toFixed(1)} GB`}function r(e){if(e<1024)return`${e.toFixed(0)} B/s`;let t=e/1024;if(t<1024)return`${t.toFixed(1)} KB/s`;let n=t/1024;return n<1024?`${n.toFixed(1)} MB/s`:`${(n/1024).toFixed(1)} GB/s`}export{e as i,n,t as r,r as t};