@hienlh/ppm 0.18.8 → 0.18.9

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 };