@hienlh/ppm 0.18.7 → 0.18.9

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

@@ -0,0 +1,187 @@
+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";
+
+/** Older cached bundles/snapshots (mid-rollout) predate `processColumns` — default
+ *  every optional column off rather than let a missing field throw. */
+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) {
+  const isMobile = useIsMobile();
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const [mode, setMode] = useState<"grouped" | "flat">("grouped");
+  const [ppmOnly, setPpmOnly] = useState(false);
+  const [query, setQuery] = useState("");
+  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 { rows, totals } = useMemo(
+    () =>
+      buildRows({
+        processes: snapshot.processes,
+        groups: snapshot.groups,
+        history,
+        mode,
+        ppmOnly,
+        query,
+        sortKey,
+        sortDir,
+        expanded,
+      }),
+    [snapshot.processes, snapshot.groups, history, mode, ppmOnly, query, sortKey, sortDir, expanded],
+  );
+
+  const columns = snapshot.processColumns ?? NO_OPTIONAL_COLUMNS;
+  const grid = useMemo(() => buildProcessGrid(columns, sortKey), [columns, sortKey]);
+  const gpuUtilPercent = snapshot.system.gpus[0]?.utilPercent;
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => (isMobile ? 44 : 28),
+    overscan: 12,
+  });
+
+  const handleSort = useCallback(
+    (field: Exclude<SortKey, null>) => {
+      const [nextKey, nextDir] = toggleSort(sortKey, sortDir, field);
+      setSortKey(nextKey);
+      setSortDir(nextDir);
+    },
+    [sortKey, sortDir],
+  );
+
+  const handleToggleGroup = useCallback((key: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  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
+  // properties inherit to every row/header/footer below without re-passing style.
+  return (
+    <div
+      className="h-full flex flex-col min-h-0 @container"
+      style={gridCssVars(grid)}
+      data-testid="sysmon-processes"
+      data-row-count={rows.length}
+    >
+      <ProcessTableToolbar
+        mode={mode}
+        onModeChange={setMode}
+        ppmOnly={ppmOnly}
+        onPpmOnlyChange={setPpmOnly}
+        onQueryChange={setQuery}
+      />
+      <ProcessTableHeader sortKey={sortKey} sortDir={sortDir} grid={grid} onSort={handleSort} />
+      <div ref={parentRef} className="flex-1 min-h-0 overflow-y-auto">
+        <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
+          {virtualizer.getVirtualItems().map((item) => {
+            const row = rows[item.index];
+            if (!row) return null;
+            return (
+              <div
+                key={row.kind === "group" ? row.group.key : `p:${row.proc.pid}`}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  transform: `translateY(${item.start}px)`,
+                }}
+              >
+                {row.kind === "group" ? (
+                  <ProcessGroupRow
+                    group={row.group}
+                    expanded={row.expanded}
+                    spark={row.spark}
+                    grid={grid}
+                    onToggle={handleToggleGroup}
+                  />
+                ) : (
+                  <ProcessRow proc={row.proc} indent={row.indent} grid={grid} onKillClick={setPendingKill} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <ProcessTableFooter totals={totals} grid={grid} gpuUtilPercent={gpuUtilPercent} />
+      <KillConfirmDialog
+        process={pendingKill}
+        onConfirm={handleConfirmKill}
+        onCancel={() => setPendingKill(null)}
+      />
+    </div>
+  );
+}

package/src/web/components/system/resolve-open-system-monitor-action.ts

@@ -0,0 +1,29 @@
+/** Pure viewport-routing decision for the System Monitor open-hook — split out from
+ *  `use-open-system-monitor.ts` so it has zero runtime imports (only a type-only one,
+ *  fully erased) and is unit-testable without mounting zustand stores. */
+import type { Tab } from "@/stores/tab-store";
+
+export type OpenSystemMonitorAction =
+  | { kind: "tab"; tab: Omit<Tab, "id"> }
+  | { kind: "window" }
+  | { kind: "focus"; id: string };
+
+/**
+ * There is exactly one machine, so unlike `"explorer"`/`"team-member"` (legitimately
+ * multi-instance — different payload, different folder/teammate), a second
+ * `"system-monitor"` window is never a distinct instance, only a duplicate. When one
+ * is already open, focus it instead of spawning another.
+ */
+export function resolveOpenSystemMonitorAction(
+  isMobile: boolean,
+  existingWindowId: string | null,
+): OpenSystemMonitorAction {
+  if (isMobile) {
+    return {
+      kind: "tab",
+      tab: { type: "system-monitor", title: "System Monitor", projectId: null, closable: true },
+    };
+  }
+  if (existingWindowId) return { kind: "focus", id: existingWindowId };
+  return { kind: "window" };
+}

package/src/web/components/system/resource-status-bar.tsx

@@ -1,9 +1,9 @@
 import { memo } from "react";
 import { Cpu } from "lucide-react";
 import { useResourceMonitor } from "@/hooks/use-resource-monitor";
-import { useTabStore } from "@/stores/tab-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
+import { useOpenSystemMonitor } from "./use-open-system-monitor";
 
 function cpuColor(cpu: number) {
   if (cpu > 80) return "text-error";
@@ -11,26 +11,21 @@ function cpuColor(cpu: number) {
   return "text-success";
 }
 
-/** `compact` renders inline for the 22px status bar (no full-width button, CPU+MEM only). */
+/** `compact` renders inline for the 22px status bar (no full-width button, CPU+MEM only).
+ *  Stays on the light SSE tier — never opts into `{processes:true}` — so it never pays
+ *  for the full collector just to render two numbers. */
 export const ResourceStatusBar = memo(function ResourceStatusBar({ compact = false }: { compact?: boolean }) {
   const { latest, isConnected } = useResourceMonitor();
-  const openTab = useTabStore((s) => s.openTab);
+  const openSystemMonitor = useOpenSystemMonitor();
   const isMobile = useIsMobile();
 
-  const handleClick = () => {
-    openTab({
-      type: "system-monitor",
-      title: "System Monitor",
-      projectId: null,
-      closable: true,
-    });
-  };
-
   if (!isConnected || !latest) {
     if (compact) return null; // stay silent in the status bar until connected
     return (
       <button
-        onClick={handleClick}
+        onClick={openSystemMonitor}
+        data-testid="status-bar-resources"
+        aria-label="Open System Monitor"
         className="flex items-center gap-1.5 px-2 py-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors w-full"
       >
         <Cpu className="size-3 opacity-50" />
@@ -39,14 +34,18 @@ export const ResourceStatusBar = memo(function ResourceStatusBar({ compact = fal
     );
   }
 
-  const { cpu, ramMB, processCount } = latest.total;
+  const cpu = latest.system.cpu.total;
+  const ramMB = latest.system.mem.usedMB;
+  const processCount = latest.system.processCount;
   const mem = ramMB < 1024 ? `${ramMB.toFixed(0)}M` : `${(ramMB / 1024).toFixed(1)}G`;
 
   if (compact) {
     // Inline segment for the 22px status bar: CPU % · MEM (handoff B2 right cluster).
     return (
       <button
-        onClick={handleClick}
+        onClick={openSystemMonitor}
+        data-testid="status-bar-resources"
+        aria-label="Open System Monitor"
         className="flex items-center gap-2 px-1 rounded-sm hover:bg-accent/15 transition-colors cursor-pointer"
         title="Open System Monitor"
       >
@@ -58,7 +57,9 @@ export const ResourceStatusBar = memo(function ResourceStatusBar({ compact = fal
 
   return (
     <button
-      onClick={handleClick}
+      onClick={openSystemMonitor}
+      data-testid="status-bar-resources"
+      aria-label="Open System Monitor"
       className="flex items-center gap-1.5 px-2 py-1 text-[10px] hover:bg-surface-hover transition-colors w-full cursor-pointer"
       title="Open System Monitor"
     >

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

@@ -0,0 +1,65 @@
+import { ArrowUp, ArrowDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { SortDir, SortKey } from "../../../types/system-metrics";
+
+/** 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 function SortableHeader({
+  label,
+  field,
+  activeKey,
+  activeDir,
+  onClick,
+  align = "right",
+  testId,
+  className,
+}: {
+  label: string;
+  field: Exclude<SortKey, null>;
+  activeKey: SortKey;
+  activeDir: SortDir;
+  onClick: (field: Exclude<SortKey, null>) => void;
+  /** Text/justify alignment — the "Process" column is left-aligned over the name
+   *  cell, every numeric column stays right-aligned. */
+  align?: "left" | "right";
+  testId?: string;
+  /** 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;
+}) {
+  const isActive = activeKey === field;
+  const Arrow = isActive ? (activeDir === "asc" ? ArrowUp : ArrowDown) : null;
+  const ariaSort = isActive ? (activeDir === "asc" ? "ascending" : "descending") : "none";
+
+  return (
+    <div
+      role="columnheader"
+      aria-sort={ariaSort}
+      className={cn(
+        "py-1.5 px-2 font-medium select-none",
+        align === "left" ? "text-left" : "text-right",
+        className,
+      )}
+    >
+      {/* The test id sits on the interactive element: a synthetic `click()` on the
+          wrapper never reaches the button (events bubble up, not down), so a harness
+          targeting the div would silently not sort. */}
+      <button
+        type="button"
+        data-testid={testId}
+        onClick={() => onClick(field)}
+        className={cn(
+          "flex items-center gap-0.5 w-full min-h-11 md:min-h-0 cursor-pointer hover:text-text-primary transition-colors",
+          align === "left" ? "justify-start" : "justify-end",
+          isActive && "text-text-primary",
+        )}
+      >
+        <span>{label}</span>
+        {Arrow && <Arrow className="size-3" />}
+      </button>
+    </div>
+  );
+}

package/src/web/components/system/sparkline-canvas.tsx

@@ -1,10 +1,14 @@
 import { useRef, useEffect, memo } from "react";
+import { resolveScaleMax, resolveCssColor } from "./chart-scale";
 
 interface SparklineCanvasProps {
   data: number[];
   width?: number;
   height?: number;
   color?: string;
+  /** Fixed scale ceiling (e.g. 100 for a percentage axis). Omitted = autoscale to
+   *  the max of the visible window, same as before. */
+  maxValue?: number;
 }
 
 export const SparklineCanvas = memo(function SparklineCanvas({
@@ -12,16 +16,11 @@ export const SparklineCanvas = memo(function SparklineCanvas({
   width = 120,
   height = 24,
   color = "var(--color-primary)",
+  maxValue,
 }: SparklineCanvasProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const lastDrawRef = useRef(0);
 
   useEffect(() => {
-    const now = Date.now();
-    // Throttle redraws to 1fps
-    if (now - lastDrawRef.current < 1000) return;
-    lastDrawRef.current = now;
-
     const canvas = canvasRef.current;
     if (!canvas || data.length < 2) return;
 
@@ -35,13 +34,13 @@ export const SparklineCanvas = memo(function SparklineCanvas({
 
     ctx.clearRect(0, 0, width, height);
 
-    const max = Math.max(...data, 1);
+    const max = resolveScaleMax(data, maxValue);
     const stepX = width / (data.length - 1);
     const padding = 2;
     const drawH = height - padding * 2;
 
     ctx.beginPath();
-    ctx.strokeStyle = color;
+    ctx.strokeStyle = resolveCssColor(color, getComputedStyle(canvas));
     ctx.lineWidth = 1.5;
     ctx.lineJoin = "round";
 
@@ -52,7 +51,7 @@ export const SparklineCanvas = memo(function SparklineCanvas({
       else ctx.lineTo(x, y);
     }
     ctx.stroke();
-  }, [data, width, height, color]);
+  }, [data, width, height, color, maxValue]);
 
   return (
     <canvas

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

@@ -0,0 +1,146 @@
+/**
+ * Shared shell for the System Monitor: connection indicator, warning strip, and the
+ * Overview/Processes sub-tabs. Rendered identically by the desktop window and the
+ * mobile tab, so this file and the panels beneath it are written once for both hosts.
+ */
+import { lazy, memo, Suspense, useState } from "react";
+import { Wifi, WifiOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useResourceMonitor } from "@/hooks/use-resource-monitor";
+
+const OverviewPanel = lazy(() =>
+  import("./overview-panel").then((m) => ({ default: m.OverviewPanel })),
+);
+const ProcessTable = lazy(() =>
+  import("./process-table").then((m) => ({ default: m.ProcessTable })),
+);
+
+type SysMonTab = "overview" | "processes";
+
+export interface SystemMonitorBodyProps {
+  initialTab?: SysMonTab;
+  onTabChange?: (tab: SysMonTab) => void;
+  /** "window" (desktop floating window) suppresses the inner "System Monitor" title —
+   *  the window's own titlebar already shows it — and moves the connection indicator
+   *  into the tab strip instead. "tab" (default; the mobile route, which has no
+   *  titlebar) keeps the full header. */
+  variant?: "window" | "tab";
+}
+
+function ConnectionIndicator({
+  isConnected,
+  elapsed,
+  tickCount,
+}: {
+  isConnected: boolean;
+  elapsed: number;
+  tickCount: number;
+}) {
+  return (
+    <div
+      className="flex items-center gap-1.5 text-[10px] text-text-subtle"
+      data-testid="sysmon-connection"
+      data-tick-count={tickCount}
+    >
+      {isConnected ? (
+        <Wifi className="size-3 text-success" />
+      ) : (
+        <WifiOff className="size-3 text-error" />
+      )}
+      <span>{isConnected ? `Updated ${elapsed}s ago` : "Disconnected"}</span>
+    </div>
+  );
+}
+
+export const SystemMonitorBody = memo(function SystemMonitorBody({
+  initialTab = "overview",
+  onTabChange,
+  variant = "tab",
+}: SystemMonitorBodyProps) {
+  const { latest, history, isConnected, tickCount } = useResourceMonitor({ processes: true });
+  const [tab, setTab] = useState<SysMonTab>(initialTab);
+
+  const selectTab = (next: SysMonTab) => {
+    setTab(next);
+    onTabChange?.(next);
+  };
+
+  const elapsed = latest ? Math.round((Date.now() - latest.ts) / 1000) : 0;
+  const warnings = latest?.warnings ?? [];
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden" data-testid="system-monitor-window">
+      {variant === "tab" && (
+        <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
+          <h2 className="text-sm font-medium">System Monitor</h2>
+          <ConnectionIndicator isConnected={isConnected} elapsed={elapsed} tickCount={tickCount} />
+        </div>
+      )}
+
+      {warnings.length > 0 && (
+        <div
+          className="px-3 py-1.5 text-[11px] text-warning bg-warning/10 border-b border-border shrink-0 space-y-0.5"
+          data-testid="sysmon-warnings"
+        >
+          {warnings.map((w, i) => (
+            <div key={i}>{w}</div>
+          ))}
+        </div>
+      )}
+
+      {/* Sub-tab switcher */}
+      <div className="flex items-center border-b border-border shrink-0" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "overview"}
+          data-testid="sysmon-tab-overview"
+          onClick={() => selectTab("overview")}
+          className={cn(
+            "flex-1 md:flex-none min-h-11 px-4 text-sm font-medium transition-colors",
+            tab === "overview"
+              ? "text-text-primary border-b-2 border-primary -mb-px"
+              : "text-text-subtle hover:text-text-secondary",
+          )}
+        >
+          Overview
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "processes"}
+          data-testid="sysmon-tab-processes"
+          onClick={() => selectTab("processes")}
+          className={cn(
+            "flex-1 md:flex-none min-h-11 px-4 text-sm font-medium transition-colors",
+            tab === "processes"
+              ? "text-text-primary border-b-2 border-primary -mb-px"
+              : "text-text-subtle hover:text-text-secondary",
+          )}
+        >
+          Processes
+        </button>
+        {variant === "window" && (
+          <div className="ml-auto pr-3">
+            <ConnectionIndicator isConnected={isConnected} elapsed={elapsed} tickCount={tickCount} />
+          </div>
+        )}
+      </div>
+
+      {/* Body — scrolls internally, never the page */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <Suspense fallback={<div className="p-4 text-xs text-text-subtle">Loading…</div>}>
+          {!latest ? (
+            <div className="flex items-center justify-center h-full text-text-subtle text-sm p-4">
+              {isConnected ? "Waiting for data…" : "Connecting to resource monitor…"}
+            </div>
+          ) : tab === "overview" ? (
+            <OverviewPanel system={latest.system} history={history} />
+          ) : (
+            <ProcessTable snapshot={latest} history={history} />
+          )}
+        </Suspense>
+      </div>
+    </div>
+  );
+});