@bobfrankston/mailx 1.0.378 → 1.0.382

package/bin/mailx.js

@@ -958,6 +958,18 @@ RFC 5322 with CRLF line endings. Bodies are quoted-printable encoded (readable i
     catch (e) {
         console.error(`  [readme] Could not write sending README: ${e?.message || e}`);
     }
+    // `--server` mode — hand off to the Express HTTP server package (self-
+    // contained; initializes its own DB / IMAP manager / MailxService). No
+    // WebView2, no IPC bridge. Useful for remote access (phone before MAUI
+    // was a thing) and for JSON-RPC debugging from devtools. Loopback by
+    // default; passes --external through if the user asked for it. See C34.
+    if (hasFlag("server")) {
+        writeInstanceFile(process.pid);
+        await import("@bobfrankston/mailx-server");
+        // mailx-server's index.ts self-invokes `start()` — once imported,
+        // Express owns the event loop. Don't fall through to showService.
+        return;
+    }
     const { NodeTcpTransport } = await import("@bobfrankston/node-tcp-transport");
     const imapManager = new ImapManager(db, () => new NodeTcpTransport());
     // Native client is the only option (iflow-direct)
@@ -1310,6 +1322,12 @@ RFC 5322 with CRLF line endings. Bodies are quoted-printable encoded (readable i
             console.error(`  [contacts] periodic seed error: ${e.message}`);
         }
     }, 30 * 60_000);
+    // Drain store_sync (calendar / tasks / contacts two-way pushes) every
+    // 30s. Local edits also drain immediately; this picks up rows that
+    // failed their first attempt (network blip, token refresh, 5xx).
+    setInterval(() => {
+        svc.drainStoreSync().catch((e) => console.error(`  [store_sync] periodic drain error: ${e?.message || e}`));
+    }, 30_000);
     // Auto-update: periodically check npm for a newer version and push a
     // notification to the WebView so the user can update with one click.
     const UPDATE_CHECK_MS = 30 * 60_000; // 30 minutes

package/client/app.js

@@ -82,6 +82,11 @@ async function updateNewMessageCount() {
             if (inbox)
                 totalUnread += inbox.unreadCount || 0;
         }
+        // Rail badge: unread count on the Inbox and Unified-inbox rail buttons.
+        // Visible even when those views aren't the active one — part of C33
+        // "rail icon badges for unread counts."
+        updateRailBadge("rail-inbox", totalUnread);
+        updateRailBadge("rail-unified", totalUnread);
         // First load: set baseline
         if (lastSeenCount === 0) {
             lastSeenCount = totalUnread;
@@ -100,6 +105,23 @@ async function updateNewMessageCount() {
     }
     catch { /* offline */ }
 }
+function updateRailBadge(buttonId, count) {
+    const btn = document.getElementById(buttonId);
+    if (!btn)
+        return;
+    let badge = btn.querySelector(".rail-badge");
+    if (count <= 0) {
+        if (badge)
+            badge.remove();
+        return;
+    }
+    if (!badge) {
+        badge = document.createElement("span");
+        badge.className = "rail-badge";
+        btn.appendChild(badge);
+    }
+    badge.textContent = count > 999 ? "999+" : String(count);
+}
 // ── Taskbar flash via title alternation ──
 let titleFlashTimer = null;
 let titleFlashPhase = false;
@@ -1804,6 +1826,7 @@ const optThreaded = document.getElementById("opt-threaded");
 const optFlagged = document.getElementById("opt-flagged");
 const optFolderCounts = document.getElementById("opt-folder-counts");
 const optCalendarSidebar = document.getElementById("opt-calendar-sidebar");
+const optThreadFilter = document.getElementById("opt-thread-filter");
 // Toggle dropdown — also close any other open toolbar menu so they can't
 // overlap. Without this, opening View while Settings was already open left
 // both visible at once (user-reported screenshot).
@@ -1855,6 +1878,41 @@ if (savedFlagged)
     document.getElementById("ml-body")?.classList.add("flagged-only");
 if (savedFolderCounts)
     document.getElementById("folder-tree")?.classList.add("show-folder-counts");
+// "Only this conversation" toggle — hides rows whose threadId differs from
+// the currently-selected message's threadId. Client-side only (no server
+// round-trip); toggling off restores the full list. Persisted per-session
+// but not across reloads (thread context is tied to current selection).
+optThreadFilter?.addEventListener("change", () => {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    body.classList.toggle("thread-filter-on", optThreadFilter.checked);
+    applyThreadFilter();
+});
+messageState.subscribe(() => applyThreadFilter());
+function applyThreadFilter() {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    if (!optThreadFilter?.checked) {
+        body.querySelectorAll(".ml-row.thread-filter-hidden")
+            .forEach(r => r.classList.remove("thread-filter-hidden"));
+        return;
+    }
+    const sel = messageState.getSelected();
+    const tid = sel?.threadId;
+    if (!tid)
+        return;
+    body.querySelectorAll(".ml-row").forEach(r => {
+        const rowTid = r.dataset.threadId;
+        if (rowTid === tid || r.classList.contains("selected")) {
+            r.classList.remove("thread-filter-hidden");
+        }
+        else {
+            r.classList.add("thread-filter-hidden");
+        }
+    });
+}
 // S51 — Calendar sidebar: View-menu toggle, restore from localStorage,
 // hide auto-magically on narrow screens (CSS handles that).
 (async () => {
@@ -1912,6 +1970,12 @@ document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () =>
         settingsDropdown.hidden = true;
     await openJsoncEditor("accounts.jsonc");
 });
+// Allow other components (remote-content banner, etc.) to open the editor
+// pre-selected to a specific file.
+document.addEventListener("mailx-open-jsonc-editor", async (ev) => {
+    const file = ev.detail?.file || "accounts.jsonc";
+    await openJsoncEditor(file);
+});
 // Q61: open ~/.mailx in OS file explorer.
 document.getElementById("btn-open-mailx-dir")?.addEventListener("click", async () => {
     const settingsDropdown = document.getElementById("settings-dropdown");
@@ -1959,7 +2023,10 @@ async function openJsoncEditor(initialFile) {
         </label>
         <div class="mailx-modal-split">
             <label class="mailx-modal-label mailx-modal-split-left">Contents (JSONC — comments and trailing commas allowed)
-                <textarea class="mailx-modal-input mailx-modal-textarea" id="jsonc-content" spellcheck="false"></textarea>
+                <div class="jsonc-editor-wrap">
+                    <div class="jsonc-gutter" id="jsonc-gutter" aria-hidden="true"></div>
+                    <textarea class="mailx-modal-input mailx-modal-textarea jsonc-textarea" id="jsonc-content" spellcheck="false"></textarea>
+                </div>
             </label>
             <div class="mailx-modal-split-right mailx-help-panel">
                 <div class="mailx-help-title">
@@ -1978,12 +2045,31 @@ async function openJsoncEditor(initialFile) {
     document.body.appendChild(backdrop);
     const fileSelect = panel.querySelector("#jsonc-file");
     const textarea = panel.querySelector("#jsonc-content");
+    const gutter = panel.querySelector("#jsonc-gutter");
     const errorEl = panel.querySelector("#jsonc-error");
     const saveBtn = panel.querySelector('[data-action="save"]');
     const helpBody = panel.querySelector("#jsonc-help-body");
     const helpToggle = panel.querySelector("#jsonc-help-toggle");
     const helpPanel = panel.querySelector(".mailx-help-panel");
     fileSelect.value = initialFile;
+    // Line-number gutter — recomputed whenever the textarea content changes,
+    // scroll-synced so numbers stay aligned. errorLine (1-based) is highlighted
+    // red so the "Line N, col M" error message in the status bar points at a
+    // visible marker in the gutter.
+    let errorLine = 0;
+    const renderGutter = () => {
+        const lines = textarea.value.split("\n").length;
+        let html = "";
+        for (let i = 1; i <= lines; i++) {
+            html += i === errorLine
+                ? `<div class="jsonc-gutter-line jsonc-gutter-error">${i}</div>`
+                : `<div class="jsonc-gutter-line">${i}</div>`;
+        }
+        gutter.innerHTML = html;
+    };
+    const syncScroll = () => { gutter.scrollTop = textarea.scrollTop; };
+    textarea.addEventListener("scroll", syncScroll);
+    textarea.addEventListener("input", renderGutter);
     helpToggle.addEventListener("click", () => {
         const open = helpPanel.classList.toggle("mailx-help-collapsed");
         helpToggle.textContent = open ? "▸ Help" : "▾ Help";
@@ -2005,12 +2091,16 @@ async function openJsoncEditor(initialFile) {
         errorEl.textContent = "";
         textarea.classList.remove("mailx-modal-input-error");
         saveBtn.disabled = false;
+        errorLine = 0;
+        renderGutter();
     };
     const showValidation = (err) => {
         errorEl.textContent = `Line ${err.line}, col ${err.col}: ${err.message}`;
         errorEl.hidden = false;
         textarea.classList.add("mailx-modal-input-error");
         saveBtn.disabled = true;
+        errorLine = err.line;
+        renderGutter();
         // Select the problem character so the browser draws a visible marker
         try {
             textarea.setSelectionRange(err.pos, err.pos + 1);
@@ -2033,13 +2123,16 @@ async function openJsoncEditor(initialFile) {
     const loadFile = async () => {
         textarea.value = "Loading...";
         clearValidation();
+        renderGutter();
         try {
             const r = await readJsoncFile(fileSelect.value);
             textarea.value = r?.content || "";
+            renderGutter();
             scheduleValidate();
         }
         catch (e) {
             textarea.value = "";
+            renderGutter();
             errorEl.textContent = `Failed to load: ${e.message}`;
             errorEl.hidden = false;
         }
@@ -2739,6 +2832,19 @@ document.getElementById("status-queue")?.addEventListener("click", async () => {
 })();
 console.log("mailx client initialized, location:", location.href);
 updateNewMessageCount();
+// Offline indicator — show/hide based on navigator.onLine. Doesn't gate any
+// functionality (the store is local-first; edits queue and replay on
+// reconnect regardless) but tells the user their queued actions are stacking
+// up for a later push rather than hitting the server now.
+const offlineEl = document.getElementById("status-offline");
+function refreshOfflineIndicator() {
+    if (!offlineEl)
+        return;
+    offlineEl.hidden = navigator.onLine;
+}
+window.addEventListener("online", refreshOfflineIndicator);
+window.addEventListener("offline", refreshOfflineIndicator);
+refreshOfflineIndicator();
 // ── Midnight refresh — update date display when day changes ──
 function scheduleMiddnightRefresh() {
     const now = new Date();

package/client/components/calendar-sidebar.js

@@ -10,68 +10,33 @@
  * Sidebar and the full-screen calendar modal (calendar.ts) read the SAME
  * underlying data — two views onto one source.
  *
- * Local-only events (LOCAL_STORE_KEY) are merged with Google events.
+ * All storage goes through the service-side two-way cache (calendar_events
+ * and tasks tables); this file does not use localStorage for data.
  */
-import { getPrimaryAccount } from "../lib/api-client.js";
-const LOCAL_STORE_KEY = "mailx-cal-events-v1";
-const TASK_STORE_KEY = "mailx-tasks-v1";
+import { getCalendarEvents, createCalendarEvent, getTasks, createTask, updateTask, deleteTask, } from "../lib/api-client.js";
 const SIDEBAR_PREF = "mailx-calendar-sidebar-on";
 let viewYear = new Date().getFullYear();
 let viewMonth = new Date().getMonth();
 let viewDay = new Date().getDate();
 let lastEvents = [];
-function loadLocalEvents() {
-    try {
-        const raw = localStorage.getItem(LOCAL_STORE_KEY);
-        if (!raw)
-            return [];
-        const arr = JSON.parse(raw);
-        return Array.isArray(arr) ? arr : [];
-    }
-    catch {
-        return [];
-    }
-}
-function loadTasks() {
-    try {
-        const raw = localStorage.getItem(TASK_STORE_KEY);
-        if (!raw)
-            return [];
-        const arr = JSON.parse(raw);
-        return Array.isArray(arr) ? arr : [];
-    }
-    catch {
-        return [];
-    }
-}
-function saveTasks(tasks) {
-    try {
-        localStorage.setItem(TASK_STORE_KEY, JSON.stringify(tasks));
-    }
-    catch { /* */ }
-}
-/** Fetch upcoming events from Google Calendar via the primary account's
- *  OAuth token. Returns merged Google + local events for the next 30 days
- *  starting at `from`. Quietly returns local-only on any error so the
- *  sidebar still works without network / without Google Calendar scope. */
+/** Fetch events from the local two-way cache; service returns local rows
+ *  immediately and kicks a background refresh from Google. Next render
+ *  (view-nav or user action) picks up the refreshed rows. No localStorage
+ *  — everything lives in the service-side DB so phone / desktop share
+ *  the same events. */
 async function fetchUpcoming(from) {
-    const local = loadLocalEvents();
-    let google = [];
-    try {
-        const primary = await getPrimaryAccount("calendar");
-        if (primary?.email) {
-            // The OAuth token is held by the service-side OAuthTokenManager;
-            // calendar fetch goes through a server-side proxy method (not
-            // implemented yet — this is the seam). For now: local-only.
-            // Wire-up: TODO — service.fetchGoogleCalendarEvents(accountId, from, days).
-            // Sidebar already renders correctly with the merged result.
-        }
-    }
-    catch { /* google unavailable, fall back to local */ }
     const horizon = from.getTime() + 30 * 86400_000;
-    return [...local, ...google]
-        .filter(e => e.start >= from.getTime() && e.start < horizon)
-        .sort((a, b) => a.start - b.start);
+    const rows = await getCalendarEvents(from.getTime(), horizon);
+    return rows.map((r) => ({
+        id: r.uuid,
+        title: r.title,
+        start: r.startMs,
+        end: r.endMs,
+        allDay: !!r.allDay,
+        location: r.location,
+        notes: r.notes,
+        source: r.providerId ? "google" : "local",
+    }));
 }
 function formatDayHeader(d, today, tomorrow) {
     const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -124,9 +89,9 @@ function renderEvents(events) {
     }
     body.innerHTML = html;
 }
-function renderTasks() {
+async function renderTasks() {
     const showDone = document.getElementById("cal-side-show-done")?.checked || false;
-    const tasks = loadTasks().filter(t => showDone || !t.completed);
+    const tasks = await getTasks(showDone);
     const host = document.getElementById("cal-side-tasks");
     if (!host)
         return;
@@ -136,23 +101,24 @@ function renderTasks() {
     }
     let html = "<div class='cal-side-task-head'>Title</div>";
     for (const t of tasks) {
-        html += `<div class="cal-side-task" data-id="${t.id}">
-            <input type="checkbox" ${t.completed ? "checked" : ""} class="cal-side-task-check">
-            <span class="cal-side-task-title${t.completed ? " done" : ""}">${escapeHtml(t.title)}</span>
+        const done = !!t.completedMs;
+        html += `<div class="cal-side-task" data-uuid="${t.uuid}">
+            <input type="checkbox" ${done ? "checked" : ""} class="cal-side-task-check">
+            <span class="cal-side-task-title${done ? " done" : ""}">${escapeHtml(t.title)}</span>
+            <button class="cal-side-task-delete" title="Delete task" aria-label="Delete task">×</button>
         </div>`;
     }
     host.innerHTML = html;
     host.querySelectorAll(".cal-side-task").forEach(row => {
-        const id = row.dataset.id;
-        row.querySelector(".cal-side-task-check")?.addEventListener("change", (e) => {
+        const uuid = row.dataset.uuid;
+        row.querySelector(".cal-side-task-check")?.addEventListener("change", async (e) => {
             const checked = e.target.checked;
-            const all = loadTasks();
-            const t = all.find(x => x.id === id);
-            if (t) {
-                t.completed = checked ? Date.now() : undefined;
-                saveTasks(all);
-                renderTasks();
-            }
+            await updateTask(uuid, { completedMs: checked ? Date.now() : null });
+            renderTasks();
+        });
+        row.querySelector(".cal-side-task-delete")?.addEventListener("click", async () => {
+            await deleteTask(uuid);
+            renderTasks();
         });
     });
 }
@@ -225,19 +191,19 @@ export function initCalendarSidebar() {
             alert("Couldn't parse that date.");
             return;
         }
-        const ev = {
-            id: `cal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-            title, start, end: start + (allDay ? 86400_000 : 3600_000),
-            allDay, source: "local",
-        };
-        const all = loadLocalEvents();
-        all.push(ev);
-        try {
-            localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(all));
-        }
-        catch { /* */ }
+        // Two-way cache: commit locally, service queues the push to Google.
+        await createCalendarEvent({
+            title, startMs: start, endMs: start + (allDay ? 86400_000 : 3600_000), allDay,
+        });
         await refresh();
     });
+    wireOnce("cal-side-new-task", async () => {
+        const title = prompt("Task title:");
+        if (!title)
+            return;
+        await createTask({ title });
+        renderTasks();
+    });
     const showDoneCb = document.getElementById("cal-side-show-done");
     if (showDoneCb && !showDoneCb.__wired) {
         showDoneCb.__wired = true;

package/client/components/folder-tree.js

@@ -770,9 +770,34 @@ async function loadFolderTree(container) {
                 const delimiter = folders[0]?.delimiter || ".";
                 const tree = buildTree(folders, delimiter, account.id);
                 sortFolders(tree);
+                // Case-duplicate detection: fold folder paths to lowercase and
+                // flag any whose form matches another. Common with servers that
+                // let users create `Archive` and `archive` as distinct folders,
+                // or `Sent Items` alongside a `Sent items` rename gone sideways.
+                // A ⚠ glyph on the affected rows lets the user notice before
+                // losing mail to the wrong one.
+                const lowerCounts = new Map();
+                for (const f of folders) {
+                    const key = (f.path || "").toLowerCase();
+                    lowerCounts.set(key, (lowerCounts.get(key) || 0) + 1);
+                }
+                const duplicatePaths = new Set();
+                for (const [k, c] of lowerCounts)
+                    if (c > 1)
+                        duplicatePaths.add(k);
                 for (const node of tree) {
                     renderNode(node, accountEl, 1);
                 }
+                if (duplicatePaths.size > 0) {
+                    accountEl.querySelectorAll(".ft-folder").forEach(el => {
+                        const p = (el.dataset.folderPath || "").toLowerCase();
+                        if (duplicatePaths.has(p)) {
+                            el.classList.add("ft-folder-duplicate");
+                            el.title = (el.title ? el.title + " — " : "") +
+                                "Case-duplicate folder name on the server (another folder with the same name in different case exists)";
+                        }
+                    });
+                }
             }
             fragment.appendChild(accountEl);
         }

package/client/components/message-list.js

@@ -18,6 +18,12 @@ let searchMode = false;
 let currentSearchQuery = "";
 let showToInsteadOfFrom = false;
 let touchWasScroll = false;
+// Current sort column/direction — cycled by clicking the ml-header columns.
+// "date desc" is the default (newest first). Clicking a column flips direction
+// if it's already active, or switches to that column with its own default dir
+// (text columns default asc, date defaults desc).
+let currentSort = "date";
+let currentSortDir = "desc";
 /** Flip the "not-downloaded" indicator off for rows whose bodies just cached.
  *  Called from the bodyCached service event — covers both background prefetch
  *  and on-demand fetch. No-op for rows not currently rendered. */
@@ -119,6 +125,71 @@ export function initMessageList(handler) {
             syncDomToState();
         }
     });
+    // Sort column headers — click to cycle. Date defaults desc (newest first);
+    // From/Subject default asc on first click so alphabetical order reads
+    // naturally. Clicking the currently-active column flips direction.
+    const header = document.getElementById("ml-header");
+    if (header) {
+        header.addEventListener("click", (e) => {
+            const col = e.target.closest(".ml-col-sortable");
+            if (!col)
+                return;
+            const key = col.dataset.sort;
+            if (!key)
+                return;
+            if (currentSort === key) {
+                currentSortDir = currentSortDir === "asc" ? "desc" : "asc";
+            }
+            else {
+                currentSort = key;
+                currentSortDir = key === "date" ? "desc" : "asc";
+            }
+            // Only per-folder lists support server-side sort today; unified and
+            // search paths sort client-side on the fetched page. Reload if we
+            // have an active per-folder context.
+            if (!searchMode && !unifiedMode && currentAccountId && currentFolderId) {
+                loadMessages(currentAccountId, currentFolderId, 1, "", false);
+            }
+            else {
+                applyClientSideSort();
+                updateSortIndicators();
+            }
+        });
+    }
+    updateSortIndicators();
+}
+/** Reorder currently-loaded state messages in-place by currentSort/currentSortDir.
+ *  Used for unified-inbox and search results where the server can't re-sort
+ *  a single page on our behalf. */
+function applyClientSideSort() {
+    const items = [...state.getMessages()];
+    const sign = currentSortDir === "asc" ? 1 : -1;
+    items.sort((a, b) => {
+        if (currentSort === "from") {
+            const av = (a.from?.name || a.from?.address || "").toLowerCase();
+            const bv = (b.from?.name || b.from?.address || "").toLowerCase();
+            return av < bv ? -sign : av > bv ? sign : 0;
+        }
+        if (currentSort === "subject") {
+            const av = (a.subject || "").replace(/^(re:|fwd:|fw:)\s*/i, "").toLowerCase();
+            const bv = (b.subject || "").replace(/^(re:|fwd:|fw:)\s*/i, "").toLowerCase();
+            return av < bv ? -sign : av > bv ? sign : 0;
+        }
+        // date
+        return ((a.date || 0) - (b.date || 0)) * sign;
+    });
+    state.setMessages(items);
+}
+function updateSortIndicators() {
+    const header = document.getElementById("ml-header");
+    if (!header)
+        return;
+    header.querySelectorAll(".ml-col-sortable").forEach(c => {
+        c.classList.remove("ml-col-sort-asc", "ml-col-sort-desc");
+        if (c.dataset.sort === currentSort) {
+            c.classList.add(currentSortDir === "asc" ? "ml-col-sort-asc" : "ml-col-sort-desc");
+        }
+    });
 }
 /**
  * Sync DOM rows to current state after messages are removed.
@@ -296,8 +367,9 @@ export async function loadMessages(accountId, folderId, page = 1, specialUse = "
     }
     try {
         const flaggedOnly = document.getElementById("ml-body")?.classList.contains("flagged-only") || false;
-        const result = await apiGetMessages(accountId, folderId, 1, 50, flaggedOnly);
+        const result = await apiGetMessages(accountId, folderId, 1, 50, flaggedOnly, currentSort, currentSortDir);
         totalMessages = result.total;
+        updateSortIndicators();
         if (result.items.length === 0) {
             state.setMessages([]);
             body.innerHTML = `<div class="ml-empty">${flaggedOnly ? "No flagged messages" : "No messages"}</div>`;
@@ -472,6 +544,8 @@ function appendMessages(body, accountId, items) {
         row.dataset.uid = String(msg.uid);
         row.dataset.accountId = msgAccountId;
         row.dataset.folderId = String(msg.folderId);
+        if (msg.threadId)
+            row.dataset.threadId = msg.threadId;
         const flag = document.createElement("span");
         flag.className = "ml-flag";
         flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606";

package/client/components/message-viewer.js

@@ -536,6 +536,7 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                     (returnPath && returnPath !== senderAddr ? `<div><span class="mv-rb-label">Return-Path:</span> ${escapeText(returnPath)}</div>` : "") +
                     `</div>` +
                     (deliveredTo || toAddr ? `<div class="mv-rb-actions"><button id="btn-allow-to">Always allow to: ${escapeText(deliveredTo || toAddr)}</button></div>` : "") +
+                    `<div class="mv-rb-actions"><button id="btn-edit-allowlist" title="View / edit the full allowlist">Edit allowlist…</button></div>` +
                     `</div>`;
             bodyEl.appendChild(banner);
             // Toggle dropdown — click arrow or text to expand details
@@ -577,6 +578,12 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                 await allowRemoteContent("recipient", addr);
                 loadRemote();
             });
+            // "Edit allowlist…" — fires a document-level event that app.ts
+            // listens for and opens the JSONC editor pre-selected to
+            // allowlist.jsonc. Keeps message-viewer free of the editor import.
+            banner.querySelector("#btn-edit-allowlist")?.addEventListener("click", () => {
+                document.dispatchEvent(new CustomEvent("mailx-open-jsonc-editor", { detail: { file: "allowlist.jsonc" } }));
+            });
         }
         // Body fetch error — show banner above (empty) body instead of polluting
         // the main content area with the error text. Transient errors get a retry.

package/client/index.html

@@ -26,6 +26,7 @@
                     <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-threaded"> Group by thread</label>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-thread-filter"> Only this conversation</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
@@ -110,11 +111,11 @@
                 <label class="search-server-check" title="Also search the IMAP server (slower; spans all folders on all accounts)"><input type="checkbox" id="search-server-too"> Server</label>
             </search>
             <div class="ml-folder-title" id="ml-folder-title"></div>
-            <div class="ml-header">
+            <div class="ml-header" id="ml-header">
                 <span class="ml-col ml-col-flag"></span>
-                <span class="ml-col ml-col-from" data-sort="from">From</span>
-                <span class="ml-col ml-col-date" data-sort="date">Date</span>
-                <span class="ml-col ml-col-subject">Subject</span>
+                <span class="ml-col ml-col-from ml-col-sortable" data-sort="from">From</span>
+                <span class="ml-col ml-col-date ml-col-sortable" data-sort="date">Date</span>
+                <span class="ml-col ml-col-subject ml-col-sortable" data-sort="subject">Subject</span>
             </div>
             <div class="ml-body" id="ml-body">
                 <div class="ml-empty">Select a folder to view messages</div>
@@ -170,7 +171,10 @@
             <div class="cal-side-empty">Loading…</div>
         </div>
         <footer class="cal-side-foot">
-            <label><input type="checkbox" id="cal-side-show-done"> Show completed Tasks</label>
+            <div class="cal-side-task-header-row">
+                <label><input type="checkbox" id="cal-side-show-done"> Show completed Tasks</label>
+                <button class="cal-side-new" id="cal-side-new-task" title="New task">＋ Task</button>
+            </div>
             <div class="cal-side-tasks" id="cal-side-tasks"></div>
         </footer>
     </aside>
@@ -178,6 +182,7 @@
     <footer class="status-bar" id="status-bar">
         <span id="status-accounts"></span>
         <span id="status-sync">Syncing...</span>
+        <span id="status-offline" class="status-offline" hidden title="No network — local actions queue for later">⚡ offline</span>
         <span id="status-diag" class="status-diag" hidden title=""></span>
         <span id="status-pending"></span>
         <span id="status-queue"></span>

package/client/lib/api-client.js

@@ -102,9 +102,9 @@ export function getAccounts() {
 export function getFolders(accountId) {
     return ipc().getFolders(accountId);
 }
-export function getMessages(accountId, folderId, page = 1, pageSize = 50, flaggedOnly = false) {
+export function getMessages(accountId, folderId, page = 1, pageSize = 50, flaggedOnly = false, sort, sortDir) {
     abortMessageListRequests();
-    return ipc().getMessages(accountId, folderId, page, pageSize, undefined, undefined, undefined, flaggedOnly);
+    return ipc().getMessages(accountId, folderId, page, pageSize, sort, sortDir, undefined, flaggedOnly);
 }
 export function getUnifiedInbox(page = 1, pageSize = 50) {
     abortMessageListRequests();
@@ -141,6 +141,35 @@ export function getDiagnostics() {
 export function getPrimaryAccount(feature) {
     return ipc().getPrimaryAccount?.(feature) ?? Promise.resolve(null);
 }
+// Calendar / Tasks: two-way cache. Reads return local-cached rows; writes
+// commit locally and queue a push to Google. Service layer handles drain.
+export function getCalendarEvents(fromMs, toMs) {
+    return ipc().getCalendarEvents?.(fromMs, toMs) ?? Promise.resolve([]);
+}
+export function createCalendarEvent(ev) {
+    return ipc().createCalendarEvent?.(ev);
+}
+export function updateCalendarEvent(uuid, patch) {
+    return ipc().updateCalendarEvent?.(uuid, patch);
+}
+export function deleteCalendarEvent(uuid) {
+    return ipc().deleteCalendarEvent?.(uuid);
+}
+export function getTasks(includeCompleted = false) {
+    return ipc().getTasks?.(includeCompleted) ?? Promise.resolve([]);
+}
+export function createTask(t) {
+    return ipc().createTask?.(t);
+}
+export function updateTask(uuid, patch) {
+    return ipc().updateTask?.(uuid, patch);
+}
+export function deleteTask(uuid) {
+    return ipc().deleteTask?.(uuid);
+}
+export function drainStoreSync() {
+    return ipc().drainStoreSync?.();
+}
 export function getOutboxStatus() {
     return ipc().getOutboxStatus();
 }