@rapidmx/web-client 0.30.0 → 0.31.0

package/dist/apps/www/tasks/index.js

@@ -5,11 +5,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { pageTitle } from "../../shared/navigation/pageTitle.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { endOfWeek, isAfter, isBefore, isToday, parseISO, startOfDay } from "date-fns";
+import { endOfWeek, isAfter, isBefore, isToday, startOfDay } from "date-fns";
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { createTask, deleteTask, listTasks, setTaskCompleted, setTaskMyDay, } from "../../../lib/tasks/tasksApi.js";
 import { listFlaggedMessages } from "../../../lib/mail/flaggedMessages.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
+import { useDayKey } from "../../../lib/calendar/useDayKey.js";
+import { dueDateInstant, parseDueDate } from "../../shared/components/tasks/dueDate.js";
 import TasksShell, { useTasksShell } from "../../shared/components/tasks/layout/TasksShell.js";
 import TasksSidebar from "../../shared/components/tasks/TasksSidebar.js";
 import TasksToolbar from "../../shared/components/tasks/TasksToolbar.js";
@@ -27,14 +29,6 @@ const INPUT_CLASS = "text-sm py-1.5 px-2 border border-border rounded-sm bg-surf
 function TasksPage(props) {
     return (_jsx(TasksShell, { ...props, children: _jsx(TasksContent, {}) }));
 }
-/**
- * Parses a task's `dueDate` - `parseISO()` rather than `new Date()`, since `new Date("2026-06-16")` reads a
- * date-only value as UTC midnight, which is the *previous* local day anywhere west of UTC. A full
- * timestamp parses identically either way.
- */
-function parseDueDate(value) {
-    return parseISO(value);
-}
 const BUCKET_ORDER = ["Overdue", "Today", "This Week", "Later", "No due date"];
 /** Buckets a task by its due date relative to `now`, matching the Outlook/To-Do convention this list mirrors. */
 function bucketFor(task, now) {
@@ -94,7 +88,10 @@ function TasksContent() {
     // Registered only while the form is rendered (`canAddTask`), so its field is there.
     useShortcut(SHORTCUTS.tasks.create, () => addTaskRef.current.focus(), { enabled: canAddTask });
     const addTaskHint = useShortcutProps("Add a task", SHORTCUTS.tasks.create, canAddTask);
+    // Which load is the latest: a slower, older one (another folder's, from before the mailbox changed) must not replace the list a newer one set.
+    const loadRun = useRef(0);
     function reload() {
+        const run = ++loadRun.current;
         if (!folderUid) {
             setTasks([]);
             setTruncated(false);
@@ -105,11 +102,21 @@ function TasksContent() {
         setError(null);
         return listAllPages((page) => listTasks(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
             .then((result) => {
-            setTasks(result.items);
-            setTruncated(result.truncated);
+            if (run === loadRun.current) {
+                setTasks(result.items);
+                setTruncated(result.truncated);
+            }
+        })
+            .catch((err) => {
+            if (run === loadRun.current) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load tasks.");
+            }
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load tasks."))
-            .finally(() => setLoading(false));
+            .finally(() => {
+            if (run === loadRun.current) {
+                setLoading(false);
+            }
+        });
     }
     useEffect(() => {
         void reload();
@@ -122,12 +129,29 @@ function TasksContent() {
         if (view.type !== "flagged" || !mailboxUid) {
             return;
         }
+        // Set once the view or mailbox this load was for is no longer the one shown, so its answer is dropped.
+        let stale = false;
         setFlaggedLoading(true);
         setFlaggedError(null);
         listFlaggedMessages(mailboxUid, client)
-            .then(setFlaggedMessages)
-            .catch((err) => setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email."))
-            .finally(() => setFlaggedLoading(false));
+            .then((messages) => {
+            if (!stale) {
+                setFlaggedMessages(messages);
+            }
+        })
+            .catch((err) => {
+            if (!stale) {
+                setFlaggedError(err instanceof ApiRequestError ? err.message : "Could not load flagged email.");
+            }
+        })
+            .finally(() => {
+            if (!stale) {
+                setFlaggedLoading(false);
+            }
+        });
+        return () => {
+            stale = true;
+        };
     }, [view, mailboxUid]);
     async function handleCreate(e) {
         e.preventDefault();
@@ -151,8 +175,8 @@ function TasksContent() {
                 mailboxUid: target,
                 folderUid: targetFolderUid,
                 title: title.trim(),
-                // The date input's "yyyy-MM-dd" is the user's *local* day - see `parseDueDate()`.
-                dueDate: dueDate ? parseDueDate(dueDate).toISOString() : undefined,
+                // The date input's "yyyy-MM-dd" is stored as that day's UTC midnight - see `dueDateInstant()`.
+                dueDate: dueDate ? dueDateInstant(dueDate) : undefined,
                 priority,
             }, client);
             if (target === mailboxUid) {
@@ -174,7 +198,24 @@ function TasksContent() {
             setCreating(false);
         }
     }
+    // The tasks whose completion is being saved. The control is disabled meanwhile, and the ref (current at once, unlike state) turns away a second click that
+    // lands before the page has re-rendered: it would send the same stale `version` and be refused, rolling the task back to a state the server has left.
+    const togglingRef = useRef(new Set());
+    const [toggling, setToggling] = useState(new Set());
+    function setTogglePending(uid, pending) {
+        if (pending) {
+            togglingRef.current.add(uid);
+        }
+        else {
+            togglingRef.current.delete(uid);
+        }
+        setToggling(new Set(togglingRef.current));
+    }
     async function handleToggle(task) {
+        if (togglingRef.current.has(task.uid)) {
+            return;
+        }
+        setTogglePending(task.uid, true);
         const nextCompleted = !task.completed;
         setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
         try {
@@ -185,6 +226,9 @@ function TasksContent() {
             setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
             notifyApiError(err, "Couldn't update the task");
         }
+        finally {
+            setTogglePending(task.uid, false);
+        }
     }
     async function handleDelete(task) {
         try {
@@ -230,8 +274,24 @@ function TasksContent() {
         }
     }, [tasks, view, userUid]);
     const checkedTasks = viewFiltered.filter((t) => checkedUids.has(t.uid));
+    // A bulk action sends every checked row's own version: pressed again before it finishes, it would send stale ones and raise a stream of 409s.
+    const bulkRunning = useRef(false);
+    function singleFlight(run) {
+        return async () => {
+            if (bulkRunning.current) {
+                return;
+            }
+            bulkRunning.current = true;
+            try {
+                await run();
+            }
+            finally {
+                bulkRunning.current = false;
+            }
+        };
+    }
     // The bulk handlers try every task and report each failure: the same failure repeated is one pop-up with a count.
-    async function handleBulkComplete() {
+    const handleBulkComplete = singleFlight(async () => {
         for (const task of checkedTasks) {
             try {
                 await setTaskCompleted(task, true, client);
@@ -242,8 +302,8 @@ function TasksContent() {
         }
         setCheckedUids(new Set());
         await reload();
-    }
-    async function handleBulkAddToMyDay() {
+    });
+    const handleBulkAddToMyDay = singleFlight(async () => {
         for (const task of checkedTasks) {
             try {
                 await setTaskMyDay(task, true, client);
@@ -254,7 +314,7 @@ function TasksContent() {
         }
         setCheckedUids(new Set());
         await reload();
-    }
+    });
     async function handleBulkDelete() {
         for (const task of checkedTasks) {
             try {
@@ -280,6 +340,8 @@ function TasksContent() {
             void handleBulkDelete();
         }
     }
+    // Re-worked when the day changes, so a page left open past midnight moves Today's tasks to Overdue.
+    const dayKey = useDayKey();
     const grouped = useMemo(() => {
         const now = new Date();
         const map = new Map(BUCKET_ORDER.map((b) => [b, []]));
@@ -290,17 +352,17 @@ function TasksContent() {
             map.get(bucketFor(task, now)).push(task);
         }
         return map;
-    }, [viewFiltered]);
+    }, [viewFiltered, dayKey]);
     const completedTasks = viewFiltered.filter((t) => t.completed);
     return (_jsxs("div", { className: "flex-1 min-w-0 min-h-0 flex flex-col lg:flex-row", children: [_jsx(TasksSidebar, { mailboxUid: mailboxUid, tasks: tasks, userUid: userUid, active: view, onSelect: handleSelectView }), _jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-y-auto", children: [_jsx(TasksToolbar, { viewMode: viewMode, onViewModeChange: setViewMode, selectedCount: checkedTasks.length, onComplete: handleBulkComplete, onDelete: () => setPendingDelete({ type: "bulk" }), onAddToMyDay: handleBulkAddToMyDay }), _jsxs("div", { role: "region", "aria-label": "Tasks list", className: "max-w-2xl mx-auto w-full flex flex-col gap-6 p-6", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Tasks" }), error && _jsx(Alert, { children: error }), truncated && view.type !== "flagged" && (_jsxs(Alert, { children: ["This folder has more tasks than can be shown at once - only the first ", LIST_PAGE_SIZE * MAX_LIST_PAGES, " are listed."] })), view.type === "flagged" ? (_jsx(FlaggedEmailList, { loading: flaggedLoading, error: flaggedError, messages: flaggedMessages })) : (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleCreate, className: "flex flex-wrap items-center gap-2 bg-surface border border-border rounded-md p-2", children: [_jsx("input", { ref: addTaskRef, type: "text", "aria-label": "Add a task", ...addTaskHint, className: `${INPUT_CLASS} min-w-40 basis-40 flex-1`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Add a task" }), _jsx("input", { type: "date", "aria-label": "Due date", className: INPUT_CLASS, value: dueDate, onChange: (e) => setDueDate(e.target.value) }), _jsxs("select", { "aria-label": "Priority", className: INPUT_CLASS, value: priority, onChange: (e) => setPriority(e.target.value), children: [_jsx("option", { value: "low", children: "Low" }), _jsx("option", { value: "normal", children: "Normal" }), _jsx("option", { value: "high", children: "High" })] }), writableMailboxes.length > 1 && (_jsx("select", { "aria-label": "Task mailbox", className: `${INPUT_CLASS} max-w-40`, 
                                                 // `writableMailboxes` only has entries once `mailboxUid` has resolved.
-                                                value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
+                                                value: targetMailboxUid ?? mailboxUid, onChange: (e) => setTargetMailboxUid(e.target.value), children: writableMailboxes.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName, mb.ownerUserUid === userUid ? "" : " (shared)"] }, mb.uid))) })), _jsx(Button, { type: "submit", loading: creating, disabled: creating, className: "!w-auto shrink-0", children: "Add" })] }), createError && _jsx(Alert, { children: createError }), addedElsewhere && (_jsxs("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["\u201C", addedElsewhere.title, "\u201D was added to", " ", mailboxes.find((mb) => mb.uid === addedElsewhere.mailboxUid)?.displayName ?? "another mailbox", ".", " ", _jsx("a", { href: `/tasks?mailboxUid=${encodeURIComponent(addedElsewhere.mailboxUid)}`, "data-router-shallow": "", "data-router-prefetch": "false", className: "font-medium text-primary-dark hover:underline", children: "View that mailbox\u2019s tasks" })] })), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : viewFiltered.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No tasks yet." })) : viewMode === "grid" ? (_jsx(TaskTable, { tasks: viewFiltered, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, toggling: toggling, onDelete: requestDelete })) : (_jsxs(_Fragment, { children: [BUCKET_ORDER.map((bucket) => {
                                                 const items = grouped.get(bucket);
                                                 if (items.length === 0) {
                                                     return null;
                                                 }
-                                                return (_jsx(TaskGroup, { label: bucket, tasks: items, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete }, bucket));
-                                            }), completedTasks.length > 0 && (_jsx(TaskGroup, { label: "Completed", tasks: completedTasks, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, onDelete: requestDelete }))] }))] }))] })] }), _jsxs(Modal, { open: pendingDelete !== null, onClose: () => setPendingDelete(null), title: "Delete tasks", children: [_jsx("p", { className: "text-sm mb-5", children: pendingDelete?.type === "single"
+                                                return (_jsx(TaskGroup, { label: bucket, tasks: items, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, toggling: toggling, onDelete: requestDelete }, bucket));
+                                            }), completedTasks.length > 0 && (_jsx(TaskGroup, { label: "Completed", tasks: completedTasks, checkedUids: checkedUids, onToggleChecked: toggleChecked, onToggle: handleToggle, toggling: toggling, onDelete: requestDelete }))] }))] }))] })] }), _jsxs(Modal, { open: pendingDelete !== null, onClose: () => setPendingDelete(null), title: "Delete tasks", children: [_jsx("p", { className: "text-sm mb-5", children: pendingDelete?.type === "single"
                             ? `Delete "${pendingDelete.task.title}"?`
                             : `Delete ${checkedTasks.length} selected ${checkedTasks.length === 1 ? "task" : "tasks"}?` }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setPendingDelete(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: handleConfirmDelete, children: "Delete" })] })] })] }));
 }
@@ -318,16 +380,16 @@ function FlaggedEmailList({ loading, error, messages }) {
 }
 /** A circular completion-toggle control matching Outlook's visual language (not a native checkbox), while
  * staying a real accessible toggle. */
-function CompletionToggle({ task, onToggle }) {
-    return (_jsx("button", { type: "button", role: "checkbox", "aria-checked": task.completed, "aria-label": `Mark "${task.title}" as ${task.completed ? "not complete" : "complete"}`, onClick: () => onToggle(task), className: [
+function CompletionToggle({ task, onToggle, pending }) {
+    return (_jsx("button", { type: "button", role: "checkbox", "aria-checked": task.completed, disabled: pending, "aria-label": `Mark "${task.title}" as ${task.completed ? "not complete" : "complete"}`, onClick: () => onToggle(task), className: [
             "w-4 h-4 rounded-full border shrink-0 flex items-center justify-center text-[10px]",
             task.completed ? "bg-primary border-primary text-white" : "border-border text-transparent",
         ].join(" "), children: "\u2713" }));
 }
-function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, onDelete }) {
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-2", children: label }), _jsx("ul", { className: "bg-surface border border-border rounded-md divide-y divide-border", children: tasks.map((task) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5 px-3", children: [_jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }), _jsx(CompletionToggle, { task: task, onToggle: onToggle }), _jsx("span", { className: ["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), task.priority !== "normal" && (_jsx("span", { className: ["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] })), task.dueDate && (_jsx("span", { className: "text-xs text-text-muted shrink-0", children: parseDueDate(task.dueDate).toLocaleDateString() })), _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" })] }, task.uid))) })] }));
+function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, toggling, onDelete }) {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-2", children: label }), _jsx("ul", { className: "bg-surface border border-border rounded-md divide-y divide-border", children: tasks.map((task) => (_jsxs("li", { className: "flex items-center gap-3 py-2.5 px-3", children: [_jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }), _jsx(CompletionToggle, { task: task, onToggle: onToggle, pending: toggling.has(task.uid) }), _jsx("span", { className: ["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), task.priority !== "normal" && (_jsx("span", { className: ["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] })), task.dueDate && (_jsx("span", { className: "text-xs text-text-muted shrink-0", children: parseDueDate(task.dueDate).toLocaleDateString() })), _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" })] }, task.uid))) })] }));
 }
-function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete }) {
+function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, toggling, onDelete }) {
     const allChecked = tasks.length > 0 && tasks.every((t) => checkedUids.has(t.uid));
     function toggleAll() {
         if (allChecked) {
@@ -345,7 +407,7 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, onDelete })
             }
         }
     }
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm bg-surface border border-border rounded-md", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all tasks", checked: allChecked, onChange: toggleAll }) }), _jsx("th", { className: "w-8 px-3 py-2" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Title" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Due Date" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Importance" }), _jsx("th", { className: "w-8 px-3 py-2" })] }) }), _jsx("tbody", { children: tasks.map((task) => (_jsxs("tr", { className: "border-b border-border last:border-0", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(CompletionToggle, { task: task, onToggle: onToggle }) }), _jsx("td", { className: ["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), _jsx("td", { className: "px-3 py-2 text-text-muted", children: task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : "" }), _jsx("td", { className: ["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] }), _jsx("td", { className: "px-3 py-2", children: _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" }) })] }, task.uid))) })] }) }));
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm bg-surface border border-border rounded-md", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border text-left", children: [_jsx("th", { className: "w-8 px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": "Select all tasks", checked: allChecked, onChange: toggleAll }) }), _jsx("th", { className: "w-8 px-3 py-2" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Title" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Due Date" }), _jsx("th", { className: "px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-muted", children: "Importance" }), _jsx("th", { className: "w-8 px-3 py-2" })] }) }), _jsx("tbody", { children: tasks.map((task) => (_jsxs("tr", { className: "border-b border-border last:border-0", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${task.title}`, checked: checkedUids.has(task.uid), onChange: () => onToggleChecked(task.uid) }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(CompletionToggle, { task: task, onToggle: onToggle, pending: toggling.has(task.uid) }) }), _jsx("td", { className: ["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" "), children: task.title }), _jsx("td", { className: "px-3 py-2 text-text-muted", children: task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : "" }), _jsx("td", { className: ["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" "), children: PRIORITY_LABEL[task.priority] }), _jsx("td", { className: "px-3 py-2", children: _jsx("button", { type: "button", onClick: () => onDelete(task), "aria-label": `Delete "${task.title}"`, className: "text-text-muted hover:text-danger text-sm px-1", children: "\u00D7" }) })] }, task.uid))) })] }) }));
 }
 export default TasksPage;
 /** The tab's title: `Brand: Tasks` (see `pageTitle()`). */

package/dist/lib/admin/auditLogApi.js

@@ -9,7 +9,7 @@
  * own server-internal `recordAuditLog()`.
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given below, is an explicit `ApiClient` from `createApiClient()` (e.g. one account of a multi-account
  * app) to call instead of the default global `apiFetch()` - see `withClient()`'s own doc comment in `util/api.ts`.
  * Omitted (the default), this behaves exactly as before. */
@@ -23,5 +23,5 @@ export function listAuditLog(filters = {}, params = {}, client) {
         extra.action = filters.action;
     if (filters.targetType)
         extra.targetType = filters.targetType;
-    return withClient(client, `/mail/audit-log?${buildQuery(params, extra)}`);
+    return withClient(client, `/mail/audit-log?${buildQuery(params, { ...extra, ...sortQuery({ dateCreated: "DESC", uid: "ASC" }) })}`);
 }

package/dist/lib/admin/distributionListsApi.js

@@ -7,12 +7,12 @@
  * trusted-role-only, no self-service creation or per-list delegated ownership (v1).
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 export function listDistributionLists(params = {}, client) {
-    return withClient(client, `/mail/distribution-lists?${buildQuery(params)}`);
+    return withClient(client, `/mail/distribution-lists?${buildQuery(params, sortQuery({ uid: "ASC" }))}`);
 }
 export function getDistributionList(uid, client) {
     return withClient(client, `/mail/distribution-lists/${encodeURIComponent(uid)}`);

package/dist/lib/admin/domainsApi.js

@@ -8,12 +8,12 @@
  * admin-scoped entities.
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 export function listDomains(params = {}, client) {
-    return withClient(client, `/mail/domains?${buildQuery(params)}`);
+    return withClient(client, `/mail/domains?${buildQuery(params, sortQuery({ uid: "ASC" }))}`);
 }
 export function getDomain(uid, client) {
     return withClient(client, `/mail/domains/${encodeURIComponent(uid)}`);

package/dist/lib/admin/escrowAuditLogApi.js

@@ -12,12 +12,12 @@
  * enforces it and a non-trusted caller simply gets a 403 `ApiRequestError` back.
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 export function listAuditLogEntries(params = {}, client) {
-    return withClient(client, `/escrow/audit-log?${buildQuery(params)}`);
+    return withClient(client, `/escrow/audit-log?${buildQuery(params, sortQuery({ sequence: "DESC" }))}`);
 }
 export function getAuditLogEntry(uid, client) {
     return withClient(client, `/escrow/audit-log/${encodeURIComponent(uid)}`);

package/dist/lib/admin/escrowScopesApi.js

@@ -11,12 +11,12 @@
  * `apps/admin/escrow-scopes/*`, never by the holder-facing `apps/escrow` area.
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 export function listEscrowScopes(params = {}, client) {
-    return withClient(client, `/escrow/scopes?${buildQuery(params)}`);
+    return withClient(client, `/escrow/scopes?${buildQuery(params, sortQuery({ uid: "ASC" }))}`);
 }
 /**
  * Who a typed principal - a mailbox address, an auth-server username or e-mail alias, or a user uid - is, for the

package/dist/lib/admin/pluginsApi.d.ts

@@ -32,6 +32,17 @@ export interface PluginManifest {
     mailboxScopedData?: boolean;
 }
 export type PluginSettingValue = string | number | boolean;
+/** What `@rapidmx/restapi` answers in place of the saved value of a setting whose key names a secret (secret, password, credential, token, api key), so a
+ * stored API key or shared secret never reaches the console. Sent back as it was given, it means "left alone": the saved value stays. */
+export interface PluginSecretSetting {
+    secret: true;
+}
+/** A saved setting as a response shows it. */
+export type PluginSavedSetting = PluginSettingValue | PluginSecretSetting;
+/** Whether `value` is the placeholder a saved secret setting is shown as. */
+export declare function isSecretSetting(value: unknown): value is PluginSecretSetting;
+/** Whether a setting's key names a secret - mirrors `@rapidmx/restapi`'s `SECRET_SETTING_KEY`, which decides what it withholds. */
+export declare function isSecretSettingKey(key: string): boolean;
 /** Mirrors `@rapidmx/restapi`'s `PluginConfiguredSetting`: what the deployment's own configuration (the command line, the
  * environment, the server's defaults) says about one setting. It applies until a value is saved, which wins over it. */
 export interface PluginConfiguredSetting {
@@ -48,7 +59,7 @@ export interface Plugin {
     packageVersion: string;
     integrity?: string;
     enabled: boolean;
-    settings: Record<string, PluginSettingValue>;
+    settings: Record<string, PluginSavedSetting>;
     /** For each setting the deployment's configuration provides a value for, what it says. Absent from a server that
      * predates it, which reads as nothing being configured. */
     configured?: Record<string, PluginConfiguredSetting>;
@@ -214,7 +225,7 @@ export interface UpdatePluginInput {
     packageVersion?: string;
     enabled?: boolean;
     /** A `null` value clears a setting back to the plugin's own default. */
-    settings?: Record<string, PluginSettingValue | null>;
+    settings?: Record<string, PluginSavedSetting | null>;
     /** What a previewed version change or enable was confirmed to also install and enable. */
     expectedPlan?: PluginExpectedPlan;
 }

package/dist/lib/admin/pluginsApi.js

@@ -9,6 +9,14 @@
  * `getPluginStatus()`.
  */
 import { withClient } from "../util/api.js";
+/** Whether `value` is the placeholder a saved secret setting is shown as. */
+export function isSecretSetting(value) {
+    return typeof value === "object" && value !== null && value.secret === true;
+}
+/** Whether a setting's key names a secret - mirrors `@rapidmx/restapi`'s `SECRET_SETTING_KEY`, which decides what it withholds. */
+export function isSecretSettingKey(key) {
+    return /secret|password|credential|token|api_?key/i.test(key);
+}
 /** The `expectedPlan` to send for a change previewed as `plan`. */
 export function expectedPlanOf(plan) {
     return {

package/dist/lib/admin/retentionPolicyApi.d.ts

@@ -20,6 +20,9 @@ export interface RetentionPolicy {
  * minimum) — mirrored here only so client-side validation can give the same message before a round trip;
  * the server enforces this regardless. */
 export declare const MIN_AUDIT_LOG_RETENTION_DAYS = 2190;
+/** The server-enforced floor for `messageRetentionDays` (30 days) - `MIN_MESSAGE_RETENTION_DAYS` in `@rapidmx/restapi`, mirrored here for the same reason as
+ * `MIN_AUDIT_LOG_RETENTION_DAYS`. A shorter period is refused with a 400. */
+export declare const MIN_MESSAGE_RETENTION_DAYS = 30;
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */

package/dist/lib/admin/retentionPolicyApi.js

@@ -14,6 +14,9 @@ import { withClient } from "../util/api.js";
  * minimum) — mirrored here only so client-side validation can give the same message before a round trip;
  * the server enforces this regardless. */
 export const MIN_AUDIT_LOG_RETENTION_DAYS = 2190;
+/** The server-enforced floor for `messageRetentionDays` (30 days) - `MIN_MESSAGE_RETENTION_DAYS` in `@rapidmx/restapi`, mirrored here for the same reason as
+ * `MIN_AUDIT_LOG_RETENTION_DAYS`. A shorter period is refused with a 400. */
+export const MIN_MESSAGE_RETENTION_DAYS = 30;
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */

package/dist/lib/admin/transportRulesApi.js

@@ -9,12 +9,12 @@
  * natural address of its own.
  */
 import { withClient } from "../util/api.js";
-import { buildQuery } from "../util/apiQuery.js";
+import { buildQuery, sortQuery } from "../util/apiQuery.js";
 /** `client`, given by every function below, is an explicit `ApiClient` from `createApiClient()` (e.g. one
  * account of a multi-account app) to call instead of the default global `apiFetch()` - see `withClient()`'s
  * own doc comment in `util/api.ts`. Omitted (the default), every function here behaves exactly as before. */
 export function listTransportRules(params = {}, client) {
-    return withClient(client, `/mail/transport-rules?${buildQuery(params)}`);
+    return withClient(client, `/mail/transport-rules?${buildQuery(params, sortQuery({ sequence: "ASC", uid: "ASC" }))}`);
 }
 export function getTransportRule(uid, client) {
     return withClient(client, `/mail/transport-rules/${encodeURIComponent(uid)}`);

package/dist/lib/appearance/preferencesApi.d.ts

@@ -112,7 +112,7 @@ export declare function getAppearance(client?: ApiClient): Promise<AppearancePre
 export declare function saveAppearance(update: AppearanceUpdate, client?: ApiClient): Promise<AppearancePreferences>;
 /** Stores `file` (already checked with `validateBackgroundFile()`) as the background: its raw bytes, with its own content type - which
  * bypasses `apiFetch()`, as it always sends JSON. Answers with the updated preferences. */
-export declare function uploadAppearanceBackground(file: Blob): Promise<AppearancePreferences>;
+export declare function uploadAppearanceBackground(file: Blob, client?: ApiClient): Promise<AppearancePreferences>;
 /** Removes the stored background image. Answers with the updated preferences when the server sends them, else `undefined`. */
 export declare function deleteAppearanceBackground(client?: ApiClient): Promise<AppearancePreferences | undefined>;
 /** The URL of the stored background image `version` - what CSS `url()` and `<img src>` use. Immutable per version. */

package/dist/lib/appearance/preferencesApi.js

@@ -19,7 +19,7 @@
  * Everything that comes from outside - the response, a push event, the page's server-rendered props, `localStorage` - goes through
  * `normalizeAppearance()`, which keeps only well-formed values (so a stale or hostile value can never reach a CSS declaration).
  */
-import { ApiRequestError, apiUrl, withClient, withCsrfHeader } from "../util/api.js";
+import { ApiRequestError, apiUrl, withClient, withClientRaw } from "../util/api.js";
 export const APPEARANCE_MODES = ["system", "light", "dark"];
 export const BACKGROUND_KINDS = ["none", "color", "image"];
 export const BACKGROUND_FITS = ["cover", "contain", "tile"];
@@ -212,19 +212,8 @@ export async function saveAppearance(update, client) {
 }
 /** Stores `file` (already checked with `validateBackgroundFile()`) as the background: its raw bytes, with its own content type - which
  * bypasses `apiFetch()`, as it always sends JSON. Answers with the updated preferences. */
-export async function uploadAppearanceBackground(file) {
-    const res = await fetch(apiUrl(`${PATH}/background`), {
-        method: "POST",
-        credentials: "include",
-        headers: withCsrfHeader({ "Content-Type": file.type || "application/octet-stream" }),
-        body: file,
-    });
-    const contentType = res.headers.get("content-type") ?? "";
-    const body = contentType.includes("application/json") ? await res.json().catch(() => undefined) : undefined;
-    if (!res.ok) {
-        const message = (body && (body.message || body.error)) || res.statusText || "Upload failed.";
-        throw new ApiRequestError(message, res.status, body?.code);
-    }
+export async function uploadAppearanceBackground(file, client) {
+    const body = await withClientRaw(client, `${PATH}/background`, "POST", file, file.type || "application/octet-stream");
     const stored = normalizeAppearance(body);
     if (!stored) {
         throw new ApiRequestError("The server did not return the saved appearance.", 502);

package/dist/lib/auth/session.d.ts

@@ -4,30 +4,67 @@ export declare const SESSION_REFRESH_AFTER_MS: number;
 export declare const SESSION_REFRESH_CHECK_MS: number;
 /** A reload that follows a successful recovery refresh but still finds no session is not repeated within this window. */
 export declare const SESSION_RELOAD_GUARD_MS: number;
+/** A refresh answered with a refusal is asked once more after this long, in case the cookies were rotated by another tab or the server's session save lagged. */
+export declare const SESSION_REFRESH_RETRY_MS = 1500;
+/** A forced refresh (a request was refused, or the page has no session) does nothing when a refresh succeeded within this long: the refusal came from the old cookies. */
+export declare const SESSION_REFRESH_MIN_GAP_MS: number;
+/** How many entries `rapidmx.session.log` keeps. */
+export declare const SESSION_LOG_MAX = 40;
+/**
+ * How long a refresh request may go unanswered before it is given up on (not aborted - see `postRefresh()`). A refresh runs inside a cross-tab Web Lock, so one that hangs would hold the lock - and
+ * with it every tab's refresh, and every request waiting on a recovery - for good.
+ */
+export declare const SESSION_REFRESH_TIMEOUT_MS: number;
+/** Sets how long a refresh request may go unanswered (for tests); `resetSessionRecovery()` restores the default. */
+export declare function setSessionRefreshTimeout(ms: number): void;
+/** Sets how long a refused refresh waits before its one retry (for tests); `resetSessionRecovery()` restores the default. */
+export declare function setSessionRefreshRetryDelay(ms: number): void;
+/** Whether a refresh succeeded within the last `ms`, in this tab or another (they share `localStorage`). A cleared or future-dated record counts as no. */
+export declare function refreshedRecently(ms: number): boolean;
+/** One entry of the session log (`rapidmx.session.log`). */
+export interface SessionLogEntry {
+    /** When it happened, ISO 8601. */
+    t: string;
+    /** What happened, e.g. `refresh:start`, `refresh:rejected`, `leave`. */
+    e: string;
+    /** A short detail (a reason, a status, an age). Never a token or cookie value. */
+    d?: string;
+}
+/** The session log: the last `SESSION_LOG_MAX` things the silent refresh did, oldest first, kept in `localStorage['rapidmx.session.log']` so the cause of an unexpected sign-in can be read afterward. */
+export declare function getSessionLog(): SessionLogEntry[];
+/** Appends to the session log, dropping the oldest entries past `SESSION_LOG_MAX`. Best effort: blocked storage loses the entry. */
+export declare function logSessionEvent(e: string, d?: string): void;
+/** Why a refresh was made, for the session log. */
+export type SessionRefreshReason = "check" | "recovery" | "nouser";
 /**
  * Refreshes the signed-in session through auth-server: exchanges the `refresh` cookie for a new access token and
  * refresh token, both set as cookies on the response. Rejects with the `ApiRequestError` auth-server answered
  * (`401`/`403` when the refresh token has expired or was revoked).
  *
- * A refresh token is single-use and bound to the session, so two tabs refreshing at once would make the second one look
- * like a dead session. Refreshes are therefore serialised across tabs (Web Locks, where the browser has them) and each
- * tab records when the last one happened, so a tab that gets its turn right after another tab refreshed does nothing.
+ * A refresh token is single-use and bound to the session, and auth-server saves the rotated token a moment after it
+ * answers, so refreshing twice in quick succession makes the second look like a dead session. Refreshes are therefore
+ * shared by every caller in the tab (one in flight at a time), serialised across tabs (Web Locks, where the browser has
+ * them), and each tab records when the last one succeeded, so a caller that gets its turn right after a refresh does
+ * nothing. A refresh that is refused is asked once more after `SESSION_REFRESH_RETRY_MS` (the cookies may have been
+ * rotated meanwhile) before it counts as a rejection.
  *
- * @param force Refresh even when the last refresh, by this tab or another, was recent.
+ * @param force Refresh even when the last refresh, by this tab or another, was `SESSION_REFRESH_AFTER_MS` ago or less. Even forced, a refresh made within `SESSION_REFRESH_MIN_GAP_MS` is not repeated.
+ * @param reason Why, for the session log.
  * @returns `true` when a refresh was made, `false` when one was not needed.
  */
-export declare function refreshSession(authServerUrl: string, force?: boolean): Promise<boolean>;
+export declare function refreshSession(authServerUrl: string, force?: boolean, reason?: SessionRefreshReason): Promise<boolean>;
 /** How long the outcome of a recovery is reused for: requests that fail together share one refresh, and a session that will not come back is not asked again at once. */
 export declare const SESSION_RECOVERY_COOLDOWN_MS: number;
 /**
- * Renews the session because a request was refused for lack of one, whatever this browser's record of the last refresh says. Every request
- * refused at about the same time shares one refresh, and its outcome is reused for `SESSION_RECOVERY_COOLDOWN_MS`. A refusal also clears the record of
- * the last refresh, so the next regular check asks again (and sends the browser to sign-in if the refresh token is truly gone).
+ * Renews the session because a request was refused for lack of one, whatever this browser's record of the last refresh says - except that a refresh that
+ * succeeded within `SESSION_REFRESH_MIN_GAP_MS` (by this tab or another) is not repeated: the request was refused with the cookies from before it, so it is
+ * simply sent again with the new ones. Every request refused at about the same time shares one refresh, and its outcome is reused for `SESSION_RECOVERY_COOLDOWN_MS`.
+ * A refusal also clears the record of the last refresh, so the next regular check asks again (and sends the browser to sign-in if the refresh token is truly gone).
  *
  * @returns Whether the session was renewed.
  */
 export declare function recoverSession(authServerUrl: string): Promise<boolean>;
-/** Forgets what recoveries have done (for tests). */
+/** Forgets what recoveries and refreshes have done, and restores the retry delay and timeout (for tests). */
 export declare function resetSessionRecovery(): void;
 /**
  * Redirects the browser to auth-server's sign-in page when `userUid` is absent, carrying the current URL as
@@ -66,9 +103,11 @@ export interface SessionRefreshOptions {
  * - `userUid` set: also renews the session when a request is refused for lack of one (`apiFetch()` asks `recoverSession()` and sends the request
  * again), so a token that ran out while timers were stopped costs nothing. Refreshes once the token is `SESSION_REFRESH_AFTER_MS` old (and right away when this browser has no
  * record of a recent refresh, since the page's token age is unknown), checked every `SESSION_REFRESH_CHECK_MS` and
- * whenever the tab becomes visible or the network returns, because a sleeping laptop stops timers. A failure that is
- * not a rejection is simply retried at the next check. A rejection (`401`/`403`: the refresh token expired or was
- * revoked, so the session cannot be kept) redirects to sign-in with `return_to` after `options.beforeRedirect` has run.
+ * whenever the tab becomes visible or focused or the network returns, because a sleeping laptop stops timers (a tab that wakes after the
+ * token's hour checks first, and a request refused meanwhile waits for that same refresh rather than starting its own). A failure that is
+ * not a rejection is simply retried at the next check. A rejection (`401`/`403` twice running, `SESSION_REFRESH_RETRY_MS` apart: the refresh
+ * token expired or was revoked, so the session cannot be kept) redirects to sign-in with `return_to` after `options.beforeRedirect` has run.
+ * Everything it does is recorded in the session log (`getSessionLog()`), which is also printed to the console when the browser goes to sign-in.
  *
  * **A no-op under an `ApiClientContext.Provider`** (see `util/apiClientContext.ts`): everything above assumes a
  * `jwt`/`refresh` cookie pair this app can renew through auth-server's own `/auth/refresh` - meaningless for a