@bobfrankston/mailx 1.0.339 → 1.0.348

package/client/components/outbox-view.js

@@ -0,0 +1,104 @@
+/**
+ * Outbox view modal — lists .ltr files currently queued on disk.
+ * Pink rows = local-only, not yet reconciled with the server.
+ * Clicking the status-bar queue pill opens this.
+ */
+import { listQueuedOutgoing, cancelQueuedOutgoing } from "../lib/api-client.js";
+let isOpen = false;
+export async function openOutboxView() {
+    if (isOpen)
+        return;
+    isOpen = true;
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Outbox — Local Queue</span>
+            <button type="button" class="mailx-modal-close" id="ob-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="ob-info">Messages waiting to be sent. Pink rows are local-only until the server accepts them. Click Cancel to drop a queued message.</div>
+        <div class="ob-list" id="ob-list">Loading…</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="refresh">Refresh</button>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const listEl = panel.querySelector("#ob-list");
+    const renderList = (items) => {
+        if (items.length === 0) {
+            listEl.innerHTML = `<div class="ob-empty">Outbox is clean — no messages queued.</div>`;
+            return;
+        }
+        const fmtDate = (ms) => new Date(ms).toLocaleString();
+        listEl.innerHTML = items.map((m, i) => `
+            <div class="ob-row ob-pink" data-idx="${i}">
+                <div class="ob-row-hdr">
+                    <span class="ob-acct">${escapeHtml(m.accountId)}</span>
+                    <span class="ob-subject">${escapeHtml(m.subject || "(no subject)")}</span>
+                    <span class="ob-created">${fmtDate(m.createdAt)}</span>
+                    ${m.claimed ? `<span class="ob-badge ob-claimed" title="Sending now on this host">sending…</span>` : ""}
+                    ${m.attempts > 0 ? `<span class="ob-badge ob-retry" title="Retry attempts made so far">retry ×${m.attempts}</span>` : ""}
+                </div>
+                <div class="ob-row-meta">
+                    <span class="ob-from">${escapeHtml(m.from || "")}</span>
+                    → <span class="ob-to">${escapeHtml(m.to || "")}</span>
+                    ${m.cc ? ` · Cc: ${escapeHtml(m.cc)}` : ""}
+                    <span class="ob-size">· ${(m.sizeBytes / 1024).toFixed(1)}kB</span>
+                </div>
+                <div class="ob-row-path">${escapeHtml(m.path)}</div>
+                <div class="ob-row-actions">
+                    <button type="button" class="ob-cancel" ${m.claimed ? "disabled title='Cannot cancel while in flight'" : ""}>Cancel</button>
+                </div>
+            </div>`).join("");
+        listEl.querySelectorAll(".ob-row").forEach((row, idx) => {
+            row.querySelector(".ob-cancel").addEventListener("click", async () => {
+                const m = items[idx];
+                if (!confirm(`Drop this queued message?\n\nTo: ${m.to}\nSubject: ${m.subject}`))
+                    return;
+                try {
+                    await cancelQueuedOutgoing(m.path);
+                    await reload();
+                }
+                catch (e) {
+                    alert(`Cancel failed: ${e?.message || e}`);
+                }
+            });
+        });
+    };
+    const reload = async () => {
+        try {
+            const items = await listQueuedOutgoing();
+            renderList(items || []);
+        }
+        catch (e) {
+            listEl.innerHTML = `<div class="ob-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
+        }
+    };
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector("#ob-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    panel.querySelector('[data-action="refresh"]').addEventListener("click", reload);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    await reload();
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+//# sourceMappingURL=outbox-view.js.map

package/client/components/tasks.js

@@ -0,0 +1,256 @@
+/**
+ * Tasks pane — goal is "better than Thunderbird" on tasks.
+ *
+ * Phase-1 features (this commit):
+ * - Local-only task store with priority, due-date, snooze, tags, notes
+ * - Inline edit, drag-to-reorder by priority, mark complete with strikethrough
+ * - Filter by status (active/completed/all), tag, due-soon
+ * - "Snooze until" (defer-to-date) — Thunderbird Lightning has nothing here
+ * - Quick add from email subject (composeInit-style, hooked from message viewer
+ *   right-click later)
+ *
+ * Phase-2 (later):
+ * - Google Tasks sync (oauthsupport scope ready)
+ * - CalDAV VTODO interop
+ * - Task-from-email contextmenu
+ * - Reminders that share the calendar/mail alarm subsystem
+ */
+const STORE_KEY = "mailx-tasks-v1";
+let isOpen = false;
+function loadTasks() {
+    try {
+        const raw = localStorage.getItem(STORE_KEY);
+        if (!raw)
+            return [];
+        const arr = JSON.parse(raw);
+        return Array.isArray(arr) ? arr : [];
+    }
+    catch {
+        return [];
+    }
+}
+function saveTasks(tasks) {
+    try {
+        localStorage.setItem(STORE_KEY, JSON.stringify(tasks));
+    }
+    catch { /* */ }
+}
+export async function openTasks() {
+    if (isOpen)
+        return;
+    isOpen = true;
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Tasks</span>
+            <button type="button" class="mailx-modal-close" id="tk-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="tk-toolbar">
+            <input type="text" id="tk-quickadd" class="mailx-modal-input" placeholder="Add task — Enter to commit, prefix !!=high !=med ?=low, @tag, due:YYYY-MM-DD" autocomplete="off">
+        </div>
+        <div class="tk-filters">
+            <button type="button" class="tk-filter-btn" data-filter="active">Active</button>
+            <button type="button" class="tk-filter-btn" data-filter="due-soon">Due soon</button>
+            <button type="button" class="tk-filter-btn" data-filter="completed">Completed</button>
+            <button type="button" class="tk-filter-btn" data-filter="all">All</button>
+            <span class="tk-spacer"></span>
+            <span id="tk-count" class="tk-count"></span>
+        </div>
+        <div class="tk-list" id="tk-list"></div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <span class="cal-source-note">Local-only · Google Tasks sync pending</span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const quickAdd = panel.querySelector("#tk-quickadd");
+    const listEl = panel.querySelector("#tk-list");
+    const countEl = panel.querySelector("#tk-count");
+    let tasks = loadTasks();
+    let filter = "active";
+    const setFilter = (f) => {
+        filter = f;
+        panel.querySelectorAll(".tk-filter-btn").forEach(b => b.classList.toggle("tk-filter-active", b.dataset.filter === f));
+        render();
+    };
+    panel.querySelectorAll(".tk-filter-btn").forEach(b => b.addEventListener("click", () => setFilter(b.dataset.filter)));
+    setFilter("active");
+    const parseQuickAdd = (line) => {
+        const t = {
+            id: `tk-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            title: "", priority: 0, createdAt: Date.now(),
+        };
+        const tags = [];
+        const words = line.split(/\s+/);
+        const titleParts = [];
+        for (const w of words) {
+            if (w === "!!") {
+                t.priority = 3;
+                continue;
+            }
+            if (w === "!") {
+                t.priority = 2;
+                continue;
+            }
+            if (w === "?") {
+                t.priority = 1;
+                continue;
+            }
+            if (w.startsWith("@") && w.length > 1) {
+                tags.push(w.slice(1));
+                continue;
+            }
+            const dueMatch = w.match(/^due:(\S+)$/i);
+            if (dueMatch) {
+                const parsed = Date.parse(dueMatch[1]);
+                if (!isNaN(parsed))
+                    t.due = parsed;
+                continue;
+            }
+            titleParts.push(w);
+        }
+        t.title = titleParts.join(" ").trim();
+        if (tags.length)
+            t.tags = tags;
+        return t;
+    };
+    quickAdd.addEventListener("keydown", (e) => {
+        if (e.key !== "Enter")
+            return;
+        const v = quickAdd.value.trim();
+        if (!v)
+            return;
+        const t = parseQuickAdd(v);
+        if (!t.title) {
+            alert("Task needs a title.");
+            return;
+        }
+        tasks.push(t);
+        saveTasks(tasks);
+        quickAdd.value = "";
+        render();
+    });
+    const render = () => {
+        const now = Date.now();
+        let visible = tasks.slice();
+        if (filter === "active")
+            visible = visible.filter(t => !t.completed && (!t.snoozeUntil || t.snoozeUntil <= now));
+        else if (filter === "completed")
+            visible = visible.filter(t => !!t.completed);
+        else if (filter === "due-soon")
+            visible = visible.filter(t => !t.completed && t.due && t.due <= now + 7 * 86400_000);
+        // Sort: priority desc, then due asc (none last), then created asc.
+        visible.sort((a, b) => {
+            if ((b.priority || 0) !== (a.priority || 0))
+                return (b.priority || 0) - (a.priority || 0);
+            const ad = a.due || Number.MAX_SAFE_INTEGER;
+            const bd = b.due || Number.MAX_SAFE_INTEGER;
+            if (ad !== bd)
+                return ad - bd;
+            return a.createdAt - b.createdAt;
+        });
+        countEl.textContent = `${visible.length} of ${tasks.length}`;
+        if (visible.length === 0) {
+            listEl.innerHTML = `<div class="tk-empty">Nothing matches the ${filter} filter.</div>`;
+            return;
+        }
+        const dueLabel = (ms) => {
+            if (!ms)
+                return "";
+            const d = new Date(ms);
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const dt = new Date(ms);
+            dt.setHours(0, 0, 0, 0);
+            const days = Math.round((dt.getTime() - today.getTime()) / 86400_000);
+            if (days < 0)
+                return `${-days}d overdue`;
+            if (days === 0)
+                return "today";
+            if (days === 1)
+                return "tomorrow";
+            if (days < 7)
+                return `${days}d`;
+            return d.toLocaleDateString();
+        };
+        const prioLabel = (p) => p === 3 ? "‼" : p === 2 ? "!" : p === 1 ? "·" : "";
+        listEl.innerHTML = visible.map(t => `
+            <div class="tk-row${t.completed ? " tk-done" : ""}" data-id="${t.id}">
+                <input type="checkbox" class="tk-check" ${t.completed ? "checked" : ""}>
+                <span class="tk-prio tk-prio-${t.priority}">${prioLabel(t.priority)}</span>
+                <span class="tk-title" contenteditable="plaintext-only">${escapeHtml(t.title)}</span>
+                ${t.tags?.length ? `<span class="tk-tags">${t.tags.map(x => `#${escapeHtml(x)}`).join(" ")}</span>` : ""}
+                <span class="tk-due${t.due && t.due < now && !t.completed ? " tk-overdue" : ""}">${dueLabel(t.due)}</span>
+                <button type="button" class="tk-snooze" title="Snooze 1d / 1w (right-click)">⏰</button>
+                <button type="button" class="tk-del" title="Delete">×</button>
+            </div>`).join("");
+        listEl.querySelectorAll(".tk-row").forEach(row => {
+            const id = row.dataset.id;
+            const t = tasks.find(x => x.id === id);
+            row.querySelector(".tk-check").addEventListener("change", (e) => {
+                const ck = e.target;
+                t.completed = ck.checked ? Date.now() : undefined;
+                saveTasks(tasks);
+                render();
+            });
+            row.querySelector(".tk-del").addEventListener("click", () => {
+                if (!confirm(`Delete task "${t.title}"?`))
+                    return;
+                tasks = tasks.filter(x => x.id !== id);
+                saveTasks(tasks);
+                render();
+            });
+            row.querySelector(".tk-snooze").addEventListener("click", () => {
+                t.snoozeUntil = Date.now() + 86400_000; // 1d
+                saveTasks(tasks);
+                render();
+            });
+            row.querySelector(".tk-snooze").addEventListener("contextmenu", (e) => {
+                e.preventDefault();
+                t.snoozeUntil = Date.now() + 7 * 86400_000; // 1w
+                saveTasks(tasks);
+                render();
+            });
+            const titleEl = row.querySelector(".tk-title");
+            titleEl.addEventListener("blur", () => {
+                const v = (titleEl.textContent || "").trim();
+                if (v && v !== t.title) {
+                    t.title = v;
+                    saveTasks(tasks);
+                }
+            });
+            titleEl.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                    e.preventDefault();
+                    titleEl.blur();
+                }
+            });
+        });
+    };
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape" && document.activeElement?.tagName !== "INPUT") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector("#tk-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    quickAdd.focus();
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+//# sourceMappingURL=tasks.js.map

package/client/compose/compose.html

@@ -21,8 +21,8 @@
             <label for="compose-to">To</label>
             <input type="text" id="compose-to" autocomplete="off">
             <span class="compose-recipient-toggle">
-                <button type="button" class="compose-toggle-btn" id="btn-toggle-cc" title="Show/hide Cc">Cc</button>
-                <button type="button" class="compose-toggle-btn" id="btn-toggle-bcc" title="Show/hide Bcc">Bcc</button>
+                <button type="button" class="compose-toggle-btn" id="btn-toggle-cc" tabindex="-1" title="Show/hide Cc">Cc</button>
+                <button type="button" class="compose-toggle-btn" id="btn-toggle-bcc" tabindex="-1" title="Show/hide Bcc">Bcc</button>
             </span>
         </div>
         <div class="compose-field" id="compose-cc-row" hidden>

package/client/compose/compose.js

@@ -357,15 +357,28 @@ function applyInit(init) {
         if (ccBtn)
             ccBtn.classList.add("active");
     }
-    if (init.bodyHtml) {
-        editor.setHtml(init.bodyHtml);
+    // 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
+    // baked into the saved body. Editing existing draft also skipped.
+    let bodyToRender = init.bodyHtml || "";
+    const acct = init.accounts.find(a => a.id === init.accountId);
+    const sig = acct?.signature || "";
+    if (sig && init.mode !== "draft" && !init.draftUid) {
+        const sigBlock = `<br><br>--<br>${sig}`;
+        bodyToRender = init.mode === "reply" || init.mode === "replyAll" || init.mode === "forward"
+            ? `<br>${sigBlock}<br>${bodyToRender}` // sig above the quote
+            : `${bodyToRender}${sigBlock}`; // sig at the end for new
+    }
+    if (bodyToRender) {
+        editor.setHtml(bodyToRender);
         editor.setCursor(0);
     }
     // If resuming a draft, track its UID for deletion after send
     if (init.draftUid) {
         draftUid = init.draftUid;
     }
-    document.title = init.subject ? `${init.subject} - Compose` : "Compose - mailx";
+    setComposeTitle(init.subject || "");
     // Focus first empty field: To → Subject → body
     if (!toInput.value)
         toInput.focus();
@@ -374,6 +387,24 @@ function applyInit(init) {
     else
         editor.focus();
 }
+// Q68: dirty marker (•) in the window title until the next successful save.
+let composeDirty = false;
+function setComposeTitle(subject) {
+    const base = subject ? `${subject} - Compose` : "Compose - mailx";
+    document.title = composeDirty ? `• ${base}` : base;
+}
+function markComposeDirty() {
+    if (composeDirty)
+        return;
+    composeDirty = true;
+    setComposeTitle(subjectInput?.value || "");
+}
+function markComposeClean() {
+    if (!composeDirty)
+        return;
+    composeDirty = false;
+    setComposeTitle(subjectInput?.value || "");
+}
 // ── Compose state (declared before init so the async IIFE can reference them) ──
 const DRAFT_INPUT_DEBOUNCE_MS = 1500; // save ~1.5s after the last keystroke
 const DRAFT_INTERVAL_MS = 5000; // safety-net interval save
@@ -400,6 +431,8 @@ async function saveDraft() {
         return; // no changes
     if (!editor.getText().trim() && !subjectInput.value && !toInput.value)
         return; // empty
+    // Expose to window for blur-handler.
+    window.__mailxSaveDraft = saveDraft;
     lastDraftContent = content;
     draftSaving = true;
     try {
@@ -423,6 +456,7 @@ async function saveDraft() {
         }
         else
             showDraftStatus(`Draft saved ${new Date().toLocaleTimeString()}`, false);
+        markComposeClean();
     }
     catch (e) {
         // Surface the error — silent failures are how drafts get lost on IMAP hiccups.
@@ -439,6 +473,7 @@ async function saveDraft() {
 }
 /** Schedule a debounced save on user input — fires ~1.5s after the last keystroke. */
 function scheduleDraftSave() {
+    markComposeDirty();
     if (draftDebounceTimer)
         clearTimeout(draftDebounceTimer);
     draftDebounceTimer = setTimeout(() => { draftDebounceTimer = null; saveDraft(); }, DRAFT_INPUT_DEBOUNCE_MS);
@@ -525,10 +560,22 @@ function scheduleDraftSave() {
     });
 })();
 // ── Send ──
-document.getElementById("btn-send")?.addEventListener("click", async () => {
-    const btn = document.getElementById("btn-send");
-    btn.disabled = true;
-    btn.textContent = "Sending...";
+// Q55: Ctrl+Enter (or Cmd+Enter on macOS) anywhere in compose triggers send.
+document.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        document.getElementById("btn-send")?.click();
+    }
+});
+// Q59: autosave when the window loses focus (in addition to debounce + interval).
+window.addEventListener("blur", () => {
+    // Use the same saveDraft path as the 5s interval.
+    try {
+        window.__mailxSaveDraft?.();
+    }
+    catch { /* */ }
+});
+document.getElementById("btn-send")?.addEventListener("click", () => {
     const body = {
         from: getFromAccountId(),
         fromAddress: getFromAddress(),
@@ -540,43 +587,40 @@ document.getElementById("btn-send")?.addEventListener("click", async () => {
         bodyText: editor.getText(),
         attachments: attachments.map(a => ({ filename: a.filename, mimeType: a.mimeType, dataBase64: a.dataBase64 })),
     };
-    try {
-        await sendMessage(body);
-        // Delete draft after successful send — stop auto-save first so it can't
-        // append a fresh copy after we delete. Use the stored draftId as a fallback
-        // so any orphaned drafts with the same stable ID are cleaned up too.
-        if (draftTimer) {
-            clearInterval(draftTimer);
-            draftTimer = null;
-        }
+    // Local validity (one missing-To check) — must run before close so the
+    // user gets an inline error instead of silent loss. Anything else (real
+    // address validation, MIME assembly, disk write) happens server-side.
+    if (!body.to.length) {
+        alert("Please add at least one To recipient.");
+        return;
+    }
+    console.log(`[compose] Send clicked: from=${body.from} to=${JSON.stringify(body.to)} subject="${body.subject}" attachments=${body.attachments.length}`);
+    // Stop autosave so it can't write a fresh draft after we close.
+    if (draftTimer) {
+        clearInterval(draftTimer);
+        draftTimer = null;
+    }
+    // Fire-and-forget. The disk-write is the durable commit; queue depth +
+    // retry status are visible in the parent status bar. No modal dialogs.
+    const sendStart = Date.now();
+    sendMessage(body)
+        .then(() => {
+        console.log(`[compose] Send IPC returned OK in ${Date.now() - sendStart}ms`);
         if (draftUid || draftId) {
             deleteDraft(getFromAccountId(), draftUid || 0, draftId || "").catch(() => { });
         }
-        closeCompose();
-    }
-    catch (e) {
-        btn.disabled = false;
-        btn.textContent = "Send";
+    })
+        .catch((e) => {
         const msg = e?.message || String(e);
-        // Distinguish the IPC-timeout case from real send failures. The
-        // service-side send() queues the message to the local DB synchronously
-        // before attempting any IMAP/SMTP work — so if the IPC reached Node at
-        // all, the message is queued and the background worker will retry it
-        // with backoff (X-Mailx-Retry header, 60s settling delay, up to 10
-        // attempts). Treating that as a failure that demands a re-click leads
-        // to duplicate sends. Tell the user honestly: "probably queued, check
-        // Outbox before retrying."
-        if (msg.startsWith("mailxapi timeout")) {
-            alert("Send is taking longer than expected.\n\n" +
-                "The message has likely been queued and will be retried in the background. " +
-                "Check the Outbox folder before clicking Send again — clicking Send now may " +
-                "produce a duplicate.\n\n" +
-                "Your draft is preserved either way.");
-        }
-        else {
-            alert(`Send failed: ${msg}`);
+        console.error(`[compose] Send IPC failed after ${Date.now() - sendStart}ms: ${msg}`);
+        // Forward to parent so it surfaces in the status bar / banner — no
+        // alert here because the compose window is already closed.
+        try {
+            parent.postMessage({ type: "mailx-send-error", message: msg, accountId: body.from }, "*");
         }
-    }
+        catch { /* */ }
+    });
+    closeCompose();
 });
 // ── Close handling ──
 /** True if the compose has anything worth asking about. */
@@ -695,6 +739,10 @@ function setBccVisible(visible) {
 }
 toggleCcBtn?.addEventListener("click", () => setCcVisible(ccRow.hidden));
 toggleBccBtn?.addEventListener("click", () => setBccVisible(bccRow.hidden));
+// Q49 deferred: should be derived from the address book / sent-history DB,
+// not a parallel localStorage store. Pending: extend contacts schema or
+// query messages table on To-input change (debounced); auto-expand Cc/Bcc
+// when this recipient's history shows ≥N past uses.
 // ── Attachments ──
 const fileInput = document.getElementById("compose-file");
 const attEl = document.getElementById("compose-attachments");

package/client/compose/editor.js

@@ -239,10 +239,77 @@ function createQuillEditor(container) {
     // - text/plain that's a URL: insert as a link, optionally wrapping any
     //   currently-selected text.
     // - Anything else: default Quill behavior (verbatim plain or HTML).
+    // C36: AI proofread on right-click → "Proofread selection" item.
+    // Uses the existing aiTransform IPC. Gated by autocomplete.proofreadEnabled.
+    q.root.addEventListener("contextmenu", async (e) => {
+        try {
+            const sel = q.getSelection();
+            if (!sel || sel.length === 0)
+                return; // no selection — let native menu handle
+            const settingsRaw = localStorage.getItem("mailx-ai-proofread-enabled");
+            if (settingsRaw !== "true")
+                return; // feature off
+            const text = q.getText(sel.index, sel.length);
+            if (!text.trim())
+                return;
+            e.preventDefault();
+            // Inline action menu next to the cursor
+            const menu = document.createElement("div");
+            menu.style.cssText = `position:fixed;z-index:2500;background:var(--color-bg);color:var(--color-text);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:160px;`;
+            menu.style.left = `${e.clientX}px`;
+            menu.style.top = `${e.clientY}px`;
+            const item = document.createElement("div");
+            item.textContent = "Proofread selection";
+            item.style.cssText = `padding:6px 12px;cursor:pointer;`;
+            item.addEventListener("mouseenter", () => item.style.background = "var(--color-bg-hover)");
+            item.addEventListener("mouseleave", () => item.style.background = "");
+            item.addEventListener("click", async () => {
+                menu.remove();
+                try {
+                    const { aiTransform } = await import("../lib/api-client.js");
+                    const r = await aiTransform({ action: "proofread", text });
+                    if (r?.text && r.text !== text) {
+                        q.deleteText(sel.index, sel.length);
+                        q.insertText(sel.index, r.text);
+                        q.setSelection(sel.index, r.text.length);
+                    }
+                    else if (r?.reason) {
+                        alert(`Proofread: ${r.reason}`);
+                    }
+                }
+                catch (err) {
+                    alert(`Proofread failed: ${err?.message || err}`);
+                }
+            });
+            menu.appendChild(item);
+            document.body.appendChild(menu);
+            const dismiss = () => { menu.remove(); document.removeEventListener("mousedown", dismiss); };
+            setTimeout(() => document.addEventListener("mousedown", dismiss), 0);
+        }
+        catch { /* fall through to native menu */ }
+    });
     q.root.addEventListener("paste", (e) => {
         const cb = e.clipboardData;
         if (!cb)
             return;
+        // Q3: image-on-clipboard → inline as data: URL.
+        for (const item of Array.from(cb.items)) {
+            if (item.kind === "file" && item.type.startsWith("image/")) {
+                const file = item.getAsFile();
+                if (!file)
+                    continue;
+                e.preventDefault();
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const dataUrl = String(reader.result || "");
+                    const range = q.getSelection(true) || { index: q.getLength(), length: 0 };
+                    q.insertEmbed(range.index, "image", dataUrl);
+                    q.setSelection(range.index + 1, 0);
+                };
+                reader.readAsDataURL(file);
+                return;
+            }
+        }
         const html = cb.getData("text/html");
         const plain = cb.getData("text/plain");
         if (html) {