@hienlh/ppm 0.18.8 → 0.18.9

package/src/web/hooks/use-resource-monitor.ts

@@ -1,67 +1,115 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { getAuthToken } from "@/lib/api-client";
+import type { MetricsHistoryPoint, MetricsSnapshot } from "../../types/system-metrics";
+import { METRICS_HISTORY_MAX, METRICS_PING_INTERVAL_MS } from "../../types/system-metrics";
+import { GROUPS_RETENTION, pingLease, deleteLease, withGroupsRetention } from "./resource-monitor-lease";
 
-// ── Types (mirrors backend) ────────────────────────────────────────────
-
-export interface ResourceGroup {
-  type: "server" | "terminal" | "ai-tool" | "build" | "unknown";
-  label: string;
-  cpu: number;
-  ramMB: number;
-  processes: { pid: number; cpu: number; ramMB: number; startedAt?: number; command: string }[];
-}
-
-export interface ResourceSnapshot {
-  timestamp: number;
-  server: { pid: number; cpu: number; ramMB: number };
-  total: { cpu: number; ramMB: number; processCount: number };
-  groups: ResourceGroup[];
-}
-
-const HISTORY_MAX = 600;
+export { authHeaders, pingLease, deleteLease, withGroupsRetention } from "./resource-monitor-lease";
 
 // ── Shared singleton state (multiple components share one EventSource) ─
+//
+// Two ref-counts drive one connection: `refCount` (anyone watching at all) and
+// `processesRefCount` (anyone who opted into the full tier). The *desired* URL is
+// derived from whether the latter is > 0; a mount/unmount that doesn't change that
+// desire is a no-op reconnect-wise — only a change to the desired URL tears down and
+// reconnects the EventSource.
 
 let sharedEs: EventSource | null = null;
 let refCount = 0;
-let sharedLatest: ResourceSnapshot | null = null;
-let sharedHistory: ResourceSnapshot[] = [];
+let processesRefCount = 0;
+let connectedProcesses = false; // which URL the live sharedEs was opened with
+let sharedLatest: MetricsSnapshot | null = null;
+let sharedHistory: MetricsHistoryPoint[] = [];
 let sharedConnected = false;
+let sharedSid: string | null = null;
+let sharedTickCount = 0; // snapshot frames received since the current connection opened
+let pingTimer: ReturnType<typeof setInterval> | null = null;
 const listeners = new Set<() => void>();
 
 function notify() {
   for (const cb of listeners) cb();
 }
 
-function connect() {
-  if (sharedEs) return;
+function stopLease() {
+  if (pingTimer) {
+    clearInterval(pingTimer);
+    pingTimer = null;
+  }
+  const sid = sharedSid;
+  sharedSid = null;
+  if (sid) void deleteLease(sid);
+}
+
+function startLease(sid: string) {
+  sharedSid = sid;
+  if (pingTimer) clearInterval(pingTimer);
+  pingTimer = setInterval(() => {
+    const currentSid = sharedSid;
+    if (currentSid) void pingLease(currentSid);
+  }, METRICS_PING_INTERVAL_MS);
+}
+
+function desiredUrl(wantProcesses: boolean): string {
   const token = getAuthToken();
-  const params = token ? `?token=${encodeURIComponent(token)}` : "";
-  const es = new EventSource(`/api/system/resources/stream${params}`);
+  const params = new URLSearchParams();
+  if (token) params.set("token", token);
+  if (wantProcesses) params.set("processes", "1");
+  const qs = params.toString();
+  return `/api/system/resources/stream${qs ? `?${qs}` : ""}`;
+}
+
+function connect(wantProcesses: boolean) {
+  if (sharedEs) return;
+  sharedTickCount = 0;
+  const es = new EventSource(desiredUrl(wantProcesses));
+  connectedProcesses = wantProcesses;
+
+  es.addEventListener("session", (e) => {
+    try {
+      const session: { sid: string } = JSON.parse((e as MessageEvent).data);
+      if (session.sid) startLease(session.sid);
+    } catch {
+      /* an old-shaped or malformed session frame — the snapshot listener is the source of truth */
+    }
+  });
 
   es.addEventListener("snapshot", (e) => {
     try {
-      const snapshot: ResourceSnapshot = JSON.parse(e.data);
+      const snapshot: MetricsSnapshot = JSON.parse((e as MessageEvent).data);
       sharedLatest = snapshot;
-      sharedHistory = [...sharedHistory, snapshot];
-      if (sharedHistory.length > HISTORY_MAX) {
-        sharedHistory = sharedHistory.slice(-HISTORY_MAX);
+      const point: MetricsHistoryPoint = {
+        ts: snapshot.ts,
+        system: snapshot.system,
+        groups: Object.fromEntries(
+          snapshot.groups.map((g) => [g.key, { cpu: g.cpu, ramMB: g.ramMB }]),
+        ),
+      };
+      sharedHistory = [...sharedHistory, point];
+      if (sharedHistory.length > METRICS_HISTORY_MAX) {
+        sharedHistory = sharedHistory.slice(-METRICS_HISTORY_MAX);
       }
+      sharedHistory = withGroupsRetention(sharedHistory, GROUPS_RETENTION);
+      sharedTickCount++;
       sharedConnected = true;
       notify();
-    } catch {}
+    } catch {
+      /* malformed frame — skip this tick, keep the connection */
+    }
   });
 
   es.onerror = () => {
     sharedConnected = false;
-    // Close stale ES and manually reconnect with backoff to avoid duplicate connections
+    stopLease();
     if (sharedEs) {
       sharedEs.close();
       sharedEs = null;
     }
     notify();
     if (refCount > 0) {
-      setTimeout(() => { if (!sharedEs && refCount > 0) connect(); }, 5000);
+      const wanted = processesRefCount > 0;
+      setTimeout(() => {
+        if (!sharedEs && refCount > 0) connect(wanted);
+      }, 5000);
     }
   };
 
@@ -74,6 +122,7 @@ function connect() {
 }
 
 function disconnect() {
+  stopLease();
   if (sharedEs) {
     sharedEs.close();
     sharedEs = null;
@@ -82,11 +131,34 @@ function disconnect() {
   }
 }
 
+/** Reconnect only when the desired tier actually differs from the live connection. */
+function reconcile() {
+  const wanted = processesRefCount > 0;
+  if (refCount === 0) {
+    disconnect();
+    return;
+  }
+  if (!sharedEs) {
+    connect(wanted);
+    return;
+  }
+  if (connectedProcesses !== wanted) {
+    disconnect();
+    connect(wanted);
+  }
+}
+
 // ── Hook ───────────────────────────────────────────────────────────────
 
-export function useResourceMonitor() {
+export interface UseResourceMonitorOptions {
+  /** Opt into the full tier: process rows + groups, at the cost of a heavier stream. */
+  processes?: boolean;
+}
+
+export function useResourceMonitor(opts: UseResourceMonitorOptions = {}) {
   const [, forceUpdate] = useState(0);
   const mounted = useRef(true);
+  const wantProcesses = !!opts.processes;
 
   const rerender = useCallback(() => {
     if (mounted.current) forceUpdate((n) => n + 1);
@@ -96,19 +168,25 @@ export function useResourceMonitor() {
     mounted.current = true;
     listeners.add(rerender);
     refCount++;
-    if (refCount === 1) connect();
+    if (wantProcesses) processesRefCount++;
+    reconcile();
 
     return () => {
       mounted.current = false;
       listeners.delete(rerender);
       refCount--;
-      if (refCount === 0) disconnect();
+      if (wantProcesses) processesRefCount--;
+      reconcile();
     };
-  }, [rerender]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- reconcile reads live module state, not this closure
+  }, [rerender, wantProcesses]);
 
   return {
     latest: sharedLatest,
     history: sharedHistory,
     isConnected: sharedConnected,
+    /** Snapshot frames received since the current connection opened — lets a
+     *  consumer (or an e2e script) wait past the always-0.0%/n/a first tick. */
+    tickCount: sharedTickCount,
   };
 }

package/src/web/lib/format-bytes.ts

@@ -0,0 +1,16 @@
+/** Shared byte/rate formatters for the System Monitor. */
+
+/** Same rounding rule as the deleted `system-monitor-group-row.tsx`. */
+export function formatRam(mb: number): string {
+  return mb < 1024 ? `${mb.toFixed(0)} MB` : `${(mb / 1024).toFixed(1)} GB`;
+}
+
+/** Bytes/second → human-readable rate, 1 decimal past B/s. */
+export function formatBps(bytesPerSec: number): string {
+  if (bytesPerSec < 1024) return `${bytesPerSec.toFixed(0)} B/s`;
+  const kb = bytesPerSec / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB/s`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb.toFixed(1)} MB/s`;
+  return `${(mb / 1024).toFixed(1)} GB/s`;
+}

package/dist/web/assets/architecture-PBZL5I3N-Bs7wzj-W.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-Bg4vE8QA.js";export{e as createArchitectureServices};

package/dist/web/assets/arrow-right-DubGFkN8.js

@@ -1 +0,0 @@
-import{t as e}from"./createLucideIcon-D8pyde1A.js";var t=e(`arrow-right`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]);export{t};

package/dist/web/assets/button-B4MWPjWj.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{S as t,x as n}from"./vendor-markdown-Ls5AcU91.js";import{dt as r}from"./vendor-ui-CaeeFO0B.js";import{t as i}from"./createLucideIcon-D8pyde1A.js";import{i as a,n as o}from"./utils-DoY4yTP-.js";var s=i(`circle`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]),c=e=>typeof e==`boolean`?`${e}`:e===0?`0`:e,l=a,u=(e,t)=>n=>{if(t?.variants==null)return l(e,n?.class,n?.className);let{variants:r,defaultVariants:i}=t,a=Object.keys(r).map(e=>{let t=n?.[e],a=i?.[e];if(t===null)return null;let o=c(t)||c(a);return r[e][o]}),o=n&&Object.entries(n).reduce((e,t)=>{let[n,r]=t;return r===void 0||(e[n]=r),e},{});return l(e,a,t?.compoundVariants?.reduce((e,t)=>{let{class:n,className:r,...a}=t;return Object.entries(a).every(e=>{let[t,n]=e;return Array.isArray(n)?n.includes({...i,...o}[t]):{...i,...o}[t]===n})?[...e,n,r]:e},[]),n?.class,n?.className)};e(t(),1);var d=n(),f=u(`inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,{variants:{variant:{default:`bg-primary text-primary-foreground hover:bg-primary/90`,destructive:`bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40`,outline:`border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,secondary:`bg-secondary text-secondary-foreground hover:bg-secondary/80`,ghost:`hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`,link:`text-primary underline-offset-4 hover:underline`},size:{default:`h-9 px-4 py-2 has-[>svg]:px-3`,xs:`h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5`,lg:`h-10 rounded-md px-6 has-[>svg]:px-4`,icon:`size-9`,"icon-xs":`size-6 rounded-md [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8`,"icon-lg":`size-10`}},defaultVariants:{variant:`default`,size:`default`}});function p({className:e,variant:t=`default`,size:n=`default`,asChild:i=!1,...a}){return(0,d.jsx)(i?r:`button`,{"data-slot":`button`,"data-variant":t,"data-size":n,className:o(f({variant:t,size:n,className:e})),...a})}export{u as n,s as r,p as t};