@bobfrankston/mailx 1.0.305 → 1.0.310

package/README.md

@@ -402,6 +402,7 @@ Use `mailx --verbose` to see logs in the terminal instead.
 ## Architecture
 
 - **IPC-first** -- Default mode uses msger (Rust/WebView2) with bidirectional IPC. No TCP server, no CLOSE_WAIT zombies.
+- **Host abstraction** -- mailx talks to the WebView host through `@bobfrankston/mailx-host`, which picks msger (default) or msgview (Electron, planned for Mac and niche Linux) at runtime. Override with `MAILX_HOST=msger|msgview`.
 - **HTTP fallback** -- `--server` flag starts Express for browser/remote access.
 - **Local-first** -- Changes update local DB immediately; background worker syncs to IMAP.
 - **Offline reading** -- Full message bodies cached as .eml files.

package/bin/mailx.js

@@ -21,7 +21,7 @@ import path from "node:path";
 import os from "node:os";
 import net from "node:net";
 import { ports } from "@bobfrankston/miscinfo";
-import { showMessageBox, showService, setAppName } from "@bobfrankston/msger";
+import { showMessageBox, showService, setAppName } from "@bobfrankston/mailx-host";
 setAppName("mailx");
 const PORT = ports.mailx;
 const args = process.argv.slice(2);

package/client/app.js

@@ -1422,7 +1422,7 @@ document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () =>
     await openJsoncEditor("accounts.jsonc");
 });
 async function openJsoncEditor(initialFile) {
-    const { readJsoncFile, writeJsoncFile } = await import("./lib/api-client.js");
+    const { readJsoncFile, writeJsoncFile, readConfigHelp } = await import("./lib/api-client.js");
     const backdrop = document.createElement("div");
     backdrop.className = "mailx-modal-backdrop";
     const panel = document.createElement("div");
@@ -1437,9 +1437,17 @@ async function openJsoncEditor(initialFile) {
                 <option value="config.jsonc">config.jsonc — local per-machine overrides (not synced)</option>
             </select>
         </label>
-        <label class="mailx-modal-label">Contents (JSONC — comments and trailing commas allowed)
-            <textarea class="mailx-modal-input mailx-modal-textarea" id="jsonc-content" spellcheck="false"></textarea>
-        </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>
+            </label>
+            <div class="mailx-modal-split-right mailx-help-panel">
+                <div class="mailx-help-title">
+                    <button type="button" class="mailx-help-toggle" id="jsonc-help-toggle" aria-expanded="true" title="Hide/show help">▾ Help</button>
+                </div>
+                <div class="mailx-help-body" id="jsonc-help-body"></div>
+            </div>
+        </div>
         <div class="mailx-modal-error" id="jsonc-error" hidden></div>
         <div class="mailx-modal-buttons">
             <span class="mailx-modal-spacer"></span>
@@ -1451,13 +1459,64 @@ async function openJsoncEditor(initialFile) {
     const fileSelect = panel.querySelector("#jsonc-file");
     const textarea = panel.querySelector("#jsonc-content");
     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;
+    helpToggle.addEventListener("click", () => {
+        const open = helpPanel.classList.toggle("mailx-help-collapsed");
+        helpToggle.textContent = open ? "▸ Help" : "▾ Help";
+        helpToggle.setAttribute("aria-expanded", open ? "false" : "true");
+    });
+    const loadHelp = async () => {
+        helpBody.textContent = "Loading help…";
+        try {
+            const r = await readConfigHelp(fileSelect.value);
+            const md = (r?.content || "").trim();
+            helpBody.innerHTML = md ? renderMarkdown(md) : "<em>No help available for this file.</em>";
+        }
+        catch (e) {
+            helpBody.textContent = `Help unavailable: ${e.message}`;
+        }
+    };
+    const clearValidation = () => {
+        errorEl.hidden = true;
+        errorEl.textContent = "";
+        textarea.classList.remove("mailx-modal-input-error");
+        saveBtn.disabled = false;
+    };
+    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;
+        // Select the problem character so the browser draws a visible marker
+        try {
+            textarea.setSelectionRange(err.pos, err.pos + 1);
+        }
+        catch { /* out-of-range → ignore */ }
+    };
+    let validateTimer;
+    const scheduleValidate = () => {
+        if (validateTimer)
+            window.clearTimeout(validateTimer);
+        validateTimer = window.setTimeout(() => {
+            const err = validateJsonc(textarea.value);
+            if (err)
+                showValidation(err);
+            else
+                clearValidation();
+        }, 600);
+    };
+    textarea.addEventListener("input", scheduleValidate);
     const loadFile = async () => {
         textarea.value = "Loading...";
-        errorEl.hidden = true;
+        clearValidation();
         try {
             const r = await readJsoncFile(fileSelect.value);
             textarea.value = r?.content || "";
+            scheduleValidate();
         }
         catch (e) {
             textarea.value = "";
@@ -1465,9 +1524,11 @@ async function openJsoncEditor(initialFile) {
             errorEl.hidden = false;
         }
     };
-    await loadFile();
-    fileSelect.addEventListener("change", loadFile);
+    await Promise.all([loadFile(), loadHelp()]);
+    fileSelect.addEventListener("change", () => { loadFile(); loadHelp(); });
     const close = () => {
+        if (validateTimer)
+            window.clearTimeout(validateTimer);
         backdrop.remove();
         document.removeEventListener("keydown", onKey, true);
     };
@@ -1487,6 +1548,12 @@ async function openJsoncEditor(initialFile) {
                 return;
             }
             if (action === "save") {
+                // Final sync-check; refuse to save if it doesn't parse
+                const err = validateJsonc(textarea.value);
+                if (err) {
+                    showValidation(err);
+                    return;
+                }
                 errorEl.hidden = true;
                 btn.disabled = true;
                 btn.textContent = "Saving...";
@@ -1509,6 +1576,268 @@ async function openJsoncEditor(initialFile) {
     backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
         close(); });
 }
+// JSONC validator — strips comments + trailing commas (preserving source positions
+// by replacing stripped chars with spaces/newlines) and runs JSON.parse. Reports
+// only the *first* error; cascading errors are suppressed.
+function validateJsonc(src) {
+    const stripped = stripJsoncPreservingPositions(src);
+    if (stripped.error) {
+        const { pos, line, col } = offsetToLineCol(src, stripped.error.pos);
+        return { message: stripped.error.message, pos, line, col };
+    }
+    if (stripped.text.trim() === "")
+        return null; // empty file: treat as valid (settings code handles)
+    try {
+        JSON.parse(stripped.text);
+        return null;
+    }
+    catch (e) {
+        const msg = String(e?.message || "parse error");
+        const m = msg.match(/at position (\d+)/i);
+        const pos = m ? Math.min(parseInt(m[1], 10), src.length - 1) : 0;
+        const lc = offsetToLineCol(src, pos);
+        return { message: msg.replace(/\s*at position \d+/i, ""), pos: lc.pos, line: lc.line, col: lc.col };
+    }
+}
+function stripJsoncPreservingPositions(src) {
+    const out = new Array(src.length);
+    let i = 0;
+    const n = src.length;
+    while (i < n) {
+        const c = src[i];
+        const next = src[i + 1];
+        if (c === '"') {
+            out[i] = c;
+            i++;
+            while (i < n) {
+                const ch = src[i];
+                out[i] = ch;
+                i++;
+                if (ch === "\\" && i < n) {
+                    out[i] = src[i];
+                    i++;
+                    continue;
+                }
+                if (ch === '"')
+                    break;
+                if (ch === "\n")
+                    return { text: out.join(""), error: { message: "unterminated string", pos: i - 1 } };
+            }
+        }
+        else if (c === "/" && next === "/") {
+            while (i < n && src[i] !== "\n") {
+                out[i] = " ";
+                i++;
+            }
+        }
+        else if (c === "/" && next === "*") {
+            const start = i;
+            out[i] = " ";
+            out[i + 1] = " ";
+            i += 2;
+            let closed = false;
+            while (i < n) {
+                if (src[i] === "*" && src[i + 1] === "/") {
+                    out[i] = " ";
+                    out[i + 1] = " ";
+                    i += 2;
+                    closed = true;
+                    break;
+                }
+                out[i] = src[i] === "\n" ? "\n" : " ";
+                i++;
+            }
+            if (!closed)
+                return { text: out.join(""), error: { message: "unterminated block comment", pos: start } };
+        }
+        else if (c === ",") {
+            // trailing comma before } or ] → replace with space
+            let j = i + 1;
+            while (j < n && /\s/.test(src[j]))
+                j++;
+            if (j < n && (src[j] === "}" || src[j] === "]")) {
+                out[i] = " ";
+                i++;
+            }
+            else {
+                out[i] = c;
+                i++;
+            }
+        }
+        else {
+            out[i] = c;
+            i++;
+        }
+    }
+    return { text: out.join("") };
+}
+function offsetToLineCol(src, pos) {
+    pos = Math.max(0, Math.min(pos, src.length));
+    let line = 1, col = 1;
+    for (let i = 0; i < pos; i++) {
+        if (src[i] === "\n") {
+            line++;
+            col = 1;
+        }
+        else
+            col++;
+    }
+    return { pos, line, col };
+}
+// Minimal markdown renderer for the help panel. Supports: headings, fenced code blocks,
+// inline code, bold, italic, links, bullet lists, paragraphs. HTML is escaped first.
+function renderMarkdown(md) {
+    const esc = (s) => s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+    // Pull fenced code blocks out first so their contents aren't processed as markdown.
+    const blocks = [];
+    let src = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, _lang, code) => {
+        const i = blocks.length;
+        blocks.push(`<pre class="mailx-help-code"><code>${esc(code)}</code></pre>`);
+        return `\u0000BLOCK${i}\u0000`;
+    });
+    const lines = src.split(/\r?\n/);
+    const out = [];
+    let inList = false;
+    let para = [];
+    const flushPara = () => {
+        if (para.length) {
+            out.push(`<p>${inline(para.join(" "))}</p>`);
+            para = [];
+        }
+    };
+    const closeList = () => { if (inList) {
+        out.push("</ul>");
+        inList = false;
+    } };
+    function inline(s) {
+        s = esc(s);
+        s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+        s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+        s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+        s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+        return s;
+    }
+    for (const raw of lines) {
+        const blockMatch = /^\u0000BLOCK(\d+)\u0000$/.exec(raw);
+        if (blockMatch) {
+            flushPara();
+            closeList();
+            out.push(blocks[parseInt(blockMatch[1], 10)]);
+            continue;
+        }
+        const h = /^(#{1,6})\s+(.+)$/.exec(raw);
+        if (h) {
+            flushPara();
+            closeList();
+            const lvl = h[1].length;
+            out.push(`<h${lvl}>${inline(h[2])}</h${lvl}>`);
+            continue;
+        }
+        const bullet = /^\s*[-*]\s+(.+)$/.exec(raw);
+        if (bullet) {
+            flushPara();
+            if (!inList) {
+                out.push("<ul>");
+                inList = true;
+            }
+            out.push(`<li>${inline(bullet[1])}</li>`);
+            continue;
+        }
+        if (raw.trim() === "") {
+            flushPara();
+            closeList();
+            continue;
+        }
+        para.push(raw);
+    }
+    flushPara();
+    closeList();
+    return out.join("\n");
+}
+// ── About dialog ──
+document.getElementById("btn-about")?.addEventListener("click", () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    openAboutDialog();
+});
+// Clicking the version string (toolbar in wide mode, status bar in narrow mode) also opens About
+document.querySelectorAll(".app-version").forEach(el => {
+    el.style.cursor = "pointer";
+    el.addEventListener("click", openAboutDialog);
+});
+async function openAboutDialog() {
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">About mailx</div>
+        <div class="mailx-about" id="about-body">Loading...</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(panel.parentElement);
+    const body = panel.querySelector("#about-body");
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector('[data-action="close"]')
+        .addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    try {
+        const [v, accounts] = await Promise.all([
+            getVersion().catch(() => ({})),
+            getAccounts().catch(() => []),
+        ]);
+        const storage = v.storage || {};
+        const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
+        const platform = isApp ? (mailxapi?.platform || "app") : "browser";
+        const rows = [
+            ["Version", v.version ? `v${v.version}` : "unknown"],
+            ["Platform", platform],
+            ["Storage", storage.provider || "local"],
+        ];
+        if (storage.cloudPath)
+            rows.push(["Cloud path", `My Drive/${storage.cloudPath}/`]);
+        if (storage.mode)
+            rows.push(["Storage mode", storage.mode]);
+        rows.push(["Accounts", String((accounts || []).length)]);
+        rows.push(["User agent", navigator.userAgent]);
+        rows.push(["Screen", `${screen.width}×${screen.height}`]);
+        rows.push(["Window", `${window.innerWidth}×${window.innerHeight}`]);
+        body.innerHTML = `
+            <dl class="mailx-about-dl">
+              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${escapeHtml(val)}</dd>`).join("")}
+            </dl>
+            ${(accounts || []).length ? `
+            <div class="mailx-about-accounts">
+              <div class="mailx-about-section">Accounts</div>
+              <ul>
+                ${accounts.map(a => `<li>${escapeHtml(a.email || a.id)}${a.name ? ` — ${escapeHtml(a.name)}` : ""}</li>`).join("")}
+              </ul>
+            </div>` : ""}
+            <div class="mailx-about-foot">mailx — local-first mail client</div>`;
+    }
+    catch (e) {
+        body.textContent = `Failed to load: ${e.message}`;
+    }
+}
+function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
 // Threaded view toggle
 optThreaded?.addEventListener("change", () => {
     const body = document.getElementById("ml-body");

package/client/components/message-viewer.js

@@ -243,23 +243,55 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
         }
         headerEl.querySelector(".mv-date").textContent = new Date(msg.date).toLocaleString(undefined, { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false });
         // Unsubscribe button (upper right of header).
-        // - mailto: URLs open a pre-filled compose window (so the unsubscribe
-        //   reply gets sent from the correct mailx account, not the OS default
-        //   mail handler)
-        // - https: URLs open a new tab
+        // Priority:
+        //   1. RFC 8058 one-click (HTTPS + List-Unsubscribe-Post header) — POST server-side
+        //   2. HTTPS URL — open in a new tab (two-click flow, usually a confirmation page)
+        //   3. mailto: URL — open a pre-filled compose window (so the unsubscribe
+        //      reply gets sent from the correct mailx account, not the OS default
+        //      mail handler)
         const unsubBtn = document.getElementById("mv-unsubscribe");
-        const unsubUrl = msg.listUnsubscribe || "";
+        const httpUrl = msg.listUnsubscribeHttp || "";
+        const mailUrl = msg.listUnsubscribeMail || "";
+        const oneClick = !!msg.listUnsubscribeOneClick;
+        const anyUrl = httpUrl || mailUrl || msg.listUnsubscribe || "";
         if (unsubBtn) {
-            if (unsubUrl) {
+            if (anyUrl) {
                 unsubBtn.hidden = false;
-                unsubBtn.textContent = "Unsubscribe";
-                unsubBtn.title = unsubUrl;
+                unsubBtn.textContent = oneClick && httpUrl ? "Unsubscribe (1-click)" : "Unsubscribe";
+                unsubBtn.title = anyUrl;
                 unsubBtn.href = "#";
-                unsubBtn.onclick = (e) => {
+                unsubBtn.onclick = async (e) => {
                     e.preventDefault();
-                    if (/^mailto:/i.test(unsubUrl)) {
-                        // Parse mailto:addr?subject=... and pre-fill compose
-                        const m = unsubUrl.match(/^mailto:([^?]*)(?:\?(.*))?$/i);
+                    const status = document.getElementById("status-sync");
+                    if (oneClick && httpUrl) {
+                        unsubBtn.textContent = "Unsubscribing…";
+                        try {
+                            const { unsubscribeOneClick } = await import("../lib/api-client.js");
+                            const r = await unsubscribeOneClick(httpUrl);
+                            if (r?.ok) {
+                                unsubBtn.textContent = "Unsubscribed";
+                                if (status)
+                                    status.textContent = `Unsubscribed (HTTP ${r.status})`;
+                            }
+                            else {
+                                unsubBtn.textContent = `Failed: HTTP ${r?.status ?? "?"}`;
+                                if (status)
+                                    status.textContent = `Unsubscribe failed: ${r?.status} ${r?.statusText || ""}`.trim();
+                            }
+                        }
+                        catch (err) {
+                            unsubBtn.textContent = "Unsubscribe failed";
+                            if (status)
+                                status.textContent = `Unsubscribe error: ${err.message}`;
+                        }
+                        return;
+                    }
+                    if (httpUrl) {
+                        window.open(httpUrl, "_blank");
+                        return;
+                    }
+                    if (mailUrl) {
+                        const m = mailUrl.match(/^mailto:([^?]*)(?:\?(.*))?$/i);
                         const to = m?.[1] ? decodeURIComponent(m[1]) : "";
                         const qs = new URLSearchParams(m?.[2] || "");
                         const subject = qs.get("subject") || "Unsubscribe";
@@ -278,9 +310,6 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
                         sessionStorage.setItem("composeInit", JSON.stringify(init));
                         document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "new" } }));
                     }
-                    else {
-                        window.open(unsubUrl, "_blank");
-                    }
                 };
             }
             else {
@@ -620,7 +649,8 @@ function wrapHtmlBody(html, allowRemote = false) {
 <meta charset="UTF-8">
 ${csp}
 <style>
-    html { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
+    html, body { touch-action: pan-y pinch-zoom; }
+    html { height: 100%; overflow-y: auto; overflow-x: hidden; }
     body {
         font-family: system-ui, sans-serif;
         font-size: 17.5px;
@@ -659,15 +689,43 @@ ${csp}
         window.parent.postMessage({ type: "linkClick", url: url }, "*");
     }
     document.addEventListener("click", handleLinkTap, true);
+    // Android WebView fallback: some builds drop the synthetic click after
+    // touchend, so treat a stationary touchstart→touchend on the same link
+    // as a tap. Anything that moves more than TAP_SLOP pixels is a scroll
+    // and must NOT activate the link.
+    var TAP_SLOP = 10;
     var lastTouchTarget = null;
+    var lastTouchX = 0;
+    var lastTouchY = 0;
+    var touchMoved = false;
+    // All touch listeners are passive so Android WebView can compositor-scroll
+    // the iframe without waiting on our JS. handleLinkTap's preventDefault only
+    // matters for the "click" path (which is non-passive by default).
     document.addEventListener("touchstart", function (e) {
+        var t0 = e.touches && e.touches[0];
+        lastTouchX = t0 ? t0.clientX : 0;
+        lastTouchY = t0 ? t0.clientY : 0;
+        touchMoved = false;
         lastTouchTarget = (e.target && e.target.closest) ? e.target.closest("a[href]") || e.target : e.target;
-    }, true);
+    }, { passive: true, capture: true });
+    document.addEventListener("touchmove", function (e) {
+        if (touchMoved) return;
+        var t = e.touches && e.touches[0];
+        if (!t) return;
+        if (Math.abs(t.clientX - lastTouchX) > TAP_SLOP || Math.abs(t.clientY - lastTouchY) > TAP_SLOP) {
+            touchMoved = true;
+            lastTouchTarget = null;
+        }
+    }, { passive: true, capture: true });
     document.addEventListener("touchend", function (e) {
+        if (touchMoved) { lastTouchTarget = null; touchMoved = false; return; }
         var t = (e.target && e.target.closest) ? e.target.closest("a[href]") || e.target : e.target;
         if (lastTouchTarget && lastTouchTarget === t) handleLinkTap(e);
         lastTouchTarget = null;
-    }, true);
+    }, { passive: true, capture: true });
+    document.addEventListener("touchcancel", function () {
+        lastTouchTarget = null; touchMoved = false;
+    }, { passive: true, capture: true });
     document.addEventListener("mouseover", function (e) {
         var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
         if (a) {

package/client/compose/compose.css

@@ -1,5 +1,55 @@
 /* Compose window styles */
 
+.compose-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.compose-modal {
+    background: var(--color-bg, #fff);
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+    padding: 20px 24px;
+    min-width: 320px;
+    max-width: 480px;
+
+    & .compose-modal-msg {
+        margin-bottom: 18px;
+        font-size: 14px;
+        color: var(--color-text, #222);
+    }
+
+    & .compose-modal-buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    & .compose-modal-btn {
+        padding: 6px 14px;
+        border: 1px solid var(--color-border, #ccc);
+        background: var(--color-bg-surface, #f6f6f6);
+        border-radius: 4px;
+        font: inherit;
+        cursor: pointer;
+
+        &:hover { background: var(--color-bg-hover, #ececec); }
+
+        &.primary {
+            background: #0b6bcb;
+            color: #fff;
+            border-color: #0b6bcb;
+
+            &:hover { background: #095aa8; }
+        }
+    }
+}
+
 body {
     display: flex;
     flex-direction: column;

package/client/compose/compose.js

@@ -467,17 +467,55 @@ document.getElementById("btn-send")?.addEventListener("click", async () => {
 function composeHasContent() {
     return !!(editor.getText().trim() || toInput.value.trim() || ccInput.value.trim() || bccInput.value.trim() || subjectInput.value.trim());
 }
-/** Ask Save/Discard/Cancel. Returns "save" | "discard" | "cancel". */
+/** Ask Save/Discard/Cancel. Returns "save" | "discard" | "cancel".
+ *  Uses an in-page modal so all three choices are presented at once — the
+ *  native confirm() flow forced the user through two sequential dialogs and
+ *  hid Discard behind a Cancel click, which was confusing. */
 function promptSaveOrDiscard() {
-    // Three-way prompt built from two native dialogs: OK(save) / Cancel → then
-    // for Cancel, ask "Really discard?" which becomes Discard / Cancel.
-    const saveIt = confirm("Save this message as a draft?\n\nOK = Save as draft\nCancel = continue...");
-    if (saveIt)
-        return "save";
-    const discard = confirm("Discard the message without saving?\n\nOK = Discard\nCancel = Keep editing");
-    if (discard)
-        return "discard";
-    return "cancel";
+    return new Promise(resolve => {
+        const overlay = document.createElement("div");
+        overlay.className = "compose-modal-overlay";
+        const box = document.createElement("div");
+        box.className = "compose-modal";
+        const msg = document.createElement("div");
+        msg.className = "compose-modal-msg";
+        msg.textContent = "Save this message as a draft?";
+        const btnRow = document.createElement("div");
+        btnRow.className = "compose-modal-buttons";
+        const mkBtn = (label, choice, primary) => {
+            const b = document.createElement("button");
+            b.type = "button";
+            b.textContent = label;
+            b.className = primary ? "compose-modal-btn primary" : "compose-modal-btn";
+            b.addEventListener("click", () => { cleanup(); resolve(choice); });
+            return b;
+        };
+        const cleanup = () => {
+            document.removeEventListener("keydown", onKey);
+            overlay.remove();
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                cleanup();
+                resolve("cancel");
+            }
+            else if (e.key === "Enter") {
+                e.preventDefault();
+                cleanup();
+                resolve("save");
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        btnRow.appendChild(mkBtn("Save draft", "save", true));
+        btnRow.appendChild(mkBtn("Discard", "discard", false));
+        btnRow.appendChild(mkBtn("Cancel", "cancel", false));
+        box.appendChild(msg);
+        box.appendChild(btnRow);
+        overlay.appendChild(box);
+        document.body.appendChild(overlay);
+        btnRow.firstChild.focus();
+    });
 }
 /** Handle any "close the compose" action (Discard button, Escape, X, window close). */
 async function handleCloseRequest() {
@@ -485,7 +523,7 @@ async function handleCloseRequest() {
         closeCompose();
         return true;
     }
-    const choice = promptSaveOrDiscard();
+    const choice = await promptSaveOrDiscard();
     if (choice === "cancel")
         return false;
     // Stop auto-save so it can't race with our explicit save/discard.