@hienlh/ppm 0.18.8 → 0.18.9

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

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

@@ -1,186 +1,3 @@
-import { useState, useMemo, useCallback, memo } from "react";
-import {
-  Server, Monitor, Bot, Hammer, HelpCircle,
-  Wifi, WifiOff,
-} from "lucide-react";
-import { useResourceMonitor, type ResourceGroup } from "@/hooks/use-resource-monitor";
-import { useIsMobile } from "@/hooks/use-is-mobile";
-import { api } from "@/lib/api-client";
-import { toast } from "sonner";
-import { cn } from "@/lib/utils";
-import {
-  GroupRow, SortableHeader, cpuColor, formatRam,
-  type SortKey, type SortDir,
-} from "./system-monitor-group-row";
+import { SystemMonitorBody } from "./system-monitor-body";
 
-const GROUP_ICONS: Record<ResourceGroup["type"], React.ElementType> = {
-  server: Server,
-  terminal: Monitor,
-  "ai-tool": Bot,
-  build: Hammer,
-  unknown: HelpCircle,
-};
-
-const SPARKLINE_POINTS = 200;
-
-function toggleSort(
-  current: SortKey, dir: SortDir, clicked: "cpu" | "ram",
-): [SortKey, SortDir] {
-  if (current !== clicked) return [clicked, "desc"];
-  if (dir === "desc") return [clicked, "asc"];
-  return [null, "desc"]; // third click resets
-}
-
-function sortGroups(groups: ResourceGroup[], key: SortKey, dir: SortDir) {
-  if (!key) return groups;
-  const sorted = [...groups].sort((a, b) => {
-    const av = key === "cpu" ? a.cpu : a.ramMB;
-    const bv = key === "cpu" ? b.cpu : b.ramMB;
-    return dir === "asc" ? av - bv : bv - av;
-  });
-  return sorted;
-}
-
-export const SystemMonitorTab = memo(function SystemMonitorTab() {
-  const { latest, history, isConnected } = useResourceMonitor();
-  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(["server"]));
-  const [sortKey, setSortKey] = useState<SortKey>(null);
-  const [sortDir, setSortDir] = useState<SortDir>("desc");
-  const isMobile = useIsMobile();
-
-  const groupSparklines = useMemo(() => {
-    const map = new Map<string, number[]>();
-    const recentHistory = history.slice(-SPARKLINE_POINTS);
-    for (const snap of recentHistory) {
-      for (const group of snap.groups) {
-        const key = `${group.type}:${group.label}`;
-        const arr = map.get(key) ?? [];
-        arr.push(group.cpu);
-        map.set(key, arr);
-      }
-    }
-    return map;
-  }, [history]);
-
-  const sortedGroups = useMemo(() => {
-    if (!latest) return [];
-    return sortGroups(latest.groups, sortKey, sortDir);
-  }, [latest, sortKey, sortDir]);
-
-  const killProcess = useCallback(async (pid: number) => {
-    try {
-      await api.post(`/api/system/resources/kill/${pid}`);
-      toast.success(`Sent SIGTERM to PID ${pid}`);
-    } catch (e: any) {
-      toast.error(e.message || `Failed to kill PID ${pid}`);
-    }
-  }, []);
-
-  const toggle = (key: string) => {
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  };
-
-  const handleSort = (clicked: "cpu" | "ram") => {
-    const [newKey, newDir] = toggleSort(sortKey, sortDir, clicked);
-    setSortKey(newKey);
-    setSortDir(newDir);
-  };
-
-  if (!latest) {
-    return (
-      <div className="flex items-center justify-center h-full text-text-subtle text-sm">
-        {isConnected ? "Waiting for data..." : "Connecting to resource monitor..."}
-      </div>
-    );
-  }
-
-  const elapsed = Math.round((Date.now() - latest.timestamp) / 1000);
-
-  return (
-    <div className="h-full flex flex-col overflow-hidden">
-      {/* Header */}
-      <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>
-        <div className="flex items-center gap-1.5 text-[10px] text-text-subtle">
-          {isConnected
-            ? <Wifi className="size-3 text-success" />
-            : <WifiOff className="size-3 text-error" />}
-          <span>{isConnected ? `Updated ${elapsed}s ago` : "Disconnected"}</span>
-        </div>
-      </div>
-
-      {/* Group list */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <table className="w-full text-xs">
-          <thead>
-            <tr className="text-text-subtle border-b border-border">
-              <th className="text-left py-1.5 px-3 font-medium">Process</th>
-              <SortableHeader
-                label="CPU"
-                field="cpu"
-                activeKey={sortKey}
-                activeDir={sortDir}
-                onClick={handleSort}
-                className="w-16"
-              />
-              <SortableHeader
-                label="RAM"
-                field="ram"
-                activeKey={sortKey}
-                activeDir={sortDir}
-                onClick={handleSort}
-                className="w-20"
-              />
-              {!isMobile && (
-                <th className="py-1.5 px-2 font-medium w-[130px]">Trend / Age</th>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {sortedGroups.map((group) => {
-              const key = `${group.type}:${group.label}`;
-              const Icon = GROUP_ICONS[group.type] ?? HelpCircle;
-              const isExpanded = expanded.has(key);
-              const sparkData = groupSparklines.get(key) ?? [];
-
-              return (
-                <GroupRow
-                  key={key}
-                  group={group}
-                  Icon={Icon}
-                  isExpanded={isExpanded}
-                  sparkData={sparkData}
-                  isMobile={isMobile}
-                  sortKey={sortKey}
-                  sortDir={sortDir}
-                  onToggle={() => toggle(key)}
-                  onKill={killProcess}
-                />
-              );
-            })}
-          </tbody>
-          {/* Total row */}
-          <tfoot>
-            <tr className="border-t border-border font-medium">
-              <td className="py-1.5 px-3">
-                Total ({latest.total.processCount} processes)
-              </td>
-              <td className={cn("text-right py-1.5 px-2", cpuColor(latest.total.cpu))}>
-                {latest.total.cpu.toFixed(1)}%
-              </td>
-              <td className="text-right py-1.5 px-2 text-text-secondary">
-                {formatRam(latest.total.ramMB)}
-              </td>
-              {!isMobile && <td />}
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </div>
-  );
-});
+export const SystemMonitorTab = () => <SystemMonitorBody />;

package/src/web/components/system/system-monitor-window-content.tsx

@@ -0,0 +1,18 @@
+/** Floating-window body for the System Monitor. Persists the active sub-tab on the
+ *  window's payload so a reload restores it. */
+import { useWindowStore } from "@/components/floating-window/window-store";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import { SystemMonitorBody } from "./system-monitor-body";
+
+export default function SystemMonitorWindowContent({ id, payload }: WindowContentProps) {
+  const setPayload = useWindowStore((s) => s.setPayload);
+  const initialTab = payload?.tab === "processes" ? "processes" : "overview";
+
+  return (
+    <SystemMonitorBody
+      initialTab={initialTab}
+      onTabChange={(tab) => setPayload(id, { tab })}
+      variant="window"
+    />
+  );
+}

package/src/web/components/system/use-open-system-monitor.ts

@@ -0,0 +1,34 @@
+/**
+ * Opening the System Monitor on whichever presentation the device has.
+ *
+ * `WindowLayer` renders nothing below the `md` breakpoint, so `openWindow("system-monitor")`
+ * would be a silent no-op on a phone. Desktop gets the floating window; mobile gets the
+ * existing `system-monitor` tab route — both host the same `SystemMonitorBody`. On
+ * desktop, a second click focuses the already-open window rather than stacking a
+ * duplicate — there is only one machine to monitor, so a repeat open is never a
+ * distinct instance.
+ */
+
+import { useCallback } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { useTabStore } from "@/stores/tab-store";
+import { resolveOpenSystemMonitorAction } from "./resolve-open-system-monitor-action";
+
+/** Callback that opens the System Monitor the right way for this viewport. */
+export function useOpenSystemMonitor(): () => void {
+  const isMobile = useIsMobile();
+  const openWindow = useWindowStore((s) => s.open);
+  const focusWindow = useWindowStore((s) => s.focus);
+  const openTab = useTabStore((s) => s.openTab);
+
+  return useCallback(() => {
+    const existing = Object.values(useWindowStore.getState().windows).find(
+      (w) => w.kind === "system-monitor",
+    );
+    const action = resolveOpenSystemMonitorAction(isMobile, existing?.id ?? null);
+    if (action.kind === "tab") openTab(action.tab);
+    else if (action.kind === "focus") focusWindow(action.id);
+    else openWindow("system-monitor");
+  }, [isMobile, openWindow, focusWindow, openTab]);
+}

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

@@ -0,0 +1,55 @@
+/** Pure/network helpers for `use-resource-monitor.ts`'s subscriber lease and history
+ *  retention — split out to keep that file under the repo's 200-line guideline and so
+ *  the lease request shape and retention rule are unit-testable in isolation. */
+import { getAuthToken } from "@/lib/api-client";
+import type { MetricsHistoryPoint } from "../../types/system-metrics";
+
+/** Group aggregates are only ever read for the last 60 points (process-table-model's
+ *  sparklines); retaining them for the full 900-point/30-min history window wastes
+ *  tens of MB of small objects on a phone for data nothing reads. System aggregates
+ *  keep the full window. */
+export const GROUPS_RETENTION = 60;
+
+/** Same bearer the kill request uses — every route under `/api/*` requires it, and the
+ *  lease endpoints have no `?token=` fallback (that exists only for the GET-based SSE
+ *  stream itself, which cannot set headers). Without this, ping/DELETE 401 silently,
+ *  the server reaps the lease at 30s, and the client reconnects forever. */
+export function authHeaders(): Record<string, string> {
+  const token = getAuthToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+/** Fire-and-forget ping keeping the subscriber lease alive — a missed one just costs
+ *  one server-side reap cycle. */
+export async function pingLease(sid: string): Promise<void> {
+  await fetch(`/api/system/resources/stream/${encodeURIComponent(sid)}/ping`, {
+    method: "POST",
+    headers: authHeaders(),
+  }).catch(() => {});
+}
+
+/** Best-effort lease teardown — the server-side 30s reap is the real backstop (a proxy
+ *  can buffer this DELETE away exactly when the client actually disconnected). */
+export async function deleteLease(sid: string): Promise<void> {
+  await fetch(`/api/system/resources/stream/${encodeURIComponent(sid)}`, {
+    method: "DELETE",
+    headers: authHeaders(),
+  }).catch(() => {});
+}
+
+/** Drops `groups` from every history point older than the last `retain` entries.
+ *  Pure so the retention behaviour is unit-testable without a live EventSource. */
+export function withGroupsRetention(
+  history: MetricsHistoryPoint[],
+  retain: number,
+): MetricsHistoryPoint[] {
+  const cutoff = history.length - retain;
+  if (cutoff <= 0) return history;
+  let changed = false;
+  const next = history.map((point, i) => {
+    if (i >= cutoff || Object.keys(point.groups).length === 0) return point;
+    changed = true;
+    return { ...point, groups: {} };
+  });
+  return changed ? next : history;
+}

package/src/web/hooks/use-element-width.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState, type RefObject } from "react";
+
+/**
+ * Live `clientWidth` of an element, tracked through `ResizeObserver`.
+ *
+ * Canvas charts cannot size themselves with CSS alone — the bitmap needs a pixel
+ * width — so a chart inside a resizable card or floating window has to be told how
+ * wide its box currently is. Returns 0 until the first measurement.
+ */
+export function useElementWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const next = Math.floor(entries[0]?.contentRect.width ?? el.clientWidth);
+      setWidth((prev) => (prev === next ? prev : next));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return width;
+}