@rapidmx/web-client 0.3.1 → 0.5.0

package/apps/admin/transport-rules/[uid].tsx

@@ -13,7 +13,13 @@ import {
 } from "@rapidmx/react-shared/admin/transportRulesApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import RuleBuilder, { RuleBuilderValue } from "../../shared/components/rules/RuleBuilder.js";
-import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "./_transportRuleConfig.js";
+import {
+    checkRuleConditions,
+    NO_CONDITIONS_BLOCKED_MESSAGE,
+    NoConditionsConfirmModal,
+    TRANSPORT_RULE_ACTION_TYPES,
+    TRANSPORT_RULE_CONDITION_FIELDS,
+} from "./_transportRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
@@ -37,6 +43,8 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
+    const [confirmingNoConditions, setConfirmingNoConditions] = useState(false);
 
     useEffect(() => {
         setLoading(true);
@@ -71,7 +79,21 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
             setError("A name is required.");
             return;
         }
+        const check = checkRuleConditions(rule!);
+        if (check === "blocked") {
+            setShowValidation(true);
+            setError(NO_CONDITIONS_BLOCKED_MESSAGE);
+            return;
+        }
+        if (check === "confirm") {
+            setConfirmingNoConditions(true);
+            return;
+        }
+        await save();
+    }
 
+    async function save() {
+        setConfirmingNoConditions(false);
         setSaving(true);
         setSaved(false);
         try {
@@ -130,6 +152,7 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
                     onChange={setRule}
                     conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
                     actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                    showValidation={showValidation}
                 />
 
                 <div>
@@ -138,6 +161,12 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
                     </Button>
                 </div>
             </form>
+
+            <NoConditionsConfirmModal
+                open={confirmingNoConditions}
+                onCancel={() => setConfirmingNoConditions(false)}
+                onConfirm={() => void save()}
+            />
         </div>
     );
 }

package/apps/admin/transport-rules/_transportRuleConfig.tsx

@@ -3,8 +3,44 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import { TransportRuleAction } from "@rapidmx/react-shared/admin/transportRulesApi.js";
-import { ActionTypeDef, ConditionFieldDef } from "../../shared/components/rules/RuleBuilder.js";
+import { TransportRuleAction, TransportRuleConditions } from "@rapidmx/react-shared/admin/transportRulesApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { ActionTypeDef, ConditionFieldDef, hasConditions } from "../../shared/components/rules/RuleBuilder.js";
+
+/** Refused outright when a rule has no conditions: it would reject or quarantine every message the server receives. */
+export const NO_CONDITIONS_BLOCKED_MESSAGE =
+    "Add at least one condition. A rule without conditions that rejects or quarantines mail would do so for every message.";
+
+/**
+ * How a save should proceed given a rule's conditions: `"ok"` with at least one condition, `"blocked"` with none and a
+ * reject/quarantine action, or `"confirm"` with none and only other actions (which then apply to every message).
+ */
+export function checkRuleConditions(rule: { conditions: TransportRuleConditions; actions: TransportRuleAction[] }): "ok" | "blocked" | "confirm" {
+    if (hasConditions(rule.conditions)) {
+        return "ok";
+    }
+    return rule.actions.some((action) => action.type === "reject" || action.type === "quarantine") ? "blocked" : "confirm";
+}
+
+/** Asks before saving a rule with no conditions whose actions will run on every message. */
+export function NoConditionsConfirmModal({ open, onCancel, onConfirm }: { open: boolean; onCancel: () => void; onConfirm: () => void }) {
+    return (
+        <Modal open={open} onClose={onCancel} title="Apply to every message?">
+            <p className="text-sm mb-5">
+                This rule has no conditions, so its actions will run on every message this server receives or sends.
+            </p>
+            <div className="flex gap-3 justify-end">
+                <Button type="button" variant="secondary" className="!w-auto" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <Button type="button" className="!w-auto" onClick={onConfirm}>
+                    Save anyway
+                </Button>
+            </div>
+        </Modal>
+    );
+}
 
 const FIELD_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";

package/apps/admin/transport-rules/index.tsx

@@ -11,6 +11,26 @@ import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
 const PAGE_SIZE = 25;
 
+/** The server's largest page (`limit` is capped at 1000). */
+const FETCH_PAGE_SIZE = 1000;
+
+/**
+ * Every transport rule, in evaluation order. `listTransportRules()` can't ask the server to sort, and sorting one
+ * server page at a time would order rules only within that page - so every page is fetched and sorted here (an
+ * organisation has few transport rules). Ties keep a stable order by name.
+ */
+async function listAllTransportRules(): Promise<TransportRule[]> {
+    const all: TransportRule[] = [];
+    for (let page = 0; ; page++) {
+        const batch = await listTransportRules({ page, limit: FETCH_PAGE_SIZE });
+        all.push(...batch);
+        if (batch.length < FETCH_PAGE_SIZE) {
+            break;
+        }
+    }
+    return all.sort((a, b) => a.sequence - b.sequence || a.name.localeCompare(b.name));
+}
+
 export default function TransportRulesPage(props: Omit<AdminShellProps, "active">) {
     return (
         <AdminShell {...props} active="transportRules">
@@ -26,16 +46,14 @@ function TransportRulesContent() {
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
-        setLoading(true);
-        setError(null);
-        listTransportRules({ page, limit: PAGE_SIZE })
+        listAllTransportRules()
             .then(setRules)
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load transport rules."))
             .finally(() => setLoading(false));
-    }, [page]);
+    }, []);
 
-    const hasNextPage = rules.length === PAGE_SIZE;
-    const sorted = [...rules].sort((a, b) => a.sequence - b.sequence);
+    const hasNextPage = (page + 1) * PAGE_SIZE < rules.length;
+    const sorted = rules.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
 
     return (
         <>

package/apps/admin/transport-rules/new/index.tsx

@@ -11,7 +11,13 @@ import {
 } from "@rapidmx/react-shared/admin/transportRulesApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
 import RuleBuilder, { RuleBuilderValue } from "../../../shared/components/rules/RuleBuilder.js";
-import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "../_transportRuleConfig.js";
+import {
+    checkRuleConditions,
+    NO_CONDITIONS_BLOCKED_MESSAGE,
+    NoConditionsConfirmModal,
+    TRANSPORT_RULE_ACTION_TYPES,
+    TRANSPORT_RULE_CONDITION_FIELDS,
+} from "../_transportRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
@@ -38,6 +44,8 @@ function NewTransportRuleForm() {
     });
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
+    const [confirmingNoConditions, setConfirmingNoConditions] = useState(false);
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
@@ -47,7 +55,21 @@ function NewTransportRuleForm() {
             setError("A name is required.");
             return;
         }
+        const check = checkRuleConditions(rule);
+        if (check === "blocked") {
+            setShowValidation(true);
+            setError(NO_CONDITIONS_BLOCKED_MESSAGE);
+            return;
+        }
+        if (check === "confirm") {
+            setConfirmingNoConditions(true);
+            return;
+        }
+        await create();
+    }
 
+    async function create() {
+        setConfirmingNoConditions(false);
         setSaving(true);
         try {
             const created = await createTransportRule({ name: name.trim(), ...rule });
@@ -87,6 +109,7 @@ function NewTransportRuleForm() {
                     onChange={setRule}
                     conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
                     actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                    showValidation={showValidation}
                 />
 
                 <div className="flex gap-3">
@@ -100,6 +123,12 @@ function NewTransportRuleForm() {
                     </a>
                 </div>
             </form>
+
+            <NoConditionsConfirmModal
+                open={confirmingNoConditions}
+                onCancel={() => setConfirmingNoConditions(false)}
+                onConfirm={() => void create()}
+            />
         </div>
     );
 }

package/apps/escrow/_layout.tsx

@@ -4,7 +4,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { PropsWithChildren } from "react";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
 
 export interface LayoutProps {
     /** See `apps/www/_layout.tsx`'s `LayoutProps` doc comment — identical mechanism, supplied by
@@ -12,12 +11,13 @@ export interface LayoutProps {
     branding?: Branding;
 }
 
+/** Unlike the other apps, never links the admin-configured custom stylesheet: the escrow console handles escrow
+ * key material, so no admin-supplied CSS is loaded on it. */
 export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
     const title = branding?.title || branding?.companyName
         ? `${branding?.title || branding?.companyName}: Escrow Console`
         : "RapidMX: Escrow Console";
     const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
-    const stylesheetHref = branding?.stylesheetUrl;
 
     return (
         <html lang="en">
@@ -33,7 +33,6 @@ export default function Layout({ children, branding }: PropsWithChildren<LayoutP
                     rel="stylesheet"
                     href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
                 />
-                {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
             </head>
             <body>{children}</body>
         </html>

package/apps/escrow/audit-log/index.tsx

@@ -1,168 +1,196 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useState } from "react";
-import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import {
-    EscrowAuditLogEntry,
-    EscrowAuditVerificationResult,
-    listAuditLogEntries,
-    verifyAuditChain,
-} from "@rapidmx/react-shared/admin/escrowAuditLogApi.js";
-import EscrowShell, { EscrowShellProps } from "../../shared/components/escrow/layout/EscrowShell.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-
-const PAGE_SIZE = 25;
-
-const ACTION_LABELS: Record<EscrowAuditLogEntry["action"], string> = {
-    "escrow_access_request.created": "Access request created",
-    "escrow_access_request.approved": "Access request approved",
-    "escrow_access_request.material_read": "Material read",
-};
-
-export default function EscrowAuditLogPage(props: Omit<EscrowShellProps, "active">) {
-    return (
-        <EscrowShell {...props} active="auditLog">
-            <EscrowAuditLogContent />
-        </EscrowShell>
-    );
-}
-
-function EscrowAuditLogContent() {
-    const [page, setPage] = useState(0);
-    const [entries, setEntries] = useState<EscrowAuditLogEntry[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // `GET /admin/release-notes` is the same side-effect-free trusted-role canary `AdminShell` itself
-    // uses (any `BaseAdminRoute` endpoint works — see that route's own doc comment) — reused here only to
-    // decide whether to show the "Verify chain integrity" button at all, not to gate this whole page the
-    // way `AdminShell` gates `apps/admin`. `EscrowAuditLogRoute.verify()` is `@RequiresTrustedRole()`-only
-    // server-side regardless of what this probe finds; hiding the button for a non-trusted holder just
-    // avoids an inevitable, confusing 403 on click, it isn't itself the enforcement.
-    const [isTrustedAdmin, setIsTrustedAdmin] = useState(false);
-
-    const [verifying, setVerifying] = useState(false);
-    const [verifyError, setVerifyError] = useState<string | null>(null);
-    const [verifyResult, setVerifyResult] = useState<EscrowAuditVerificationResult | null>(null);
-
-    useEffect(() => {
-        apiFetch("/admin/release-notes")
-            .then(() => setIsTrustedAdmin(true))
-            .catch(() => setIsTrustedAdmin(false));
-    }, []);
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        listAuditLogEntries({ page, limit: PAGE_SIZE })
-            .then(setEntries)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load the audit log."))
-            .finally(() => setLoading(false));
-    }, [page]);
-
-    async function handleVerify() {
-        setVerifying(true);
-        setVerifyError(null);
-        setVerifyResult(null);
-        try {
-            setVerifyResult(await verifyAuditChain());
-        } catch (err) {
-            setVerifyError(err instanceof ApiRequestError ? err.message : "Could not verify the audit chain.");
-        } finally {
-            setVerifying(false);
-        }
-    }
-
-    const hasNextPage = entries.length === PAGE_SIZE;
-
-    return (
-        <>
-            <div className="flex items-center justify-between mb-5">
-                <h1 className="text-xl font-bold uppercase tracking-wide">Escrow audit log</h1>
-                {isTrustedAdmin && (
-                    <Button type="button" className="!w-auto" loading={verifying} disabled={verifying} onClick={handleVerify}>
-                        Verify chain integrity
-                    </Button>
-                )}
-            </div>
-
-            <p className="text-sm text-text-muted mb-5">
-                Every escrow access lifecycle event visible to you — matters under a scope you hold. A trusted
-                administrator sees every entry across every scope instead.
-            </p>
-
-            {verifyError && <Alert>{verifyError}</Alert>}
-            {verifyResult &&
-                (verifyResult.valid ? (
-                    <div className="mb-5 py-3 px-3.5 rounded-sm text-sm bg-success/10 text-success font-medium">
-                        Chain verified — no tampering detected.
-                    </div>
-                ) : (
-                    <Alert>Chain integrity broken at sequence {verifyResult.brokenAtSequence}.</Alert>
-                ))}
-
-            {error && <Alert>{error}</Alert>}
-
-            {loading ? (
-                <p className="text-sm text-text-muted">Loading&hellip;</p>
-            ) : entries.length === 0 ? (
-                <p className="text-sm text-text-muted">No audit log entries visible to you yet.</p>
-            ) : (
-                <div className="overflow-x-auto">
-                    <table className="w-full text-sm border-collapse">
-                        <thead>
-                            <tr>
-                                {["Sequence", "Action", "Holder", "Mailbox", "Occurred"].map((h) => (
-                                    <th
-                                        key={h}
-                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
-                                    >
-                                        {h}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {entries.map((entry) => (
-                                <tr key={entry.uid}>
-                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.sequence}</td>
-                                    <td className="py-2.5 px-2.5 border-b border-border">{ACTION_LABELS[entry.action]}</td>
-                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.holderUserUid}</td>
-                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.mailboxUid}</td>
-                                    <td className="py-2.5 px-2.5 border-b border-border">
-                                        {new Date(entry.occurredAt).toLocaleString()}
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
-            )}
-
-            <div className="flex gap-3 items-center mt-4">
-                <Button
-                    variant="secondary"
-                    type="button"
-                    className="!w-auto"
-                    disabled={page === 0 || loading}
-                    onClick={() => setPage((p) => Math.max(0, p - 1))}
-                >
-                    Previous
-                </Button>
-                <span className="text-sm text-text-muted">Page {page + 1}</span>
-                <Button
-                    variant="secondary"
-                    type="button"
-                    className="!w-auto"
-                    disabled={!hasNextPage || loading}
-                    onClick={() => setPage((p) => p + 1)}
-                >
-                    Next
-                </Button>
-            </div>
-        </>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    EscrowAuditLogEntry,
+    EscrowAuditVerificationResult,
+    listAuditLogEntries,
+    verifyAuditChain,
+} from "@rapidmx/react-shared/admin/escrowAuditLogApi.js";
+import EscrowShell, { EscrowShellProps } from "../../shared/components/escrow/layout/EscrowShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const PAGE_SIZE = 25;
+
+const ACTION_LABELS: Record<EscrowAuditLogEntry["action"], string> = {
+    "escrow_access_request.created": "Access request created",
+    "escrow_access_request.approved": "Access request approved",
+    "escrow_access_request.material_read": "Material read",
+    "matter_export.requested": "Matter export requested",
+    "matter_export.ready": "Matter export ready",
+    "matter_export.failed": "Matter export failed",
+};
+
+/** The label for an audit action - the raw action name for one this console doesn't know yet (a newer server). */
+export function actionLabel(action: string): string {
+    return (ACTION_LABELS as Record<string, string>)[action] ?? action;
+}
+
+const VERIFICATION_FAILURES: Record<string, string> = {
+    link_mismatch: "An entry was deleted, inserted or reordered.",
+    hash_mismatch: "An entry was edited after it was written.",
+    unknown_algorithm: "An entry uses a hash algorithm this server doesn't recognize.",
+    algorithm_downgrade: "An unkeyed entry follows keyed ones, which suggests a forged entry.",
+    hmac_key_unavailable: "Audit key not configured: this server can't check keyed entries, so the chain couldn't be verified.",
+    truncated: "Entries missing at the end: entries were deleted from the end of the chain.",
+    head_mismatch: "The chain's head record doesn't match its last entry.",
+    head_mac_mismatch: "The chain's head record was forged or edited.",
+    head_missing: "The chain's head record is missing.",
+};
+
+/** Explains a failed chain verification by its `reason` (plus where it broke, when known). An unrecognized or missing
+ * reason (a newer or older server) reads as a generic failure. */
+export function describeVerificationFailure(result: EscrowAuditVerificationResult): string {
+    const where: string = result.brokenAtSequence === undefined ? "" : ` (at sequence ${result.brokenAtSequence})`;
+    const known: string | undefined = result.reason === undefined ? undefined : VERIFICATION_FAILURES[result.reason];
+    return known ? `Chain integrity check failed${where}. ${known}` : `Chain integrity check failed${where}.`;
+}
+
+export default function EscrowAuditLogPage(props: Omit<EscrowShellProps, "active">) {
+    return (
+        <EscrowShell {...props} active="auditLog">
+            <EscrowAuditLogContent />
+        </EscrowShell>
+    );
+}
+
+function EscrowAuditLogContent() {
+    const [page, setPage] = useState(0);
+    const [entries, setEntries] = useState<EscrowAuditLogEntry[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // `GET /admin/release-notes` is the same side-effect-free trusted-role canary `AdminShell` itself
+    // uses (any `BaseAdminRoute` endpoint works — see that route's own doc comment) — reused here only to
+    // decide whether to show the "Verify chain integrity" button at all, not to gate this whole page the
+    // way `AdminShell` gates `apps/admin`. `EscrowAuditLogRoute.verify()` is `@RequiresTrustedRole()`-only
+    // server-side regardless of what this probe finds; hiding the button for a non-trusted holder just
+    // avoids an inevitable, confusing 403 on click, it isn't itself the enforcement.
+    const [isTrustedAdmin, setIsTrustedAdmin] = useState(false);
+
+    const [verifying, setVerifying] = useState(false);
+    const [verifyError, setVerifyError] = useState<string | null>(null);
+    const [verifyResult, setVerifyResult] = useState<EscrowAuditVerificationResult | null>(null);
+
+    useEffect(() => {
+        apiFetch("/admin/release-notes")
+            .then(() => setIsTrustedAdmin(true))
+            .catch(() => setIsTrustedAdmin(false));
+    }, []);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listAuditLogEntries({ page, limit: PAGE_SIZE })
+            .then(setEntries)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load the audit log."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    async function handleVerify() {
+        setVerifying(true);
+        setVerifyError(null);
+        setVerifyResult(null);
+        try {
+            setVerifyResult(await verifyAuditChain());
+        } catch (err) {
+            setVerifyError(err instanceof ApiRequestError ? err.message : "Could not verify the audit chain.");
+        } finally {
+            setVerifying(false);
+        }
+    }
+
+    const hasNextPage = entries.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Escrow audit log</h1>
+                {isTrustedAdmin && (
+                    <Button type="button" className="!w-auto" loading={verifying} disabled={verifying} onClick={handleVerify}>
+                        Verify chain integrity
+                    </Button>
+                )}
+            </div>
+
+            <p className="text-sm text-text-muted mb-5">
+                Every escrow access lifecycle event visible to you — matters under a scope you hold. A trusted
+                administrator sees every entry across every scope instead.
+            </p>
+
+            {verifyError && <Alert>{verifyError}</Alert>}
+            {verifyResult &&
+                (verifyResult.valid ? (
+                    <div className="mb-5 py-3 px-3.5 rounded-sm text-sm bg-success/10 text-success font-medium">
+                        Chain verified — no tampering detected.
+                    </div>
+                ) : (
+                    <Alert>{describeVerificationFailure(verifyResult)}</Alert>
+                ))}
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : entries.length === 0 ? (
+                <p className="text-sm text-text-muted">No audit log entries visible to you yet.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Sequence", "Action", "Holder", "Mailbox", "Occurred"].map((h) => (
+                                    <th
+                                        key={h}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {entries.map((entry) => (
+                                <tr key={entry.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.sequence}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{actionLabel(entry.action)}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.holderUserUid}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.mailboxUid}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {new Date(entry.occurredAt).toLocaleString()}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div className="flex gap-3 items-center mt-4">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
+        </>
+    );
+}