@rapidmx/web-client 0.17.2 → 0.18.0

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

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { LogEntry } from "./logLines.js";
+
+/** 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 = 50_000;
+
+/** 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 class LogStore {
+    entries: LogEntry[] = [];
+    /** How many lines have been dropped from the front of `entries`. */
+    dropped = 0;
+    capture: LogCapture | undefined;
+
+    constructor(
+        private readonly bufferLimit = LOG_BUFFER_LIMIT,
+        private readonly captureLimit = LOG_CAPTURE_LIMIT
+    ) {}
+
+    add(entry: LogEntry): void {
+        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(): void {
+        this.entries = [];
+        this.dropped = 0;
+    }
+
+    /** Starts recording (from nothing: an earlier capture is replaced). */
+    startCapture(now: number): void {
+        this.capture = { active: true, startedAt: now, stoppedAt: undefined, entries: [], missed: 0 };
+    }
+
+    /** Stops recording. What was recorded is kept for download. */
+    stopCapture(now: number): void {
+        if (this.capture?.active) {
+            this.capture = { ...this.capture, active: false, stoppedAt: now };
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef } from "react";
+import { entryTime, 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 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: Record<string, string> = {
+    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: LogEntry): string {
+    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: Record<string, unknown>): { stack: string | undefined; rest: Record<string, unknown> } {
+    const { stack, ...rest } = extra;
+    return typeof stack === "string" ? { stack, rest } : { stack: undefined, rest: extra };
+}
+
+export function LevelBadge({ entry }: { entry: LogEntry }) {
+    return (
+        <span
+            className={`inline-block w-16 shrink-0 rounded-sm px-1 text-center font-semibold ${LEVEL_CLASSES[entry.level] ?? "bg-surface"}`}
+        >
+            {levelLabel(entry)}
+        </span>
+    );
+}
+
+function LogRow({ entry }: { entry: LogEntry }) {
+    const { stack, rest } = splitExtra(entry.extra);
+    return (
+        <div className="py-0.5 break-words">
+            <span className="text-text-muted">{entryTime(entry)}</span> <LevelBadge entry={entry} /> <span className="whitespace-pre-wrap">{entry.message}</span>
+            {Object.keys(rest).length > 0 && <span className="text-text-muted"> {JSON.stringify(rest)}</span>}
+            {stack !== undefined && <div className="whitespace-pre-wrap pl-4 text-text-muted">{stack}</div>}
+        </div>
+    );
+}
+
+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) {
+    const box = useRef<HTMLDivElement>(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 (
+        <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"
+        >
+            {shown.length === 0 ? <p className="text-text-muted">{empty}</p> : shown.map((entry) => <LogRow key={entry.id} entry={entry} />)}
+        </div>
+    );
+}

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

@@ -0,0 +1,235 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { 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, { BadgeTone } from "./Badge.js";
+import { SaveFile, timestampedFilename } from "./download.js";
+import { formatUptime } from "./format.js";
+import type { LogStreamStatus } from "./logClient.js";
+import { entriesToLog, entriesToNdjson, entryMatches, LOG_LEVELS, LogEntry, levelVisible } from "./logLines.js";
+import { LOG_BUFFER_LIMIT, LOG_CAPTURE_LIMIT } from "./LogStore.js";
+import LogViewer, { LOG_VISIBLE_ROWS } from "./LogViewer.js";
+import type { LogStream } from "./useLogStream.js";
+
+const STATUS: Record<LogStreamStatus, { label: string; tone: BadgeTone; icon: typeof HiOutlineSignal }> = {
+    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";
+
+type Format = "log" | "ndjson";
+
+const MIME_TYPES: Record<Format, string> = { log: "text/plain;charset=utf-8", ndjson: "application/x-ndjson" };
+
+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) {
+    const { status, error, running, entries, dropped, capture } = stream;
+    const [levels, setLevels] = useState<ReadonlySet<string>>(() => 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: string) {
+        const next = new Set(levels);
+        if (!next.delete(level)) {
+            next.add(level);
+        }
+        setLevels(next);
+    }
+
+    function download(lines: LogEntry[], format: Format) {
+        saveFile(
+            timestampedFilename("rapidmx-server-logs", format),
+            format === "log" ? entriesToLog(lines) : entriesToNdjson(lines),
+            MIME_TYPES[format]
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3">
+                <Badge tone={badge.tone} icon={badge.icon}>
+                    {badge.label}
+                </Badge>
+                {running ? (
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={stream.stop}>
+                        <HiOutlineStop size={16} aria-hidden="true" className="mr-1 inline" />
+                        Stop
+                    </Button>
+                ) : (
+                    <Button type="button" className="!w-auto" onClick={stream.start}>
+                        <HiOutlinePlay size={16} aria-hidden="true" className="mr-1 inline" />
+                        Start
+                    </Button>
+                )}
+                <Button type="button" variant="secondary" className="!w-auto" aria-pressed={!follow} onClick={() => setFollow(!follow)}>
+                    <HiOutlinePause size={16} aria-hidden="true" className="mr-1 inline" />
+                    {follow ? "Pause scrolling" : "Resume scrolling"}
+                </Button>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={stream.clear}>
+                    <HiOutlineTrash size={16} aria-hidden="true" className="mr-1 inline" />
+                    Clear
+                </Button>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            <div className="flex flex-wrap items-center gap-3">
+                <div role="group" aria-label="Levels" className="flex flex-wrap items-center gap-1">
+                    {LOG_LEVELS.map((level) => (
+                        <button
+                            key={level}
+                            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"
+                            }`}
+                        >
+                            {levels.has(level) && <HiOutlineCheck size={12} aria-hidden="true" />}
+                            {level}
+                        </button>
+                    ))}
+                </div>
+                <div className="min-w-48 flex-1">
+                    <input
+                        type="search"
+                        aria-label="Search the log"
+                        className={INPUT_CLASS}
+                        placeholder="Search the log"
+                        value={search}
+                        onChange={(event) => setSearch(event.target.value)}
+                    />
+                </div>
+            </div>
+
+            <div role="status" className="text-xs text-text-muted">
+                {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}).`}
+            </div>
+
+            <LogViewer
+                entries={matching}
+                follow={follow}
+                empty={entries.length === 0 ? "No log lines yet." : "No buffered line matches the filters."}
+            />
+
+            <section aria-labelledby="diagnostics-capture-heading" className="rounded-md border border-border bg-surface p-4">
+                <h2 id="diagnostics-capture-heading" className="text-base font-bold uppercase tracking-wide mb-1">
+                    Capture
+                </h2>
+                <p className="mb-3 text-xs text-text-muted">
+                    A capture records every line received while it runs, whatever the filters show, up to {LOG_CAPTURE_LIMIT.toLocaleString()} lines.
+                </p>
+                <div className="flex flex-wrap items-center gap-3">
+                    {recording ? (
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={stream.stopCapture}>
+                            <HiOutlineStop size={16} aria-hidden="true" className="mr-1 inline" />
+                            Stop capture
+                        </Button>
+                    ) : (
+                        <Button type="button" className="!w-auto" onClick={stream.startCapture}>
+                            <HiOutlinePlay size={16} aria-hidden="true" className="mr-1 inline" />
+                            Start capture
+                        </Button>
+                    )}
+                    {capture && (
+                        <p role="status" className="text-sm">
+                            {recording ? "Recording" : "Capture stopped"}: {capture.count.toLocaleString()} {capture.count === 1 ? "line" : "lines"} in{" "}
+                            {formatUptime(((capture.stoppedAt ?? now) - capture.startedAt) / 1000)}
+                        </p>
+                    )}
+                </div>
+                {capture && capture.missed > 0 && (
+                    <p className="mt-2 text-sm">
+                        The capture is full: {capture.missed.toLocaleString()} later {capture.missed === 1 ? "line was" : "lines were"} not recorded.
+                    </p>
+                )}
+                <div className="mt-3 flex flex-wrap items-center gap-2">
+                    <span className="text-xs uppercase tracking-wide text-text-muted">Download</span>
+                    {(["log", "ndjson"] as const).map((format) => (
+                        <Button
+                            key={`buffer-${format}`}
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            disabled={entries.length === 0}
+                            onClick={() => download(entries, format)}
+                        >
+                            <HiOutlineArrowDownTray size={16} aria-hidden="true" className="mr-1 inline" />
+                            {`Buffer (.${format})`}
+                        </Button>
+                    ))}
+                    {capture &&
+                        (["log", "ndjson"] as const).map((format) => (
+                            <Button
+                                key={`capture-${format}`}
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                disabled={capture.count === 0}
+                                onClick={() => download(stream.captureEntries(), format)}
+                            >
+                                <HiOutlineArrowDownTray size={16} aria-hidden="true" className="mr-1 inline" />
+                                {`Capture (.${format})`}
+                            </Button>
+                        ))}
+                </div>
+                <p className="mt-2 text-xs text-text-muted">
+                    The buffer download holds every buffered line, not only the ones the filters show.
+                </p>
+            </section>
+        </div>
+    );
+}

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

@@ -0,0 +1,43 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import Sparkline, { SparklineProps } from "./Sparkline.js";
+import UsageMeter from "./UsageMeter.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) {
+    return (
+        <div className="rounded-md border border-border bg-surface p-4">
+            <div className="text-xs uppercase tracking-wide text-text-muted">{label}</div>
+            <div className="mt-1 text-xl font-semibold">{value}</div>
+            {detail && <div className="text-xs text-text-muted">{detail}</div>}
+            {usage && (
+                <div className="mt-3">
+                    <UsageMeter label={`${label} usage`} percent={usage.percent} detail={usage.detail} flag={usage.flag} />
+                </div>
+            )}
+            {history && (
+                <div className="mt-3">
+                    <Sparkline label={label} {...history} />
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,95 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineInformationCircle } from "react-icons/hi2";
+import type { DiagnosticsMetrics } from "./diagnosticsApi.js";
+import { formatBytes, formatCores, NO_VALUE } from "./format.js";
+import { seriesOf } from "./metricsHistory.js";
+import MetricTile from "./MetricTile.js";
+
+type NamespaceMetrics = NonNullable<DiagnosticsMetrics["kubernetes"]["namespace"]>;
+
+export interface NamespaceCardProps {
+    namespace: NamespaceMetrics | undefined;
+    history: DiagnosticsMetrics[];
+}
+
+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 }: NamespaceCardProps) {
+    // Biggest memory first; a pod with no figure last.
+    const pods = [...(namespace?.pods ?? [])].sort((a, b) => (b.memoryUsedBytes ?? -1) - (a.memoryUsedBytes ?? -1));
+    return (
+        <section aria-labelledby="diagnostics-namespace-heading" className="rounded-md border border-border bg-surface p-4">
+            <h2 id="diagnostics-namespace-heading" className="text-base font-bold uppercase tracking-wide mb-3">
+                Namespace{namespace?.name ? ` ${namespace.name}` : ""}
+            </h2>
+            {!namespace ? (
+                <p className="text-sm text-text-muted">The server did not report the namespace&rsquo;s figures.</p>
+            ) : !namespace.podMetricsAvailable ? (
+                <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">Per-pod CPU and memory are not available.</p>
+                        <p className="mt-1 text-text-muted">
+                            They come from metrics-server, which this cluster does not provide or the server may not read.
+                            {namespace.podMetricsReason ? ` ${namespace.podMetricsReason}` : ""}
+                        </p>
+                    </div>
+                </div>
+            ) : (
+                <>
+                    <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                        <MetricTile
+                            label="Namespace CPU"
+                            value={formatCores(namespace.cpuUsedCores)}
+                            history={{ values: seriesOf(history, (sample) => sample.kubernetes?.namespace?.cpuUsedCores), format: formatCores }}
+                        />
+                        <MetricTile
+                            label="Namespace memory"
+                            value={formatBytes(namespace.memoryUsedBytes)}
+                            history={{ values: seriesOf(history, (sample) => sample.kubernetes?.namespace?.memoryUsedBytes), format: formatBytes }}
+                        />
+                    </div>
+                    <h3 className="mt-4 mb-2 text-xs uppercase tracking-wide text-text-muted">Pods</h3>
+                    {pods.length === 0 ? (
+                        <p className="text-sm text-text-muted">No pod figures were reported.</p>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-sm border-collapse">
+                                <thead>
+                                    <tr>
+                                        {POD_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>
+                                    {pods.map((pod) => (
+                                        <tr key={pod.name}>
+                                            <td className="py-2 px-2.5 border-b border-border font-mono break-all">{pod.name}</td>
+                                            <td className="py-2 px-2.5 border-b border-border">{pod.component ?? NO_VALUE}</td>
+                                            <td className="py-2 px-2.5 border-b border-border tabular-nums">{formatCores(pod.cpuUsedCores)}</td>
+                                            <td className="py-2 px-2.5 border-b border-border tabular-nums">{formatBytes(pod.memoryUsedBytes)}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </>
+            )}
+        </section>
+    );
+}

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

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