@rapidmx/web-client 0.17.2 → 0.18.0

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineArrowDownTray, HiOutlineArrowPath } from "react-icons/hi2";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { getDiagnosticsMetrics, getDiagnosticsRuntime, getDiagnosticsVersions } from "./diagnosticsApi.js";
+import { saveTextFile, timestampedFilename } from "./download.js";
+import { describeError } from "./format.js";
+import { loadInstalledPlugins } from "./InstalledPlugins.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";
+const TABS = [
+    { id: "versions", label: "Versions" },
+    { id: "runtime", label: "Runtime" },
+    { id: "system", label: "System" },
+    { id: "logs", label: "Logs" },
+];
+const tabId = (tab) => `diagnostics-tab-${tab}`;
+const panelId = (tab) => `diagnostics-panel-${tab}`;
+/**
+ * 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 }) {
+    const [tab, setTab] = useState("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) {
+        const index = TABS.findIndex((item) => item.id === tab);
+        let next;
+        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 = polling.history[polling.history.length - 1];
+        let metricsError;
+        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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-5 flex flex-wrap items-center justify-between gap-3", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Diagnostics" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: refreshing, onClick: () => setReloadKey(reloadKey + 1), children: [_jsx(HiOutlineArrowPath, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Refresh"] }), _jsxs(Button, { type: "button", className: "!w-auto", loading: preparingReport, onClick: () => void downloadReport(), children: [_jsx(HiOutlineArrowDownTray, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Download diagnostics report"] })] })] }), _jsx("div", { role: "tablist", "aria-label": "Diagnostics sections", className: "mb-5 flex gap-1 overflow-x-auto rounded-lg bg-surface-alt p-1", children: TABS.map((item) => (_jsx("button", { 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"}`, children: item.label }, item.id))) }), _jsxs("div", { role: "tabpanel", id: panelId(tab), "aria-labelledby": tabId(tab), children: [tab === "versions" && _jsx(VersionsPanel, { versions: versions, plugins: plugins }), tab === "runtime" && _jsx(RuntimePanel, { runtime: runtime }), tab === "system" && _jsx(SystemPanel, { polling: polling }), tab === "logs" && _jsx(LogsPanel, { stream: logStream, saveFile: saveFile })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+/** `1.23, 0.98, 0.5`, or a dash for a load average the server left out. */
+export declare function formatLoad(load: number[] | undefined): string;
+export interface HostCardProps {
+    host: DiagnosticsMetrics["host"] | undefined;
+    history: DiagnosticsMetrics[];
+}
+/**
+ * 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): React.JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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) => formatPercent(value);
+/** `1.23, 0.98, 0.5`, or a dash for a load average the server left out. */
+export function formatLoad(load) {
+    return load && load.length > 0 ? load.map((value) => value.toFixed(2)).join(", ") : NO_VALUE;
+}
+function DiskRow({ disk }) {
+    const percent = percentOf(disk.usedBytes, disk.capacityBytes);
+    return (_jsxs("li", { className: "rounded-sm border border-border p-3", children: [_jsxs("div", { className: "mb-1 flex flex-wrap items-baseline gap-x-2 text-sm", children: [_jsx("span", { className: "font-mono break-all", children: disk.path }), disk.pvc && _jsxs("span", { className: "text-xs text-text-muted", children: ["volume ", disk.pvc] })] }), percent === undefined ? (_jsx("p", { className: "text-sm text-text-muted", children: "No usage figures." })) : (_jsx(UsageMeter, { label: `Disk usage of ${disk.path}`, percent: percent, detail: `${formatBytes(disk.usedBytes)} of ${formatBytes(disk.capacityBytes)}, ${formatBytes(disk.availableBytes)} free` })), disk.sharesNodeDisk && _jsx("p", { className: "mt-1 text-xs text-text-muted", children: "Shares the node\u2019s disk." })] }));
+}
+/**
+ * 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 }) {
+    const memoryPercent = percentOf(host?.memoryUsedBytes, host?.memoryTotalBytes);
+    const disks = host?.disks ?? [];
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-host-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-host-heading", className: "text-base font-bold uppercase tracking-wide mb-1", children: "Node running this server" }), _jsx("p", { className: "mb-3 text-xs text-text-muted", children: "As the server\u2019s own container sees it. In a cluster of several nodes this is only the node the server runs on." }), !host ? (_jsx("p", { className: "text-sm text-text-muted", children: "The server did not report the node\u2019s figures." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(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,
+                                } }), _jsx(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,
+                                } }), _jsx(MetricTile, { label: "Load average", value: formatLoad(host.loadAverage), detail: "1, 5 and 15 minutes" })] }), _jsx("h3", { className: "mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted", children: "Disks" }), disks.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No disks were reported." })) : (_jsx("ul", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: disks.map((disk) => (_jsx(DiskRow, { disk: disk }, disk.path))) }))] }))] }));
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Plugin, PluginStatus } from "@rapidmx/react-shared/admin/pluginsApi.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 declare function loadInstalledPlugins(): Promise<InstalledPluginsData>;
+/** Which versions of `name` the server copies have loaded, and the load errors they report for it. */
+export declare function pluginLoadState(status: PluginStatus, name: string): {
+    versions: string[];
+    loadedOn: number;
+    instanceCount: number;
+    errors: string[];
+};
+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): React.JSX.Element;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineExclamationTriangle } from "react-icons/hi2";
+import { getPluginStatus, listPlugins } 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";
+/** 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() {
+    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, name) {
+    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"];
+/**
+ * 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 }) {
+    let body;
+    if (error) {
+        body = _jsx(Alert, { children: error });
+    }
+    else if (!data) {
+        body = loading ? _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }) : null;
+    }
+    else if (data.plugins.length === 0) {
+        body = _jsx("p", { className: "text-sm text-text-muted", children: "No plugins are installed." });
+    }
+    else {
+        body = (_jsxs(_Fragment, { children: [!data.status && (_jsx("p", { role: "status", className: "mb-2 text-xs text-text-muted", children: "What the servers have loaded could not be read, so only the configured versions are shown." })), _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: data.plugins.map((plugin) => (_jsx(PluginRow, { plugin: plugin, status: data.status }, plugin.uid))) })] }) })] }));
+    }
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-plugins-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-plugins-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Installed plugins" }), body] }));
+}
+function PluginRow({ plugin, status }) {
+    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 (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("div", { children: plugin.manifest.displayName ?? plugin.name }), _jsx("div", { className: "font-mono text-xs text-text-muted break-all", children: plugin.name })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono", children: plugin.packageVersion }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: _jsx(Badge, { tone: plugin.enabled ? "success" : "neutral", children: plugin.enabled ? "Enabled" : "Disabled" }) }), _jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("span", { className: "font-mono", children: loaded }), differs && _jsx("div", { className: "text-xs text-text-muted", children: "Differs from the configured version" })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: state && state.errors.length > 0
+                    ? state.errors.map((message) => (_jsxs("div", { className: "flex items-start gap-1", children: [_jsx(HiOutlineExclamationTriangle, { size: 16, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-danger" }), _jsx("span", { className: "text-text break-words", children: message })] }, message)))
+                    : NO_VALUE })] }));
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * 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;
+}): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    return (_jsxs("div", { role: "status", className: "flex items-start gap-3 rounded-md border border-border bg-surface-alt p-4 text-sm", children: [_jsx(HiOutlineInformationCircle, { size: 20, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-text-muted" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Kubernetes information is not available on this server." }), reason && _jsx("p", { className: "mt-1 text-text-muted", children: reason }), _jsx("p", { className: "mt-1 text-text-muted", children: "This is expected when RapidMX does not run in a Kubernetes cluster, for example under Docker Compose." })] })] }));
+}

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

@@ -0,0 +1,37 @@
+import type { LogEntry } from "./logLines.js";
+/** How many lines the log view keeps. Older lines are dropped, and counted. */
+export declare const LOG_BUFFER_LIMIT = 5000;
+/** How many lines one capture records. */
+export declare const LOG_CAPTURE_LIMIT = 50000;
+/** What a capture has recorded so far. */
+export interface LogCapture {
+    /** Whether lines are still being recorded. */
+    active: boolean;
+    /** When it started and, once stopped, ended (`Date.now()`). */
+    startedAt: number;
+    stoppedAt: number | undefined;
+    entries: LogEntry[];
+    /** How many lines arrived after `LOG_CAPTURE_LIMIT` was reached, and so were not recorded. */
+    missed: number;
+}
+/**
+ * Where the log view's lines are kept, outside React: a burst of lines is added without a render each. The display buffer holds the
+ * last `LOG_BUFFER_LIMIT` lines. A capture is separate: it records every line that arrives while it runs, whatever the display
+ * filters show and however many lines the display buffer has since dropped, up to `LOG_CAPTURE_LIMIT`.
+ */
+export declare class LogStore {
+    private readonly bufferLimit;
+    private readonly captureLimit;
+    entries: LogEntry[];
+    /** How many lines have been dropped from the front of `entries`. */
+    dropped: number;
+    capture: LogCapture | undefined;
+    constructor(bufferLimit?: number, captureLimit?: number);
+    add(entry: LogEntry): void;
+    /** Empties the display buffer. A capture in progress is not touched. */
+    clear(): void;
+    /** Starts recording (from nothing: an earlier capture is replaced). */
+    startCapture(now: number): void;
+    /** Stops recording. What was recorded is kept for download. */
+    stopCapture(now: number): void;
+}

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

@@ -0,0 +1,50 @@
+/** How many lines the log view keeps. Older lines are dropped, and counted. */
+export const LOG_BUFFER_LIMIT = 5000;
+/** How many lines one capture records. */
+export const LOG_CAPTURE_LIMIT = 50000;
+/**
+ * Where the log view's lines are kept, outside React: a burst of lines is added without a render each. The display buffer holds the
+ * last `LOG_BUFFER_LIMIT` lines. A capture is separate: it records every line that arrives while it runs, whatever the display
+ * filters show and however many lines the display buffer has since dropped, up to `LOG_CAPTURE_LIMIT`.
+ */
+export class LogStore {
+    constructor(bufferLimit = LOG_BUFFER_LIMIT, captureLimit = LOG_CAPTURE_LIMIT) {
+        this.bufferLimit = bufferLimit;
+        this.captureLimit = captureLimit;
+        this.entries = [];
+        /** How many lines have been dropped from the front of `entries`. */
+        this.dropped = 0;
+    }
+    add(entry) {
+        this.entries.push(entry);
+        if (this.entries.length > this.bufferLimit) {
+            const excess = this.entries.length - this.bufferLimit;
+            this.entries.splice(0, excess);
+            this.dropped += excess;
+        }
+        const capture = this.capture;
+        if (capture?.active) {
+            if (capture.entries.length < this.captureLimit) {
+                capture.entries.push(entry);
+            }
+            else {
+                capture.missed += 1;
+            }
+        }
+    }
+    /** Empties the display buffer. A capture in progress is not touched. */
+    clear() {
+        this.entries = [];
+        this.dropped = 0;
+    }
+    /** Starts recording (from nothing: an earlier capture is replaced). */
+    startCapture(now) {
+        this.capture = { active: true, startedAt: now, stoppedAt: undefined, entries: [], missed: 0 };
+    }
+    /** Stops recording. What was recorded is kept for download. */
+    stopCapture(now) {
+        if (this.capture?.active) {
+            this.capture = { ...this.capture, active: false, stoppedAt: now };
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { LogEntry } from "./logLines.js";
+/** The most rows the viewer puts in the page: the last this many lines that match. (The buffer behind it is bigger.) */
+export declare const LOG_VISIBLE_ROWS = 500;
+/** What is written in a line's level column: the level, or a marker for a line without one. */
+export declare function levelLabel(entry: LogEntry): string;
+/** A line's `stack` (which is shown as lines of its own), and its other extra fields. */
+export declare function splitExtra(extra: Record<string, unknown>): {
+    stack: string | undefined;
+    rest: Record<string, unknown>;
+};
+export declare function LevelBadge({ entry }: {
+    entry: LogEntry;
+}): React.JSX.Element;
+export interface LogViewerProps {
+    /** The lines to show, oldest first; only the last `LOG_VISIBLE_ROWS` are put in the page. */
+    entries: LogEntry[];
+    /** Whether the view stays scrolled to the newest line. */
+    follow: boolean;
+    /** Said when there is nothing to show. */
+    empty: string;
+}
+/** The lines, as monospace text in a scrolling box. The box is a live log region, but not announced line by line. */
+export default function LogViewer({ entries, follow, empty }: LogViewerProps): React.JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef } from "react";
+import { entryTime } from "./logLines.js";
+/** The most rows the viewer puts in the page: the last this many lines that match. (The buffer behind it is bigger.) */
+export const LOG_VISIBLE_ROWS = 500;
+/** The tint behind a level's name. The name is always written, so the tint only helps the eye find it. */
+const LEVEL_CLASSES = {
+    error: "bg-danger/20",
+    warn: "bg-warning/30",
+    info: "bg-primary/15",
+    http: "bg-accent/20",
+};
+/** What is written in a line's level column: the level, or a marker for a line without one. */
+export function levelLabel(entry) {
+    if (entry.level) {
+        return entry.level.toUpperCase();
+    }
+    return entry.structured ? "—" : "RAW";
+}
+/** A line's `stack` (which is shown as lines of its own), and its other extra fields. */
+export function splitExtra(extra) {
+    const { stack, ...rest } = extra;
+    return typeof stack === "string" ? { stack, rest } : { stack: undefined, rest: extra };
+}
+export function LevelBadge({ entry }) {
+    return (_jsx("span", { className: `inline-block w-16 shrink-0 rounded-sm px-1 text-center font-semibold ${LEVEL_CLASSES[entry.level] ?? "bg-surface"}`, children: levelLabel(entry) }));
+}
+function LogRow({ entry }) {
+    const { stack, rest } = splitExtra(entry.extra);
+    return (_jsxs("div", { className: "py-0.5 break-words", children: [_jsx("span", { className: "text-text-muted", children: entryTime(entry) }), " ", _jsx(LevelBadge, { entry: entry }), " ", _jsx("span", { className: "whitespace-pre-wrap", children: entry.message }), Object.keys(rest).length > 0 && _jsxs("span", { className: "text-text-muted", children: [" ", JSON.stringify(rest)] }), stack !== undefined && _jsx("div", { className: "whitespace-pre-wrap pl-4 text-text-muted", children: stack })] }));
+}
+/** The lines, as monospace text in a scrolling box. The box is a live log region, but not announced line by line. */
+export default function LogViewer({ entries, follow, empty }) {
+    const box = useRef(null);
+    const shown = entries.slice(-LOG_VISIBLE_ROWS);
+    useEffect(() => {
+        if (follow) {
+            // Mounted by the time an effect runs.
+            box.current.scrollTop = box.current.scrollHeight;
+        }
+    }, [shown.length, entries[entries.length - 1]?.id, follow]);
+    return (_jsx("div", { ref: box, role: "log", "aria-label": "Server log", "aria-live": "off", tabIndex: 0, className: "h-[28rem] overflow-auto rounded-md border border-border bg-surface-alt p-2 font-mono text-xs", children: shown.length === 0 ? _jsx("p", { className: "text-text-muted", children: empty }) : shown.map((entry) => _jsx(LogRow, { entry: entry }, entry.id)) }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { SaveFile } from "./download.js";
+import type { LogStream } from "./useLogStream.js";
+export interface LogsPanelProps {
+    stream: LogStream;
+    /** Saves a download. */
+    saveFile: SaveFile;
+}
+/**
+ * The Logs tab: the server's log stream as it happens, with filters, and captures. A capture records every line from the
+ * moment it starts, whatever the filters show, and can be downloaded (as can the display buffer) as a `.log` or `.ndjson` file.
+ */
+export default function LogsPanel({ stream, saveFile }: LogsPanelProps): React.JSX.Element;

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, useState } from "react";
+import { HiOutlineArrowDownTray, HiOutlineArrowPath, HiOutlineCheck, HiOutlineExclamationTriangle, HiOutlinePause, HiOutlinePlay, HiOutlineSignal, HiOutlineSignalSlash, HiOutlineStop, HiOutlineTrash, } 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 Badge from "./Badge.js";
+import { timestampedFilename } from "./download.js";
+import { formatUptime } from "./format.js";
+import { entriesToLog, entriesToNdjson, entryMatches, LOG_LEVELS, levelVisible } from "./logLines.js";
+import { LOG_BUFFER_LIMIT, LOG_CAPTURE_LIMIT } from "./LogStore.js";
+import LogViewer, { LOG_VISIBLE_ROWS } from "./LogViewer.js";
+const STATUS = {
+    connecting: { label: "Connecting", tone: "warning", icon: HiOutlineArrowPath },
+    live: { label: "Live", tone: "success", icon: HiOutlineSignal },
+    reconnecting: { label: "Reconnecting", tone: "warning", icon: HiOutlineArrowPath },
+    closed: { label: "Stopped", tone: "neutral", icon: HiOutlineSignalSlash },
+    error: { label: "Error", tone: "danger", icon: HiOutlineExclamationTriangle },
+};
+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";
+const MIME_TYPES = { log: "text/plain;charset=utf-8", ndjson: "application/x-ndjson" };
+/**
+ * The Logs tab: the server's log stream as it happens, with filters, and captures. A capture records every line from the
+ * moment it starts, whatever the filters show, and can be downloaded (as can the display buffer) as a `.log` or `.ndjson` file.
+ */
+export default function LogsPanel({ stream, saveFile }) {
+    const { status, error, running, entries, dropped, capture } = stream;
+    const [levels, setLevels] = useState(() => new Set(LOG_LEVELS));
+    const [search, setSearch] = useState("");
+    const [follow, setFollow] = useState(true);
+    const [now, setNow] = useState(() => Date.now());
+    // The clock the recording time counts against, ticking only while a capture records.
+    const recording = capture?.active === true;
+    useEffect(() => {
+        if (!recording) {
+            return;
+        }
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [recording]);
+    const needle = search.trim().toLowerCase();
+    const matching = useMemo(() => entries.filter((entry) => levelVisible(entry, levels) && entryMatches(entry, needle)), [entries, levels, needle]);
+    const filtered = matching.length !== entries.length;
+    const badge = STATUS[status];
+    function toggleLevel(level) {
+        const next = new Set(levels);
+        if (!next.delete(level)) {
+            next.add(level);
+        }
+        setLevels(next);
+    }
+    function download(lines, format) {
+        saveFile(timestampedFilename("rapidmx-server-logs", format), format === "log" ? entriesToLog(lines) : entriesToNdjson(lines), MIME_TYPES[format]);
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { tone: badge.tone, icon: badge.icon, children: badge.label }), running ? (_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: stream.stop, children: [_jsx(HiOutlineStop, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Stop"] })) : (_jsxs(Button, { type: "button", className: "!w-auto", onClick: stream.start, children: [_jsx(HiOutlinePlay, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Start"] })), _jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-pressed": !follow, onClick: () => setFollow(!follow), children: [_jsx(HiOutlinePause, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), follow ? "Pause scrolling" : "Resume scrolling"] }), _jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: stream.clear, children: [_jsx(HiOutlineTrash, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Clear"] })] }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("div", { role: "group", "aria-label": "Levels", className: "flex flex-wrap items-center gap-1", children: LOG_LEVELS.map((level) => (_jsxs("button", { type: "button", "aria-pressed": levels.has(level), onClick: () => toggleLevel(level), className: `inline-flex items-center gap-1 rounded-pill border px-2.5 py-1 text-xs font-medium ${levels.has(level) ? "border-primary bg-primary/10 text-text" : "border-border bg-surface text-text-muted"}`, children: [levels.has(level) && _jsx(HiOutlineCheck, { size: 12, "aria-hidden": "true" }), level] }, level))) }), _jsx("div", { className: "min-w-48 flex-1", children: _jsx("input", { type: "search", "aria-label": "Search the log", className: INPUT_CLASS, placeholder: "Search the log", value: search, onChange: (event) => setSearch(event.target.value) }) })] }), _jsxs("div", { role: "status", className: "text-xs text-text-muted", children: [filtered
+                        ? `${matching.length} of ${entries.length} buffered lines match.`
+                        : `${entries.length} buffered ${entries.length === 1 ? "line" : "lines"}.`, matching.length > LOG_VISIBLE_ROWS && ` Showing the last ${LOG_VISIBLE_ROWS}.`, dropped > 0 && ` ${dropped} older ${dropped === 1 ? "line" : "lines"} dropped (the buffer keeps the last ${LOG_BUFFER_LIMIT}).`] }), _jsx(LogViewer, { entries: matching, follow: follow, empty: entries.length === 0 ? "No log lines yet." : "No buffered line matches the filters." }), _jsxs("section", { "aria-labelledby": "diagnostics-capture-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-capture-heading", className: "text-base font-bold uppercase tracking-wide mb-1", children: "Capture" }), _jsxs("p", { className: "mb-3 text-xs text-text-muted", children: ["A capture records every line received while it runs, whatever the filters show, up to ", LOG_CAPTURE_LIMIT.toLocaleString(), " lines."] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [recording ? (_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: stream.stopCapture, children: [_jsx(HiOutlineStop, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Stop capture"] })) : (_jsxs(Button, { type: "button", className: "!w-auto", onClick: stream.startCapture, children: [_jsx(HiOutlinePlay, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), "Start capture"] })), capture && (_jsxs("p", { role: "status", className: "text-sm", children: [recording ? "Recording" : "Capture stopped", ": ", capture.count.toLocaleString(), " ", capture.count === 1 ? "line" : "lines", " in", " ", formatUptime(((capture.stoppedAt ?? now) - capture.startedAt) / 1000)] }))] }), capture && capture.missed > 0 && (_jsxs("p", { className: "mt-2 text-sm", children: ["The capture is full: ", capture.missed.toLocaleString(), " later ", capture.missed === 1 ? "line was" : "lines were", " not recorded."] })), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Download" }), ["log", "ndjson"].map((format) => (_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: entries.length === 0, onClick: () => download(entries, format), children: [_jsx(HiOutlineArrowDownTray, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), `Buffer (.${format})`] }, `buffer-${format}`))), capture &&
+                                ["log", "ndjson"].map((format) => (_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: capture.count === 0, onClick: () => download(stream.captureEntries(), format), children: [_jsx(HiOutlineArrowDownTray, { size: 16, "aria-hidden": "true", className: "mr-1 inline" }), `Capture (.${format})`] }, `capture-${format}`)))] }), _jsx("p", { className: "mt-2 text-xs text-text-muted", children: "The buffer download holds every buffered line, not only the ones the filters show." })] })] }));
+}

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

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { SparklineProps } from "./Sparkline.js";
+export interface MetricTileProps {
+    /** What is measured (`CPU`). */
+    label: string;
+    /** The current value, written out (`1.2 cores`). */
+    value: string;
+    /** Smaller text under the value. */
+    detail?: string;
+    /** When the value is a share of a capacity: the share (0 to 100) and the amounts it comes from. */
+    usage?: {
+        percent: number;
+        detail: string;
+        flag?: boolean;
+    };
+    /** The value's recent history, drawn under it. */
+    history?: Omit<SparklineProps, "label">;
+    children?: ReactNode;
+}
+/** One measurement: its label, the current value in numbers, a meter when it has a capacity, and a sparkline of its recent past. */
+export default function MetricTile({ label, value, detail, usage, history, children }: MetricTileProps): React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Sparkline from "./Sparkline.js";
+import UsageMeter from "./UsageMeter.js";
+/** One measurement: its label, the current value in numbers, a meter when it has a capacity, and a sparkline of its recent past. */
+export default function MetricTile({ label, value, detail, usage, history, children }) {
+    return (_jsxs("div", { className: "rounded-md border border-border bg-surface p-4", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-text-muted", children: label }), _jsx("div", { className: "mt-1 text-xl font-semibold", children: value }), detail && _jsx("div", { className: "text-xs text-text-muted", children: detail }), usage && (_jsx("div", { className: "mt-3", children: _jsx(UsageMeter, { label: `${label} usage`, percent: usage.percent, detail: usage.detail, flag: usage.flag }) })), history && (_jsx("div", { className: "mt-3", children: _jsx(Sparkline, { label: label, ...history }) })), children] }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+type NamespaceMetrics = NonNullable<DiagnosticsMetrics["kubernetes"]["namespace"]>;
+export interface NamespaceCardProps {
+    namespace: NamespaceMetrics | undefined;
+    history: DiagnosticsMetrics[];
+}
+/**
+ * The install's namespace: what all its pods use together, and what each pod uses. The figures come from metrics-server; without
+ * it there are none, and that is said as a hint (it is a choice of the cluster), not as a failure.
+ */
+export default function NamespaceCard({ namespace, history }: NamespaceCardProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineInformationCircle } from "react-icons/hi2";
+import { formatBytes, formatCores, NO_VALUE } from "./format.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+const POD_HEADINGS = ["Pod", "Component", "CPU", "Memory"];
+/**
+ * The install's namespace: what all its pods use together, and what each pod uses. The figures come from metrics-server; without
+ * it there are none, and that is said as a hint (it is a choice of the cluster), not as a failure.
+ */
+export default function NamespaceCard({ namespace, history }) {
+    // Biggest memory first; a pod with no figure last.
+    const pods = [...(namespace?.pods ?? [])].sort((a, b) => (b.memoryUsedBytes ?? -1) - (a.memoryUsedBytes ?? -1));
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-namespace-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsxs("h2", { id: "diagnostics-namespace-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: ["Namespace", namespace?.name ? ` ${namespace.name}` : ""] }), !namespace ? (_jsx("p", { className: "text-sm text-text-muted", children: "The server did not report the namespace\u2019s figures." })) : !namespace.podMetricsAvailable ? (_jsxs("div", { role: "status", className: "flex items-start gap-3 rounded-md border border-border bg-surface-alt p-4 text-sm", children: [_jsx(HiOutlineInformationCircle, { size: 20, "aria-hidden": "true", className: "mt-0.5 shrink-0 text-text-muted" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Per-pod CPU and memory are not available." }), _jsxs("p", { className: "mt-1 text-text-muted", children: ["They come from metrics-server, which this cluster does not provide or the server may not read.", namespace.podMetricsReason ? ` ${namespace.podMetricsReason}` : ""] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(MetricTile, { label: "Namespace CPU", value: formatCores(namespace.cpuUsedCores), history: { values: seriesOf(history, (sample) => sample.kubernetes?.namespace?.cpuUsedCores), format: formatCores } }), _jsx(MetricTile, { label: "Namespace memory", value: formatBytes(namespace.memoryUsedBytes), history: { values: seriesOf(history, (sample) => sample.kubernetes?.namespace?.memoryUsedBytes), format: formatBytes } })] }), _jsx("h3", { className: "mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted", children: "Pods" }), pods.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No pod figures were reported." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: POD_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: pods.map((pod) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: pod.name }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: pod.component ?? NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border tabular-nums", children: formatCores(pod.cpuUsedCores) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border tabular-nums", children: formatBytes(pod.memoryUsedBytes) })] }, pod.name))) })] }) }))] }))] }));
+}

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;