@rapidmx/web-client 0.17.0 → 0.18.0

package/apps/shared/components/admin/diagnostics/logLines.ts

@@ -0,0 +1,125 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** The levels of the server's logger (Winston's npm levels), most severe first. */
+export const LOG_LEVELS = ["error", "warn", "info", "http", "verbose", "debug", "silly"] as const;
+
+export type LogLevel = (typeof LOG_LEVELS)[number];
+
+/** One line of the server's log stream. */
+export interface LogEntry {
+    /** Counts up from 1 in the order lines arrived; unique for the life of the stream. */
+    id: number;
+    /** When this page received it (`Date.now()`). */
+    receivedAt: number;
+    /** The level as the server wrote it (lower-cased, without colour codes); empty when it wrote none. */
+    level: string;
+    message: string;
+    /** As the server wrote it, when it did. */
+    timestamp?: string;
+    /** Every other field the server logged with the line (`label`, `service`, `stack`, ...). */
+    extra: Record<string, unknown>;
+    /** The frame as one line of JSON: what the `.ndjson` download holds. */
+    json: string;
+    /** Whether the frame was JSON. A frame that was not is shown as it came, with no level. */
+    structured: boolean;
+}
+
+/** What a frame is, when it is the server's own control message and not a log line. */
+export interface ControlFrame {
+    control: true;
+    success: boolean;
+    data: unknown;
+}
+
+/** Colour codes a logger writes around a level (`\u001b[32minfo\u001b[39m`). */
+// eslint-disable-next-line no-control-regex
+const ANSI_PATTERN = /\u001b\[[0-9;]*m/g;
+
+export const stripAnsi = (text: string): string => text.replace(ANSI_PATTERN, "");
+
+/** A field's value as text: a string as it is, nothing as empty, anything else as JSON. */
+function textOf(value: unknown): string {
+    if (typeof value === "string") {
+        return stripAnsi(value);
+    }
+    return value === undefined ? "" : JSON.stringify(value);
+}
+
+/**
+ * Reads one frame of the log stream. It is the control message (`{"id":0,"type":"SUBSCRIBED","success":true,...}`), a Winston
+ * `info` object (the JSON of `level`, `message` and whatever else was logged with them), or - since the server's logger can write
+ * anything - text that is not JSON at all. Whatever it is, the frame is never refused: a missing field is left empty.
+ */
+export function parseLogFrame(raw: string, id: number, receivedAt: number): LogEntry | ControlFrame {
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(raw);
+    } catch {
+        parsed = undefined;
+    }
+    if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return {
+            id,
+            receivedAt,
+            level: "",
+            message: stripAnsi(raw),
+            extra: {},
+            json: JSON.stringify({ raw }),
+            structured: false,
+        };
+    }
+    const frame = parsed as Record<string, unknown>;
+    if (frame.type === "SUBSCRIBED" && frame.level === undefined) {
+        return { control: true, success: frame.success !== false, data: frame.data };
+    }
+    const { level, message, timestamp, ...extra } = frame;
+    return {
+        id,
+        receivedAt,
+        level: textOf(level).toLowerCase(),
+        message: textOf(message),
+        timestamp: typeof timestamp === "string" ? timestamp : undefined,
+        extra,
+        json: JSON.stringify(frame),
+        structured: true,
+    };
+}
+
+export const isControlFrame = (frame: LogEntry | ControlFrame): frame is ControlFrame => "control" in frame;
+
+/** When a line happened: what the server stamped it with, else when this page received it. */
+export function entryTime(entry: LogEntry): string {
+    return entry.timestamp ?? new Date(entry.receivedAt).toISOString();
+}
+
+/** `<timestamp> <LEVEL> <message>`: the line of a `.log` download. A line with no level has none written. */
+export function formatLogLine(entry: LogEntry): string {
+    return [entryTime(entry), entry.level.toUpperCase(), entry.message].filter((part) => part !== "").join(" ");
+}
+
+/** The text of a `.log` download: one formatted line for each entry. */
+export function entriesToLog(entries: LogEntry[]): string {
+    return entries.map((entry) => formatLogLine(entry).replace(/\r?\n/g, " ↵ ")).join("\n") + "\n";
+}
+
+/** The text of an `.ndjson` download: each frame as one line of JSON. */
+export function entriesToNdjson(entries: LogEntry[]): string {
+    return entries.map((entry) => entry.json).join("\n") + "\n";
+}
+
+/** Whether `entry` is one of `levels`. A line with no known level (text that was not JSON, an unusual level) is always kept. */
+export function levelVisible(entry: LogEntry, levels: ReadonlySet<string>): boolean {
+    return !(LOG_LEVELS as readonly string[]).includes(entry.level) || levels.has(entry.level);
+}
+
+/** Whether `entry` contains `needle` (already lower-cased) in its time, level, message or other fields. */
+export function entryMatches(entry: LogEntry, needle: string): boolean {
+    if (needle === "") {
+        return true;
+    }
+    const extra = Object.keys(entry.extra).length > 0 ? JSON.stringify(entry.extra) : "";
+    return `${formatLogLine(entry)} ${extra}`.toLowerCase().includes(needle);
+}

package/apps/shared/components/admin/diagnostics/metricsHistory.ts

@@ -0,0 +1,28 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+
+/** How often the System tab asks the server for a new sample. */
+export const METRICS_POLL_INTERVAL_MS = 5000;
+
+/** How many samples the System tab keeps: the last five minutes at `METRICS_POLL_INTERVAL_MS`. */
+export const METRICS_HISTORY_SIZE = 60;
+
+/** `history` with `sample` added, the oldest samples dropped beyond `METRICS_HISTORY_SIZE`. */
+export function appendSample(history: DiagnosticsMetrics[], sample: DiagnosticsMetrics): DiagnosticsMetrics[] {
+    return [...history, sample].slice(-METRICS_HISTORY_SIZE);
+}
+
+/** The values `pick` finds in each sample, in order. A sample it finds nothing in (a node with no stats yet, say) is skipped. */
+export function seriesOf(history: DiagnosticsMetrics[], pick: (sample: DiagnosticsMetrics) => number | undefined): number[] {
+    const values: number[] = [];
+    for (const sample of history) {
+        const value = pick(sample);
+        if (typeof value === "number" && Number.isFinite(value)) {
+            values.push(value);
+        }
+    }
+    return values;
+}

package/apps/shared/components/admin/diagnostics/useDiagnosticsResource.ts

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { describeError } from "./format.js";
+
+export interface DiagnosticsResource<T> {
+    /** What was last loaded. It stays while a reload is under way, and after a reload that failed. */
+    data: T | undefined;
+    /** Why the last load failed. */
+    error: string | undefined;
+    loading: boolean;
+}
+
+/**
+ * Loads `load()` when the component mounts and again whenever `reloadKey` changes (the Refresh button). It is never polled.
+ * The answer to a load that a newer one (or an unmount) has overtaken is dropped.
+ */
+export function useDiagnosticsResource<T>(load: () => Promise<T>, reloadKey: number, failure: string): DiagnosticsResource<T> {
+    const [state, setState] = useState<DiagnosticsResource<T>>({ data: undefined, error: undefined, loading: true });
+
+    useEffect(() => {
+        let cancelled = false;
+        setState((previous) => ({ ...previous, error: undefined, loading: true }));
+        load().then(
+            (data) => {
+                if (!cancelled) {
+                    setState({ data, error: undefined, loading: false });
+                }
+            },
+            (err: unknown) => {
+                if (!cancelled) {
+                    setState((previous) => ({ ...previous, error: describeError(err, failure), loading: false }));
+                }
+            }
+        );
+        return () => {
+            cancelled = true;
+        };
+    }, [reloadKey]);
+
+    return state;
+}

package/apps/shared/components/admin/diagnostics/useLogStream.ts

@@ -0,0 +1,122 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LogClient, LogClientOptions, LogStreamStatus } from "./logClient.js";
+import type { LogEntry } from "./logLines.js";
+import { LogStore } from "./LogStore.js";
+
+/** Lines arrive in bursts; the view is redrawn at most this often, however many came. */
+export const LOG_FLUSH_MS = 100;
+
+/** What a capture has recorded, without the lines (which can be tens of thousands: `LogStream.captureEntries()` has them). */
+export interface CaptureSummary {
+    active: boolean;
+    startedAt: number;
+    stoppedAt: number | undefined;
+    count: number;
+    missed: number;
+}
+
+export interface LogStream {
+    status: LogStreamStatus;
+    /** Why the stream is in the `error` state. */
+    error: string | undefined;
+    /** Whether the stream is on (connecting, live or trying again), as opposed to stopped or refused. */
+    running: boolean;
+    /** The display buffer: the most recent lines, oldest first. */
+    entries: LogEntry[];
+    /** How many older lines the display buffer has dropped. */
+    dropped: number;
+    capture: CaptureSummary | undefined;
+    start: () => void;
+    stop: () => void;
+    /** Empties the display buffer (not a capture). */
+    clear: () => void;
+    startCapture: () => void;
+    stopCapture: () => void;
+    /** Every line of the capture, for a download. */
+    captureEntries: () => LogEntry[];
+}
+
+interface Snapshot {
+    entries: LogEntry[];
+    dropped: number;
+    capture: CaptureSummary | undefined;
+}
+
+function snapshotOf(store: LogStore): Snapshot {
+    const capture = store.capture;
+    return {
+        entries: store.entries.slice(),
+        dropped: store.dropped,
+        capture: capture && {
+            active: capture.active,
+            startedAt: capture.startedAt,
+            stoppedAt: capture.stoppedAt,
+            count: capture.entries.length,
+            missed: capture.missed,
+        },
+    };
+}
+
+/**
+ * The live log stream of the server for the log view: a `LogClient`, and a `LogStore` holding the lines and any capture. Nothing
+ * connects until `start()`. The stream is closed, and the redraw timer cleared, when the component unmounts.
+ */
+export function useLogStream(options: LogClientOptions = {}): LogStream {
+    const [client] = useState(() => new LogClient(options));
+    const [store] = useState(() => new LogStore());
+    const [connection, setConnection] = useState<{ status: LogStreamStatus; error: string | undefined }>({
+        status: client.status,
+        error: undefined,
+    });
+    const [snapshot, setSnapshot] = useState<Snapshot>(() => snapshotOf(store));
+    const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+    const flush = useCallback(() => {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+        setSnapshot(snapshotOf(store));
+    }, [store]);
+
+    useEffect(() => {
+        const stopEntries = client.onEntry((entry) => {
+            store.add(entry);
+            timer.current ??= setTimeout(flush, LOG_FLUSH_MS);
+        });
+        const stopStatus = client.onStatus((status, error) => setConnection({ status, error }));
+        return () => {
+            stopEntries();
+            stopStatus();
+            client.stop();
+            clearTimeout(timer.current);
+            timer.current = undefined;
+        };
+    }, [client, store, flush]);
+
+    return {
+        status: connection.status,
+        error: connection.error,
+        running: connection.status === "connecting" || connection.status === "live" || connection.status === "reconnecting",
+        entries: snapshot.entries,
+        dropped: snapshot.dropped,
+        capture: snapshot.capture,
+        start: () => client.start(),
+        stop: () => client.stop(),
+        clear: () => {
+            store.clear();
+            flush();
+        },
+        startCapture: () => {
+            store.startCapture(Date.now());
+            flush();
+        },
+        stopCapture: () => {
+            store.stopCapture(Date.now());
+            flush();
+        },
+        captureEntries: () => store.capture?.entries ?? [],
+    };
+}

package/apps/shared/components/admin/diagnostics/useMetricsPolling.ts

@@ -0,0 +1,84 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { DiagnosticsMetrics, getDiagnosticsMetrics } from "./diagnosticsApi.js";
+import { describeError, isPermissionError } from "./format.js";
+import { appendSample, METRICS_POLL_INTERVAL_MS } from "./metricsHistory.js";
+
+export interface MetricsPolling {
+    /** The last `METRICS_HISTORY_SIZE` samples, oldest first. */
+    history: DiagnosticsMetrics[];
+    /** Why the last request failed, until one succeeds. */
+    error: string | undefined;
+    /** Whether nothing has been answered yet. */
+    loading: boolean;
+    /** Whether polling is stopped by the viewer (Pause), or because the server refused the viewer. */
+    paused: boolean;
+    setPaused: (paused: boolean) => void;
+}
+
+/**
+ * Samples `getDiagnosticsMetrics()` every `METRICS_POLL_INTERVAL_MS` while `enabled` and not paused, keeping the last
+ * `METRICS_HISTORY_SIZE`. A request is only ever made when the previous one has answered, none is made while the page is
+ * hidden (one is made at once when it is shown again), and polling stops when the component unmounts. A refusal (401/403)
+ * pauses polling, since asking again would only be refused again; Resume tries once more. Any other failure is shown
+ * and polling carries on, so a blip on the server does not need the viewer to do anything.
+ */
+export function useMetricsPolling(enabled: boolean): MetricsPolling {
+    const [history, setHistory] = useState<DiagnosticsMetrics[]>([]);
+    const [error, setError] = useState<string | undefined>();
+    const [loading, setLoading] = useState(true);
+    const [paused, setPaused] = useState(false);
+
+    useEffect(() => {
+        if (!enabled || paused) {
+            return;
+        }
+        let cancelled = false;
+        let inFlight = false;
+
+        async function sample() {
+            if (inFlight || document.hidden) {
+                return;
+            }
+            inFlight = true;
+            try {
+                const next = await getDiagnosticsMetrics();
+                if (!cancelled) {
+                    setHistory((previous) => appendSample(previous, next));
+                    setError(undefined);
+                }
+            } catch (err) {
+                if (!cancelled) {
+                    setError(describeError(err, "Could not read the server's metrics."));
+                    if (isPermissionError(err)) {
+                        setPaused(true);
+                    }
+                }
+            } finally {
+                inFlight = false;
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        void sample();
+        const timer = setInterval(() => void sample(), METRICS_POLL_INTERVAL_MS);
+        const onVisibilityChange = () => {
+            if (!document.hidden) {
+                void sample();
+            }
+        };
+        document.addEventListener("visibilitychange", onVisibilityChange);
+        return () => {
+            cancelled = true;
+            clearInterval(timer);
+            document.removeEventListener("visibilitychange", onVisibilityChange);
+        };
+    }, [enabled, paused]);
+
+    return { history, error, loading, paused, setPaused };
+}

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -8,6 +8,7 @@ import { useRouter } from "@rapidrest/react/client";
 import {
     HiOutlineClipboardDocumentList,
     HiOutlineClock,
+    HiOutlineCpuChip,
     HiOutlineDocumentArrowDown,
     HiOutlineDocumentCheck,
     HiOutlineGlobeAlt,
@@ -61,6 +62,7 @@ export type AdminSection =
     | "setup"
     | "dataRequests"
     | "plugins"
+    | "diagnostics"
     | "branding"
     | "signingCertificates";
 
@@ -144,6 +146,7 @@ const NAV_ITEMS: NavItem[] = [
         icon: HiOutlineDocumentCheck,
     },
     { id: "plugins", href: "/admin/plugins", label: "Plugins", icon: HiOutlinePuzzlePiece },
+    { id: "diagnostics", href: "/admin/diagnostics", label: "Diagnostics", icon: HiOutlineCpuChip },
     { id: "branding", href: "/admin/branding", label: "Branding", icon: HiOutlinePaintBrush },
 ];
 

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -9,7 +9,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
+import { useLocation } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/components/contacts/layout/ContactsShell.tsx

@@ -10,8 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -10,8 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import FloatingActionButton from "../../layout/FloatingActionButton.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";

package/apps/shared/components/settings/layout/SettingsShell.tsx

@@ -10,8 +10,7 @@ import { Mailbox, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 import { mergePluginNavItems, PluginNav } from "../../../plugins/pluginNav.js";

package/apps/shared/components/tasks/layout/TasksShell.tsx

@@ -10,8 +10,7 @@ import { Folder, Mailbox, listFolders, listMailboxes } from "@rapidmx/react-shar
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
-import { useLocation } from "@rapidrest/react/client";
-import { useNavigate } from "../../../navigation/index.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { orderMailboxes, primaryMailboxUid } from "../../../mail/primaryMailbox.js";
 

package/apps/shared/navigation/index.ts

@@ -7,8 +7,8 @@
  * route, the app's `_shell.tsx` as the persistent frame - see `apps/www/_shell.tsx`); this is the one thing on top of it: a
  * `navigate()` that keeps the page when only the query string changes.
  */
-import { useCallback, useRef } from "react";
-import { useRouter } from "@rapidrest/react/client";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+import { useLocation as useRouterLocation, useRouter } from "@rapidrest/react/client";
 
 export interface NavigateOptions {
     /** Replaces the current history entry instead of adding one (a redirect, or a state change that isn't a "place"). */
@@ -41,3 +41,30 @@ export function useNavigate(): NavigateFn {
         void go(href, { replace: options.replace, shallow });
     }, []);
 }
+
+function subscribeToHistory(onChange: () => void): () => void {
+    window.addEventListener("popstate", onChange);
+    return () => window.removeEventListener("popstate", onChange);
+}
+
+// Joined, not added: a test's stand-in for `window.location` may have no `search`, and `undefined + undefined` is `NaN`.
+const currentAddress = (): string => [window.location.pathname, window.location.search, window.location.hash].join("");
+const noAddress = (): string => "";
+
+/**
+ * Where the page is, as `{ pathname, search, hash }`: the router's location when the page is under a router, else the browser's.
+ * A page a plugin renders has no router (`router = false`), where `@rapidrest/react`'s `useLocation()` is empty and the query a
+ * shell reads its mailbox from (`?mailboxUid=`) would be lost. Without one, the address is the browser's - and empty on the
+ * server and while hydrating, so the page hydrates as it was rendered and then follows the address.
+ */
+export function useLocation(): { pathname: string; search: string; hash: string } {
+    const routed = useRouterLocation();
+    const own = useSyncExternalStore(subscribeToHistory, currentAddress, noAddress);
+    const ownLocation = useMemo(() => {
+        // Split by hand, not with `URL`: a page that stubs the global `URL` (for `createObjectURL`) must still render.
+        const [beforeHash, ...fragment] = own.split("#");
+        const [pathname, ...query] = beforeHash.split("?");
+        return { pathname, search: query.length ? `?${query.join("?")}` : "", hash: fragment.length ? `#${fragment.join("#")}` : "" };
+    }, [own]);
+    return routed.pathname !== "" ? routed : ownLocation;
+}

package/dist/apps/admin/diagnostics/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+export default function DiagnosticsPage(props: Omit<AdminShellProps, "active">): React.JSX.Element;

package/dist/apps/admin/diagnostics/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
+import DiagnosticsManager from "../../shared/components/admin/diagnostics/DiagnosticsManager.js";
+export default function DiagnosticsPage(props) {
+    return (_jsx(AdminShell, { ...props, active: "diagnostics", children: _jsx(DiagnosticsManager, {}) }));
+}

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import type { IconType } from "react-icons";
+export type BadgeTone = "success" | "warning" | "danger" | "info" | "neutral";
+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, icon: Icon, children }: BadgeProps): React.JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** 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 = {
+    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" },
+};
+/** A small pill: an optional icon, then a word or two. */
+export default function Badge({ tone = "neutral", icon: Icon, children }) {
+    const classes = TONES[tone];
+    return (_jsxs("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}`, children: [Icon && _jsx(Icon, { size: 14, "aria-hidden": "true", className: classes.icon }), children] }));
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import type { DiagnosticsComponent, DiagnosticsContainer } from "./diagnosticsApi.js";
+/** The container to describe a component by: the one running the image tag the server calls its version, else the first. */
+export declare function mainContainer(component: DiagnosticsComponent): DiagnosticsContainer | undefined;
+/** `image` with its tag, unless the server already wrote the tag into the image. */
+export declare function imageReference(container: DiagnosticsContainer): string;
+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): React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineCheckCircle, HiOutlineExclamationTriangle, HiOutlineMinusCircle, HiOutlineQuestionMarkCircle } from "react-icons/hi2";
+import Badge from "./Badge.js";
+import KubernetesNotice from "./KubernetesNotice.js";
+import { formatDateTime, NO_VALUE, shortDigest } from "./format.js";
+const STATUS = {
+    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) {
+    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) {
+    return container.tag && !container.image.endsWith(`:${container.tag}`) ? `${container.image}:${container.tag}` : container.image;
+}
+const HEADINGS = ["Component", "Status", "Version", "Image", "Digest", "Restarts", "Node"];
+/** 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 }) {
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-components-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-components-heading", className: "text-base font-bold uppercase tracking-wide mb-3", children: "Other containers" }), !kubernetes.available ? (_jsx(KubernetesNotice, { reason: kubernetes.reason })) : (_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: components.map((component) => (_jsx(ComponentRow, { component: component }, component.component))) })] }) }))] }));
+}
+function ComponentRow({ component }) {
+    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 (_jsxs("tr", { className: "align-top", children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("div", { className: "font-medium", children: component.component }), component.pods.length > 0 && (_jsxs("details", { className: "text-xs text-text-muted", children: [_jsxs("summary", { className: "cursor-pointer", children: [component.pods.length, " ", component.pods.length === 1 ? "pod" : "pods"] }), _jsx("ul", { className: "mt-1 space-y-2", children: component.pods.map((pod) => (_jsx(PodDetail, { pod: pod }, pod.name))) })] }))] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: _jsx(Badge, { tone: status.tone, icon: status.icon, children: status.label }) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono", children: component.version ?? NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: main?.image ?? NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono", title: main?.digest, children: shortDigest(main?.digest) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border tabular-nums", children: component.pods.length > 0 ? restarts : NO_VALUE }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: nodes.length > 0 ? nodes.join(", ") : NO_VALUE })] }));
+}
+function PodDetail({ pod }) {
+    return (_jsxs("li", { className: "rounded-sm border border-border p-2", children: [_jsx("div", { className: "font-mono text-text break-all", children: pod.name }), _jsxs("div", { children: [pod.phase, " \u00B7 ", pod.ready ? "ready" : "not ready", " \u00B7 ", pod.restarts, " ", pod.restarts === 1 ? "restart" : "restarts", pod.node ? ` · on ${pod.node}` : "", pod.startedAt ? ` · started ${formatDateTime(pod.startedAt)}` : ""] }), _jsx("ul", { className: "mt-1", children: pod.containers.map((container) => (_jsxs("li", { className: "font-mono break-all", children: [container.name, ": ", imageReference(container), container.digest ? ` @${shortDigest(container.digest)}` : "", " \u00B7 ", container.ready ? "ready" : "not ready", " \u00B7", " ", container.restartCount, " ", container.restartCount === 1 ? "restart" : "restarts"] }, container.name))) })] }));
+}