@rapidmx/web-client 0.17.0 → 0.18.0

package/dist/apps/shared/components/admin/diagnostics/PackagesTable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DiagnosticsVersions } from "./diagnosticsApi.js";
+/** How many packages are listed at first, and how many more each "Show more" adds: the list can be a thousand long. */
+export declare const PACKAGES_PAGE_SIZE = 100;
+/** Every package installed on the server, filtered by a name and paged, with a badge on the ones the server itself depends on. */
+export default function PackagesTable({ packages }: {
+    packages: DiagnosticsVersions["packages"];
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/PackagesTable.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useMemo, useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Badge from "./Badge.js";
+/** How many packages are listed at first, and how many more each "Show more" adds: the list can be a thousand long. */
+export const PACKAGES_PAGE_SIZE = 100;
+const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** Every package installed on the server, filtered by a name and paged, with a badge on the ones the server itself depends on. */
+export default function PackagesTable({ packages }) {
+    const [query, setQuery] = useState("");
+    const [directOnly, setDirectOnly] = useState(false);
+    const [limit, setLimit] = useState(PACKAGES_PAGE_SIZE);
+    const matching = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return packages.filter((item) => (!directOnly || item.direct) && (needle === "" || `${item.name} ${item.version}`.toLowerCase().includes(needle)));
+    }, [packages, query, directOnly]);
+    const shown = matching.slice(0, limit);
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-packages-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-packages-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Installed packages" }), _jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsx("input", { type: "search", "aria-label": "Filter packages", className: INPUT_CLASS, placeholder: "Filter by name or version", value: query, onChange: (event) => {
+                                setQuery(event.target.value);
+                                setLimit(PACKAGES_PAGE_SIZE);
+                            } }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: directOnly, onChange: (event) => {
+                                    setDirectOnly(event.target.checked);
+                                    setLimit(PACKAGES_PAGE_SIZE);
+                                } }), "Direct dependencies only"] })] }), _jsx("p", { role: "status", className: "mb-2 text-xs text-text-muted", children: matching.length === packages.length
+                    ? `${packages.length} packages`
+                    : `${matching.length} of ${packages.length} packages match` }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No packages match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Package", "Version", ""].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono", children: item.version }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: item.direct && _jsx(Badge, { tone: "info", children: "direct" }) })] }, `${item.name}@${item.version}`))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + PACKAGES_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/ProcessCard.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+export interface ProcessCardProps {
+    process: DiagnosticsMetrics["process"] | undefined;
+    history: DiagnosticsMetrics[];
+}
+/** The server's own Node.js process: its CPU, memory, and the memory and load its container sees. Shown with or without Kubernetes. */
+export default function ProcessCard({ process, history }: ProcessCardProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/ProcessCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBytes, formatCores, formatPercent, percentOf } from "./format.js";
+import { formatLoad } from "./HostCard.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+/** The server's own Node.js process: its CPU, memory, and the memory and load its container sees. Shown with or without Kubernetes. */
+export default function ProcessCard({ process, history }) {
+    const heapPercent = percentOf(process?.heapUsedBytes, process?.heapTotalBytes);
+    const systemUsed = process?.systemMemoryTotalBytes !== undefined && process.systemMemoryFreeBytes !== undefined
+        ? process.systemMemoryTotalBytes - process.systemMemoryFreeBytes
+        : undefined;
+    const systemPercent = percentOf(systemUsed, process?.systemMemoryTotalBytes);
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-process-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-process-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "This server process" }), !process ? (_jsx("p", { className: "text-sm text-text-muted", children: "The server did not report its own figures." })) : (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4", children: [_jsx(MetricTile, { label: "Process CPU", value: formatPercent(process.cpuPercent), detail: `${formatCores(process.cpuCount)} available`, history: { values: seriesOf(history, (sample) => sample.process?.cpuPercent), format: formatPercent } }), _jsx(MetricTile, { label: "Process memory (RSS)", value: formatBytes(process.rssBytes), history: { values: seriesOf(history, (sample) => sample.process?.rssBytes), format: formatBytes } }), _jsx(MetricTile, { label: "Heap", value: formatBytes(process.heapUsedBytes), detail: `of ${formatBytes(process.heapTotalBytes)} allocated`, usage: heapPercent === undefined
+                            ? undefined
+                            : { percent: heapPercent, detail: `${formatBytes(process.heapUsedBytes)} of ${formatBytes(process.heapTotalBytes)}`, flag: false } }), _jsx(MetricTile, { label: "Load average", value: formatLoad(process.loadAverage), detail: "1, 5 and 15 minutes" }), _jsx(MetricTile, { label: "Memory visible to the container", value: formatBytes(systemUsed), detail: `of ${formatBytes(process.systemMemoryTotalBytes)}`, usage: systemPercent === undefined
+                            ? undefined
+                            : { percent: systemPercent, detail: `${formatBytes(systemUsed)} of ${formatBytes(process.systemMemoryTotalBytes)}` } })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/PvcTable.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { DiagnosticsPvcMetrics } from "./diagnosticsApi.js";
+/** The install's persistent volume claims, with a usage bar for the ones the server can measure. */
+export default function PvcTable({ pvcs }: {
+    pvcs: DiagnosticsPvcMetrics[];
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/PvcTable.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBytes, NO_VALUE, percentOf } from "./format.js";
+import UsageMeter from "./UsageMeter.js";
+const HEADINGS = ["Volume", "Phase", "Storage class", "Size", "Usage"];
+function Usage({ pvc }) {
+    if (!pvc.mountedByServer) {
+        return _jsx("span", { className: "text-text-muted", children: "Usage not available: not mounted in the server pod." });
+    }
+    const percent = percentOf(pvc.usedBytes, pvc.capacityBytes);
+    if (percent === undefined) {
+        return _jsx("span", { className: "text-text-muted", children: "The server has no usage figures for this volume." });
+    }
+    return (_jsxs("div", { children: [_jsx(UsageMeter, { label: `Usage of volume ${pvc.name}`, percent: percent, detail: `${formatBytes(pvc.usedBytes)} of ${formatBytes(pvc.capacityBytes)}`, flag: !pvc.sharesNodeDisk }), pvc.sharesNodeDisk && (_jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Shares the node\u2019s disk; the volume\u2019s size is not enforced." }))] }));
+}
+/** The install's persistent volume claims, with a usage bar for the ones the server can measure. */
+export default function PvcTable({ pvcs }) {
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-pvc-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-pvc-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Persistent volumes" }), pvcs.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "This install has no persistent volume claims." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: HEADINGS.map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: pvcs.map((pvc) => (_jsxs("tr", { className: "align-top", children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: pvc.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: pvc.phase }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: pvc.storageClass ?? NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border tabular-nums", children: formatBytes(pvc.capacityBytes ?? pvc.requestedBytes) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border min-w-56", children: _jsx(Usage, { pvc: pvc }) })] }, pvc.name))) })] }) }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/RuntimePanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DiagnosticsRuntime } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+/** The Runtime tab: the Kubernetes version and the nodes the install's pods run on. */
+export default function RuntimePanel({ runtime }: {
+    runtime: DiagnosticsResource<DiagnosticsRuntime>;
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/RuntimePanel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Badge from "./Badge.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { formatDateTime, NO_VALUE } from "./format.js";
+/** What a distribution's id is called on screen. */
+const DISTRIBUTIONS = {
+    k3s: "k3s",
+    rke2: "RKE2",
+    eks: "Amazon EKS",
+    gke: "Google GKE",
+    aks: "Azure AKS",
+    kubernetes: "Kubernetes",
+};
+const NODE_HEADINGS = ["Node", "Internal IP", "Pods of this install"];
+function Fact({ term, children }) {
+    return (_jsxs("div", { children: [_jsx("dt", { className: "text-xs uppercase tracking-wide text-text-muted", children: term }), _jsx("dd", { className: "break-words", children: children })] }));
+}
+function RuntimeDetails({ runtime }) {
+    const version = runtime.version;
+    const nodes = runtime.nodes ?? [];
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "diagnostics-kubernetes-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-kubernetes-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Kubernetes" }), _jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2 lg:grid-cols-3", children: [_jsx(Fact, { term: "Version", children: _jsx("span", { className: "font-mono", children: version?.gitVersion ?? NO_VALUE }) }), _jsx(Fact, { term: "Distribution", children: version ? _jsx(Badge, { tone: "info", children: DISTRIBUTIONS[version.distribution] ?? version.distribution }) : NO_VALUE }), _jsx(Fact, { term: "Platform", children: version?.platform ?? NO_VALUE }), _jsx(Fact, { term: "Namespace", children: _jsx("span", { className: "font-mono", children: runtime.namespace ?? NO_VALUE }) }), _jsx(Fact, { term: "Go version", children: version?.goVersion ?? NO_VALUE }), _jsx(Fact, { term: "Built", children: formatDateTime(version?.buildDate) })] })] }), _jsxs("section", { "aria-labelledby": "diagnostics-nodes-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-nodes-heading", className: "text-base font-bold uppercase tracking-wide mb-1", children: "Nodes" }), _jsx("p", { className: "mb-3 text-xs text-text-muted", children: "The nodes that run this install\u2019s pods. The server can only see its own namespace, so nothing about the nodes themselves is listed here." }), nodes.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No node is running any of this install\u2019s pods." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: NODE_HEADINGS.map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: nodes.map((node) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: node.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono", children: node.internalIP ?? NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border tabular-nums", children: node.podCount })] }, node.name))) })] }) }))] })] }));
+}
+/** The Runtime tab: the Kubernetes version and the nodes the install's pods run on. */
+export default function RuntimePanel({ runtime }) {
+    const { data, error, loading } = runtime;
+    return (_jsxs("div", { className: "space-y-6", children: [error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data && (data.available ? _jsx(RuntimeDetails, { runtime: data }) : _jsx(KubernetesNotice, { reason: data.reason }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/ServerVersionCard.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { DiagnosticsVersions } from "./diagnosticsApi.js";
+/** The server process: Node.js, the deployed package, the machine and how long it has been up. */
+export default function ServerVersionCard({ server }: {
+    server: DiagnosticsVersions["server"];
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/ServerVersionCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatDateTime, formatUptime, NO_VALUE } from "./format.js";
+/** The server process: Node.js, the deployed package, the machine and how long it has been up. */
+export default function ServerVersionCard({ server }) {
+    const rows = [
+        ["Node.js", server.nodeVersion || NO_VALUE],
+        ["V8", server.v8Version || NO_VALUE],
+        ["Package", server.packageName ? `${server.packageName} ${server.packageVersion ?? ""}`.trim() : NO_VALUE],
+        ["Environment", server.nodeEnv || NO_VALUE],
+        ["Platform", [server.platform, server.arch].filter(Boolean).join(" / ") || NO_VALUE],
+        ["Host name", server.hostname || NO_VALUE],
+        ["Process ID", server.pid === undefined ? NO_VALUE : String(server.pid)],
+        ["Started", formatDateTime(server.startedAt)],
+        ["Up for", formatUptime(server.uptimeSeconds)],
+    ];
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-server-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-server-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Server" }), _jsx("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2 lg:grid-cols-3", children: rows.map(([term, description]) => (_jsxs("div", { children: [_jsx("dt", { className: "text-xs uppercase tracking-wide text-text-muted", children: term }), _jsx("dd", { className: "break-words", children: description })] }, term))) })] }));
+}

package/dist/apps/shared/components/admin/diagnostics/Sparkline.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+/**
+ * Where each value is drawn, as `[x, y]` in the plot's own coordinates. The x-axis always has room for a full
+ * history (`METRICS_HISTORY_SIZE` samples), with the newest sample at the right edge, so a line that has just started
+ * grows in from the right rather than being stretched across the plot. The y-axis runs from zero to `max` (the highest
+ * value when it is not given), so the shape is never a lie about how much the value moves.
+ */
+export declare function sparklinePoints(values: number[], max?: number): [number, number][];
+export interface SparklineProps {
+    values: number[];
+    /** What is drawn, for the text alternative (`CPU used`). */
+    label: string;
+    /** The value the plot's top stands for. Defaults to the highest value seen. */
+    max?: number;
+    /** Writes a value for the text alternative. */
+    format: (value: number) => string;
+}
+/**
+ * A line with a wash of the same colour under it, over the last few minutes of a value. It carries no numbers itself: the
+ * value beside it does, and the text alternative says the latest, lowest and highest.
+ */
+export default function Sparkline({ values, label, max, format }: SparklineProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/Sparkline.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { METRICS_HISTORY_SIZE } from "./metricsHistory.js";
+const WIDTH = 240;
+const HEIGHT = 48;
+/** Keeps a line at the very top or bottom of the plot from being clipped by its own 2px stroke. */
+const PADDING = 2;
+/**
+ * Where each value is drawn, as `[x, y]` in the plot's own coordinates. The x-axis always has room for a full
+ * history (`METRICS_HISTORY_SIZE` samples), with the newest sample at the right edge, so a line that has just started
+ * grows in from the right rather than being stretched across the plot. The y-axis runs from zero to `max` (the highest
+ * value when it is not given), so the shape is never a lie about how much the value moves.
+ */
+export function sparklinePoints(values, max) {
+    const top = max !== undefined && max > 0 ? max : Math.max(...values, 0) || 1;
+    const step = WIDTH / (METRICS_HISTORY_SIZE - 1);
+    return values.map((value, index) => {
+        const x = WIDTH - (values.length - 1 - index) * step;
+        const y = HEIGHT - PADDING - (Math.min(Math.max(value, 0), top) / top) * (HEIGHT - 2 * PADDING);
+        return [x, y];
+    });
+}
+/**
+ * A line with a wash of the same colour under it, over the last few minutes of a value. It carries no numbers itself: the
+ * value beside it does, and the text alternative says the latest, lowest and highest.
+ */
+export default function Sparkline({ values, label, max, format }) {
+    const points = sparklinePoints(values, max);
+    let description = `${label}: collecting samples`;
+    if (values.length > 1) {
+        description = `${label}: latest ${format(values[values.length - 1])}, lowest ${format(Math.min(...values))}, highest ${format(Math.max(...values))} over the last ${values.length} samples`;
+    }
+    const line = points.map(([x, y], index) => `${index === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
+    return (_jsxs("svg", { role: "img", "aria-label": description, viewBox: `0 0 ${WIDTH} ${HEIGHT}`, preserveAspectRatio: "none", className: "block h-12 w-full", children: [_jsx("title", { children: description }), _jsx("line", { x1: "0", y1: HEIGHT - 0.5, x2: WIDTH, y2: HEIGHT - 0.5, className: "stroke-border", strokeWidth: "1", vectorEffect: "non-scaling-stroke" }), points.length > 1 && (_jsxs(_Fragment, { children: [_jsx("path", { d: `${line} L${points[points.length - 1][0].toFixed(1)} ${HEIGHT} L${points[0][0].toFixed(1)} ${HEIGHT} Z`, className: "fill-primary/10" }), _jsx("path", { d: line, fill: "none", className: "stroke-primary", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/SystemPanel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { MetricsPolling } from "./useMetricsPolling.js";
+/** The System tab: live resource use, refreshed every few seconds, with the last few minutes drawn as sparklines. */
+export default function SystemPanel({ polling }: {
+    polling: MetricsPolling;
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/SystemPanel.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlinePause, HiOutlinePlay } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { formatDateTime } from "./format.js";
+import HostCard from "./HostCard.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { METRICS_POLL_INTERVAL_MS } from "./metricsHistory.js";
+import NamespaceCard from "./NamespaceCard.js";
+import ProcessCard from "./ProcessCard.js";
+import PvcTable from "./PvcTable.js";
+/** The System tab: live resource use, refreshed every few seconds, with the last few minutes drawn as sparklines. */
+export default function SystemPanel({ polling }) {
+    const { history, error, loading, paused, setPaused } = polling;
+    const latest = history[history.length - 1];
+    const kubernetes = latest?.kubernetes;
+    const errors = kubernetes?.errors ?? [];
+    let status = `Updates every ${METRICS_POLL_INTERVAL_MS / 1000} seconds while this page is visible.`;
+    if (paused) {
+        status = "Updates are paused.";
+    }
+    else if (loading) {
+        status = "Loading…";
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-pressed": paused, onClick: () => setPaused(!paused), children: paused ? (_jsxs(_Fragment, { children: [_jsx(HiOutlinePlay, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Resume"] })) : (_jsxs(_Fragment, { children: [_jsx(HiOutlinePause, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Pause"] })) }), _jsxs("p", { role: "status", className: "text-xs text-text-muted", children: [status, latest && ` Last sample ${formatDateTime(latest.collectedAt)}.`] })] }), error && _jsx(Alert, { children: error }), latest && (_jsxs(_Fragment, { children: [_jsx(HostCard, { host: latest.host, history: history }), _jsx(ProcessCard, { process: latest.process, history: history }), !kubernetes?.available ? (_jsx(KubernetesNotice, { reason: kubernetes?.reason })) : (_jsxs(_Fragment, { children: [errors.length > 0 && (_jsx(Alert, { children: errors.map((message) => (_jsx("div", { children: message }, message))) })), _jsx(NamespaceCard, { namespace: kubernetes.namespace, history: history }), _jsx(PvcTable, { pvcs: kubernetes.pvcs ?? [] })] }))] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/UsageMeter.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+/** Above this share of its capacity, a resource is called high. */
+export declare const HIGH_USAGE_PERCENT = 80;
+/** Above this share of its capacity, a resource is called critical. */
+export declare const CRITICAL_USAGE_PERCENT = 90;
+export type UsageSeverity = "normal" | "high" | "critical";
+export declare function usageSeverity(percent: number): UsageSeverity;
+export interface UsageMeterProps {
+    /** What the bar measures (`Data volume usage`), for its text alternative. */
+    label: string;
+    /** How much of the capacity is used, 0 to 100 (a value outside is clamped for the bar, and written as it is). */
+    percent: number;
+    /** The amounts the percentage comes from (`3.2 GiB of 8 GiB`). */
+    detail: string;
+    /**
+     * Whether a high value is flagged (default). Off for a figure that is not the fullness of something of its own, such as a
+     * volume that shares the node's disk, where "nearly full" would be a false alarm.
+     */
+    flag?: boolean;
+}
+/**
+ * A bar showing how full something is. The amounts and the percentage are always written beside it, and a bar over
+ * `HIGH_USAGE_PERCENT` or `CRITICAL_USAGE_PERCENT` is also worded (High, Critical) with an icon, so the state is never
+ * only a colour.
+ */
+export default function UsageMeter({ label, percent, detail, flag }: UsageMeterProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/UsageMeter.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineExclamationCircle, HiOutlineExclamationTriangle } from "react-icons/hi2";
+import { formatPercent } from "./format.js";
+/** Above this share of its capacity, a resource is called high. */
+export const HIGH_USAGE_PERCENT = 80;
+/** Above this share of its capacity, a resource is called critical. */
+export const CRITICAL_USAGE_PERCENT = 90;
+export function usageSeverity(percent) {
+    if (percent > CRITICAL_USAGE_PERCENT) {
+        return "critical";
+    }
+    return percent > HIGH_USAGE_PERCENT ? "high" : "normal";
+}
+/** The fill of the bar for each severity: the ordinary accent, then the warning and danger colours. */
+const FILL = { normal: "bg-primary", high: "bg-warning", critical: "bg-danger" };
+/**
+ * A bar showing how full something is. The amounts and the percentage are always written beside it, and a bar over
+ * `HIGH_USAGE_PERCENT` or `CRITICAL_USAGE_PERCENT` is also worded (High, Critical) with an icon, so the state is never
+ * only a colour.
+ */
+export default function UsageMeter({ label, percent, detail, flag = true }) {
+    const severity = flag ? usageSeverity(percent) : "normal";
+    const width = Math.min(Math.max(percent, 0), 100);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "tabular-nums", children: detail }), _jsxs("span", { className: "flex items-center gap-1 tabular-nums", children: [severity === "high" && _jsx(HiOutlineExclamationTriangle, { size: 16, "aria-hidden": "true", className: "text-warning" }), severity === "critical" && _jsx(HiOutlineExclamationCircle, { size: 16, "aria-hidden": "true", className: "text-danger" }), formatPercent(percent), severity !== "normal" && _jsx("span", { className: "font-medium", children: severity === "high" ? "High" : "Critical" })] })] }), _jsx("div", { role: "meter", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(width), "aria-valuetext": `${detail}, ${formatPercent(percent)}${severity === "normal" ? "" : `, ${severity}`}`, className: "mt-1 h-2 overflow-hidden rounded-pill border border-border bg-surface-alt", children: _jsx("div", { className: `h-full rounded-pill ${FILL[severity]}`, style: { width: `${width}%` } }) })] }));
+}

package/dist/apps/shared/components/admin/diagnostics/VersionsPanel.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DiagnosticsVersions } from "./diagnosticsApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+import { InstalledPluginsData } from "./InstalledPlugins.js";
+export interface VersionsPanelProps {
+    versions: DiagnosticsResource<DiagnosticsVersions>;
+    plugins: DiagnosticsResource<InstalledPluginsData>;
+}
+/** The Versions tab: the server, its packages, the installed plugins and the install's other containers. */
+export default function VersionsPanel({ versions, plugins }: VersionsPanelProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/VersionsPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import ComponentsTable from "./ComponentsTable.js";
+import InstalledPlugins from "./InstalledPlugins.js";
+import PackagesTable from "./PackagesTable.js";
+import ServerVersionCard from "./ServerVersionCard.js";
+/** The Versions tab: the server, its packages, the installed plugins and the install's other containers. */
+export default function VersionsPanel({ versions, plugins }) {
+    const { data, error, loading } = versions;
+    return (_jsxs("div", { className: "space-y-6", children: [error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data && (_jsxs(_Fragment, { children: [_jsx(ServerVersionCard, { server: data.server }), _jsx(ComponentsTable, { components: data.components ?? [], kubernetes: data.kubernetes ?? { available: false } }), _jsx(InstalledPlugins, { data: plugins.data, error: plugins.error, loading: plugins.loading }), _jsx(PackagesTable, { packages: data.packages ?? [] })] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.d.ts

@@ -0,0 +1,168 @@
+/**
+ * The client of the server's `/admin/diagnostics/*` endpoints (`versions`, `runtime`, `metrics`). All three are GET,
+ * trusted-administrator only and `@RequiresElevation()`: an elevated token is required (403 `api-104`, see
+ * `../elevation.ts`), and any other 403 means the caller is not an administrator. The server may leave any optional
+ * field out, so a caller reads them defensively.
+ *
+ * The server reads Kubernetes with namespace-scoped permissions only: it can list the install's own pods, but not the
+ * cluster's nodes or the kubelet's statistics. That is why a node here is only what the pods say of it, and why the
+ * machine figures are those of the node running the server, read from inside its own container.
+ */
+/** The components of a RapidMX install that run beside the server itself, in the order the server lists them. */
+export type DiagnosticsComponentName = "postfix" | "postfix-bridge" | "mongodb" | "postgresql" | "redis" | "coturn" | "rspamd" | "clamav";
+export interface DiagnosticsContainer {
+    name: string;
+    image: string;
+    tag?: string;
+    digest?: string;
+    ready: boolean;
+    restartCount: number;
+}
+export interface DiagnosticsPod {
+    name: string;
+    phase: string;
+    ready: boolean;
+    restarts: number;
+    node?: string;
+    startedAt?: string;
+    containers: DiagnosticsContainer[];
+}
+export interface DiagnosticsComponent {
+    component: DiagnosticsComponentName;
+    /** `missing`: Kubernetes is reachable but no pod for it exists. `unknown`: Kubernetes is unavailable. */
+    status: "running" | "not-ready" | "missing" | "unknown";
+    /** The image tag of the component's main container. */
+    version?: string;
+    pods: DiagnosticsPod[];
+}
+export interface DiagnosticsVersions {
+    server: {
+        nodeVersion: string;
+        v8Version: string;
+        packageName: string;
+        packageVersion: string;
+        platform: string;
+        arch: string;
+        hostname: string;
+        pid: number;
+        startedAt: string;
+        uptimeSeconds: number;
+        nodeEnv: string;
+    };
+    /** Sorted by name. */
+    packages: {
+        name: string;
+        version: string;
+        direct: boolean;
+    }[];
+    /** Always all eight, in the order of `DiagnosticsComponentName`. */
+    components: DiagnosticsComponent[];
+    kubernetes: {
+        available: boolean;
+        reason?: string;
+    };
+}
+/** A node that runs some of this install's pods, derived from the pods: nothing else about the node is readable. */
+export interface DiagnosticsNode {
+    name: string;
+    internalIP?: string;
+    /** How many of the install's pods run on it. */
+    podCount: number;
+}
+export type KubernetesDistribution = "k3s" | "rke2" | "eks" | "gke" | "aks" | "kubernetes";
+export interface DiagnosticsRuntime {
+    available: boolean;
+    reason?: string;
+    namespace?: string;
+    version?: {
+        gitVersion: string;
+        major: string;
+        minor: string;
+        platform: string;
+        goVersion?: string;
+        buildDate?: string;
+        distribution: KubernetesDistribution;
+    };
+    nodes: DiagnosticsNode[];
+}
+/** One filesystem of the node that runs the server, as the server's own container sees it. */
+export interface DiagnosticsDiskMetrics {
+    path: string;
+    /** The volume claim mounted there, when it is one. */
+    pvc?: string;
+    usedBytes: number;
+    capacityBytes: number;
+    availableBytes: number;
+    /** The figures are the whole node filesystem's, not a volume of its own (a hostPath-style volume, such as k3s local-path). */
+    sharesNodeDisk?: boolean;
+}
+/**
+ * The node the server pod runs on, as seen from inside the server's own container (on a single-node k3s that is the whole
+ * machine). In a cluster of several nodes it is only that one node.
+ */
+export interface DiagnosticsHostMetrics {
+    /** The whole host, 0 to 100 across all cores. */
+    cpuPercent: number;
+    cpuCount: number;
+    memoryTotalBytes: number;
+    memoryUsedBytes: number;
+    loadAverage: [number, number, number];
+    disks: DiagnosticsDiskMetrics[];
+}
+/** From the metrics API (metrics-server): absent when it is not installed. */
+export interface DiagnosticsPodMetrics {
+    name: string;
+    component?: DiagnosticsComponentName | "server";
+    cpuUsedCores?: number;
+    memoryUsedBytes?: number;
+}
+/**
+ * `usedBytes`/`availableBytes` exist only for a volume the server pod mounts (`mountedByServer`). `sharesNodeDisk` means the
+ * figures are the whole node filesystem's, and the volume's own size is not enforced.
+ */
+export interface DiagnosticsPvcMetrics {
+    name: string;
+    phase: string;
+    storageClass?: string;
+    requestedBytes?: number;
+    capacityBytes?: number;
+    usedBytes?: number;
+    availableBytes?: number;
+    mountedByServer: boolean;
+    sharesNodeDisk?: boolean;
+}
+export interface DiagnosticsMetrics {
+    collectedAt: string;
+    process: {
+        cpuPercent: number;
+        rssBytes: number;
+        heapUsedBytes: number;
+        heapTotalBytes: number;
+        loadAverage: [number, number, number];
+        systemMemoryTotalBytes: number;
+        systemMemoryFreeBytes: number;
+        cpuCount: number;
+    };
+    host: DiagnosticsHostMetrics;
+    kubernetes: {
+        available: boolean;
+        reason?: string;
+        namespace?: {
+            name: string;
+            /** Whether the pod figures could be read: they need metrics-server. */
+            podMetricsAvailable: boolean;
+            podMetricsReason?: string;
+            cpuUsedCores?: number;
+            memoryUsedBytes?: number;
+            pods: DiagnosticsPodMetrics[];
+        };
+        pvcs: DiagnosticsPvcMetrics[];
+        errors: string[];
+    };
+}
+/** What is installed and running: the server process, its packages, and the other containers of the install. */
+export declare function getDiagnosticsVersions(): Promise<DiagnosticsVersions>;
+/** The Kubernetes version, and the nodes the install's pods run on. */
+export declare function getDiagnosticsRuntime(): Promise<DiagnosticsRuntime>;
+/** One sample of live resource use. Polled by the System tab. */
+export declare function getDiagnosticsMetrics(): Promise<DiagnosticsMetrics>;

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.js

@@ -0,0 +1,17 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { apiFetch } from "@rapidmx/react-shared/util/api.js";
+/** What is installed and running: the server process, its packages, and the other containers of the install. */
+export function getDiagnosticsVersions() {
+    return apiFetch("/admin/diagnostics/versions");
+}
+/** The Kubernetes version, and the nodes the install's pods run on. */
+export function getDiagnosticsRuntime() {
+    return apiFetch("/admin/diagnostics/runtime");
+}
+/** One sample of live resource use. Polled by the System tab. */
+export function getDiagnosticsMetrics() {
+    return apiFetch("/admin/diagnostics/metrics");
+}

package/dist/apps/shared/components/admin/diagnostics/download.d.ts

@@ -0,0 +1,9 @@
+/** Saves `content` to the viewer's computer as a file called `filename`. What the download buttons call, so a test can swap it. */
+export type SaveFile = (filename: string, content: string, mimeType: string) => void;
+/**
+ * The browser way to save text it made itself: a Blob behind an object URL, opened by a temporary `<a download>`. The URL is
+ * revoked once the click has been handled (not in the same turn: some browsers start the download after it).
+ */
+export declare const saveTextFile: SaveFile;
+/** `rapidmx-server-logs-2026-09-26T10-30-00.000Z.log`: the name, then the time with the colons a file name cannot hold replaced. */
+export declare function timestampedFilename(name: string, extension: string, now?: Date): string;

package/dist/apps/shared/components/admin/diagnostics/download.js

@@ -0,0 +1,23 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The browser way to save text it made itself: a Blob behind an object URL, opened by a temporary `<a download>`. The URL is
+ * revoked once the click has been handled (not in the same turn: some browsers start the download after it).
+ */
+export const saveTextFile = (filename, content, mimeType) => {
+    const url = URL.createObjectURL(new Blob([content], { type: mimeType }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+};
+/** `rapidmx-server-logs-2026-09-26T10-30-00.000Z.log`: the name, then the time with the colons a file name cannot hold replaced. */
+export function timestampedFilename(name, extension, now = new Date()) {
+    return `${name}-${now.toISOString().replace(/:/g, "-")}.${extension}`;
+}

package/dist/apps/shared/components/admin/diagnostics/format.d.ts

@@ -0,0 +1,24 @@
+/** What is shown where a number is missing or not a number. */
+export declare const NO_VALUE = "\u2014";
+/** `1536` as `1.5 KiB` (binary units, as Kubernetes reports them). */
+export declare function formatBytes(bytes: number | undefined): string;
+/** CPU as cores: `0.25 cores`, `1 core`, `4 cores`. */
+export declare function formatCores(cores: number | undefined): string;
+/** `42.34` as `42.3%`. */
+export declare function formatPercent(percent: number | undefined): string;
+/** `used` as a percentage of `capacity`, or `undefined` when either is missing or the capacity is not positive. */
+export declare function percentOf(used: number | undefined, capacity: number | undefined): number | undefined;
+/** Seconds as `3d 4h`, `4h 12m`, `12m 5s` or `5s`: the two largest units that are not zero. */
+export declare function formatUptime(seconds: number | undefined): string;
+/** A date as the viewer's local date and time, or a dash for a missing one (an unreadable one is shown as it came). */
+export declare function formatDateTime(value: string | undefined): string;
+/** `sha256:0123456789abcdef...` as `0123456789ab`. */
+export declare function shortDigest(digest: string | undefined): string;
+/** Shown when the server wants the administrator to have confirmed their identity recently (`api-104`). */
+export declare const ELEVATION_MESSAGE = "Diagnostics needs you to have recently confirmed your identity. Reload this page, or sign in again, then try once more.";
+/** Shown for a 403 that is not about elevation, or a 401. */
+export declare const NOT_AUTHORISED_MESSAGE = "You are not authorised to view diagnostics.";
+/** Whether the caller is not (or no longer) allowed: retrying the same request would fail the same way. */
+export declare function isPermissionError(err: unknown): boolean;
+/** Why a request failed, in words for the administrator. */
+export declare function describeError(err: unknown, fallback: string): string;