@bobfrankston/mailx 1.0.379 → 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

@@ -13,7 +13,7 @@
  * All storage goes through the service-side two-way cache (calendar_events
  * and tasks tables); this file does not use localStorage for data.
  */
-import { getCalendarEvents, createCalendarEvent, getTasks, createTask, updateTask, } from "../lib/api-client.js";
+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();
@@ -105,6 +105,7 @@ async function renderTasks() {
         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;
@@ -115,6 +116,10 @@ async function renderTasks() {
             await updateTask(uuid, { completedMs: checked ? Date.now() : null });
             renderTasks();
         });
+        row.querySelector(".cal-side-task-delete")?.addEventListener("click", async () => {
+            await deleteTask(uuid);
+            renderTasks();
+        });
     });
 }
 async function refresh() {

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>
@@ -181,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();

package/client/styles/components.css

@@ -205,6 +205,15 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 
 .ft-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+/* Case-duplicate warning — another folder exists with the same name in a
+   different case on the server. Hover for the full explanation via title. */
+.ft-folder-duplicate .ft-folder-name::after {
+    content: " ⚠";
+    color: oklch(0.65 0.2 65);
+    font-weight: 600;
+    margin-left: 4px;
+}
+
 .ft-badge {
     font-size: 0.7rem;
     padding: 0.1rem 0.4rem;
@@ -332,6 +341,18 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     user-select: none;
 
     .ml-col { cursor: pointer; &:hover { color: var(--color-text); } }
+    .ml-col-sortable { position: relative; padding-right: 14px; }
+    .ml-col-sort-asc::after,
+    .ml-col-sort-desc::after {
+        position: absolute;
+        right: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 10px;
+        color: var(--color-accent);
+    }
+    .ml-col-sort-asc::after  { content: "▲"; }
+    .ml-col-sort-desc::after { content: "▼"; }
 }
 
 /* Narrow-mode folder title above the list — hidden on wide where the window
@@ -603,6 +624,64 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     white-space: pre;
     tab-size: 2;
 }
+
+/* JSONC editor with line-number gutter. Gutter + textarea share the same
+   line-height so numbers stay aligned; textarea owns the scroll and the
+   gutter syncs via JS. Error line is highlighted red in the gutter so the
+   "Line N, col M" error points at a visible marker. */
+.jsonc-editor-wrap {
+    flex: 1;
+    display: flex;
+    min-height: 200px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--color-bg-surface);
+}
+.jsonc-gutter {
+    flex: 0 0 auto;
+    min-width: 3em;
+    padding: 6px 6px 6px 10px;
+    background: oklch(0.94 0.005 250);
+    border-right: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: right;
+    user-select: none;
+    overflow: hidden;
+    white-space: pre;
+    tab-size: 2;
+}
+.jsonc-gutter-line {
+    line-height: 1.5;
+    font-variant-numeric: tabular-nums;
+}
+.jsonc-gutter-error {
+    background: oklch(0.65 0.2 25);
+    color: #fff;
+    font-weight: 600;
+    border-radius: 2px;
+    padding: 0 4px;
+    margin: 0 -4px;
+}
+.jsonc-editor-wrap .jsonc-textarea {
+    flex: 1;
+    border: 0;
+    border-radius: 0;
+    line-height: 1.5;
+    resize: none;
+    /* The outer wrap draws the focus ring so gutter + area move together */
+}
+.jsonc-editor-wrap:focus-within {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -1px;
+}
+.jsonc-editor-wrap:has(.mailx-modal-input-error) {
+    outline: 2px solid oklch(0.65 0.2 25);
+    outline-offset: -1px;
+}
 .mailx-modal-input:focus {
     outline: 2px solid var(--color-accent);
     outline-offset: -1px;
@@ -816,6 +895,21 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     opacity: 0.9;
 }
 
+/* Filter: only this conversation — rows not in the current thread hide.
+   The selected row stays visible regardless so toggling doesn't leave the
+   list empty when the selection is a singleton thread. */
+.ml-row.thread-filter-hidden { display: none; }
+
+/* Offline indicator — sits in the status bar; amber tone so it's visible
+   but doesn't scream (being offline is normal local-first behavior, not
+   an error). */
+.status-offline {
+    color: oklch(0.65 0.18 65);
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    padding: 0 6px;
+}
+
 /* S51 — calendar sidebar (Thunderbird Lightning Events & Tasks pane).
    Right-docked, fixed width. Visible by default; user hides via View menu.
    Hides automatically on narrow screens (< 1100px) — Android uses the
@@ -926,11 +1020,41 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
     align-items: center;
     gap: 6px;
     padding: 2px 0;
+
+    .cal-side-task-delete {
+        margin-left: auto;
+        opacity: 0;
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        color: var(--color-text-muted);
+        padding: 0 4px;
+        font-size: 14px;
+        line-height: 1;
+        transition: opacity 0.15s, color 0.15s;
+    }
+    &:hover .cal-side-task-delete { opacity: 1; }
+    .cal-side-task-delete:hover { color: oklch(0.55 0.22 25); }
+}
+.cal-side-task-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 .cal-side-task-title.done {
     text-decoration: line-through;
     color: var(--color-text-muted);
 }
+.cal-side-task-header-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    padding: 2px 0;
+
+    label { flex: 1; }
+    .cal-side-new { width: auto; padding: 2px 8px; font-size: 0.85em; }
+}
 
 .ml-empty {
     grid-column: 1 / -1;

package/client/styles/layout.css

@@ -89,6 +89,23 @@ body.calendar-sidebar-on {
 .rail-btn[disabled] {
     color: oklch(0.55 0.01 250);
 }
+.rail-btn { position: relative; }
+.rail-badge {
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    min-width: 18px;
+    padding: 1px 4px;
+    border-radius: 9px;
+    background: oklch(0.65 0.22 25);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1.4;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+}
 .rail-btn[disabled] {
     opacity: 0.35;
     cursor: not-allowed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.379",
+  "version": "1.0.382",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -24,7 +24,7 @@
     "@bobfrankston/iflow-node": "^0.1.7",
     "@bobfrankston/miscinfo": "^1.0.9",
     "@bobfrankston/oauthsupport": "^1.0.24",
-    "@bobfrankston/msger": "^0.1.345",
+    "@bobfrankston/msger": "^0.1.347",
     "@bobfrankston/mailx-host": "^0.1.4",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
@@ -88,7 +88,7 @@
       "@bobfrankston/iflow-node": "^0.1.7",
       "@bobfrankston/miscinfo": "^1.0.9",
       "@bobfrankston/oauthsupport": "^1.0.24",
-      "@bobfrankston/msger": "^0.1.345",
+      "@bobfrankston/msger": "^0.1.347",
       "@bobfrankston/mailx-host": "^0.1.4",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",

package/packages/mailx-imap/index.js

@@ -2299,8 +2299,33 @@ export class ImapManager extends EventEmitter {
                             await api.setFlags(folder.path, action.uid, action.flags || []);
                             console.log(`  [api] ${accountId}: flags synced UID ${action.uid}`);
                         }
+                        else if ((action.action === "delete" || action.action === "trash") && api.trashMessage) {
+                            await api.trashMessage(folder.path, action.uid);
+                            console.log(`  [api] ${accountId}: trashed UID ${action.uid} from ${folder.path}`);
+                        }
+                        else if (action.action === "move" && api.moveMessage) {
+                            const target = folders.find(f => f.id === action.targetFolderId);
+                            if (!target) {
+                                // Unreachable target — drop the action rather than loop.
+                                console.error(`  [api] ${accountId}: move target folder ${action.targetFolderId} missing — dropping UID ${action.uid}`);
+                                this.db.completeSyncAction(action.id);
+                                continue;
+                            }
+                            await api.moveMessage(folder.path, action.uid, target.path);
+                            console.log(`  [api] ${accountId}: moved UID ${action.uid} ${folder.path} → ${target.path}`);
+                        }
                         else {
-                            // move/delete/append via API not implemented yet — leave queued
+                            // Unsupported action on Gmail. After 5 retries, drop it
+                            // so stale rows don't mark messages pending-reconcile
+                            // forever. Previously "continue" here caused the pink
+                            // rows that shouldn't have been pink.
+                            if (action.attempts >= 5) {
+                                console.warn(`  [api] ${accountId}: dropping stale action "${action.action}" UID ${action.uid} after ${action.attempts} attempts (unsupported on Gmail API path)`);
+                                this.db.completeSyncAction(action.id);
+                            }
+                            else {
+                                this.db.failSyncAction(action.id, `unsupported Gmail action: ${action.action}`);
+                            }
                             continue;
                         }
                         this.db.completeSyncAction(action.id);

package/packages/mailx-service/index.js

@@ -498,7 +498,7 @@ export class MailxService {
     async updateCalendarEventLocal(uuid, patch) {
         // Merge with existing row before writing so partial patches don't
         // null-out unspecified fields in upsert.
-        const existing = this.db.getCalendarEvents("", 0, Number.MAX_SAFE_INTEGER).find(e => e.uuid === uuid);
+        const existing = this.db.getCalendarEventByUuid(uuid);
         if (!existing)
             throw new Error(`No calendar event ${uuid}`);
         this.db.upsertCalendarEvent({
@@ -515,7 +515,7 @@ export class MailxService {
         this.drainStoreSync().catch(() => { });
     }
     async deleteCalendarEventLocal(uuid) {
-        const ev = this.db.getCalendarEvents("", 0, Number.MAX_SAFE_INTEGER).find(e => e.uuid === uuid);
+        const ev = this.db.getCalendarEventByUuid(uuid);
         if (!ev)
             return;
         this.db.deleteCalendarEventLocal(uuid);
@@ -555,7 +555,7 @@ export class MailxService {
         return uuid;
     }
     async updateTaskLocal(uuid, patch) {
-        const existing = this.db.getTasks("", true).find(t => t.uuid === uuid);
+        const existing = this.db.getTaskByUuid(uuid);
         if (!existing)
             throw new Error(`No task ${uuid}`);
         this.db.upsertTask({
@@ -570,7 +570,7 @@ export class MailxService {
         this.drainStoreSync().catch(() => { });
     }
     async deleteTaskLocal(uuid) {
-        const task = this.db.getTasks("", true).find(t => t.uuid === uuid);
+        const task = this.db.getTaskByUuid(uuid);
         if (!task)
             return;
         this.db.deleteTaskLocal(uuid);

package/packages/mailx-store/db.d.ts

@@ -48,6 +48,10 @@ export declare class MailxDB {
         dirty?: boolean;
     }): string;
     getCalendarEvents(accountId: string, fromMs: number, toMs: number): any[];
+    /** Lookup by uuid only — used by patch/delete paths that don't have an
+     *  accountId context. Returns the row even when it's soft-deleted. */
+    getCalendarEventByUuid(uuid: string): any | null;
+    getTaskByUuid(uuid: string): any | null;
     getDirtyCalendarEvents(accountId: string): any[];
     private calendarRowToObject;
     markCalendarEventClean(uuid: string, providerId: string, etag: string): void;

package/packages/mailx-store/db.js

@@ -396,6 +396,16 @@ export class MailxDB {
         `).all(accountId, fromMs, toMs);
         return rows.map(this.calendarRowToObject);
     }
+    /** Lookup by uuid only — used by patch/delete paths that don't have an
+     *  accountId context. Returns the row even when it's soft-deleted. */
+    getCalendarEventByUuid(uuid) {
+        const r = this.db.prepare("SELECT * FROM calendar_events WHERE uuid = ?").get(uuid);
+        return r ? this.calendarRowToObject(r) : null;
+    }
+    getTaskByUuid(uuid) {
+        const r = this.db.prepare("SELECT * FROM tasks WHERE uuid = ?").get(uuid);
+        return r ? this.taskRowToObject(r) : null;
+    }
     getDirtyCalendarEvents(accountId) {
         const rows = this.db.prepare(`
             SELECT * FROM calendar_events WHERE account_id = ? AND (dirty = 1 OR deleted = 1)
@@ -997,11 +1007,34 @@ export class MailxDB {
     }
     /** Search contacts by name or email prefix */
     searchContacts(query, limit = 10) {
-        const q = `%${query}%`;
-        const rows = this.db.prepare(`SELECT name, email, source, use_count FROM contacts
+        // Two-pass ranking so autocomplete feels responsive: rows whose name or
+        // local-part starts with the query rank first (exact prefix match is
+        // usually what the user wants), then substring matches fill out the
+        // rest. Within each tier, sort by (recency-weighted use_count) so a
+        // contact the user messaged today beats one from two years ago even
+        // if the older one has more total sends. Recency bonus: +1 per send
+        // decayed by ~half every 30 days.
+        const prefixQ = `${query}%`;
+        const substr = `%${query}%`;
+        const rows = this.db.prepare(`SELECT name, email, source, use_count, last_used,
+                    (CASE
+                        WHEN lower(name) LIKE lower(?) THEN 3
+                        WHEN substr(email, 1, instr(email, '@') - 1) LIKE lower(?) THEN 2
+                        WHEN email LIKE ? OR name LIKE ? THEN 1
+                        ELSE 0
+                     END) AS match_rank
+             FROM contacts
              WHERE email LIKE ? OR name LIKE ?
-             ORDER BY use_count DESC, last_used DESC
-             LIMIT ?`).all(q, q, limit);
+             ORDER BY match_rank DESC, use_count DESC, last_used DESC
+             LIMIT ?`).all(prefixQ, prefixQ, substr, substr, substr, substr, limit);
+        // Recency-weighted rescore, best-in-JS since SQLite lacks log/exp
+        // natively. 30-day half-life — close enough to "recent contacts
+        // float up" without being fussy about the exact decay curve.
+        const now = Date.now();
+        const HALF_LIFE_MS = 30 * 86400_000;
+        const score = (r) => r.match_rank * 10_000
+            + (r.use_count || 0) * Math.pow(0.5, Math.max(0, now - (r.last_used || 0)) / HALF_LIFE_MS);
+        rows.sort((a, b) => score(b) - score(a));
         return rows.map(r => ({ name: r.name, email: r.email, source: r.source, useCount: r.use_count }));
     }
     /** List all contacts (address-book view) with pagination + optional filter. */

package/packages/mailx-store-web/db.js

@@ -109,6 +109,60 @@ const SCHEMA = `
         last_error TEXT,
         UNIQUE(account_id, action, uid, folder_id)
     );
+
+    -- Calendar events two-way cache (Android parity with desktop's
+    -- packages/mailx-store/db.ts calendar_events table). uuid = stable
+    -- local identity, provider_id = Google Calendar event id when known,
+    -- dirty = local edit not yet pushed, deleted = tombstone pending delete.
+    CREATE TABLE IF NOT EXISTS calendar_events (
+        uuid TEXT PRIMARY KEY,
+        account_id TEXT NOT NULL,
+        provider_id TEXT,
+        calendar_id TEXT DEFAULT 'primary',
+        title TEXT NOT NULL DEFAULT '',
+        start_ms INTEGER NOT NULL,
+        end_ms INTEGER NOT NULL,
+        all_day INTEGER DEFAULT 0,
+        location TEXT DEFAULT '',
+        notes TEXT DEFAULT '',
+        etag TEXT,
+        last_synced INTEGER DEFAULT 0,
+        dirty INTEGER DEFAULT 0,
+        deleted INTEGER DEFAULT 0,
+        updated_at INTEGER NOT NULL
+    );
+    CREATE INDEX IF NOT EXISTS idx_calendar_events_start ON calendar_events(account_id, start_ms);
+
+    CREATE TABLE IF NOT EXISTS tasks (
+        uuid TEXT PRIMARY KEY,
+        account_id TEXT NOT NULL,
+        provider_id TEXT,
+        list_id TEXT DEFAULT '@default',
+        title TEXT NOT NULL DEFAULT '',
+        notes TEXT DEFAULT '',
+        due_ms INTEGER,
+        completed_ms INTEGER,
+        etag TEXT,
+        last_synced INTEGER DEFAULT 0,
+        dirty INTEGER DEFAULT 0,
+        deleted INTEGER DEFAULT 0,
+        updated_at INTEGER NOT NULL
+    );
+    CREATE INDEX IF NOT EXISTS idx_tasks_account ON tasks(account_id);
+
+    -- Generic store-sync queue for non-message domains (calendar/tasks/contacts).
+    CREATE TABLE IF NOT EXISTS store_sync (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        kind TEXT NOT NULL,
+        op TEXT NOT NULL,
+        account_id TEXT NOT NULL,
+        target_uuid TEXT NOT NULL,
+        payload TEXT,
+        attempts INTEGER DEFAULT 0,
+        last_error TEXT,
+        created_at INTEGER NOT NULL,
+        UNIQUE(kind, target_uuid, op)
+    );
 `;
 const IDB_NAME = "mailx-sqldb";
 const IDB_STORE = "database";

package/packages/mailx-store-web/web-service.js

@@ -311,21 +311,30 @@ export class WebMailxService {
     }
     async syncAccount(accountId) {
         const folders = await this.syncManager.syncFolders(accountId);
-        const sorted = [...folders].sort((a, b) => {
-            if (a.specialUse === "inbox")
-                return -1;
-            if (b.specialUse === "inbox")
-                return 1;
-            return 0;
-        });
-        for (const folder of sorted) {
+        // INBOX-first: await INBOX so the UI re-renders new mail immediately,
+        // then fire the rest in the background so labels don't block the
+        // list. S57 (Android parity with desktop's local-first rule).
+        const inbox = folders.find(f => f.specialUse === "inbox");
+        const others = folders.filter(f => f.specialUse !== "inbox");
+        if (inbox) {
             try {
-                await this.syncManager.syncFolder(accountId, folder.id);
+                await this.syncManager.syncFolder(accountId, inbox.id);
             }
             catch (e) {
-                console.error(`  Skipping folder ${folder.path}: ${e.message}`);
+                console.error(`  Skipping INBOX ${inbox.path}: ${e.message}`);
             }
         }
+        // Background fan-out: don't await; errors log. UI already has INBOX.
+        (async () => {
+            for (const folder of others) {
+                try {
+                    await this.syncManager.syncFolder(accountId, folder.id);
+                }
+                catch (e) {
+                    console.error(`  Skipping folder ${folder.path}: ${e.message}`);
+                }
+            }
+        })().catch(() => { });
     }
     async reauthenticate(accountId) {
         return this.syncManager.reauthenticate(accountId);

package/packages/mailx-types/index.d.ts

@@ -278,10 +278,22 @@ export declare function sanitizeHtml(html: string): {
 /** Encode text as RFC 2045 quoted-printable. */
 export declare function encodeQuotedPrintable(text: string): string;
 /** Parse search query into structured conditions.
- *  Supports qualifiers: from:, to:, subject: (unqualified terms search everything).
- *  Returns { conditions, params } for SQL WHERE clause with LIKE. */
+ *  Supports qualifiers: from:, to:, subject:, date:, has:attachment,
+ *  is:flagged, is:unread, is:read. Unqualified terms search across subject /
+ *  from / preview. Returns { conditions, params } for SQL WHERE clause with
+ *  LIKE plus structured predicates (flags_json LIKE, has_attachments=1, date
+ *  range comparisons).
+ *
+ *  Date syntax (matches Gmail-ish conventions):
+ *    - date:2026-04-22         exact day
+ *    - date:2026-04            month
+ *    - date:>2026-04-01        after
+ *    - date:<2026-04-01        before
+ *    - date:2026-04-01..2026-04-30   range
+ *    - date:today / yesterday / last7 / last30
+ */
 export declare function parseSearchQuery(query: string): {
     conditions: string[];
-    params: string[];
+    params: (string | number)[];
 };
 //# sourceMappingURL=index.d.ts.map

package/packages/mailx-types/index.js

@@ -66,16 +66,68 @@ export function encodeQuotedPrintable(text) {
     return result;
 }
 /** Parse search query into structured conditions.
- *  Supports qualifiers: from:, to:, subject: (unqualified terms search everything).
- *  Returns { conditions, params } for SQL WHERE clause with LIKE. */
+ *  Supports qualifiers: from:, to:, subject:, date:, has:attachment,
+ *  is:flagged, is:unread, is:read. Unqualified terms search across subject /
+ *  from / preview. Returns { conditions, params } for SQL WHERE clause with
+ *  LIKE plus structured predicates (flags_json LIKE, has_attachments=1, date
+ *  range comparisons).
+ *
+ *  Date syntax (matches Gmail-ish conventions):
+ *    - date:2026-04-22         exact day
+ *    - date:2026-04            month
+ *    - date:>2026-04-01        after
+ *    - date:<2026-04-01        before
+ *    - date:2026-04-01..2026-04-30   range
+ *    - date:today / yesterday / last7 / last30
+ */
 export function parseSearchQuery(query) {
     const parts = query.match(/(?:[^\s"]+|"[^"]*")+/g) || [];
     const conditions = [];
     const params = [];
+    const dayStart = (y, m, d) => new Date(y, m - 1, d).getTime();
+    const parseDateSpec = (spec) => {
+        const now = new Date();
+        const today0 = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+        if (spec === "today")
+            return { from: today0, to: today0 + 86400_000 };
+        if (spec === "yesterday")
+            return { from: today0 - 86400_000, to: today0 };
+        const lastN = spec.match(/^last(\d+)$/i);
+        if (lastN)
+            return { from: today0 - parseInt(lastN[1]) * 86400_000 };
+        const rangeMatch = spec.match(/^(\d{4})-(\d{2})-(\d{2})\.\.(\d{4})-(\d{2})-(\d{2})$/);
+        if (rangeMatch)
+            return {
+                from: dayStart(+rangeMatch[1], +rangeMatch[2], +rangeMatch[3]),
+                to: dayStart(+rangeMatch[4], +rangeMatch[5], +rangeMatch[6]) + 86400_000,
+            };
+        const gtMatch = spec.match(/^>(\d{4})-(\d{2})-(\d{2})$/);
+        if (gtMatch)
+            return { from: dayStart(+gtMatch[1], +gtMatch[2], +gtMatch[3]) + 86400_000 };
+        const ltMatch = spec.match(/^<(\d{4})-(\d{2})-(\d{2})$/);
+        if (ltMatch)
+            return { to: dayStart(+ltMatch[1], +ltMatch[2], +ltMatch[3]) };
+        const monthMatch = spec.match(/^(\d{4})-(\d{2})$/);
+        if (monthMatch) {
+            const y = +monthMatch[1], m = +monthMatch[2];
+            const from = dayStart(y, m, 1);
+            const to = m === 12 ? dayStart(y + 1, 1, 1) : dayStart(y, m + 1, 1);
+            return { from, to };
+        }
+        const dayMatch = spec.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (dayMatch) {
+            const from = dayStart(+dayMatch[1], +dayMatch[2], +dayMatch[3]);
+            return { from, to: from + 86400_000 };
+        }
+        return null;
+    };
     for (const part of parts) {
         const fromMatch = part.match(/^from:(.+)$/i);
         const toMatch = part.match(/^to:(.+)$/i);
         const subjectMatch = part.match(/^subject:(.+)$/i);
+        const hasMatch = part.match(/^has:(.+)$/i);
+        const isMatch = part.match(/^is:(.+)$/i);
+        const dateMatch = part.match(/^date:(.+)$/i);
         if (fromMatch) {
             const term = `%${fromMatch[1].replace(/"/g, "")}%`;
             conditions.push("(from_name LIKE ? OR from_address LIKE ?)");
@@ -91,6 +143,42 @@ export function parseSearchQuery(query) {
             conditions.push("subject LIKE ?");
             params.push(term);
         }
+        else if (hasMatch) {
+            const v = hasMatch[1].toLowerCase();
+            if (v === "attachment" || v === "attachments") {
+                conditions.push("has_attachments = 1");
+            }
+            // Unknown has: qualifier — silently drop; treating as a literal
+            // search term would be confusing.
+        }
+        else if (isMatch) {
+            const v = isMatch[1].toLowerCase();
+            if (v === "flagged" || v === "starred") {
+                conditions.push("flags_json LIKE ?");
+                params.push("%\\\\Flagged%");
+            }
+            else if (v === "unread") {
+                conditions.push("flags_json NOT LIKE ?");
+                params.push("%\\\\Seen%");
+            }
+            else if (v === "read") {
+                conditions.push("flags_json LIKE ?");
+                params.push("%\\\\Seen%");
+            }
+        }
+        else if (dateMatch) {
+            const spec = parseDateSpec(dateMatch[1]);
+            if (spec) {
+                if (spec.from !== undefined) {
+                    conditions.push("date >= ?");
+                    params.push(spec.from);
+                }
+                if (spec.to !== undefined) {
+                    conditions.push("date < ?");
+                    params.push(spec.to);
+                }
+            }
+        }
         else {
             const term = `%${part}%`;
             conditions.push("(subject LIKE ? OR from_name LIKE ? OR from_address LIKE ? OR preview LIKE ?)");