@hienlh/ppm 0.18.7 → 0.18.9

package/src/services/resource-monitor-utils.ts

@@ -1,141 +0,0 @@
-/**
- * Pure utility functions for resource monitoring:
- * ps output parsing, process tree building, and categorization.
- */
-
-import type { ProcessEntry, ResourceGroup } from "./resource-monitor.service.ts";
-
-// ── Categorization patterns ────────────────────────────────────────────
-
-const CATEGORY_PATTERNS: [ResourceGroup["type"], RegExp][] = [
-  ["terminal", /^(bash|zsh|sh|fish|csh|tcsh|dash|ksh|pwsh|powershell)$/i],
-  ["ai-tool", /^(claude|anthropic)/i],
-  ["build", /^(node|bun|tsc|vite|webpack|esbuild|turbo|rollup|swc)$/i],
-];
-
-function categorize(cmd: string): ResourceGroup["type"] {
-  // Check full command for well-known AI tool paths before extracting basename
-  if (/claude-agent-sdk|@anthropic-ai\/claude/.test(cmd)) return "ai-tool";
-  const basename = cmd.split("/").pop()?.split(" ")[0] ?? cmd;
-  for (const [type, re] of CATEGORY_PATTERNS) {
-    if (re.test(basename)) return type;
-  }
-  return "unknown";
-}
-
-// ── Parser ─────────────────────────────────────────────────────────────
-
-/** Parse `ps -e -o pid,ppid,%cpu,rss,etimes,args` output into structured entries */
-export function parseProcessList(stdout: string): ProcessEntry[] {
-  const lines = stdout.trim().split("\n");
-  if (lines.length < 2) return [];
-
-  const now = Date.now();
-  const entries: ProcessEntry[] = [];
-  for (let i = 1; i < lines.length; i++) {
-    const line = lines[i]?.trim();
-    if (!line) continue;
-    const parts = line.split(/\s+/);
-    if (parts.length < 6) continue;
-
-    const pid = parseInt(parts[0]!, 10);
-    const ppid = parseInt(parts[1]!, 10);
-    const cpu = parseFloat(parts[2]!);
-    const rssKB = parseInt(parts[3]!, 10);
-    const etimes = parseInt(parts[4]!, 10);
-    const command = parts.slice(5).join(" ");
-
-    if (isNaN(pid) || pid === 0 || !command) continue;
-
-    entries.push({
-      pid,
-      ppid,
-      cpu: Math.round(cpu * 10) / 10,
-      ramMB: Math.round((rssKB / 1024) * 10) / 10,
-      startedAt: isNaN(etimes) ? now : now - etimes * 1000,
-      command,
-    });
-  }
-  return entries;
-}
-
-// ── Tree builder ───────────────────────────────────────────────────────
-
-/** Build flat list of all descendants of rootPid via ppid traversal */
-export function buildTree(entries: ProcessEntry[], rootPid: number): ProcessEntry[] {
-  const childMap = new Map<number, ProcessEntry[]>();
-  for (const e of entries) {
-    const list = childMap.get(e.ppid) ?? [];
-    list.push(e);
-    childMap.set(e.ppid, list);
-  }
-
-  const result: ProcessEntry[] = [];
-  const queue = [rootPid];
-  while (queue.length > 0) {
-    const pid = queue.shift()!;
-    const children = childMap.get(pid) ?? [];
-    for (const child of children) {
-      result.push(child);
-      queue.push(child.pid);
-    }
-  }
-  return result;
-}
-
-// ── Grouping ───────────────────────────────────────────────────────────
-
-const TYPE_LABELS: Record<ResourceGroup["type"], string> = {
-  server: "PPM Server",
-  terminal: "Terminals",
-  "ai-tool": "AI Tools",
-  build: "Build Tools",
-  unknown: "Other",
-};
-
-/** Group processes into resource groups by category */
-export function groupProcesses(
-  serverEntry: ProcessEntry | undefined,
-  children: ProcessEntry[],
-  allEntries: ProcessEntry[] = [],
-): ResourceGroup[] {
-  const groups: ResourceGroup[] = [];
-
-  if (serverEntry) {
-    groups.push({
-      type: "server",
-      label: "PPM Server",
-      cpu: serverEntry.cpu,
-      ramMB: serverEntry.ramMB,
-      processes: [{ pid: serverEntry.pid, cpu: serverEntry.cpu, ramMB: serverEntry.ramMB, startedAt: serverEntry.startedAt, command: serverEntry.command }],
-    });
-  }
-
-  // Include external AI tool processes not in PPM's process tree (e.g. Claude Code sessions)
-  const ppmPids = new Set([serverEntry?.pid, ...children.map((c) => c.pid)].filter(Boolean));
-  const externalAiProcs = allEntries.filter(
-    (e) => !ppmPids.has(e.pid) && categorize(e.command) === "ai-tool",
-  );
-
-  const buckets = new Map<ResourceGroup["type"], ProcessEntry[]>();
-  for (const child of [...children, ...externalAiProcs]) {
-    const type = categorize(child.command);
-    const list = buckets.get(type) ?? [];
-    list.push(child);
-    buckets.set(type, list);
-  }
-
-  for (const type of ["terminal", "ai-tool", "build", "unknown"] as const) {
-    const procs = buckets.get(type);
-    if (!procs?.length) continue;
-    groups.push({
-      type,
-      label: TYPE_LABELS[type],
-      cpu: Math.round(procs.reduce((s, p) => s + p.cpu, 0) * 10) / 10,
-      ramMB: Math.round(procs.reduce((s, p) => s + p.ramMB, 0) * 10) / 10,
-      processes: procs.map((p) => ({ pid: p.pid, cpu: p.cpu, ramMB: p.ramMB, startedAt: p.startedAt, command: p.command })),
-    });
-  }
-
-  return groups;
-}

package/src/services/resource-monitor.service.ts

@@ -1,147 +0,0 @@
-/**
- * Resource Monitor Service — polls `ps` to track PPM process tree,
- * categorizes processes, and maintains a ring buffer of snapshots.
- * Lazy polling: only active when SSE subscribers exist.
- */
-
-import { parseProcessList, buildTree, groupProcesses } from "./resource-monitor-utils.ts";
-import { readProcTable } from "./proc-table-linux.ts";
-
-// ── Types ──────────────────────────────────────────────────────────────
-
-export interface ProcessEntry {
-  pid: number;
-  ppid: number;
-  cpu: number;
-  ramMB: number;
-  startedAt: number;
-  command: string;
-}
-
-export interface ResourceGroup {
-  type: "server" | "terminal" | "ai-tool" | "build" | "unknown";
-  label: string;
-  cpu: number;
-  ramMB: number;
-  processes: Omit<ProcessEntry, "ppid">[];
-}
-
-export interface ResourceSnapshot {
-  timestamp: number;
-  server: { pid: number; cpu: number; ramMB: number };
-  total: { cpu: number; ramMB: number; processCount: number };
-  groups: ResourceGroup[];
-}
-
-type SnapshotCallback = (snapshot: ResourceSnapshot) => void;
-
-// ── Service ────────────────────────────────────────────────────────────
-
-const RING_BUFFER_MAX = 600; // 30 min at 3s interval
-const POLL_INTERVAL = 3000;
-
-class ResourceMonitorService {
-  private ringBuffer: ResourceSnapshot[] = [];
-  private subscribers = new Set<SnapshotCallback>();
-  private timer: ReturnType<typeof setInterval> | null = null;
-
-  subscribe(cb: SnapshotCallback) {
-    this.subscribers.add(cb);
-    if (this.subscribers.size === 1) this.startPolling();
-  }
-
-  unsubscribe(cb: SnapshotCallback) {
-    this.subscribers.delete(cb);
-    if (this.subscribers.size === 0) this.stopPolling();
-  }
-
-  getLatest(): ResourceSnapshot | null {
-    return this.ringBuffer.at(-1) ?? null;
-  }
-
-  getHistory(): ResourceSnapshot[] {
-    return this.ringBuffer;
-  }
-
-  private startPolling() {
-    if (this.timer) return;
-    if (process.platform === "win32") return; // ps not available on Windows
-    this.poll(); // immediate first poll
-    this.timer = setInterval(() => this.poll(), POLL_INTERVAL);
-  }
-
-  private stopPolling() {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
-
-  /**
-   * Prefer `/proc` and fall back to `ps`. `ps` is not installed on slim Linux
-   * images, and the old code let the failed spawn surface as an empty process
-   * list — the resource panel just showed zeros with no hint why.
-   */
-  private async listProcesses(): Promise<ProcessEntry[]> {
-    const table = readProcTable();
-    if (table) {
-      const now = Date.now();
-      return table
-        .filter((p) => p.pid !== 0 && p.args)
-        .map((p) => ({
-          pid: p.pid,
-          ppid: p.ppid,
-          cpu: Math.round(p.cpuPercent * 10) / 10,
-          ramMB: Math.round((p.rssKB / 1024) * 10) / 10,
-          startedAt: Math.min(p.startedAtMs, now),
-          command: p.args,
-        }));
-    }
-
-    const proc = Bun.spawn({
-      cmd: ["ps", "-e", "-o", "pid,ppid,%cpu,rss,etimes,args"],
-      stdout: "pipe",
-      stderr: "ignore",
-    });
-    const stdout = await new Response(proc.stdout).text();
-    await proc.exited;
-    return parseProcessList(stdout);
-  }
-
-  private async poll() {
-    try {
-      const entries = await this.listProcesses();
-      const rootPid = process.pid;
-      const serverEntry = entries.find((e) => e.pid === rootPid);
-      const children = buildTree(entries, rootPid);
-      const groups = groupProcesses(serverEntry, children, entries);
-
-      const allProcs = serverEntry ? [serverEntry, ...children] : children;
-      const snapshot: ResourceSnapshot = {
-        timestamp: Date.now(),
-        server: serverEntry
-          ? { pid: serverEntry.pid, cpu: serverEntry.cpu, ramMB: serverEntry.ramMB }
-          : { pid: rootPid, cpu: 0, ramMB: 0 },
-        total: {
-          cpu: Math.round(allProcs.reduce((s, p) => s + p.cpu, 0) * 10) / 10,
-          ramMB: Math.round(allProcs.reduce((s, p) => s + p.ramMB, 0) * 10) / 10,
-          processCount: allProcs.length,
-        },
-        groups,
-      };
-
-      this.ringBuffer.push(snapshot);
-      if (this.ringBuffer.length > RING_BUFFER_MAX) {
-        this.ringBuffer.shift();
-      }
-
-      for (const cb of this.subscribers) {
-        try { cb(snapshot); } catch {}
-      }
-    } catch (err) {
-      console.error("[ResourceMonitor] poll error:", err);
-    }
-  }
-}
-
-export const resourceMonitor = new ResourceMonitorService();

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

@@ -1,153 +0,0 @@
-import { memo, useMemo } from "react";
-import { ChevronRight, ChevronDown, HelpCircle, X, ArrowUp, ArrowDown } from "lucide-react";
-import type { ResourceGroup } from "@/hooks/use-resource-monitor";
-import { SparklineCanvas } from "./sparkline-canvas";
-import { cn } from "@/lib/utils";
-
-export type SortKey = "cpu" | "ram" | null;
-export type SortDir = "asc" | "desc";
-
-function cpuColor(cpu: number) {
-  if (cpu > 80) return "text-error";
-  if (cpu > 50) return "text-warning";
-  return "text-success";
-}
-
-function formatRam(mb: number) {
-  return mb < 1024 ? `${mb.toFixed(0)} MB` : `${(mb / 1024).toFixed(1)} GB`;
-}
-
-function formatAge(startedAt?: number) {
-  if (!startedAt) return "";
-  const secs = Math.round((Date.now() - startedAt) / 1000);
-  if (secs < 60) return `${secs}s`;
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ${mins % 60}m`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ${hrs % 24}h`;
-}
-
-export interface GroupRowProps {
-  group: ResourceGroup;
-  Icon: React.ElementType;
-  isExpanded: boolean;
-  sparkData: number[];
-  isMobile: boolean;
-  sortKey: SortKey;
-  sortDir: SortDir;
-  onToggle: () => void;
-  onKill: (pid: number) => void;
-}
-
-export const GroupRow = memo(function GroupRow({
-  group, Icon, isExpanded, sparkData, isMobile, sortKey, sortDir, onToggle, onKill,
-}: GroupRowProps) {
-  const Chevron = isExpanded ? ChevronDown : ChevronRight;
-
-  const sortedProcesses = useMemo(() => {
-    if (!sortKey) return group.processes;
-    return [...group.processes].sort((a, b) => {
-      const av = sortKey === "cpu" ? a.cpu : a.ramMB;
-      const bv = sortKey === "cpu" ? b.cpu : b.ramMB;
-      return sortDir === "asc" ? av - bv : bv - av;
-    });
-  }, [group.processes, sortKey, sortDir]);
-
-  return (
-    <>
-      <tr
-        className="hover:bg-surface-hover cursor-pointer transition-colors"
-        onClick={onToggle}
-      >
-        <td className="py-1.5 px-3">
-          <div className="flex items-center gap-1.5">
-            <Chevron className="size-3 text-text-subtle shrink-0" />
-            <Icon className="size-3.5 text-text-secondary shrink-0" />
-            <span className="truncate">{group.label}</span>
-            <span className="text-text-subtle">({group.processes.length})</span>
-          </div>
-        </td>
-        <td className={cn("text-right py-1.5 px-2", cpuColor(group.cpu))}>
-          {group.cpu.toFixed(1)}%
-        </td>
-        <td className="text-right py-1.5 px-2 text-text-secondary">
-          {formatRam(group.ramMB)}
-        </td>
-        {!isMobile && (
-          <td className="py-1.5 px-2">
-            {sparkData.length > 1 && (
-              <SparklineCanvas data={sparkData} width={120} height={20} />
-            )}
-          </td>
-        )}
-      </tr>
-      {isExpanded && sortedProcesses.map((proc) => (
-        <tr key={proc.pid} className="text-text-subtle group/proc hover:bg-surface-hover transition-colors">
-          <td className="py-1 px-3 pl-10">
-            <div className="flex items-start gap-1.5">
-              <span className="text-text-subtle shrink-0">{proc.pid}</span>
-              <span className="break-all text-text-secondary" title={proc.command}>
-                {proc.command}
-              </span>
-            </div>
-          </td>
-          <td className="text-right py-1 px-2 align-top">{proc.cpu.toFixed(1)}%</td>
-          <td className="text-right py-1 px-2 align-top">{formatRam(proc.ramMB)}</td>
-          {!isMobile && (
-            <td className="align-top py-1 px-2">
-              <div className="flex items-center justify-between gap-1">
-                <span
-                  className="text-text-subtle"
-                  title={proc.startedAt ? new Date(proc.startedAt).toLocaleString() : ""}
-                >
-                  {formatAge(proc.startedAt)}
-                </span>
-                <button
-                  onClick={(e) => { e.stopPropagation(); onKill(proc.pid); }}
-                  className="opacity-0 group-hover/proc:opacity-100 p-0.5 rounded hover:bg-error/20 hover:text-error transition-all"
-                  title={`End process ${proc.pid}`}
-                >
-                  <X className="size-3" />
-                </button>
-              </div>
-            </td>
-          )}
-        </tr>
-      ))}
-    </>
-  );
-});
-
-// ── Sortable column header ─────────────────────────────────────────────
-
-export function SortableHeader({ label, field, activeKey, activeDir, onClick, className }: {
-  label: string;
-  field: "cpu" | "ram";
-  activeKey: SortKey;
-  activeDir: SortDir;
-  onClick: (field: "cpu" | "ram") => void;
-  className?: string;
-}) {
-  const isActive = activeKey === field;
-  const Arrow = isActive ? (activeDir === "asc" ? ArrowUp : ArrowDown) : null;
-
-  return (
-    <th
-      className={cn(
-        "text-right py-1.5 px-2 font-medium cursor-pointer select-none hover:text-text-primary transition-colors",
-        isActive && "text-text-primary",
-        className,
-      )}
-      onClick={() => onClick(field)}
-    >
-      <div className="flex items-center justify-end gap-0.5">
-        <span>{label}</span>
-        {Arrow && <Arrow className="size-3" />}
-      </div>
-    </th>
-  );
-}
-
-export { cpuColor, formatRam };