@rapidmx/web-client 0.11.0 → 0.13.0

package/apps/admin/domains/[uid].tsx

@@ -4,13 +4,17 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { deleteDomain, Domain } from "@rapidmx/react-shared/admin/domainsApi.js";
+import { deleteDomain, Domain, updateDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import DomainDnsSetup from "../../shared/components/admin/settings/DomainDnsSetup.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";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
 export default function DomainDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
     return (
         <AdminShell {...props} active="domains">
@@ -24,6 +28,15 @@ function DomainDetailContent({ uid }: { uid: string }) {
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [deleteError, setDeleteError] = useState<string | null>(null);
+    // Not initialized from `domain.aliasOf` until it first loads (`null` means "not yet") - once set, kept as
+    // the user's own edit rather than fighting later unrelated reloads (e.g. after "Verify now").
+    const [aliasInput, setAliasInput] = useState<string | null>(null);
+    const [savingAlias, setSavingAlias] = useState(false);
+    const [aliasError, setAliasError] = useState<string | null>(null);
+    const [aliasSaved, setAliasSaved] = useState(false);
+    // Bumped after a successful aliasOf save to force `DomainDnsSetup` (which owns its own `domain` state,
+    // fetched only on mount/uid change) to reload and reflect the new value in its own status panel.
+    const [refreshCount, setRefreshCount] = useState(0);
 
     function closeDeleteModal() {
         setConfirmingDelete(false);
@@ -42,6 +55,28 @@ function DomainDetailContent({ uid }: { uid: string }) {
         }
     }
 
+    function handleLoaded(d: Domain) {
+        setDomain(d);
+        setAliasInput((current) => (current === null ? d?.aliasOf ?? "" : current));
+    }
+
+    async function handleSaveAlias() {
+        setSavingAlias(true);
+        setAliasError(null);
+        setAliasSaved(false);
+        try {
+            const updated = await updateDomain({ uid: domain!.uid, version: domain!.version, aliasOf: aliasInput!.trim() || undefined });
+            setDomain(updated);
+            setAliasInput(updated.aliasOf ?? "");
+            setAliasSaved(true);
+            setRefreshCount((c) => c + 1);
+        } catch (err) {
+            setAliasError(err instanceof ApiRequestError ? err.message : "Could not update this domain.");
+        } finally {
+            setSavingAlias(false);
+        }
+    }
+
     return (
         <div className="max-w-3xl flex flex-col gap-5">
             {domain && (
@@ -63,7 +98,43 @@ function DomainDetailContent({ uid }: { uid: string }) {
                 </div>
             )}
 
-            <DomainDnsSetup uid={uid} onLoaded={setDomain} />
+            <DomainDnsSetup key={refreshCount} uid={uid} onLoaded={handleLoaded} />
+
+            {domain && (
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <h2 className="text-sm font-bold uppercase tracking-wide mb-3">Alias</h2>
+                    <p className="text-sm text-text-muted mb-3">
+                        Make this domain a pure alias of another one - it will still receive (and may send as) mail for the
+                        same addresses, but have no mailboxes of its own. Leave blank for a regular domain.
+                    </p>
+                    {aliasError && <Alert>{aliasError}</Alert>}
+                    <FormField label="Alias of" htmlFor="aliasOf">
+                        <input
+                            id="aliasOf"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={aliasInput ?? ""}
+                            onChange={(e) => {
+                                setAliasInput(e.target.value);
+                                setAliasSaved(false);
+                            }}
+                            placeholder="e.g. powerlevel.gg"
+                        />
+                    </FormField>
+                    <div className="flex items-center gap-3">
+                        <Button
+                            type="button"
+                            className="!w-auto"
+                            loading={savingAlias}
+                            disabled={savingAlias || (aliasInput ?? "") === (domain.aliasOf ?? "")}
+                            onClick={handleSaveAlias}
+                        >
+                            Save
+                        </Button>
+                        {aliasSaved && <span className="text-sm text-text-muted">Saved.</span>}
+                    </div>
+                </div>
+            )}
 
             {domain && (
                 <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete domain">

package/apps/admin/domains/index.tsx

@@ -58,7 +58,7 @@ function DomainsListContent() {
                     <table className="w-full text-sm border-collapse">
                         <thead>
                             <tr>
-                                {["Name", "Enabled", "Verified", ""].map((h) => (
+                                {["Name", "Enabled", "Verified", "Alias of", ""].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"
@@ -84,6 +84,7 @@ function DomainsListContent() {
                                             </span>
                                         )}
                                     </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-text-muted">{domain.aliasOf || "—"}</td>
                                     <td className="py-2.5 px-2.5 border-b border-border text-right">
                                         <a
                                             href={`/admin/domains/${encodeURIComponent(domain.uid)}`}

package/apps/admin/domains/new/index.tsx

@@ -2,9 +2,9 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { createDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
+import { createDomain, Domain, listDomains } from "@rapidmx/react-shared/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -23,9 +23,19 @@ export default function NewDomainPage(props: Omit<AdminShellProps, "active">) {
 
 function NewDomainForm() {
     const [name, setName] = useState("");
+    const [aliasOf, setAliasOf] = useState("");
+    // Only an existing, non-alias domain can be aliased (no chains) - see `Domain.aliasOf`'s own doc comment
+    // on the `@rapidmx/restapi` side.
+    const [primaryDomains, setPrimaryDomains] = useState<Domain[]>([]);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
 
+    useEffect(() => {
+        listDomains({ limit: 200 })
+            .then((domains) => setPrimaryDomains(domains.filter((d) => !d.aliasOf)))
+            .catch(() => setPrimaryDomains([]));
+    }, []);
+
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
@@ -37,7 +47,7 @@ function NewDomainForm() {
 
         setSaving(true);
         try {
-            const domain = await createDomain({ name: name.trim() });
+            const domain = await createDomain({ name: name.trim(), aliasOf: aliasOf || undefined });
             window.location.href = `/admin/domains/${encodeURIComponent(domain.uid)}`;
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not create the domain.");
@@ -68,6 +78,21 @@ function NewDomainForm() {
                     />
                 </FormField>
 
+                <FormField label="Alias of" htmlFor="aliasOf">
+                    <select id="aliasOf" className={INPUT_CLASS} value={aliasOf} onChange={(e) => setAliasOf(e.target.value)}>
+                        <option value="">None - a regular domain with mailboxes of its own</option>
+                        {primaryDomains.map((domain) => (
+                            <option key={domain.uid} value={domain.name}>
+                                {domain.name}
+                            </option>
+                        ))}
+                    </select>
+                    <p className="text-xs text-text-muted mt-1.5">
+                        A pure alias receives (and may send as) mail for the same addresses as the domain it aliases, but
+                        has no mailboxes of its own - it still needs its own DNS setup below.
+                    </p>
+                </FormField>
+
                 <div className="flex gap-3 mt-2">
                     <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
                         Create domain

package/apps/admin/mailboxes/new/index.tsx

@@ -12,9 +12,9 @@ export default function NewMailboxPage(props: Omit<AdminShellProps, "active">) {
             <div className="max-w-xl">
                 <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New mailbox</h1>
                 <p className="text-sm text-text-muted mb-5">
-                    Leave "Owner user uid" blank to create a true ownerless shared mailbox (the Exchange "shared
-                    mailbox" concept) — access is then granted entirely to delegates afterward, not to a single
-                    owner. Set an owner to create a mailbox for a specific user instead.
+                    Choose "Shared mailbox" to create a true ownerless mailbox (the Exchange "shared mailbox"
+                    concept) — access is then granted entirely to delegates afterward, not to a single owner. Choose
+                    "Owned by a specific person" and look them up to create a mailbox for a specific user instead.
                 </p>
                 <MailboxCreateForm
                     cancelHref="/admin"

package/apps/shared/calendar/calendarReminders.ts

@@ -0,0 +1,76 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Pure helpers behind `useCalendarReminders.ts` - kept apart from the hook so the push-payload parsing, the snooze
+ * arithmetic and the pop-up's wording are each testable without a React tree or a socket. */
+
+import type { PushEvent } from "@rapidmx/react-shared/mail/pushClient.js";
+
+/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+export const SNOOZE_MS = 5 * 60_000;
+
+/** The payload restapi's `CalendarReminderJob` publishes (`{ eventUid, title, startDate, location }`) as a `"CalendarEvent"`/`"reminder"` push event. */
+export interface CalendarReminderNotice {
+    eventUid: string;
+    title: string;
+    /** The due occurrence's own start (an ISO string) - the series' `startDate` for a non-recurring event, one occurrence's for a recurring one. */
+    startDate: string;
+    /** The event's own `location`, verbatim - `undefined`/`null` when the event has none. Not necessarily a URL;
+     * see `joinMeetingUrl()` for when it's shown as a join link. */
+    location?: string | null;
+}
+
+function isReminderNotice(data: unknown): data is CalendarReminderNotice {
+    const notice = data as Partial<CalendarReminderNotice> | null;
+    return (
+        !!notice &&
+        typeof notice.eventUid === "string" &&
+        typeof notice.title === "string" &&
+        typeof notice.startDate === "string" &&
+        (notice.location === undefined || notice.location === null || typeof notice.location === "string")
+    );
+}
+
+/** A `notice.location` worth offering as a one-click "Join Meeting" link - a plain `http(s)://` URL and nothing
+ * else (a room name, an address, free-text instructions are all real, common `location` values this must not
+ * treat as a link). Trimmed first, so incidental whitespace never hides a real link. */
+export function joinMeetingUrl(location: string | null | undefined): string | undefined {
+    const trimmed = location?.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    let url: URL;
+    try {
+        url = new URL(trimmed);
+    } catch {
+        return undefined;
+    }
+    return url.protocol === "http:" || url.protocol === "https:" ? trimmed : undefined;
+}
+
+/** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
+export function calendarReminderOf(event: PushEvent): CalendarReminderNotice | undefined {
+    return event.type === "CalendarEvent" && event.action === "reminder" && isReminderNotice(event.data) ? event.data : undefined;
+}
+
+/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
+ * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
+export function snoozeDelayMs(startDate: string, now: number = Date.now()): number {
+    return Math.max(0, Math.min(SNOOZE_MS, new Date(startDate).getTime() - now));
+}
+
+/** The pop-up's message line: when the meeting starts, relative to `now`. */
+export function reminderMessage(startDate: string, now: number = Date.now()): string {
+    const time = new Date(startDate).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+    const diffMinutes = Math.round((new Date(startDate).getTime() - now) / 60_000);
+    if (diffMinutes <= 0) {
+        return `Starting now - ${time}`;
+    }
+    return `Starting in ${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} - ${time}`;
+}
+
+/** The one notification id a reminder, and every "Snooze" of it, reuses - so snoozing replaces the same pop-up rather than stacking a new one. */
+export function reminderNotificationId(eventUid: string, startDate: string): string {
+    return `calendar-reminder:${eventUid}:${startDate}`;
+}

package/apps/shared/calendar/useCalendarReminders.ts

@@ -0,0 +1,91 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect } from "react";
+import { getPushClient } from "@rapidmx/react-shared/mail/pushClient.js";
+import { notify } from "../notifications/store.js";
+import { CalendarReminderNotice, calendarReminderOf, joinMeetingUrl, reminderMessage, reminderNotificationId, snoozeDelayMs } from "./calendarReminders.js";
+
+/** Where a reminder's title leads. There is no per-event deep link yet (the calendar opens an event by local state, not a URL - see
+ * `apps/www/calendar/index.tsx`'s `openEvent()`), so every reminder opens the calendar itself. */
+export const CALENDAR_HREF = "/calendar";
+
+export interface UseCalendarRemindersOptions {
+    /** Nothing is shown without a signed-in user. */
+    userUid?: string;
+    /** Runs only while true - the persistent app frame turns it on, like `useMailConnection`'s identical option. */
+    enabled: boolean;
+}
+
+/**
+ * Pop-up meeting reminders. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate }`)
+ * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open
+ * (`getPushClient()`) - every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the
+ * event is published to the mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its
+ * own. Lives in the persistent app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so a reminder shows wherever the user is signed in -
+ * Mail, Calendar, Contacts, Settings.
+ *
+ * Each reminder is a sticky pop-up (`notify()`, kind `"calendar"`) with two actions: **Dismiss** closes it and does nothing else. **Snooze**
+ * closes it and shows it again - reusing the same notification id, so it replaces rather than stacks - after `SNOOZE_MS` (five minutes), or
+ * sooner if the meeting starts first (`snoozeDelayMs()`). A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the
+ * reminder itself (the push event is never replayed), it does not survive the tab closing.
+ */
+export function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): void {
+    useEffect(() => {
+        if (!enabled || !userUid) {
+            return;
+        }
+        const timers = new Set<ReturnType<typeof setTimeout>>();
+
+        function show(notice: CalendarReminderNotice): void {
+            const joinUrl = joinMeetingUrl(notice.location);
+            notify({
+                id: reminderNotificationId(notice.eventUid, notice.startDate),
+                kind: "calendar",
+                title: notice.title,
+                message: reminderMessage(notice.startDate),
+                href: CALENDAR_HREF,
+                sticky: true,
+                actions: [
+                    ...(joinUrl
+                        ? [
+                              {
+                                  label: "Join Meeting",
+                                  onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"),
+                                  // Joining isn't resolving the reminder - Dismiss/Snooze are still there afterward.
+                                  keepOpen: true,
+                              },
+                          ]
+                        : []),
+                    { label: "Dismiss" },
+                    {
+                        label: "Snooze",
+                        onClick: () => {
+                            const timer = setTimeout(() => {
+                                timers.delete(timer);
+                                show(notice);
+                            }, snoozeDelayMs(notice.startDate));
+                            timers.add(timer);
+                        },
+                    },
+                ],
+            });
+        }
+
+        const offEvent = getPushClient().onEvent((event) => {
+            const notice = calendarReminderOf(event);
+            if (notice) {
+                show(notice);
+            }
+        });
+
+        return () => {
+            offEvent();
+            for (const timer of timers) {
+                clearTimeout(timer);
+            }
+            timers.clear();
+        };
+    }, [enabled, userUid]);
+}

package/apps/shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.tsx

@@ -4,8 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { resolveEscrowScopeHolder } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import StringListField from "../../forms/StringListField.js";
+import PrincipalListField from "../../sharing/PrincipalListField.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -150,12 +151,11 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                     deliberately separate role from server administration. At least one holder is required.
                 </p>
 
-                <StringListField
+                <PrincipalListField
                     label="Holder user uids"
-                    id="holderUserUids"
                     values={value.holderUserUids}
                     onChange={(holderUserUids) => set("holderUserUids", holderUserUids)}
-                    placeholder="User uid to add"
+                    resolve={resolveEscrowScopeHolder}
                     emptyMessage="No holders added yet."
                     disabled={disabled}
                 />

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -15,6 +15,8 @@ const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
     spf: "SPF",
     dkim: "DKIM",
     dmarc: "DMARC",
+    autodiscover_cname: "Autodiscover (CNAME)",
+    autodiscover_srv: "Autodiscover (SRV)",
 };
 
 /** How each record is named in a Copy button's accessible name ("Copy value for the SPF record"). */
@@ -24,6 +26,17 @@ const RECORD_TYPE_NAMES: Record<DnsRecordCheck["type"], string> = {
     spf: "SPF",
     dkim: "DKIM",
     dmarc: "DMARC",
+    autodiscover_cname: "Autodiscover CNAME",
+    autodiscover_srv: "Autodiscover SRV",
+};
+
+/** A one-line "why this matters", shown under a checklist row's label - only for record types unfamiliar
+ * enough to need one; the well-known mail records (ownership/MX/SPF/DKIM/DMARC) don't. */
+const RECORD_TYPE_HELP: Partial<Record<DnsRecordCheck["type"], string>> = {
+    autodiscover_cname:
+        "So EAS and Outlook clients can find this server automatically from just an email address. This hostname also needs to be covered by this server's TLS certificate.",
+    autodiscover_srv:
+        "Same purpose as the CNAME above, for clients that check DNS SRV instead - and, unlike the CNAME, needs no extra TLS certificate, since it points at a hostname already covered. Prefer this one when a second certificate is hard to obtain.",
 };
 
 /** An MX record's recommended value is `"<priority> <mail server>"` - two separate fields in a DNS provider's form. */
@@ -32,6 +45,12 @@ function splitMxValue(value: string): { priority: string; server: string } | nul
     return match ? { priority: match[1], server: match[2] } : null;
 }
 
+/** A SRV record's recommended value is `"<priority> <weight> <port> <target>"` - four separate fields in a DNS provider's form. */
+function splitSrvValue(value: string): { priority: string; weight: string; port: string; target: string } | null {
+    const match = /^(\d+)\s+(\d+)\s+(\d+)\s+(\S+)$/.exec(value.trim());
+    return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
+}
+
 /** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
 function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
     return (
@@ -127,6 +146,14 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                     </dd>
                     <dt className="text-text-muted">Last checked</dt>
                     <dd>{domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never"}</dd>
+                    {domain.aliasOf && (
+                        <>
+                            <dt className="text-text-muted">Alias of</dt>
+                            <dd>
+                                {domain.aliasOf} <span className="text-xs text-text-muted">(no mailboxes of its own)</span>
+                            </dd>
+                        </>
+                    )}
                 </dl>
 
                 {!domain.verified && (
@@ -181,6 +208,9 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {RECORD_TYPE_LABELS[check.type]}
                                             <div className="text-xs text-text-muted">Type: {check.recordKind}</div>
+                                            {RECORD_TYPE_HELP[check.type] && (
+                                                <div className="text-xs text-text-muted mt-1 max-w-xs">{RECORD_TYPE_HELP[check.type]}</div>
+                                            )}
                                         </td>
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {!check.configured ? (
@@ -228,23 +258,47 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     );
 }
 
-/** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), anything else whole. */
+/** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), a SRV value as
+ * its four form fields (priority, weight, port and target), anything else whole. */
 function DnsRecordValue({ check, value }: { check: DnsRecordCheck; value: string }) {
     const recordName = RECORD_TYPE_NAMES[check.type];
     const mx = check.type === "mx" ? splitMxValue(value) : null;
-    if (!mx) {
-        return <CopyableValue value={value} copyLabel={`Copy value for the ${recordName} record`} />;
-    }
-    return (
-        <div className="flex flex-col gap-1.5">
-            <div className="flex items-start gap-2">
-                <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
-                <CopyableValue value={mx.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+    if (mx) {
+        return (
+            <div className="flex flex-col gap-1.5">
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
+                    <CopyableValue value={mx.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Mail server</span>
+                    <CopyableValue value={mx.server} copyLabel={`Copy mail server for the ${recordName} record`} />
+                </div>
             </div>
-            <div className="flex items-start gap-2">
-                <span className="text-xs w-20 shrink-0 pt-1">Mail server</span>
-                <CopyableValue value={mx.server} copyLabel={`Copy mail server for the ${recordName} record`} />
+        );
+    }
+    const srv = check.type === "autodiscover_srv" ? splitSrvValue(value) : null;
+    if (srv) {
+        return (
+            <div className="flex flex-col gap-1.5">
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
+                    <CopyableValue value={srv.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Weight</span>
+                    <CopyableValue value={srv.weight} copyLabel={`Copy weight for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Port</span>
+                    <CopyableValue value={srv.port} copyLabel={`Copy port for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Target</span>
+                    <CopyableValue value={srv.target} copyLabel={`Copy target for the ${recordName} record`} />
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
+    return <CopyableValue value={value} copyLabel={`Copy value for the ${recordName} record`} />;
 }