@bobfrankston/mailx 1.0.395 → 1.0.405

package/client/compose/compose.js

@@ -11,7 +11,18 @@ logClientEvent("compose-module-loaded", { href: location.href, version: window.m
 /** Close compose window */
 function closeCompose() {
     logClientEvent("compose-close");
-    window.close();
+    // S61: Android WebView's window.close() override is unreliable inside
+    // iframes — compose overlay sometimes stays visible after Send. Primary
+    // path is a parent postMessage; window.close() is a fallback that also
+    // works on desktop/msger where the override DOES fire reliably.
+    try {
+        parent.postMessage({ type: "mailx-compose-close" }, "*");
+    }
+    catch { /* */ }
+    try {
+        window.close();
+    }
+    catch { /* */ }
 }
 // ── Load editor scripts dynamically ──
 function loadScript(src) {
@@ -147,20 +158,54 @@ if (appSettings?.autocomplete?.enabled && appSettings.autocomplete.provider !==
 function formatAccountFrom(acct) {
     return `${acct.name} <${acct.email}>`;
 }
-/** Populate the From <datalist> with one entry per known account and set
- *  the input's current value to the selected account (or the first/default
- *  account when no selection is given). */
+const FROM_HISTORY_KEY = "mailx-from-history"; // up to 20 recent manual From entries
+const FROM_HISTORY_MAX = 20;
+function loadFromHistory() {
+    try {
+        return JSON.parse(localStorage.getItem(FROM_HISTORY_KEY) || "[]");
+    }
+    catch {
+        return [];
+    }
+}
+function recordFromHistory(value) {
+    const v = (value || "").trim();
+    if (!v)
+        return;
+    try {
+        const list = loadFromHistory().filter(x => x !== v);
+        list.unshift(v);
+        localStorage.setItem(FROM_HISTORY_KEY, JSON.stringify(list.slice(0, FROM_HISTORY_MAX)));
+    }
+    catch { /* private mode */ }
+}
+/** Populate the From <datalist> with one entry per known account plus any
+ *  manually-typed addresses from localStorage history. Account entries rank
+ *  first; history entries get an "(used before)" label so the user can tell
+ *  which ones are real accounts vs free-form aliases. */
 function populateFromOptions(accounts, selectedId) {
     knownAccounts = accounts;
     fromOptions.innerHTML = "";
+    const seenValues = new Set();
     for (const acct of accounts) {
         const opt = document.createElement("option");
         opt.value = formatAccountFrom(acct);
-        // datalist options can carry a label so the dropdown row shows the
-        // friendly account tag ("gmail", "bob.ma") next to the address.
         const tag = acct.label || acct.name;
         opt.label = tag;
         fromOptions.appendChild(opt);
+        seenValues.add(opt.value);
+    }
+    // Custom From history — addresses the user has typed before that don't
+    // match any known account (aliases, +tag addresses, one-off identities).
+    // Stored in localStorage because they're inherently per-device preferences;
+    // moving them to an account profile would be a different feature.
+    for (const value of loadFromHistory()) {
+        if (seenValues.has(value))
+            continue;
+        const opt = document.createElement("option");
+        opt.value = value;
+        opt.label = "(used before)";
+        fromOptions.appendChild(opt);
     }
     if (!fromInput.value) {
         const selected = (selectedId && accounts.find(a => a.id === selectedId)) ||
@@ -249,41 +294,46 @@ function setupAutocomplete(input) {
             closeDropdown();
             return;
         }
-        debounce = setTimeout(async () => {
-            try {
-                const results = await searchContacts(token);
-                if (results.length === 0) {
+        debounce = setTimeout(() => {
+            // rAF yield before hitting the DB — S60 mitigation, same reason
+            // as the draft-save path. The 200 ms timer already deferred past
+            // the input burst; this extra frame lets the last keystroke paint.
+            requestAnimationFrame(async () => {
+                try {
+                    const results = await searchContacts(token);
+                    if (results.length === 0) {
+                        closeDropdown();
+                        return;
+                    }
                     closeDropdown();
-                    return;
-                }
-                closeDropdown();
-                dropdown = document.createElement("div");
-                dropdown.className = "ac-dropdown";
-                activeIndex = 0; // first item highlighted by default
-                for (let i = 0; i < results.length; i++) {
-                    const item = document.createElement("div");
-                    item.className = `ac-item${i === 0 ? " ac-active" : ""}`;
-                    const nameEl = document.createElement("span");
-                    nameEl.className = "ac-item-name";
-                    nameEl.textContent = results[i].name || results[i].email;
-                    const emailEl = document.createElement("span");
-                    emailEl.className = "ac-item-email";
-                    emailEl.textContent = results[i].email;
-                    item.appendChild(nameEl);
-                    if (results[i].name)
-                        item.appendChild(emailEl);
-                    item.addEventListener("mousedown", (e) => {
-                        e.preventDefault();
-                        const display = results[i].name
-                            ? `${results[i].name} <${results[i].email}>`
-                            : results[i].email;
-                        replaceLastToken(display);
-                    });
-                    dropdown.appendChild(item);
+                    dropdown = document.createElement("div");
+                    dropdown.className = "ac-dropdown";
+                    activeIndex = 0; // first item highlighted by default
+                    for (let i = 0; i < results.length; i++) {
+                        const item = document.createElement("div");
+                        item.className = `ac-item${i === 0 ? " ac-active" : ""}`;
+                        const nameEl = document.createElement("span");
+                        nameEl.className = "ac-item-name";
+                        nameEl.textContent = results[i].name || results[i].email;
+                        const emailEl = document.createElement("span");
+                        emailEl.className = "ac-item-email";
+                        emailEl.textContent = results[i].email;
+                        item.appendChild(nameEl);
+                        if (results[i].name)
+                            item.appendChild(emailEl);
+                        item.addEventListener("mousedown", (e) => {
+                            e.preventDefault();
+                            const display = results[i].name
+                                ? `${results[i].name} <${results[i].email}>`
+                                : results[i].email;
+                            replaceLastToken(display);
+                        });
+                        dropdown.appendChild(item);
+                    }
+                    input.parentElement.appendChild(dropdown);
                 }
-                input.parentElement.appendChild(dropdown);
-            }
-            catch { /* ignore */ }
+                catch { /* ignore */ }
+            });
         }, 200);
     });
     input.addEventListener("keydown", (e) => {
@@ -361,6 +411,30 @@ function applyInit(init) {
         if (ccBtn)
             ccBtn.classList.add("active");
     }
+    else if (init.to && init.to.length === 1) {
+        // Q49: heuristic auto-expand — when replying/composing to a single
+        // recipient, check sent-history. If the user has previously Cc'd
+        // anyone on a message to this recipient, expand the Cc row (empty,
+        // just visible) so they're prompted to fill it. Fire-and-forget; if
+        // the service call fails or the user starts typing Cc manually
+        // before it resolves, the answer doesn't matter.
+        const firstEmail = init.to[0]?.address || "";
+        if (firstEmail) {
+            import("../lib/api-client.js").then(({ hasCcHistoryTo }) => hasCcHistoryTo(firstEmail)
+                .then(res => {
+                if (!res?.hasCc)
+                    return;
+                const ccRowEl = document.getElementById("compose-cc-row");
+                const ccBtn = document.getElementById("btn-toggle-cc");
+                // Only expand if user hasn't already interacted
+                if (ccRowEl?.hidden && !ccInput.value) {
+                    ccRowEl.hidden = false;
+                    ccBtn?.classList.add("active");
+                }
+            })
+                .catch(() => { }));
+        }
+    }
     // C42: append the account's signature (if configured) BEFORE rendering
     // the body. For new mode: just signature. For reply/forward: appended
     // after the quoted block. Drafts are skipped — the signature is already
@@ -475,12 +549,23 @@ async function saveDraft() {
         draftSaving = false;
     }
 }
-/** Schedule a debounced save on user input — fires ~1.5s after the last keystroke. */
+/** Schedule a debounced save on user input — fires ~1.5s after the last
+ *  keystroke, then yields one animation frame before actually writing so
+ *  the browser can paint any keystroke in the mean time. S60 mitigation:
+ *  wa-sqlite writes are synchronous on Android; this keeps the typing
+ *  experience responsive by never running the write in the same task as
+ *  an input event. */
 function scheduleDraftSave() {
     markComposeDirty();
     if (draftDebounceTimer)
         clearTimeout(draftDebounceTimer);
-    draftDebounceTimer = setTimeout(() => { draftDebounceTimer = null; saveDraft(); }, DRAFT_INPUT_DEBOUNCE_MS);
+    draftDebounceTimer = setTimeout(() => {
+        draftDebounceTimer = null;
+        // rAF yield — lets any pending keystroke render before we block on
+        // the DB write. A no-op when the tab is hidden (rAF is throttled),
+        // which is fine because the user isn't typing then either.
+        requestAnimationFrame(() => { saveDraft(); });
+    }, DRAFT_INPUT_DEBOUNCE_MS);
 }
 // ── Initialize: local-first population.
 //
@@ -665,6 +750,17 @@ document.getElementById("btn-send")?.addEventListener("click", () => {
         .then(() => {
         logClientEvent("compose-send-ipc-resolved", { ms: Date.now() - sendStart });
         console.log(`[compose] Send IPC returned OK in ${Date.now() - sendStart}ms`);
+        // Record From-address history on successful send. Only manual
+        // values worth keeping — skip anything that exactly matches a
+        // known account (already in the dropdown), and skip obviously
+        // invalid inputs. Populated dropdown surfaces this next time.
+        try {
+            const raw = fromInput.value.trim();
+            const known = knownAccounts.some(a => formatAccountFrom(a) === raw);
+            if (raw && !known && /@.+\./.test(raw))
+                recordFromHistory(raw);
+        }
+        catch { /* */ }
         // Stop autosave only after ACK — if send threw we want the draft
         // autosave to keep the message safe.
         if (draftTimer) {

package/client/index.html

@@ -45,7 +45,7 @@
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="quill" id="opt-editor-quill" checked> Quill</label>
                     <label class="tb-menu-item"><input type="radio" name="opt-editor" value="tiptap" id="opt-editor-tiptap"> tiptap</label>
                     <hr class="tb-menu-sep">
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
+                    <label class="tb-menu-item" title="Ghost-text completions while composing — Ollama / Claude / OpenAI back-end, off by default"><input type="checkbox" id="opt-autocomplete"> AI autocomplete</label>
                     <label class="tb-menu-item" title="Right-click in message body → Translate"><input type="checkbox" id="opt-ai-translate"> AI translate (off by default)</label>
                     <label class="tb-menu-item" title="Right-click in compose editor → Proofread (when wired)"><input type="checkbox" id="opt-ai-proofread"> AI proofread (off by default)</label>
                     <hr class="tb-menu-sep">
@@ -118,11 +118,22 @@
             </search>
             <div class="ml-folder-title" id="ml-folder-title"></div>
             <div class="ml-header" id="ml-header">
+                <span class="ml-col ml-col-avatar"></span>
                 <span class="ml-col ml-col-flag"></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-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>

package/client/lib/api-client.js

@@ -191,6 +191,9 @@ export function cancelQueuedOutgoing(p) {
 export function searchContacts(query) {
     return ipc().searchContacts(query);
 }
+export function hasCcHistoryTo(email) {
+    return ipc().hasCcHistoryTo(email);
+}
 export function listContacts(query, page = 1, pageSize = 100) {
     return ipc().listContacts(query, page, pageSize);
 }

package/client/lib/mailxapi.js

@@ -181,6 +181,7 @@
         cancelQueuedOutgoing: function(p) { return callNode("cancelQueuedOutgoing", { path: p }); },
         reauthenticate: function(accountId) { return callNode("reauthenticate", { accountId: accountId }); },
         reauthGoogleScopes: function() { return callNode("reauthGoogleScopes"); },
+        hasCcHistoryTo: function(email) { return callNode("hasCcHistoryTo", { email: email }); },
 
         // Bulk operations
         deleteMessages: function(accountId, uids) {

package/client/styles/components.css

@@ -299,7 +299,8 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 
 .message-list {
     display: grid;
-    grid-template-columns: 1.2em minmax(120px, 200px) auto 1fr;
+    /* avatar | flag | from | date | subject */
+    grid-template-columns: 28px 1.2em minmax(120px, 200px) auto 1fr;
     grid-template-rows: auto auto 1fr;
     column-gap: var(--gap-sm);
     overflow: hidden;
@@ -308,7 +309,7 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 
 /* Two-line view */
 .message-list.two-line {
-    grid-template-columns: 1.2em 1fr auto;
+    grid-template-columns: 28px 1.2em 1fr auto;
 }
 
 .message-list.two-line .ml-row {
@@ -316,11 +317,12 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     grid-template-rows: auto auto;
 }
 
-.message-list.two-line .ml-flag { grid-row: 1 / 3; align-self: center; }
-.message-list.two-line .ml-from { grid-column: 2; }
-.message-list.two-line .ml-date { grid-column: 3; grid-row: 1; padding-right: var(--gap-md); }
+.message-list.two-line .ml-avatar { grid-row: 1 / 3; align-self: center; grid-column: 1; }
+.message-list.two-line .ml-flag { grid-row: 1 / 3; align-self: center; grid-column: 2; }
+.message-list.two-line .ml-from { grid-column: 3; }
+.message-list.two-line .ml-date { grid-column: 4; grid-row: 1; padding-right: var(--gap-md); }
 .message-list.two-line .ml-subject {
-    grid-column: 2 / 4;
+    grid-column: 3 / 5;
     grid-row: 2;
     color: oklch(0.55 0.10 250) !important;
     font-size: var(--font-size-sm);
@@ -900,6 +902,249 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
    list empty when the selection is a singleton thread. */
 .ml-row.thread-filter-hidden { display: none; }
 
+/* Sender avatar — Thunderbird-style 24-px circle with the sender's first
+   initial. Background color is hashed from the sender's address so the
+   same person keeps the same color across rows. In multi-select mode
+   (#ml-body.multi-select-on) the avatar swaps to a checkmark per row,
+   filled when selected, hollow when not — matches the Thunderbird /
+   Gmail / Apple Mail pattern. */
+.ml-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: oklch(0.62 0.14 250);
+    color: #fff;
+    font-size: 0.78rem;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-self: center;
+    cursor: pointer;
+}
+#ml-body.multi-select-on .ml-avatar {
+    background: transparent !important;
+    color: var(--color-text-muted);
+    border: 2px solid currentColor;
+    line-height: 20px;
+}
+#ml-body.multi-select-on .ml-avatar::before { content: ""; }
+#ml-body.multi-select-on .ml-row.selected .ml-avatar {
+    background: var(--color-brand, oklch(0.55 0.18 250)) !important;
+    color: #fff;
+    border-color: var(--color-brand, oklch(0.55 0.18 250));
+}
+/* Replace the initial with a check when selected in multi-mode. The
+   `font-size: 0` trick blanks the text node we set in JS without having
+   to clear it; the ::after glyph then fills the space. */
+#ml-body.multi-select-on .ml-avatar { font-size: 0; }
+#ml-body.multi-select-on .ml-avatar::after { content: ""; }
+#ml-body.multi-select-on .ml-row.selected .ml-avatar::after {
+    content: "✓";
+    font-size: 0.95rem;
+    line-height: 20px;
+    font-weight: 700;
+}
+
+/* Add an avatar slot to the header so columns line up. Header is a sibling
+   subgrid; first cell is empty (avatar column). */
+.ml-header { grid-template-columns: subgrid; }
+
+/* Duplicate-message-id tag in unified inbox — shown when the same
+   Message-ID appears across 2+ accounts (same letter delivered to both,
+   mailing-list Bcc, etc.). Subtle teal badge; tooltip explains. */
+.ml-dupe-tag {
+    display: inline-block;
+    color: oklch(0.55 0.14 195);
+    font-weight: 600;
+    margin-right: 0.3em;
+    user-select: none;
+}
+
+/* Per-row ⋮ touch-menu button removed 2026-04-24 — user feedback: "nice
+   idea but better when we have a second-stage plan strategy". Touch users
+   still reach the menu via long-press → multi-select → bulk-bar, or by
+   using a stylus/mouse for contextmenu. Revisit when we've decided what
+   additional per-message actions belong here. */
+
+/* ── Alarm popup (P17 / Q104) ── */
+/* Fullscreen backdrop + centered panel; mirrors .mailx-modal* patterns but
+   kept in its own namespace so alarm behavior (snooze/dismiss) can evolve
+   without dragging the whole modal system along. */
+.alarm-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 9000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.alarm-panel {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+    min-width: 380px;
+    max-width: 560px;
+    width: 90vw;
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh;
+}
+.alarm-head {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm) var(--gap-md);
+    border-bottom: 1px solid var(--color-border);
+    font-weight: 600;
+}
+.alarm-icon { font-size: 1.4em; }
+.alarm-title { flex: 1; }
+.alarm-close {
+    border: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 1.4em;
+    line-height: 1;
+    padding: 0 0.4em;
+}
+.alarm-close:hover { color: var(--color-text); }
+.alarm-list {
+    padding: var(--gap-sm) var(--gap-md);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-xs);
+}
+.alarm-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);
+}
+.alarm-row:last-child { border-bottom: none; }
+.alarm-row-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    min-width: 0;
+}
+.alarm-row-kind { font-size: 1.1em; }
+.alarm-row-title {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+.alarm-row-when {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.alarm-row-actions { display: flex; gap: var(--gap-xs); }
+.alarm-row-link,
+.alarm-row-dismiss {
+    border: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 1em;
+    padding: 0 0.3em;
+    border-radius: 3px;
+}
+.alarm-row-link:hover,
+.alarm-row-dismiss:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text);
+}
+.alarm-foot {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm) var(--gap-md);
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg-toolbar);
+    border-radius: 0 0 8px 8px;
+}
+.alarm-snooze-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    display: flex;
+    align-items: center;
+    gap: var(--gap-xs);
+}
+.alarm-snooze-sel {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0.25em 0.5em;
+    font-size: var(--font-size-sm);
+}
+.alarm-btn {
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0.4em 1em;
+    border-radius: 4px;
+    font-size: var(--font-size-sm);
+}
+.alarm-btn:hover { background: var(--color-bg-hover); }
+.alarm-btn-primary {
+    background: var(--color-brand, oklch(0.65 0.14 250));
+    color: #fff;
+    border-color: var(--color-brand, oklch(0.65 0.14 250));
+}
+.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);
+}
+
+/* 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
+   in selection mode, not navigation mode. */
+
 /* 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
    in selection mode, not navigation mode. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.395",
+  "version": "1.0.405",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",

package/packages/mailx-imap/index.js

@@ -2402,14 +2402,19 @@ export class ImapManager extends EventEmitter {
     async updateFlagsLocal(accountId, uid, folderId, flags) {
         this.db.updateMessageFlags(accountId, uid, flags);
         this.db.queueSyncAction(accountId, "flags", uid, folderId, { flags });
-        // Don't process immediately — let the 30s timer batch actions
-        // (immediate processing during sync causes connection churn)
+        // User-visible pink-dot pending state stays until the action drains.
+        // The 30-second periodic tick was too slow — opening one message to
+        // auto-mark-as-read left it pink for half a minute. Same 1-second
+        // debounce as moves/deletes batches rapid flag churn without the
+        // visual lag.
+        this.debounceSyncActions(accountId);
     }
     /** Process pending sync actions for an account */
     async processSyncActions(accountId) {
         const actions = this.db.getPendingSyncActions(accountId);
         if (actions.length === 0)
             return;
+        const startCount = actions.length;
         const folders = this.db.getFolders(accountId);
         // Gmail path: push flag/label changes through the REST provider so
         // they actually reach the server. Earlier this method always went
@@ -2475,6 +2480,11 @@ export class ImapManager extends EventEmitter {
                 }
                 catch { /* */ }
             }
+            // Nudge the UI so rows that were pending-reconcile re-query their
+            // pending state (pink dot was sticky until this event fired).
+            const remaining = this.db.getPendingSyncActions(accountId).length;
+            if (remaining < startCount)
+                this.emit("folderCountsChanged", accountId, {});
             return;
         }
         await this.withConnection(accountId, async (client) => {
@@ -2546,6 +2556,12 @@ export class ImapManager extends EventEmitter {
                 }
             }
         });
+        // IMAP path: same nudge as the Gmail branch above. Any action that
+        // drained (successful or gave-up-after-5) decrements the pending
+        // count, which flips the pink dot off on the next re-query.
+        const remaining = this.db.getPendingSyncActions(accountId).length;
+        if (remaining < startCount)
+            this.emit("folderCountsChanged", accountId, {});
     }
     /** Find a folder by specialUse, case-insensitive */
     findFolder(accountId, specialUse) {

package/packages/mailx-server/index.js

@@ -66,6 +66,35 @@ const imapManager = new ImapManager(db, () => new NodeTransport());
 // ── Express App ──
 const app = express();
 app.use(express.json({ limit: "Infinity" }));
+// Optional token gate — required whenever the server binds to anything other
+// than a loopback address. Set via `MAILX_SERVER_TOKEN=<secret>` (or the
+// shorter `MAILX_TOKEN`). When the server is loopback-only (the default), the
+// gate is a no-op since nothing outside the machine can reach it. When bound
+// externally (`MAILX_SERVER_HOST=0.0.0.0` or `--external`), connections must
+// present the token in either `?t=<token>` or the `x-mailx-token` header. No
+// token configured + external bind → server refuses to start (safer than
+// serving open).
+const SERVER_TOKEN = process.env.MAILX_SERVER_TOKEN || process.env.MAILX_TOKEN || "";
+const SERVER_HOST = process.env.MAILX_SERVER_HOST || "";
+const IS_EXTERNAL_BIND = SERVER_HOST && SERVER_HOST !== "127.0.0.1" && SERVER_HOST !== "localhost" && SERVER_HOST !== "::1";
+if (IS_EXTERNAL_BIND && !SERVER_TOKEN) {
+    console.error("[server] Refusing to bind externally without MAILX_SERVER_TOKEN. Set the env var or drop the external host.");
+    process.exit(2);
+}
+app.use((req, res, next) => {
+    if (!IS_EXTERNAL_BIND)
+        return next();
+    // Allow the bare static file fetch so the login page can render; every
+    // /api/* path requires the token.
+    if (!req.path.startsWith("/api/"))
+        return next();
+    const provided = req.query.t || req.header("x-mailx-token") || "";
+    if (provided !== SERVER_TOKEN) {
+        res.status(401).json({ error: "missing or invalid token" });
+        return;
+    }
+    next();
+});
 // Request logging
 app.use((req, res, next) => {
     const start = Date.now();