@bobfrankston/mailx 1.0.406 → 1.0.407

package/client/android.html

@@ -151,16 +151,6 @@
                 <span class="ml-col ml-col-date" data-sort="date">Date</span>
                 <span class="ml-col ml-col-subject">Subject</span>
             </div>
-            <div class="ml-bulkbar" id="ml-bulkbar" hidden>
-                <button type="button" class="ml-bulk-cancel" id="ml-bulk-cancel" title="Exit multi-select">✕</button>
-                <span class="ml-bulk-count" id="ml-bulk-count">0 selected</span>
-                <span style="flex:1"></span>
-                <button type="button" class="ml-bulk-btn" data-bulk="markread" title="Mark read">◉</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="flag" title="Flag">⚑</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="move" title="Move to folder…">➜</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="spam" title="Mark as spam">⚠</button>
-                <button type="button" class="ml-bulk-btn ml-bulk-danger" data-bulk="delete" title="Delete">🗑</button>
-            </div>
             <div class="ml-body" id="ml-body">
                 <div class="ml-empty">Select a folder to view messages</div>
             </div>

package/client/app.js

@@ -2,7 +2,7 @@
  * mailx client entry point.
  * Wires together all UI components and WebSocket connection.
  */
-import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced } from "./components/folder-tree.js";
+import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced, setOutboxTotal } from "./components/folder-tree.js";
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, getSelectedMessages, markBodiesCached } from "./components/message-list.js";
 import { showMessage, getCurrentMessage, initViewer } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags, markAsSpamMessages, logClientEvent, sendMessage as apiSendMessage } from "./lib/api-client.js";
@@ -891,6 +891,11 @@ document.addEventListener("mailx-moved", (e) => {
     undoTimeout = setTimeout(() => { lastMoved = null; }, 60000);
 });
 document.getElementById("btn-delete")?.addEventListener("click", deleteSelectedMessages);
+// Same handlers also bound to the top-toolbar icons so delete/spam work
+// regardless of whether a message is open in the viewer. Useful for quick
+// triage from a list-only view.
+document.getElementById("btn-tb-delete")?.addEventListener("click", deleteSelectedMessages);
+document.getElementById("btn-tb-spam")?.addEventListener("click", spamSelectedMessages);
 // ── Flag toggle ──
 document.getElementById("btn-flag")?.addEventListener("click", async () => {
     const sel = messageState.getSelected();
@@ -1404,6 +1409,11 @@ window.addEventListener("message", (e) => {
         menu.style.cssText = `position:fixed;z-index:2400;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.2);padding:4px 0;font-size:13px;min-width:180px;`;
         menu.style.left = `${Math.min(x, window.innerWidth - 200)}px`;
         menu.style.top = `${Math.min(y, window.innerHeight - 200)}px`;
+        // mousedown inside the menu must NOT reach the document-level
+        // dismiss handler — otherwise the menu is removed before click
+        // fires on the row and the action silently no-ops (user report
+        // 2026-04-24). Stop propagation at the menu root covers every row.
+        menu.addEventListener("mousedown", (ev) => ev.stopPropagation());
         for (const it of items) {
             const row = document.createElement("div");
             row.textContent = it.label;
@@ -2651,6 +2661,16 @@ optFolderCounts?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-folder-counts", String(optFolderCounts.checked));
 });
+// Q52: Reset column widths — clears persisted list/viewer splitter and
+// restores the default CSS-var value. Currently only the list/viewer split
+// is user-resizable; if per-column drag-resize lands later, add its keys to
+// the cleanup list below.
+document.getElementById("btn-reset-widths")?.addEventListener("click", () => {
+    localStorage.removeItem("mailx-split");
+    document.documentElement.style.removeProperty("--list-viewer-split");
+    if (viewDropdown)
+        viewDropdown.hidden = true;
+});
 // ── Settings menu ──
 const settingsBtn = document.getElementById("btn-settings");
 const settingsDropdown = document.getElementById("settings-dropdown");
@@ -2819,6 +2839,9 @@ else
 // the user staring at stale numbers. Idempotent — renderOutboxStatus just
 // overwrites the text.
 function renderOutboxStatus(s) {
+    // Feed the folder-tree synthesized "Send-pending" row. Idempotent —
+    // it no-ops when the presence state and count haven't changed.
+    setOutboxTotal(s?.total || 0);
     const el = document.getElementById("status-queue");
     if (!el)
         return;

package/client/components/calendar-sidebar.js

@@ -120,6 +120,19 @@ function renderEvents(events) {
     // Click-to-open — interim per user 2026-04-23: route to Google Calendar's
     // web UI via openExternal until we build an in-app event editor.
     // Right-click gives a context menu with "View in browser" explicit.
+    // Item 17: on Android, openCalendarEvent redirects to the native Calendar
+    // app via ACTION_VIEW; desktop still falls through to the browser.
+    const openInCalendar = (url) => {
+        const api = window.mailxapi;
+        if (api?.openCalendarEvent) {
+            api.openCalendarEvent(url);
+            return;
+        }
+        if (api?.openExternal)
+            api.openExternal(url);
+        else
+            window.open(url, "_blank");
+    };
     const openInBrowser = (url) => {
         const api = window.mailxapi;
         if (api?.openExternal)
@@ -131,7 +144,7 @@ function renderEvents(events) {
         el.addEventListener("click", () => {
             const link = el.dataset.link;
             if (link)
-                openInBrowser(link);
+                openInCalendar(link);
         });
         el.addEventListener("contextmenu", (e) => {
             e.preventDefault();
@@ -283,6 +296,30 @@ export function initCalendarSidebar() {
         await createTask({ title });
         renderTasks();
     });
+    // Manual refresh — getTasks on the service side already fires a Google
+    // pull under the hood on every call, but the visible feedback (spinning
+    // glyph for ~600 ms, disabled while in flight) makes it explicit that
+    // the user asked for a fresh pull, not a cached redraw.
+    wireOnce("cal-side-refresh-tasks", async () => {
+        const btn = document.getElementById("cal-side-refresh-tasks");
+        if (btn?.classList.contains("cal-side-refreshing"))
+            return;
+        btn?.classList.add("cal-side-refreshing");
+        btn.disabled = true;
+        try {
+            // renderTasks() calls getTasks() on the service which triggers
+            // the async Google pull; the subsequent tasksUpdated event
+            // re-renders with the merged result.
+            await renderTasks();
+        }
+        finally {
+            setTimeout(() => {
+                btn?.classList.remove("cal-side-refreshing");
+                if (btn)
+                    btn.disabled = false;
+            }, 600);
+        }
+    });
     const showDoneCb = document.getElementById("cal-side-show-done");
     if (showDoneCb && !showDoneCb.__wired) {
         showDoneCb.__wired = true;

package/client/components/folder-tree.js

@@ -424,6 +424,31 @@ export function initFolderTree(container, handler, unifiedHandler) {
     onUnifiedInbox = unifiedHandler || null;
     loadFolderTree(container);
 }
+// Item 12: outbox total drives a synthesized "Send-pending" row at the top
+// of the folder tree. The server pushes outboxStatus on every mutation; when
+// the total flips between zero and non-zero we re-render so the row appears
+// / disappears without waiting for the next full refresh.
+let lastOutboxTotal = 0;
+export function setOutboxTotal(total) {
+    const prev = lastOutboxTotal;
+    lastOutboxTotal = total | 0;
+    // Zero → zero: nothing to render, nothing to clear.
+    if (prev === 0 && lastOutboxTotal === 0)
+        return;
+    const existing = document.getElementById("ft-send-pending");
+    // Non-zero in both → just update the badge text; avoid a full re-render.
+    if (prev > 0 && lastOutboxTotal > 0 && existing) {
+        const badge = existing.querySelector(".ft-badge");
+        if (badge)
+            badge.textContent = String(lastOutboxTotal);
+        existing.title = `${lastOutboxTotal} message${lastOutboxTotal === 1 ? "" : "s"} queued for send`;
+        return;
+    }
+    // Presence flipped (0→N or N→0) — re-render to insert / remove the row.
+    const container = document.getElementById("folder-tree");
+    if (container)
+        loadFolderTree(container);
+}
 async function loadFolderTree(container) {
     // Show loading state while preserving existing tree (if any) on refresh
     const hadContent = container.children.length > 0 && !container.querySelector(".folder-loading");
@@ -735,6 +760,25 @@ async function loadFolderTree(container) {
             });
             fragment.appendChild(unifiedEl);
         }
+        // Item 12: Send-pending virtual row — synthesized from the outbox
+        // queue, only shown when something is actually queued. Clicking
+        // opens the outbox-view modal (pink rows, cancellable). Lives at
+        // the top of the tree so a stuck send is impossible to miss.
+        if (lastOutboxTotal > 0) {
+            const pendingEl = document.createElement("div");
+            pendingEl.className = "ft-folder ft-unified ft-send-pending";
+            pendingEl.id = "ft-send-pending";
+            pendingEl.title = `${lastOutboxTotal} message${lastOutboxTotal === 1 ? "" : "s"} queued for send`;
+            pendingEl.innerHTML = `<span class="ft-toggle"> </span><span class="ft-folder-name">Send-pending</span><span class="ft-badge ft-badge-outbox">${lastOutboxTotal}</span>`;
+            pendingEl.addEventListener("click", async () => {
+                try {
+                    const { openOutboxView } = await import("./outbox-view.js");
+                    openOutboxView();
+                }
+                catch { /* outbox-view load failed — silent is OK, status pill still works */ }
+            });
+            fragment.appendChild(pendingEl);
+        }
         for (const { account, folders } of accountFolderData) {
             const accountEl = document.createElement("div");
             accountEl.className = "ft-account";

package/client/components/message-list.js

@@ -121,27 +121,11 @@ function exitMultiSelect() {
     clearSelection();
     updateBulkBar();
 }
-/** Refresh the bulk-actions bar visibility + "N selected" label. Called
- *  whenever selection or mode changes. Visible either when 2+ rows are
- *  selected (desktop Ctrl/Shift-click multi-selection) OR when touch
- *  multi-select mode is active (even with a single row, so the user sees
- *  the bar as the mode indicator). */
-function updateBulkBar() {
-    const body = document.getElementById("ml-body");
-    const bar = document.getElementById("ml-bulkbar");
-    const count = document.getElementById("ml-bulk-count");
-    if (!body || !bar || !count)
-        return;
-    const active = body.classList.contains("multi-select-on");
-    const n = body.querySelectorAll(".ml-row.selected").length;
-    if (n >= 2 || (active && n > 0)) {
-        bar.hidden = false;
-        count.textContent = `${n} selected`;
-    }
-    else {
-        bar.hidden = true;
-    }
-}
+/** Bulk-actions bar retired 2026-04-24 — trash + spam live on the main
+ *  toolbar now and every other bulk op (mark-read, flag, move) is one
+ *  right-click away. Kept as a no-op stub so existing call sites
+ *  (avatar tap, row click, long-press) don't need to be touched. */
+function updateBulkBar() { }
 // Escape key + click-outside-list exit multi-select mode. Attached once
 // (idempotent because document only has one listener scope per handler).
 if (!window.__mailxMultiSelectWired) {
@@ -156,89 +140,10 @@ if (!window.__mailxMultiSelectWired) {
             return;
         const target = e.target;
         // A tap on a row is handled by the row's own click listener; only
-        // exit when the tap is on neutral ground (outside the list entirely
-        // and not on the bulk bar).
-        if (!target.closest(".ml-row") && !target.closest(".ml-bulkbar"))
+        // exit when the tap is on neutral ground (outside the list entirely).
+        if (!target.closest(".ml-row"))
             exitMultiSelect();
     }, true);
-    // Wire bulk-bar buttons — each delegates to the single-message handlers
-    // but iterates over every .ml-row.selected in the body.
-    document.addEventListener("click", async (e) => {
-        const target = e.target;
-        if (target.closest("#ml-bulk-cancel")) {
-            exitMultiSelect();
-            return;
-        }
-        const btn = target.closest(".ml-bulk-btn");
-        if (!btn)
-            return;
-        const op = btn.dataset.bulk;
-        const body = document.getElementById("ml-body");
-        if (!body?.classList.contains("multi-select-on"))
-            return;
-        const selected = getSelectedMessages();
-        if (selected.length === 0)
-            return;
-        try {
-            if (op === "delete") {
-                // Delegate to the existing Del-key handler so the same
-                // tombstone/undo logic runs for bulk deletes.
-                document.dispatchEvent(new CustomEvent("mailx-delete"));
-            }
-            else if (op === "flag") {
-                for (const m of selected) {
-                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
-                    if (!row)
-                        continue;
-                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
-                    if (!msgData)
-                        continue;
-                    const isFlagged = msgData.flags?.includes("\\Flagged");
-                    const newFlags = isFlagged
-                        ? msgData.flags.filter((f) => f !== "\\Flagged")
-                        : [...(msgData.flags || []), "\\Flagged"];
-                    await updateFlags(m.accountId, m.uid, newFlags);
-                    msgData.flags = newFlags;
-                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
-                    row.classList.toggle("flagged");
-                }
-            }
-            else if (op === "markread") {
-                for (const m of selected) {
-                    const row = body.querySelector(`.ml-row[data-account-id="${m.accountId}"][data-uid="${m.uid}"]`);
-                    if (!row)
-                        continue;
-                    const msgData = state.getMessages().find((x) => x.uid === m.uid && (x.accountId || "") === m.accountId);
-                    if (!msgData)
-                        continue;
-                    if (msgData.flags?.includes("\\Seen"))
-                        continue;
-                    const newFlags = [...(msgData.flags || []), "\\Seen"];
-                    await updateFlags(m.accountId, m.uid, newFlags);
-                    msgData.flags = newFlags;
-                    state.updateMessageFlags(m.accountId, m.uid, newFlags);
-                    row.classList.remove("unread");
-                }
-            }
-            else if (op === "move") {
-                // Use the first selection's account/folder for the picker scope.
-                const { accountId, folderId } = selected[0];
-                const pick = await pickFolder(accountId, { excludeFolderIds: [folderId] });
-                if (!pick)
-                    return;
-                const uids = selected.map(s => s.uid);
-                await apiMoveMessages(accountId, uids, pick.folderId);
-                state.removeMessages(uids.map(u => ({ accountId, uid: u })));
-            }
-            else if (op === "spam") {
-                document.getElementById("btn-spam")?.click();
-            }
-            exitMultiSelect();
-        }
-        catch (err) {
-            alert(`Bulk ${op} failed: ${err.message || err}`);
-        }
-    });
 }
 function selectRange(from, to) {
     const body = document.getElementById("ml-body");

package/client/index.html

@@ -31,6 +31,8 @@
                     <label class="tb-menu-item" title="Show only flagged (★) messages in the list"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
                     <label class="tb-menu-item" title="Show unread/total counts next to each folder in the tree"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                     <label class="tb-menu-item" title="Show the right-side calendar/tasks sidebar (Thunderbird-Lightning style)"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
+                    <hr class="tb-menu-sep">
+                    <button class="tb-menu-item" id="btn-reset-widths" title="Restore the default list / viewer split position">Reset column widths</button>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">
@@ -55,6 +57,8 @@
                     <button class="tb-menu-item" id="btn-about" title="Show version and build info">About mailx...</button>
                 </div>
             </div>
+            <button class="tb-btn" id="btn-tb-delete" title="Delete selected message (Del)">🗑</button>
+            <button class="tb-btn" id="btn-tb-spam" title="Mark as spam — move to the configured Junk folder">⚠</button>
             <span id="app-version" class="app-version">mailx</span>
         </div>
         <div class="toolbar-right">
@@ -124,16 +128,6 @@
                 <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-bulkbar" id="ml-bulkbar" hidden>
-                <button type="button" class="ml-bulk-cancel" id="ml-bulk-cancel" title="Exit multi-select (Esc)">✕</button>
-                <span class="ml-bulk-count" id="ml-bulk-count">0 selected</span>
-                <span style="flex:1"></span>
-                <button type="button" class="ml-bulk-btn" data-bulk="markread" title="Mark read">◉</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="flag" title="Flag">⚑</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="move" title="Move to folder…">➜</button>
-                <button type="button" class="ml-bulk-btn" data-bulk="spam" title="Mark as spam">⚠</button>
-                <button type="button" class="ml-bulk-btn ml-bulk-danger" data-bulk="delete" title="Delete (Del)">🗑</button>
-            </div>
             <div class="ml-body" id="ml-body">
                 <div class="ml-empty">Select a folder to view messages</div>
             </div>
@@ -197,6 +191,7 @@
         <footer class="cal-side-foot">
             <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-refresh-tasks" title="Refresh tasks from Google">↻</button>
                 <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>

package/client/lib/mailxapi.js

@@ -170,6 +170,40 @@
             return callNode("openLocalPath", { which: which });
         },
 
+        // Item 17: platform-aware external openers. On Android (MAUI shell)
+        // these fire native Intents so Contacts/Calendar links jump to the
+        // OS apps instead of the browser. On desktop the MAUI shell isn't
+        // in play; we fall through to a URL open via the navigation path
+        // that msger / external launcher handles the same as any http link.
+        openContact: function(email) {
+            try {
+                // MAUI intercepts this scheme in OnNavigating and fires a
+                // native ACTION_VIEW intent on the mailto: URI — system
+                // Contacts registers for it on stock Android.
+                if (/Android/i.test(navigator.userAgent)) {
+                    window.location.href = "mailxapi-intent://contact/" + encodeURIComponent(email);
+                    return;
+                }
+            } catch (e) { /* navigation blocked — fall through */ }
+            // Desktop / browser fallback: open mailto: — msger forwards
+            // mailto URLs to the system default handler, which on a mailx
+            // install is mailx itself (our own compose window takes over).
+            window.location.href = "mailto:" + email;
+        },
+        openCalendarEvent: function(htmlLink) {
+            if (!htmlLink) return;
+            try {
+                if (/Android/i.test(navigator.userAgent)) {
+                    // MAUI dispatches this to the native Calendar app via
+                    // ACTION_VIEW on the Google Calendar event URL.
+                    window.location.href = "mailxapi-intent://calendar/" + encodeURIComponent(htmlLink);
+                    return;
+                }
+            } catch (e) { /* */ }
+            // Desktop: existing openExternal path (browser, new tab).
+            window.open(htmlLink, "_blank");
+        },
+
         // Sync
         syncAll: function() { return callNode("syncAll"); },
         syncAccount: function(accountId) { return callNode("syncAccount", { accountId: accountId }); },

package/client/styles/components.css

@@ -188,6 +188,17 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     color: var(--color-accent);
 }
 
+/* Item 12: Send-pending virtual row — pink-accented to match the pink-row
+   reconciliation state used elsewhere for local-only / not-yet-sent rows. */
+.ft-send-pending {
+    color: oklch(0.55 0.18 25);
+    &::before {
+        content: "✉";
+        margin-right: 4px;
+        font-size: 0.9em;
+    }
+}
+
 .ft-folder {
     display: flex;
     align-items: center;
@@ -1107,39 +1118,9 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 }
 .alarm-btn-primary:hover { filter: brightness(1.1); }
 
-/* Bulk-actions bar — appears over the list header when multi-select mode is
-   active. Shows "N selected" + Mark-read / Flag / Move / Spam / Delete
-   buttons + Cancel. Kept in sibling position to ml-header so it uses the
-   same horizontal space. */
-.ml-bulkbar {
-    display: flex;
-    align-items: center;
-    gap: var(--gap-sm);
-    padding: var(--gap-xs) var(--gap-sm);
-    background: var(--color-brand, oklch(0.65 0.14 250));
-    color: #fff;
-    font-size: var(--font-size-sm);
-    border-bottom: 1px solid var(--color-border);
-    grid-column: 1 / -1;
-}
-.ml-bulk-count { font-weight: 500; font-variant-numeric: tabular-nums; }
-.ml-bulk-cancel,
-.ml-bulk-btn {
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    padding: 0.25em 0.55em;
-    border-radius: 4px;
-    font-size: 1rem;
-}
-.ml-bulk-cancel:hover,
-.ml-bulk-btn:hover {
-    background: oklch(1 0 0 / 0.15);
-}
-.ml-bulk-btn.ml-bulk-danger:hover {
-    background: oklch(0.65 0.22 25 / 0.4);
-}
+/* Bulk-actions bar retired 2026-04-24 — trash + spam moved to the main
+   toolbar; other bulk ops are reachable via right-click context menu.
+   CSS removed so future readers aren't confused by dead selectors. */
 
 /* Multi-select mode (entered by long-press on touch or Ctrl/Shift click on
    desktop). Add a left-edge accent bar so it's visually clear the list is
@@ -1356,6 +1337,10 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
     label { flex: 1; }
     .cal-side-new { width: auto; padding: 2px 8px; font-size: 0.85em; }
 }
+/* Refresh button visual feedback — the ↻ glyph spins for ~600 ms when a
+   pull is in flight so the user sees that their click did something. */
+@keyframes cal-side-spin { to { transform: rotate(360deg); } }
+.cal-side-refreshing { animation: cal-side-spin 0.6s linear; pointer-events: none; }
 
 .ml-empty {
     grid-column: 1 / -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.406",
+  "version": "1.0.407",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -8,7 +8,18 @@
     "mailx": "bin/mailx.js"
   },
   "workspaces": [
-    "packages/*",
+    "packages/mailx-types",
+    "packages/mailx-host",
+    "packages/mailx-send",
+    "packages/mailx-compose",
+    "packages/mailx-settings",
+    "packages/mailx-store",
+    "packages/mailx-store-web",
+    "packages/mailx-imap",
+    "packages/mailx-service",
+    "packages/mailx-api",
+    "packages/mailx-core",
+    "packages/mailx-server",
     "client"
   ],
   "scripts": {

package/packages/mailx-host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-host",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Host abstraction for mailx — dispatches to msger or msgview",
   "type": "module",
   "main": "index.js",

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

@@ -5,7 +5,7 @@
  */
 import type { TransportFactory } from "@bobfrankston/tcp-transport";
 import { MailxDB, FileMessageStore } from "@bobfrankston/mailx-store";
-import type { AccountConfig, MessageEnvelope, Folder } from "@bobfrankston/mailx-types";
+import type { AccountConfig, MessageEnvelope, EmailAddress, Folder } from "@bobfrankston/mailx-types";
 import { EventEmitter } from "node:events";
 /** Events emitted by the IMAP manager */
 export interface ImapManagerEvents {
@@ -282,6 +282,31 @@ export declare class ImapManager extends EventEmitter {
     processSyncActions(accountId: string): Promise<void>;
     /** Find a folder by specialUse, case-insensitive */
     private findFolder;
+    /** Optimistic local-first Sent insert: write a row into the local DB's
+     *  Sent folder the moment the user hits Send, so the list reflects it
+     *  immediately instead of waiting for SMTP + IMAP-APPEND + syncFolder
+     *  (five server round-trips against a Dovecot that caps at 20 conns).
+     *
+     *  Uses a synthetic negative UID so it can't collide with a real APPENDUID
+     *  (which is always positive). When the real sync eventually picks the
+     *  message up in Sent with the server's UID, `db.upsertMessage` spots
+     *  the Message-ID match and rebinds the existing row's UID — no duplicate.
+     *  Negative UID also makes the row render pink (getMessages flags uid<0
+     *  as pending) so the user sees it's not-yet-reconciled.
+     *
+     *  Best-effort — any failure path (no Sent folder yet, parse error, store
+     *  write error) is logged and swallowed; the send itself is unaffected. */
+    insertOptimisticSentRow(accountId: string, envelope: {
+        messageId: string;
+        inReplyTo: string;
+        references: string[];
+        subject: string;
+        from: EmailAddress;
+        to: EmailAddress[];
+        cc: EmailAddress[];
+        bcc: EmailAddress[];
+        date: number;
+    }, rawMessage: string): Promise<void>;
     /** Copy sent message to the Sent folder via IMAP APPEND */
     copyToSent(accountId: string, rawMessage: string | Buffer): Promise<void>;
     /** Save a draft to the Drafts folder via IMAP APPEND.

package/packages/mailx-imap/index.js

@@ -2569,6 +2569,64 @@ export class ImapManager extends EventEmitter {
         return folders.find(f => f.specialUse === specialUse ||
             f.path.toLowerCase() === specialUse.toLowerCase()) || null;
     }
+    /** Optimistic local-first Sent insert: write a row into the local DB's
+     *  Sent folder the moment the user hits Send, so the list reflects it
+     *  immediately instead of waiting for SMTP + IMAP-APPEND + syncFolder
+     *  (five server round-trips against a Dovecot that caps at 20 conns).
+     *
+     *  Uses a synthetic negative UID so it can't collide with a real APPENDUID
+     *  (which is always positive). When the real sync eventually picks the
+     *  message up in Sent with the server's UID, `db.upsertMessage` spots
+     *  the Message-ID match and rebinds the existing row's UID — no duplicate.
+     *  Negative UID also makes the row render pink (getMessages flags uid<0
+     *  as pending) so the user sees it's not-yet-reconciled.
+     *
+     *  Best-effort — any failure path (no Sent folder yet, parse error, store
+     *  write error) is logged and swallowed; the send itself is unaffected. */
+    async insertOptimisticSentRow(accountId, envelope, rawMessage) {
+        try {
+            const sent = this.findFolder(accountId, "sent");
+            if (!sent) {
+                console.log(`  [sent-local] no Sent folder for ${accountId}; skipping optimistic row`);
+                return;
+            }
+            // Synthetic UID — negative ms timestamp is monotonic + won't
+            // collide with server UIDs. When the real APPENDUID returns via
+            // sync, upsertMessage's Message-ID rebind swaps this for the
+            // real positive value.
+            const synthUid = -Date.now();
+            const bodyPath = await this.bodyStore.putMessage(accountId, sent.id, synthUid, Buffer.from(rawMessage, "utf-8"));
+            const parsed = await extractPreview(rawMessage);
+            this.db.upsertMessage({
+                accountId,
+                folderId: sent.id,
+                uid: synthUid,
+                messageId: envelope.messageId,
+                inReplyTo: envelope.inReplyTo,
+                references: envelope.references,
+                date: envelope.date,
+                subject: envelope.subject,
+                from: envelope.from,
+                to: envelope.to,
+                cc: envelope.cc,
+                flags: ["\\Seen"],
+                size: rawMessage.length,
+                hasAttachments: parsed.hasAttachments,
+                preview: parsed.preview,
+                bodyPath,
+            });
+            // Folder-tree badge refresh + message-list reload if the user
+            // is currently on Sent — same event the sync path emits.
+            this.db.recalcFolderCounts(sent.id);
+            this.emit("folderCountsChanged", { accountId, folderId: sent.id });
+            console.log(`  [sent-local] wrote optimistic row in Sent (uid=${synthUid}) for ${accountId}: ${envelope.subject}`);
+        }
+        catch (e) {
+            // Non-fatal — send continues, Sent folder just won't show the
+            // row until the real APPEND-then-sync cycle completes.
+            console.error(`  [sent-local] optimistic insert failed: ${e?.message || e}`);
+        }
+    }
     /** Copy sent message to the Sent folder via IMAP APPEND */
     async copyToSent(accountId, rawMessage) {
         const sent = this.findFolder(accountId, "sent");

package/packages/mailx-service/index.js

@@ -10,7 +10,7 @@ import { fileURLToPath } from "node:url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 import * as gsync from "./google-sync.js";
 import { loadSettings, saveSettings, loadAccounts, loadAccountsAsync, saveAccounts, initCloudConfig, loadAllowlist, saveAllowlist, loadAutocomplete, saveAutocomplete, getStorageInfo, getConfigDir } from "@bobfrankston/mailx-settings";
-import { sanitizeHtml, encodeQuotedPrintable } from "@bobfrankston/mailx-types";
+import { sanitizeHtml, encodeQuotedPrintable, htmlToPlainText } from "@bobfrankston/mailx-types";
 import { simpleParser } from "mailparser";
 /** Parse `List-Unsubscribe` (RFC 2369) and `List-Unsubscribe-Post` (RFC 8058).
  *  mailparser only exposes ONE of mail/url even when both are present, so we
@@ -937,8 +937,16 @@ export class MailxService {
         const to = msg.to.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
         const cc = msg.cc?.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
         const bcc = msg.bcc?.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
-        const body = msg.bodyHtml || msg.bodyText || "";
-        const bodyEncoded = encodeQuotedPrintable(body);
+        // HTML-bodied mail gets a text/plain alternative part too — spam
+        // filters (SpamAssassin / Rspamd / Google) penalise HTML-only mail
+        // by 1-2 points, and plain-text-only readers still exist. The text
+        // part is derived from the HTML via htmlToPlainText when the caller
+        // didn't supply an explicit bodyText.
+        const hasHtml = !!msg.bodyHtml;
+        const htmlBody = msg.bodyHtml || "";
+        const textBody = msg.bodyText || (hasHtml ? htmlToPlainText(htmlBody) : "");
+        const htmlEncoded = hasHtml ? encodeQuotedPrintable(htmlBody) : "";
+        const textEncoded = encodeQuotedPrintable(textBody);
         // Generate a unique Message-ID (required for threading, dedup, and RFC compliance)
         const domain = account.email.split("@")[1] || "mailx.local";
         const messageId = `<${Date.now()}.${Math.random().toString(36).slice(2)}@${domain}>`;
@@ -953,21 +961,53 @@ export class MailxService {
             `MIME-Version: 1.0`,
         ].filter(h => h !== null);
         let rawMessage;
+        const newBoundary = () => `mailx_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+        // Inner body: either a multipart/alternative (text+html) or a single
+        // text/plain. `innerBody` is the body-only portion (no envelope
+        // headers) that will be wrapped by the attachments multipart if any.
+        const makeInner = () => {
+            if (hasHtml) {
+                const altBoundary = newBoundary();
+                const body = `--${altBoundary}\r\n` +
+                    `Content-Type: text/plain; charset=UTF-8\r\n` +
+                    `Content-Transfer-Encoding: quoted-printable\r\n\r\n` +
+                    `${textEncoded}\r\n` +
+                    `--${altBoundary}\r\n` +
+                    `Content-Type: text/html; charset=UTF-8\r\n` +
+                    `Content-Transfer-Encoding: quoted-printable\r\n\r\n` +
+                    `${htmlEncoded}\r\n` +
+                    `--${altBoundary}--\r\n`;
+                return {
+                    headers: [`Content-Type: multipart/alternative; boundary="${altBoundary}"`],
+                    body,
+                };
+            }
+            // Plain-text-only send — no HTML supplied, no alternative needed.
+            return {
+                headers: [
+                    `Content-Type: text/plain; charset=UTF-8`,
+                    `Content-Transfer-Encoding: quoted-printable`,
+                ],
+                body: textEncoded,
+            };
+        };
         if (hasAttachments) {
-            // multipart/mixed with the body + one base64 attachment part per file.
-            // Each attachment chunk is wrapped at 76-char lines per RFC 2045.
-            const boundary = `mailx_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+            // multipart/mixed wrapping (multipart/alternative | text/plain)
+            // + one base64 attachment part per file. Attachment chunks are
+            // wrapped at 76-char lines per RFC 2045.
+            const mixedBoundary = newBoundary();
             const wrap76 = (s) => s.replace(/.{1,76}/g, m => m).match(/.{1,76}/g)?.join("\r\n") || s;
+            const inner = makeInner();
             const parts = [];
-            parts.push(`--${boundary}\r\n` +
-                `Content-Type: text/html; charset=UTF-8\r\n` +
-                `Content-Transfer-Encoding: quoted-printable\r\n\r\n` +
-                `${bodyEncoded}\r\n`);
+            parts.push(`--${mixedBoundary}\r\n` +
+                inner.headers.join("\r\n") +
+                `\r\n\r\n` +
+                inner.body);
             for (const att of msg.attachments) {
                 const filename = (att.filename || "attachment").replace(/[\r\n"]/g, "_");
                 const mime = att.mimeType || "application/octet-stream";
                 const wrapped = wrap76(att.dataBase64 || "");
-                parts.push(`--${boundary}\r\n` +
+                parts.push(`--${mixedBoundary}\r\n` +
                     `Content-Type: ${mime}; name="${filename}"\r\n` +
                     `Content-Disposition: attachment; filename="${filename}"\r\n` +
                     `Content-Transfer-Encoding: base64\r\n\r\n` +
@@ -975,21 +1015,37 @@ export class MailxService {
             }
             const headers = [
                 ...commonHeaders,
-                `Content-Type: multipart/mixed; boundary="${boundary}"`,
+                `Content-Type: multipart/mixed; boundary="${mixedBoundary}"`,
             ].join("\r\n");
-            rawMessage = `${headers}\r\n\r\n${parts.join("")}--${boundary}--\r\n`;
+            rawMessage = `${headers}\r\n\r\n${parts.join("")}--${mixedBoundary}--\r\n`;
         }
         else {
+            const inner = makeInner();
             const headers = [
                 ...commonHeaders,
-                `Content-Type: text/html; charset=UTF-8`,
-                `Content-Transfer-Encoding: quoted-printable`,
+                ...inner.headers,
             ].join("\r\n");
-            rawMessage = `${headers}\r\n\r\n${bodyEncoded}`;
+            rawMessage = `${headers}\r\n\r\n${inner.body}`;
         }
         lap(`MIME assembled (${rawMessage.length} bytes${hasAttachments ? `, ${msg.attachments.length} attachment(s)` : ""})`);
         this.imapManager.queueOutgoingLocal(account.id, rawMessage);
         lap("queued to disk");
+        // Local-first Sent: don't wait for SMTP+APPEND+sync — put a pink row
+        // into the local Sent folder right now so the user sees their letter
+        // the instant they click Send. upsertMessage's Message-ID rebind
+        // picks up the real APPENDUID later (same row, different UID).
+        // Fire-and-forget: failure here must not hold up the send ACK.
+        this.imapManager.insertOptimisticSentRow(account.id, {
+            messageId,
+            inReplyTo: msg.inReplyTo || "",
+            references: msg.references || [],
+            subject: msg.subject || "",
+            from: { name: account.name, address: fromAddr },
+            to: msg.to || [],
+            cc: msg.cc || [],
+            bcc: msg.bcc || [],
+            date: Date.now(),
+        }, rawMessage).catch(() => { });
         console.log(`  Queued locally: ${msg.subject} via ${account.id} from ${fromHeader}`);
         // Contacts recording is off the critical path — deferred until after
         // the IPC ACK so a slow DB write can't stall the send.

package/packages/mailx-store/db.js

@@ -835,10 +835,15 @@ export class MailxDB {
         // LEFT JOIN sync_actions so each row carries a `pending` flag —
         // true when the user has a queued local action (move/flag/delete)
         // not yet acknowledged by the server. UI renders these in pink so
-        // local-only state is visible (Slice C of S1).
-        const rows = this.db.prepare(`SELECT m.*, EXISTS(
-                SELECT 1 FROM sync_actions sa
-                WHERE sa.account_id = m.account_id AND sa.uid = m.uid
+        // local-only state is visible (Slice C of S1). Negative UIDs also
+        // count as pending: that's the convention for optimistic local
+        // inserts (e.g. Sent rows written the moment the user hits Send,
+        // before the real APPENDUID comes back from the server).
+        const rows = this.db.prepare(`SELECT m.*, (
+                EXISTS(
+                    SELECT 1 FROM sync_actions sa
+                    WHERE sa.account_id = m.account_id AND sa.uid = m.uid
+                ) OR m.uid < 0
             ) AS pending
             FROM messages m WHERE ${where.replace(/\b(account_id|folder_id|uid|date|subject|from_name|from_address|flags_json)\b/g, "m.$1")}
             ORDER BY m.${sortCol} ${sortDir} LIMIT ? OFFSET ?`).all(...params, pageSize, offset);

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

@@ -9,7 +9,7 @@
  * - Settings via IndexedDB + GDrive API instead of filesystem
  * - No dns.resolveMx — provider detection is static (Gmail/Outlook/Yahoo/iCloud)
  */
-import { sanitizeHtml, encodeQuotedPrintable } from "@bobfrankston/mailx-types";
+import { sanitizeHtml, encodeQuotedPrintable, htmlToPlainText } from "@bobfrankston/mailx-types";
 import { loadSettings, saveSettings, loadAllowlist, saveAllowlist, loadAutocomplete, saveAutocomplete, getStorageInfo } from "./web-settings.js";
 /** Parse an RFC 2822 message from raw bytes. Handles basic MIME. */
 function parseEmailSource(raw) {
@@ -349,20 +349,51 @@ export class WebMailxService {
         const to = msg.to.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
         const cc = msg.cc?.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
         const bcc = msg.bcc?.map((a) => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
-        const body = msg.bodyHtml || msg.bodyText || "";
-        const bodyEncoded = encodeQuotedPrintable(body);
+        // HTML-bodied send gets a multipart/alternative wrapper with a
+        // text/plain derived from the HTML — matches desktop's path; spam
+        // filters score HTML-only mail harshly without it.
+        const hasHtml = !!msg.bodyHtml;
+        const htmlBody = msg.bodyHtml || "";
+        const textBody = msg.bodyText || (hasHtml ? htmlToPlainText(htmlBody) : "");
+        const htmlEncoded = hasHtml ? encodeQuotedPrintable(htmlBody) : "";
+        const textEncoded = encodeQuotedPrintable(textBody);
         const domain = account.email.split("@")[1] || "mailx.local";
         const messageId = `<${Date.now()}.${Math.random().toString(36).slice(2)}@${domain}>`;
-        const headers = [
+        const envelope = [
             `From: ${fromHeader}`, `To: ${to}`,
             cc ? `Cc: ${cc}` : null, bcc ? `Bcc: ${bcc}` : null,
             `Subject: ${msg.subject}`, `Date: ${new Date().toUTCString()}`,
             `Message-ID: ${messageId}`,
             msg.inReplyTo ? `In-Reply-To: ${msg.inReplyTo}` : null,
             msg.references?.length ? `References: ${msg.references.join(" ")}` : null,
-            `MIME-Version: 1.0`, `Content-Type: text/html; charset=UTF-8`, `Content-Transfer-Encoding: quoted-printable`,
-        ].filter(h => h !== null).join("\r\n");
-        const rawMessage = `${headers}\r\n\r\n${bodyEncoded}`;
+            `MIME-Version: 1.0`,
+        ].filter(h => h !== null);
+        let rawMessage;
+        if (hasHtml) {
+            const altBoundary = `mailx_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+            const body = `--${altBoundary}\r\n` +
+                `Content-Type: text/plain; charset=UTF-8\r\n` +
+                `Content-Transfer-Encoding: quoted-printable\r\n\r\n` +
+                `${textEncoded}\r\n` +
+                `--${altBoundary}\r\n` +
+                `Content-Type: text/html; charset=UTF-8\r\n` +
+                `Content-Transfer-Encoding: quoted-printable\r\n\r\n` +
+                `${htmlEncoded}\r\n` +
+                `--${altBoundary}--\r\n`;
+            const headers = [
+                ...envelope,
+                `Content-Type: multipart/alternative; boundary="${altBoundary}"`,
+            ].join("\r\n");
+            rawMessage = `${headers}\r\n\r\n${body}`;
+        }
+        else {
+            const headers = [
+                ...envelope,
+                `Content-Type: text/plain; charset=UTF-8`,
+                `Content-Transfer-Encoding: quoted-printable`,
+            ].join("\r\n");
+            rawMessage = `${headers}\r\n\r\n${textEncoded}`;
+        }
         this.syncManager.queueOutgoingLocal(account.id, rawMessage);
         for (const addr of msg.to)
             this.db.recordSentAddress(addr.name, addr.address);

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

@@ -277,6 +277,19 @@ export declare function sanitizeHtml(html: string): {
 };
 /** Encode text as RFC 2045 quoted-printable. */
 export declare function encodeQuotedPrintable(text: string): string;
+/** Render an HTML document as a plain-text approximation suitable for the
+ *  text/plain alternative part of a multipart/alternative outgoing MIME
+ *  message. Not a full HTML-to-text engine — just enough to give non-HTML
+ *  clients (plain-text readers, spam filters scoring on text/plain, people
+ *  who turned HTML off) a readable fallback. Preserves line breaks for
+ *  `<br>` / `</p>` / `</div>` / `<li>`, strips all other tags, decodes the
+ *  common HTML entities, and collapses runs of whitespace.
+ *
+ *  Spam filters (SpamAssassin, Rspamd) penalise HTML-only mail aggressively;
+ *  shipping a real text part typically drops the score by 1–2 points. Also
+ *  matches the behaviour of every other mainstream mail client — sending a
+ *  text/html part alone marks mailx as an outlier in mail logs. */
+export declare function htmlToPlainText(html: string): string;
 /** Parse search query into structured conditions.
  *  Supports qualifiers: from:, to:, subject:, date:, has:attachment,
  *  is:flagged, is:unread, is:read. Unqualified terms search across subject /

package/packages/mailx-types/index.js

@@ -65,6 +65,59 @@ export function encodeQuotedPrintable(text) {
     result += line;
     return result;
 }
+/** Render an HTML document as a plain-text approximation suitable for the
+ *  text/plain alternative part of a multipart/alternative outgoing MIME
+ *  message. Not a full HTML-to-text engine — just enough to give non-HTML
+ *  clients (plain-text readers, spam filters scoring on text/plain, people
+ *  who turned HTML off) a readable fallback. Preserves line breaks for
+ *  `<br>` / `</p>` / `</div>` / `<li>`, strips all other tags, decodes the
+ *  common HTML entities, and collapses runs of whitespace.
+ *
+ *  Spam filters (SpamAssassin, Rspamd) penalise HTML-only mail aggressively;
+ *  shipping a real text part typically drops the score by 1–2 points. Also
+ *  matches the behaviour of every other mainstream mail client — sending a
+ *  text/html part alone marks mailx as an outlier in mail logs. */
+export function htmlToPlainText(html) {
+    if (!html)
+        return "";
+    let s = html;
+    // Drop <style> / <script> entirely (their contents aren't readable text).
+    s = s.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "");
+    s = s.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
+    // Block-level breaks — treat closing tags as line terminators so
+    // paragraphs don't run together.
+    s = s.replace(/<br\s*\/?\s*>/gi, "\n");
+    s = s.replace(/<\/(p|div|li|tr|h[1-6]|blockquote|pre|section|article)\s*>/gi, "\n");
+    // List-item leading bullet (rough but readable).
+    s = s.replace(/<li\b[^>]*>/gi, "  • ");
+    // Anchor: keep href in parens after the text so URLs survive.
+    s = s.replace(/<a\b[^>]*href\s*=\s*(['"])([^'"]*)\1[^>]*>([\s\S]*?)<\/a>/gi, (_m, _q, href, text) => {
+        const t = text.replace(/<[^>]+>/g, "").trim();
+        return t && t !== href ? `${t} (${href})` : href;
+    });
+    // Strip remaining tags.
+    s = s.replace(/<[^>]+>/g, "");
+    // Decode a pragmatic set of HTML entities — the rare ones survive as-is.
+    s = s.replace(/&nbsp;/gi, " ")
+        .replace(/&amp;/gi, "&")
+        .replace(/&lt;/gi, "<")
+        .replace(/&gt;/gi, ">")
+        .replace(/&quot;/gi, "\"")
+        .replace(/&#39;/gi, "'")
+        .replace(/&apos;/gi, "'")
+        .replace(/&mdash;/gi, "—")
+        .replace(/&ndash;/gi, "–")
+        .replace(/&hellip;/gi, "…")
+        .replace(/&#(\d+);/g, (_m, n) => String.fromCodePoint(parseInt(n, 10)))
+        .replace(/&#x([0-9a-f]+);/gi, (_m, h) => String.fromCodePoint(parseInt(h, 16)));
+    // Normalise whitespace: collapse runs of spaces/tabs, trim per-line,
+    // cap consecutive blank lines at 2.
+    s = s.replace(/[ \t]+/g, " ")
+        .split("\n").map(l => l.replace(/^[ \t]+|[ \t]+$/g, "")).join("\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+    return s;
+}
 /** Parse search query into structured conditions.
  *  Supports qualifiers: from:, to:, subject:, date:, has:attachment,
  *  is:flagged, is:unread, is:read. Unqualified terms search across subject /