@hienlh/ppm 0.18.8 → 0.18.10

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} />
+          )}
+        </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-column-widths.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clampColumnWidth, columnWidthPx, type ColumnWidths, type ResizableColumnKey } from "./process-columns-grid";
+
+/** One entry for the whole app: column widths are a per-device preference, not
+ *  per-window state, so they survive reloads and apply to the mobile tab too. */
+export const COLUMN_WIDTHS_STORAGE_KEY = "ppm-sysmon-col-widths";
+
+function loadWidths(): ColumnWidths {
+  try {
+    const raw = localStorage.getItem(COLUMN_WIDTHS_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const out: ColumnWidths = {};
+    for (const k of ["cpu", "ram", "disk", "gpu", "net"] as ResizableColumnKey[]) {
+      const v = parsed[k];
+      if (typeof v === "number" && Number.isFinite(v)) out[k] = clampColumnWidth(v);
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+function saveWidths(widths: ColumnWidths): void {
+  try {
+    if (Object.keys(widths).length === 0) localStorage.removeItem(COLUMN_WIDTHS_STORAGE_KEY);
+    else localStorage.setItem(COLUMN_WIDTHS_STORAGE_KEY, JSON.stringify(widths));
+  } catch {
+    /* private mode / quota — widths just don't persist */
+  }
+}
+
+/**
+ * Drag-to-resize state for the process table's fixed-width columns.
+ *
+ * `begin(key, event)` is wired to `pointerdown` on a header's right-edge handle;
+ * the drag then follows `pointermove`/`pointerup` on `window`, so the pointer may
+ * leave the handle (or the window body) without dropping the drag. Widths persist
+ * on release, not on every move. `reset(key)` (double-click) returns one column
+ * to its default.
+ */
+export function useColumnWidths() {
+  const [widths, setWidths] = useState<ColumnWidths>(() => (typeof localStorage === "undefined" ? {} : loadWidths()));
+  const drag = useRef<{ key: ResizableColumnKey; startX: number; startWidth: number } | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: PointerEvent) => {
+      const d = drag.current;
+      if (!d) return;
+      const next = clampColumnWidth(d.startWidth + (e.clientX - d.startX));
+      setWidths((prev) => (prev[d.key] === next ? prev : { ...prev, [d.key]: next }));
+    };
+    const onUp = () => {
+      if (!drag.current) return;
+      drag.current = null;
+      document.body.style.cursor = "";
+      setWidths((prev) => {
+        saveWidths(prev);
+        return prev;
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, []);
+
+  const begin = useCallback(
+    (key: ResizableColumnKey, e: { clientX: number; preventDefault: () => void }) => {
+      e.preventDefault(); // no text selection while dragging
+      drag.current = { key, startX: e.clientX, startWidth: columnWidthPx(key, widths) };
+      document.body.style.cursor = "col-resize";
+    },
+    [widths],
+  );
+
+  const reset = useCallback((key: ResizableColumnKey) => {
+    setWidths((prev) => {
+      if (!(key in prev)) return prev;
+      const { [key]: _dropped, ...rest } = prev;
+      saveWidths(rest);
+      return rest;
+    });
+  }, []);
+
+  return { widths, begin, reset };
+}

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/components/system/use-process-kill.ts

@@ -0,0 +1,100 @@
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { getAuthToken } from "@/lib/api-client";
+import { buildGroupKillRequests, buildKillRequest, isGroupProtected, type KillTarget } from "./build-kill-request";
+import type {
+  KillProcessRequest,
+  KillProcessResult,
+  MetricsSnapshot,
+  ProcessGroup,
+  ProcessInfo,
+} from "../../../types/system-metrics";
+
+/** `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. */
+export 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;
+}
+
+/**
+ * Pending-kill state plus the confirm handler for single processes and whole app
+ * groups. Members are resolved against the CURRENT snapshot at click time, so a
+ * helper that exited since the row was drawn is simply not in the list.
+ */
+export function useProcessKill(snapshot: MetricsSnapshot) {
+  const [pendingKill, setPendingKill] = useState<KillTarget | null>(null);
+
+  const membersOf = useCallback(
+    (group: ProcessGroup): ProcessInfo[] => {
+      const byPid = new Map(snapshot.processes.map((p) => [p.pid, p]));
+      return group.pids.map((pid) => byPid.get(pid)).filter((p): p is ProcessInfo => !!p);
+    },
+    [snapshot.processes],
+  );
+
+  /** group key → true when any member is refused by the guard (button disabled). */
+  const groupProtected = useMemo(
+    () => new Map(snapshot.groups.map((g) => [g.key, isGroupProtected(membersOf(g))])),
+    [snapshot.groups, membersOf],
+  );
+
+  const requestKillProcess = useCallback((proc: ProcessInfo) => setPendingKill({ kind: "process", proc }), []);
+  const requestKillGroup = useCallback(
+    (group: ProcessGroup) => setPendingKill({ kind: "group", group, members: membersOf(group) }),
+    [membersOf],
+  );
+  const cancelKill = useCallback(() => setPendingKill(null), []);
+
+  const confirmKill = useCallback(async (target: KillTarget, tree: boolean) => {
+    setPendingKill(null);
+    if (target.kind === "process") {
+      const { proc } = target;
+      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}`);
+      }
+      return;
+    }
+    // Whole app: one tree kill on the root when it exists, else one per member.
+    // Requests run sequentially so the guard's 403/409 for one member is reported,
+    // not lost in a Promise.all rejection.
+    const { group, members } = target;
+    const failures: string[] = [];
+    for (const req of buildGroupKillRequests(group, members)) {
+      try {
+        await killProcess(req);
+      } catch (e) {
+        failures.push(e instanceof Error ? e.message : `pid ${req.pid}`);
+      }
+    }
+    if (failures.length === 0) toast.success(`Ended ${group.label} (${members.length} processes)`);
+    else toast.error(`${group.label}: ${failures.length} of ${members.length} could not be ended — ${failures[0]}`);
+  }, []);
+
+  return { pendingKill, groupProtected, requestKillProcess, requestKillGroup, confirmKill, cancelKill };
+}

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