@rapidmx/web-client 0.17.2 → 0.19.0

package/apps/admin/diagnostics/index.tsx

@@ -0,0 +1,15 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import DiagnosticsManager from "../../shared/components/admin/diagnostics/DiagnosticsManager.js";
+
+export default function DiagnosticsPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="diagnostics">
+            <DiagnosticsManager />
+        </AdminShell>
+    );
+}

package/apps/shared/components/admin/diagnostics/Badge.tsx

@@ -0,0 +1,37 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import type { IconType } from "react-icons";
+
+export type BadgeTone = "success" | "warning" | "danger" | "info" | "neutral";
+
+/** The tint behind a badge and the colour of its icon. The words stay in the normal text colour, and every tone
+ * that means something (good, warning, bad) is also worded, so a badge never relies on its colour alone. */
+const TONES: Record<BadgeTone, { background: string; icon: string }> = {
+    success: { background: "bg-success/15", icon: "text-success" },
+    warning: { background: "bg-warning/25", icon: "text-warning" },
+    danger: { background: "bg-danger/15", icon: "text-danger" },
+    info: { background: "bg-primary/15", icon: "text-primary" },
+    neutral: { background: "bg-surface-alt", icon: "text-text-muted" },
+};
+
+export interface BadgeProps {
+    tone?: BadgeTone;
+    icon?: IconType;
+    children: ReactNode;
+}
+
+/** A small pill: an optional icon, then a word or two. */
+export default function Badge({ tone = "neutral", icon: Icon, children }: BadgeProps) {
+    const classes = TONES[tone];
+    return (
+        <span
+            className={`inline-flex items-center gap-1 rounded-pill border border-border px-2 py-0.5 text-xs font-medium text-text whitespace-nowrap ${classes.background}`}
+        >
+            {Icon && <Icon size={14} aria-hidden="true" className={classes.icon} />}
+            {children}
+        </span>
+    );
+}

package/apps/shared/components/admin/diagnostics/ComponentsTable.tsx

@@ -0,0 +1,131 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineCheckCircle, HiOutlineExclamationTriangle, HiOutlineMinusCircle, HiOutlineQuestionMarkCircle } from "react-icons/hi2";
+import type { DiagnosticsComponent, DiagnosticsContainer, DiagnosticsPod } from "./diagnosticsApi.js";
+import Badge from "./Badge.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { formatDateTime, NO_VALUE, shortDigest } from "./format.js";
+
+const STATUS: Record<DiagnosticsComponent["status"], { label: string; tone: "success" | "warning" | "neutral"; icon: typeof HiOutlineCheckCircle }> = {
+    running: { label: "Running", tone: "success", icon: HiOutlineCheckCircle },
+    "not-ready": { label: "Not ready", tone: "warning", icon: HiOutlineExclamationTriangle },
+    missing: { label: "Not found", tone: "neutral", icon: HiOutlineMinusCircle },
+    unknown: { label: "Unknown", tone: "neutral", icon: HiOutlineQuestionMarkCircle },
+};
+
+/** The container to describe a component by: the one running the image tag the server calls its version, else the first. */
+export function mainContainer(component: DiagnosticsComponent): DiagnosticsContainer | undefined {
+    const containers = component.pods.flatMap((pod) => pod.containers);
+    return containers.find((container) => container.tag !== undefined && container.tag === component.version) ?? containers[0];
+}
+
+/** `image` with its tag, unless the server already wrote the tag into the image. */
+export function imageReference(container: DiagnosticsContainer): string {
+    return container.tag && !container.image.endsWith(`:${container.tag}`) ? `${container.image}:${container.tag}` : container.image;
+}
+
+const HEADINGS = ["Component", "Status", "Version", "Image", "Digest", "Restarts", "Node"];
+
+export interface ComponentsTableProps {
+    components: DiagnosticsComponent[];
+    kubernetes: { available: boolean; reason?: string };
+}
+
+/** The other containers of the install (mail transport, databases, the spam and virus filters, the TURN relay) and how they are doing. */
+export default function ComponentsTable({ components, kubernetes }: ComponentsTableProps) {
+    return (
+        <section aria-labelledby="diagnostics-components-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-components-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                Other containers
+            </h2>
+            {!kubernetes.available ? (
+                <KubernetesNotice reason={kubernetes.reason} />
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {HEADINGS.map((heading) => (
+                                    <th
+                                        key={heading}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {heading}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {components.map((component) => (
+                                <ComponentRow key={component.component} component={component} />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </section>
+    );
+}
+
+function ComponentRow({ component }: { component: DiagnosticsComponent }) {
+    const status = STATUS[component.status] ?? STATUS.unknown;
+    const main = mainContainer(component);
+    const restarts = component.pods.reduce((total, pod) => total + pod.restarts, 0);
+    const nodes = [...new Set(component.pods.map((pod) => pod.node).filter(Boolean))];
+    return (
+        <tr className="align-top">
+            <td className="py-2 px-2.5 border-b border-border">
+                <div className="font-medium">{component.component}</div>
+                {component.pods.length > 0 && (
+                    <details className="text-xs text-text-muted">
+                        <summary className="cursor-pointer">
+                            {component.pods.length} {component.pods.length === 1 ? "pod" : "pods"}
+                        </summary>
+                        <ul className="mt-1 space-y-2">
+                            {component.pods.map((pod) => (
+                                <PodDetail key={pod.name} pod={pod} />
+                            ))}
+                        </ul>
+                    </details>
+                )}
+            </td>
+            <td className="py-2 px-2.5 border-b border-border">
+                <Badge tone={status.tone} icon={status.icon}>
+                    {status.label}
+                </Badge>
+            </td>
+            <td className="py-2 px-2.5 border-b border-border font-mono">{component.version ?? NO_VALUE}</td>
+            <td className="py-2 px-2.5 border-b border-border font-mono break-all">{main?.image ?? NO_VALUE}</td>
+            <td className="py-2 px-2.5 border-b border-border font-mono" title={main?.digest}>
+                {shortDigest(main?.digest)}
+            </td>
+            <td className="py-2 px-2.5 border-b border-border tabular-nums">{component.pods.length > 0 ? restarts : NO_VALUE}</td>
+            <td className="py-2 px-2.5 border-b border-border">{nodes.length > 0 ? nodes.join(", ") : NO_VALUE}</td>
+        </tr>
+    );
+}
+
+function PodDetail({ pod }: { pod: DiagnosticsPod }) {
+    return (
+        <li className="rounded-sm border border-border p-2">
+            <div className="font-mono text-text break-all">{pod.name}</div>
+            <div>
+                {pod.phase} &middot; {pod.ready ? "ready" : "not ready"} &middot; {pod.restarts} {pod.restarts === 1 ? "restart" : "restarts"}
+                {pod.node ? ` · on ${pod.node}` : ""}
+                {pod.startedAt ? ` · started ${formatDateTime(pod.startedAt)}` : ""}
+            </div>
+            <ul className="mt-1">
+                {pod.containers.map((container) => (
+                    <li key={container.name} className="font-mono break-all">
+                        {container.name}: {imageReference(container)}
+                        {container.digest ? ` @${shortDigest(container.digest)}` : ""} &middot; {container.ready ? "ready" : "not ready"} &middot;{" "}
+                        {container.restartCount} {container.restartCount === 1 ? "restart" : "restarts"}
+                    </li>
+                ))}
+            </ul>
+        </li>
+    );
+}

package/apps/shared/components/admin/diagnostics/DiagnosticsManager.tsx

@@ -0,0 +1,173 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, useEffect, useRef, useState } from "react";
+import { HiOutlineArrowDownTray, HiOutlineArrowPath } from "react-icons/hi2";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { DiagnosticsMetrics, getDiagnosticsMetrics, getDiagnosticsRuntime, getDiagnosticsVersions } from "./diagnosticsApi.js";
+import { saveTextFile, SaveFile, timestampedFilename } from "./download.js";
+import { describeError } from "./format.js";
+import { loadInstalledPlugins } from "./InstalledPlugins.js";
+import type { LogSocketFactory } from "./logClient.js";
+import LogsPanel from "./LogsPanel.js";
+import RuntimePanel from "./RuntimePanel.js";
+import SystemPanel from "./SystemPanel.js";
+import { useDiagnosticsResource } from "./useDiagnosticsResource.js";
+import { useLogStream } from "./useLogStream.js";
+import { useMetricsPolling } from "./useMetricsPolling.js";
+import VersionsPanel from "./VersionsPanel.js";
+
+export type DiagnosticsTab = "versions" | "runtime" | "system" | "logs";
+
+const TABS: { id: DiagnosticsTab; label: string }[] = [
+    { id: "versions", label: "Versions" },
+    { id: "runtime", label: "Runtime" },
+    { id: "system", label: "System" },
+    { id: "logs", label: "Logs" },
+];
+
+const tabId = (tab: DiagnosticsTab) => `diagnostics-tab-${tab}`;
+const panelId = (tab: DiagnosticsTab) => `diagnostics-panel-${tab}`;
+
+export interface DiagnosticsManagerProps {
+    /** Creates the log stream's WebSocket. Defaults to the browser's. For a test. */
+    createLogSocket?: LogSocketFactory;
+    /** Saves a downloaded file. Defaults to `saveTextFile()`. For a test. */
+    saveFile?: SaveFile;
+}
+
+/**
+ * The Diagnostics page: what is installed (Versions), what it runs on (Runtime), how it is doing right now (System, live) and what
+ * the server is logging (Logs, live, with captures). Versions and Runtime are read when the page opens and again on Refresh, and
+ * are not polled. The live tabs only work while they are open: System polls only on its tab, and the log stream is opened the
+ * first time the Logs tab is (and closes with the page, or on Stop).
+ */
+export default function DiagnosticsManager({ createLogSocket, saveFile = saveTextFile }: DiagnosticsManagerProps) {
+    const [tab, setTab] = useState<DiagnosticsTab>("versions");
+    const [reloadKey, setReloadKey] = useState(0);
+    const [preparingReport, setPreparingReport] = useState(false);
+    const versions = useDiagnosticsResource(getDiagnosticsVersions, reloadKey, "Could not read the server's versions.");
+    const runtime = useDiagnosticsResource(getDiagnosticsRuntime, reloadKey, "Could not read the runtime.");
+    const plugins = useDiagnosticsResource(loadInstalledPlugins, reloadKey, "Could not read the installed plugins.");
+    const polling = useMetricsPolling(tab === "system");
+    const logStream = useLogStream({ createSocket: createLogSocket });
+    const logsOpened = useRef(false);
+    const { start: startLogs } = logStream;
+
+    useEffect(() => {
+        if (tab === "logs" && !logsOpened.current) {
+            logsOpened.current = true;
+            startLogs();
+        }
+    }, [tab]);
+
+    const refreshing = versions.loading || runtime.loading || plugins.loading;
+
+    function handleTabKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+        const index = TABS.findIndex((item) => item.id === tab);
+        let next: number;
+        if (event.key === "ArrowRight") {
+            next = (index + 1) % TABS.length;
+        } else if (event.key === "ArrowLeft") {
+            next = (index + TABS.length - 1) % TABS.length;
+        } else if (event.key === "Home") {
+            next = 0;
+        } else if (event.key === "End") {
+            next = TABS.length - 1;
+        } else {
+            return;
+        }
+        event.preventDefault();
+        setTab(TABS[next].id);
+        document.getElementById(tabId(TABS[next].id))?.focus();
+    }
+
+    /** Saves the versions, the runtime and the latest metrics sample (asking for one if the System tab has not sampled): no logs. */
+    async function downloadReport() {
+        setPreparingReport(true);
+        const generatedAt = new Date();
+        let metrics: DiagnosticsMetrics | undefined = polling.history[polling.history.length - 1];
+        let metricsError: string | undefined;
+        if (!metrics) {
+            try {
+                metrics = await getDiagnosticsMetrics();
+            } catch (err) {
+                metricsError = describeError(err, "Could not read the server's metrics.");
+            }
+        }
+        const report = {
+            generatedAt: generatedAt.toISOString(),
+            versions: versions.data ?? null,
+            runtime: runtime.data ?? null,
+            // Only what each plugin is and which version is loaded: a plugin's settings can hold secrets.
+            plugins: plugins.data
+                ? {
+                      installed: plugins.data.plugins.map(({ name, packageVersion, enabled }) => ({ name, packageVersion, enabled })),
+                      status: plugins.data.status ?? null,
+                  }
+                : null,
+            metrics: metrics ?? null,
+            errors: {
+                versions: versions.error ?? null,
+                runtime: runtime.error ?? null,
+                plugins: plugins.error ?? null,
+                metrics: metricsError ?? null,
+            },
+        };
+        saveFile(timestampedFilename("rapidmx-diagnostics", "json", generatedAt), `${JSON.stringify(report, null, 2)}\n`, "application/json");
+        setPreparingReport(false);
+    }
+
+    return (
+        <>
+            <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Diagnostics</h1>
+                <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto"
+                        disabled={refreshing}
+                        onClick={() => setReloadKey(reloadKey + 1)}
+                    >
+                        <HiOutlineArrowPath size={16} aria-hidden="true" className="mr-1 inline" />
+                        Refresh
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={preparingReport} onClick={() => void downloadReport()}>
+                        <HiOutlineArrowDownTray size={16} aria-hidden="true" className="mr-1 inline" />
+                        Download diagnostics report
+                    </Button>
+                </div>
+            </div>
+
+            <div role="tablist" aria-label="Diagnostics sections" className="mb-5 flex gap-1 overflow-x-auto rounded-lg bg-surface-alt p-1">
+                {TABS.map((item) => (
+                    <button
+                        key={item.id}
+                        type="button"
+                        role="tab"
+                        id={tabId(item.id)}
+                        aria-selected={item.id === tab}
+                        aria-controls={panelId(item.id)}
+                        tabIndex={item.id === tab ? 0 : -1}
+                        onClick={() => setTab(item.id)}
+                        onKeyDown={handleTabKeyDown}
+                        className={`flex-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ${
+                            item.id === tab ? "bg-surface text-text shadow-card" : "text-text-muted hover:text-text"
+                        }`}
+                    >
+                        {item.label}
+                    </button>
+                ))}
+            </div>
+
+            <div role="tabpanel" id={panelId(tab)} aria-labelledby={tabId(tab)}>
+                {tab === "versions" && <VersionsPanel versions={versions} plugins={plugins} />}
+                {tab === "runtime" && <RuntimePanel runtime={runtime} />}
+                {tab === "system" && <SystemPanel polling={polling} />}
+                {tab === "logs" && <LogsPanel stream={logStream} saveFile={saveFile} />}
+            </div>
+        </>
+    );
+}

package/apps/shared/components/admin/diagnostics/HostCard.tsx

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import type { DiagnosticsDiskMetrics, DiagnosticsMetrics } from "./diagnosticsApi.js";
+import { formatBytes, formatCores, formatPercent, NO_VALUE, percentOf } from "./format.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+import UsageMeter from "./UsageMeter.js";
+
+const percentLabel = (value: number) => formatPercent(value);
+
+/** `1.23, 0.98, 0.5`, or a dash for a load average the server left out. */
+export function formatLoad(load: number[] | undefined): string {
+    return load && load.length > 0 ? load.map((value) => value.toFixed(2)).join(", ") : NO_VALUE;
+}
+
+export interface HostCardProps {
+    host: DiagnosticsMetrics["host"] | undefined;
+    history: DiagnosticsMetrics[];
+}
+
+function DiskRow({ disk }: { disk: DiagnosticsDiskMetrics }) {
+    const percent = percentOf(disk.usedBytes, disk.capacityBytes);
+    return (
+        <li className="rounded-sm border border-border p-3">
+            <div className="mb-1 flex flex-wrap items-baseline gap-x-2 text-sm">
+                <span className="font-mono break-all">{disk.path}</span>
+                {disk.pvc && <span className="text-xs text-text-muted">volume {disk.pvc}</span>}
+            </div>
+            {percent === undefined ? (
+                <p className="text-sm text-text-muted">No usage figures.</p>
+            ) : (
+                <UsageMeter
+                    label={`Disk usage of ${disk.path}`}
+                    percent={percent}
+                    detail={`${formatBytes(disk.usedBytes)} of ${formatBytes(disk.capacityBytes)}, ${formatBytes(disk.availableBytes)} free`}
+                />
+            )}
+            {disk.sharesNodeDisk && <p className="mt-1 text-xs text-text-muted">Shares the node&rsquo;s disk.</p>}
+        </li>
+    );
+}
+
+/**
+ * The node the server pod runs on, as its own container sees it: whole-host CPU, memory, load and disks. It is only that
+ * node in a cluster of several, and the whole machine on a single-node install or under Docker Compose.
+ */
+export default function HostCard({ host, history }: HostCardProps) {
+    const memoryPercent = percentOf(host?.memoryUsedBytes, host?.memoryTotalBytes);
+    const disks = host?.disks ?? [];
+    return (
+        <section aria-labelledby="diagnostics-host-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-host-heading" className="text-base font-bold uppercase tracking-wide mb-1">
+                Node running this server
+            </h2>
+            <p className="mb-3 text-xs text-text-muted">
+                As the server&rsquo;s own container sees it. In a cluster of several nodes this is only the node the server runs on.
+            </p>
+            {!host ? (
+                <p className="text-sm text-text-muted">The server did not report the node&rsquo;s figures.</p>
+            ) : (
+                <>
+                    <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+                        <MetricTile
+                            label="CPU"
+                            value={formatPercent(host.cpuPercent)}
+                            detail={formatCores(host.cpuCount)}
+                            usage={Number.isFinite(host.cpuPercent) ? { percent: host.cpuPercent, detail: "Whole host, all cores" } : undefined}
+                            history={{
+                                values: seriesOf(history, (sample) => sample.host?.cpuPercent),
+                                max: 100,
+                                format: percentLabel,
+                            }}
+                        />
+                        <MetricTile
+                            label="Memory"
+                            value={formatBytes(host.memoryUsedBytes)}
+                            detail={`of ${formatBytes(host.memoryTotalBytes)}`}
+                            usage={
+                                memoryPercent === undefined
+                                    ? undefined
+                                    : { percent: memoryPercent, detail: `${formatBytes(host.memoryUsedBytes)} of ${formatBytes(host.memoryTotalBytes)}` }
+                            }
+                            history={{
+                                values: seriesOf(history, (sample) => percentOf(sample.host?.memoryUsedBytes, sample.host?.memoryTotalBytes)),
+                                max: 100,
+                                format: percentLabel,
+                            }}
+                        />
+                        <MetricTile label="Load average" value={formatLoad(host.loadAverage)} detail="1, 5 and 15 minutes" />
+                    </div>
+                    <h3 className="mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted">Disks</h3>
+                    {disks.length === 0 ? (
+                        <p className="text-sm text-text-muted">No disks were reported.</p>
+                    ) : (
+                        <ul className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                            {disks.map((disk) => (
+                                <DiskRow key={disk.path} disk={disk} />
+                            ))}
+                        </ul>
+                    )}
+                </>
+            )}
+        </section>
+    );
+}

package/apps/shared/components/admin/diagnostics/InstalledPlugins.tsx

@@ -0,0 +1,136 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineExclamationTriangle } from "react-icons/hi2";
+import { getPluginStatus, listPlugins, Plugin, PluginStatus } from "@rapidmx/react-shared/admin/pluginsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Badge from "./Badge.js";
+import { NO_VALUE } from "./format.js";
+
+/** The installed plugins, and what each server copy reports of them (absent when the status could not be read). */
+export interface InstalledPluginsData {
+    plugins: Plugin[];
+    status: PluginStatus | undefined;
+}
+
+/** Reads the plugins, and their load status. A status that cannot be read leaves the list without it, not without the list. */
+export async function loadInstalledPlugins(): Promise<InstalledPluginsData> {
+    const [plugins, status] = await Promise.all([listPlugins(), getPluginStatus().catch(() => undefined)]);
+    return { plugins, status };
+}
+
+/** Which versions of `name` the server copies have loaded, and the load errors they report for it. */
+export function pluginLoadState(status: PluginStatus, name: string) {
+    const instances = status.instances;
+    const loaded = instances.flatMap((instance) => instance.loaded.filter((item) => item.name === name));
+    const errors = instances.flatMap((instance) => instance.errors.filter((item) => item.name === name));
+    return {
+        versions: [...new Set(loaded.map((item) => item.version))],
+        loadedOn: loaded.length,
+        instanceCount: instances.length,
+        errors: [...new Set(errors.map((item) => item.message))],
+    };
+}
+
+const HEADINGS = ["Plugin", "Configured version", "Enabled", "Loaded version", "Load errors"];
+
+export interface InstalledPluginsProps {
+    data: InstalledPluginsData | undefined;
+    error: string | undefined;
+    loading: boolean;
+}
+
+/**
+ * Each installed plugin with the version configured for it and the version the running servers actually loaded. The two
+ * differ while a change is still being applied, or when a version could not be loaded (then the load error is shown).
+ */
+export default function InstalledPlugins({ data, error, loading }: InstalledPluginsProps) {
+    let body;
+    if (error) {
+        body = <Alert>{error}</Alert>;
+    } else if (!data) {
+        body = loading ? <p className="text-sm text-text-muted">Loading&hellip;</p> : null;
+    } else if (data.plugins.length === 0) {
+        body = <p className="text-sm text-text-muted">No plugins are installed.</p>;
+    } else {
+        body = (
+            <>
+                {!data.status && (
+                    <p role="status" className="mb-2 text-xs text-text-muted">
+                        What the servers have loaded could not be read, so only the configured versions are shown.
+                    </p>
+                )}
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {HEADINGS.map((heading) => (
+                                    <th
+                                        key={heading}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {heading}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.plugins.map((plugin) => (
+                                <PluginRow key={plugin.uid} plugin={plugin} status={data.status} />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </>
+        );
+    }
+    return (
+        <section aria-labelledby="diagnostics-plugins-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-plugins-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                Installed plugins
+            </h2>
+            {body}
+        </section>
+    );
+}
+
+function PluginRow({ plugin, status }: { plugin: Plugin; status: PluginStatus | undefined }) {
+    const state = status ? pluginLoadState(status, plugin.name) : undefined;
+    let loaded = NO_VALUE;
+    if (state) {
+        if (state.versions.length > 0) {
+            loaded = `${state.versions.join(", ")} (on ${state.loadedOn} of ${state.instanceCount} servers)`;
+        } else if (plugin.enabled) {
+            loaded = "Not loaded";
+        }
+    }
+    const differs = state !== undefined && state.versions.some((version) => version !== plugin.packageVersion);
+    return (
+        <tr>
+            <td className="py-2 px-2.5 border-b border-border">
+                <div>{plugin.manifest.displayName ?? plugin.name}</div>
+                <div className="font-mono text-xs text-text-muted break-all">{plugin.name}</div>
+            </td>
+            <td className="py-2 px-2.5 border-b border-border font-mono">{plugin.packageVersion}</td>
+            <td className="py-2 px-2.5 border-b border-border">
+                <Badge tone={plugin.enabled ? "success" : "neutral"}>{plugin.enabled ? "Enabled" : "Disabled"}</Badge>
+            </td>
+            <td className="py-2 px-2.5 border-b border-border">
+                <span className="font-mono">{loaded}</span>
+                {differs && <div className="text-xs text-text-muted">Differs from the configured version</div>}
+            </td>
+            <td className="py-2 px-2.5 border-b border-border">
+                {state && state.errors.length > 0
+                    ? state.errors.map((message) => (
+                          <div key={message} className="flex items-start gap-1">
+                              <HiOutlineExclamationTriangle size={16} aria-hidden="true" className="mt-0.5 shrink-0 text-danger" />
+                              <span className="text-text break-words">{message}</span>
+                          </div>
+                      ))
+                    : NO_VALUE}
+            </td>
+        </tr>
+    );
+}

package/apps/shared/components/admin/diagnostics/KubernetesNotice.tsx

@@ -0,0 +1,25 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineInformationCircle } from "react-icons/hi2";
+
+/**
+ * Said where Kubernetes information would be, when the server cannot reach a cluster. That is ordinary (for one, when
+ * RapidMX runs under Docker Compose), so it is a plain note and not an error.
+ */
+export default function KubernetesNotice({ reason }: { reason?: string }) {
+    return (
+        <div role="status" className="flex items-start gap-3 rounded-md border border-border bg-surface-alt p-4 text-sm">
+            <HiOutlineInformationCircle size={20} aria-hidden="true" className="mt-0.5 shrink-0 text-text-muted" />
+            <div>
+                <p className="font-medium">Kubernetes information is not available on this server.</p>
+                {reason && <p className="mt-1 text-text-muted">{reason}</p>}
+                <p className="mt-1 text-text-muted">
+                    This is expected when RapidMX does not run in a Kubernetes cluster, for example under Docker Compose.
+                </p>
+            </div>
+        </div>
+    );
+}