@bobfrankston/mailx 1.0.340 → 1.0.349

package/client/components/address-book.js

@@ -0,0 +1,199 @@
+/**
+ * Address book modal — list / search / edit / delete contacts.
+ * Sources: 'sent' (added on outgoing), 'received' (seeded from message senders),
+ * 'manual' (added directly here), 'google' (Google Contacts sync).
+ */
+import { listContacts, upsertContact, deleteContact } from "../lib/api-client.js";
+let isOpen = false;
+export async function openAddressBook() {
+    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">Address Book</span>
+            <button type="button" class="mailx-modal-close" id="ab-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="ab-toolbar">
+            <input type="search" id="ab-search" class="mailx-modal-input" placeholder="Search name or email…" autocomplete="off">
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="ab-new">+ New contact</button>
+        </div>
+        <div class="ab-count" id="ab-count"></div>
+        <div class="ab-list" id="ab-list">Loading…</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const searchInput = panel.querySelector("#ab-search");
+    const listEl = panel.querySelector("#ab-list");
+    const countEl = panel.querySelector("#ab-count");
+    let editingEmail = null;
+    const render = (items, total) => {
+        countEl.textContent = total === items.length
+            ? `${total} contact${total === 1 ? "" : "s"}`
+            : `Showing ${items.length} of ${total}`;
+        if (items.length === 0) {
+            listEl.innerHTML = `<div class="ab-empty">No contacts match.</div>`;
+            return;
+        }
+        const fmtDate = (ms) => {
+            if (!ms)
+                return "";
+            const d = new Date(ms);
+            const now = new Date();
+            return d.getFullYear() === now.getFullYear()
+                ? d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
+                : d.toLocaleDateString();
+        };
+        listEl.innerHTML = `
+            <div class="ab-row ab-header">
+                <span class="ab-name">Name</span>
+                <span class="ab-email">Email</span>
+                <span class="ab-source">Source</span>
+                <span class="ab-count-cell" title="Times sent to">×</span>
+                <span class="ab-last">Last</span>
+                <span class="ab-actions"></span>
+            </div>` + items.map(c => `
+            <div class="ab-row" data-email="${escapeAttr(c.email)}">
+                <span class="ab-name">${escapeHtml(c.name || "")}</span>
+                <span class="ab-email">${escapeHtml(c.email)}</span>
+                <span class="ab-source">${escapeHtml(c.source)}</span>
+                <span class="ab-count-cell">${c.useCount || 0}</span>
+                <span class="ab-last">${fmtDate(c.lastUsed)}</span>
+                <span class="ab-actions">
+                    <button type="button" class="ab-edit" title="Edit name">✎</button>
+                    <button type="button" class="ab-del" title="Delete">🗑</button>
+                    <button type="button" class="ab-mail" title="Compose to">✉</button>
+                </span>
+            </div>`).join("");
+        listEl.querySelectorAll(".ab-row[data-email]").forEach(row => {
+            const email = row.dataset.email;
+            const c = items.find(x => x.email === email);
+            row.querySelector(".ab-edit")?.addEventListener("click", () => beginEdit(row, c));
+            row.querySelector(".ab-del")?.addEventListener("click", () => doDelete(c));
+            row.querySelector(".ab-mail")?.addEventListener("click", () => composeTo(c));
+        });
+    };
+    const beginEdit = (row, c) => {
+        if (editingEmail === c.email)
+            return;
+        editingEmail = c.email;
+        const nameSpan = row.querySelector(".ab-name");
+        const original = c.name || "";
+        nameSpan.innerHTML = `<input type="text" value="${escapeAttr(original)}" class="ab-name-input">`;
+        const inp = nameSpan.querySelector("input");
+        inp.focus();
+        inp.select();
+        const commit = async () => {
+            const newName = inp.value.trim();
+            if (newName !== original) {
+                try {
+                    await upsertContact(newName, c.email);
+                    c.name = newName;
+                }
+                catch (e) {
+                    alert(`Update failed: ${e?.message || e}`);
+                }
+            }
+            nameSpan.textContent = c.name || "";
+            editingEmail = null;
+        };
+        inp.addEventListener("blur", commit);
+        inp.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                inp.blur();
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                inp.value = original;
+                inp.blur();
+            }
+        });
+    };
+    const doDelete = async (c) => {
+        if (!confirm(`Delete contact "${c.name || c.email}"?`))
+            return;
+        try {
+            await deleteContact(c.email);
+            await reload();
+        }
+        catch (e) {
+            alert(`Delete failed: ${e?.message || e}`);
+        }
+    };
+    const composeTo = (c) => {
+        const init = {
+            mode: "new",
+            to: [{ name: c.name || "", address: c.email }],
+            cc: [], bcc: [], subject: "", bodyHtml: "",
+            inReplyTo: "", references: [], accounts: [],
+        };
+        try {
+            sessionStorage.setItem("composeInit", JSON.stringify(init));
+        }
+        catch { /* */ }
+        document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "new" } }));
+        close();
+    };
+    let reloadDebounce;
+    const reload = async () => {
+        try {
+            const r = await listContacts(searchInput.value, 1, 200);
+            render(r.items, r.total);
+        }
+        catch (e) {
+            listEl.innerHTML = `<div class="ab-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
+        }
+    };
+    const scheduleReload = () => {
+        if (reloadDebounce)
+            window.clearTimeout(reloadDebounce);
+        reloadDebounce = window.setTimeout(reload, 200);
+    };
+    panel.querySelector("#ab-new")?.addEventListener("click", async () => {
+        const email = prompt("Email address:");
+        if (!email)
+            return;
+        const name = prompt("Display name (optional):") || "";
+        try {
+            await upsertContact(name, email.trim());
+            await reload();
+        }
+        catch (e) {
+            alert(`Add failed: ${e?.message || e}`);
+        }
+    });
+    searchInput.addEventListener("input", scheduleReload);
+    const close = () => {
+        if (reloadDebounce)
+            window.clearTimeout(reloadDebounce);
+        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("#ab-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    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]));
+}
+function escapeAttr(s) { return escapeHtml(s); }
+//# sourceMappingURL=address-book.js.map

package/client/components/calendar.js

@@ -0,0 +1,217 @@
+/**
+ * Calendar pane — Thunderbird Lightning "Today Pane" style.
+ *
+ * Phase-1 scope (this commit): a usable mini-month + upcoming-events list
+ * sourced from a local-only event store. Google Calendar sync is a separate
+ * step (oauthsupport scope is already wired; the dispatcher branch + provider
+ * are owed). UI lands first so the data layer can be slotted in without
+ * UX rework.
+ */
+const LOCAL_STORE_KEY = "mailx-cal-events-v1";
+let isOpen = false;
+function loadEvents() {
+    try {
+        const raw = localStorage.getItem(LOCAL_STORE_KEY);
+        if (!raw)
+            return [];
+        const arr = JSON.parse(raw);
+        return Array.isArray(arr) ? arr : [];
+    }
+    catch {
+        return [];
+    }
+}
+function saveEvents(events) {
+    try {
+        localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(events));
+    }
+    catch { /* */ }
+}
+export async function openCalendar() {
+    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">Calendar</span>
+            <button type="button" class="mailx-modal-close" id="cal-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="cal-grid">
+            <div class="cal-month" id="cal-month"></div>
+            <div class="cal-upcoming">
+                <div class="cal-section-title">Upcoming</div>
+                <div id="cal-events"></div>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="cal-new" style="margin-top:12px;">+ New event</button>
+            </div>
+        </div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <span class="cal-source-note">Local-only · Google Calendar sync pending</span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const monthEl = panel.querySelector("#cal-month");
+    const eventsEl = panel.querySelector("#cal-events");
+    let viewYear = new Date().getFullYear();
+    let viewMonth = new Date().getMonth();
+    let selectedDay = new Date();
+    let events = loadEvents();
+    const renderMonth = () => {
+        const first = new Date(viewYear, viewMonth, 1);
+        const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
+        const firstWeekday = first.getDay();
+        const monthName = first.toLocaleDateString(undefined, { month: "long", year: "numeric" });
+        const today = new Date();
+        const isToday = (y, m, d) => y === today.getFullYear() && m === today.getMonth() && d === today.getDate();
+        const eventsByDay = new Map();
+        for (const e of events) {
+            const d = new Date(e.start);
+            const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+            const arr = eventsByDay.get(k) || [];
+            arr.push(e);
+            eventsByDay.set(k, arr);
+        }
+        let html = `
+            <div class="cal-nav">
+                <button type="button" class="cal-nav-btn" data-nav="prev">‹</button>
+                <span class="cal-nav-title">${monthName}</span>
+                <button type="button" class="cal-nav-btn" data-nav="today">Today</button>
+                <button type="button" class="cal-nav-btn" data-nav="next">›</button>
+            </div>
+            <div class="cal-month-grid">
+                ${["S", "M", "T", "W", "T", "F", "S"].map(d => `<span class="cal-dow">${d}</span>`).join("")}`;
+        for (let i = 0; i < firstWeekday; i++)
+            html += `<span class="cal-day cal-day-blank"></span>`;
+        for (let d = 1; d <= lastDay; d++) {
+            const k = `${viewYear}-${viewMonth}-${d}`;
+            const hasEv = eventsByDay.has(k);
+            const sel = selectedDay.getFullYear() === viewYear && selectedDay.getMonth() === viewMonth && selectedDay.getDate() === d;
+            const cls = ["cal-day"];
+            if (isToday(viewYear, viewMonth, d))
+                cls.push("cal-day-today");
+            if (sel)
+                cls.push("cal-day-selected");
+            if (hasEv)
+                cls.push("cal-day-has-event");
+            html += `<button type="button" class="${cls.join(" ")}" data-day="${d}">${d}</button>`;
+        }
+        html += `</div>`;
+        monthEl.innerHTML = html;
+        monthEl.querySelectorAll("[data-day]").forEach(b => {
+            b.addEventListener("click", () => {
+                selectedDay = new Date(viewYear, viewMonth, +b.dataset.day);
+                renderMonth();
+                renderEvents();
+            });
+        });
+        monthEl.querySelectorAll(".cal-nav-btn").forEach(b => {
+            b.addEventListener("click", () => {
+                const nav = b.dataset.nav;
+                if (nav === "prev") {
+                    if (--viewMonth < 0) {
+                        viewMonth = 11;
+                        viewYear--;
+                    }
+                }
+                else if (nav === "next") {
+                    if (++viewMonth > 11) {
+                        viewMonth = 0;
+                        viewYear++;
+                    }
+                }
+                else if (nav === "today") {
+                    const t = new Date();
+                    viewYear = t.getFullYear();
+                    viewMonth = t.getMonth();
+                    selectedDay = t;
+                }
+                renderMonth();
+                renderEvents();
+            });
+        });
+    };
+    const renderEvents = () => {
+        const dayStart = new Date(selectedDay.getFullYear(), selectedDay.getMonth(), selectedDay.getDate()).getTime();
+        const horizon = dayStart + 30 * 86400_000;
+        const upcoming = events
+            .filter(e => e.start >= dayStart && e.start < horizon)
+            .sort((a, b) => a.start - b.start);
+        if (upcoming.length === 0) {
+            eventsEl.innerHTML = `<div class="cal-empty">No events in the next 30 days from ${selectedDay.toLocaleDateString()}.</div>`;
+            return;
+        }
+        const fmt = (e) => {
+            const d = new Date(e.start);
+            const date = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+            const time = e.allDay ? "all day" : d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+            return `${date} · ${time}`;
+        };
+        eventsEl.innerHTML = upcoming.map(e => `
+            <div class="cal-event" data-id="${e.id}">
+                <div class="cal-event-time">${fmt(e)}</div>
+                <div class="cal-event-title">${escapeHtml(e.title)}</div>
+                ${e.location ? `<div class="cal-event-loc">${escapeHtml(e.location)}</div>` : ""}
+                <button type="button" class="cal-event-del" title="Delete">×</button>
+            </div>`).join("");
+        eventsEl.querySelectorAll(".cal-event").forEach(row => {
+            row.querySelector(".cal-event-del")?.addEventListener("click", () => {
+                const id = row.dataset.id;
+                events = events.filter(e => e.id !== id);
+                saveEvents(events);
+                renderEvents();
+                renderMonth();
+            });
+        });
+    };
+    panel.querySelector("#cal-new")?.addEventListener("click", () => {
+        const title = prompt("Event title:");
+        if (!title)
+            return;
+        const dateStr = prompt("Date and time (YYYY-MM-DD HH:MM, or YYYY-MM-DD for all-day):", selectedDay.toISOString().slice(0, 10) + " 09:00");
+        if (!dateStr)
+            return;
+        const allDay = !/\d{1,2}:\d{2}/.test(dateStr);
+        const start = Date.parse(dateStr.replace(" ", "T"));
+        if (isNaN(start)) {
+            alert("Couldn't parse that date.");
+            return;
+        }
+        const ev = {
+            id: `cal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            title, start, end: start + (allDay ? 86400_000 : 3600_000),
+            allDay, source: "local",
+        };
+        events.push(ev);
+        saveEvents(events);
+        renderMonth();
+        renderEvents();
+    });
+    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("#cal-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    renderMonth();
+    renderEvents();
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+//# sourceMappingURL=calendar.js.map

package/client/components/folder-tree.js

@@ -2,7 +2,7 @@
  * Folder tree component -- renders account folders with hierarchy,
  * expand/collapse, and optional unified inbox.
  */
-import { getAccounts, getFolders, moveMessage, moveMessages, markFolderRead, createFolder, renameFolder, deleteFolder, emptyFolder, setupAccount, getDeviceAccounts, getVersion } from "../lib/api-client.js";
+import { getAccounts, getFolders, moveMessage, moveMessages, markFolderRead, createFolder, renameFolder, deleteFolder, emptyFolder, setupAccount, getDeviceAccounts, getVersion, syncAccount } from "../lib/api-client.js";
 import { showContextMenu } from "./context-menu.js";
 let onFolderSelect;
 let onUnifiedInbox = null;
@@ -292,6 +292,20 @@ function renderNode(node, container, depth) {
                         alert(`Failed: ${err.message}`);
                     }
                 }, disabled: !!node.specialUse },
+            { label: "", action: () => { }, separator: true },
+            // Q57: copy IMAP path so user can paste into accounts.jsonc as
+            // a spam/sent/drafts/trash hint without retyping case-sensitively.
+            { label: "Copy folder path", action: async () => {
+                    try {
+                        await navigator.clipboard.writeText(node.path);
+                        const status = document.getElementById("status-sync");
+                        if (status)
+                            status.textContent = `Copied: ${node.path}`;
+                    }
+                    catch {
+                        prompt("Folder path:", node.path);
+                    }
+                } },
         ];
         if (isTrash || isJunk) {
             items.push({ label: "", action: () => { }, separator: true });
@@ -701,23 +715,55 @@ async function loadFolderTree(container) {
                 if (treeContainer)
                     loadFolderTree(treeContainer);
             });
-            // Collapse all on right-click
+            // Right-click: full menu instead of plain toggle (Q54).
             header.addEventListener("contextmenu", (e) => {
                 e.preventDefault();
-                // Toggle all folders for this account
-                const allExpanded = Object.entries(expandState)
-                    .filter(([k]) => k.startsWith(`${account.id}:`))
-                    .every(([, v]) => v);
-                const allFolderKeys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
-                // If some expanded, collapse all. If all collapsed, expand all.
-                const newState = !allExpanded;
-                for (const key of allFolderKeys)
-                    expandState[key] = newState;
-                expandState[accountKey] = newState;
-                saveExpandState();
-                const treeContainer = document.getElementById("folder-tree");
-                if (treeContainer)
-                    loadFolderTree(treeContainer);
+                e.stopPropagation();
+                const items = [
+                    { label: "Mark all read (account)", action: async () => {
+                            const folderRows = folders.slice();
+                            for (const f of folderRows) {
+                                try {
+                                    await markFolderRead(account.id, f.id);
+                                }
+                                catch { /* keep going */ }
+                            }
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "", action: () => { }, separator: true },
+                    { label: "Expand all folders", action: () => {
+                            const keys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
+                            for (const k of keys)
+                                expandState[k] = true;
+                            expandState[accountKey] = true;
+                            saveExpandState();
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "Collapse all folders", action: () => {
+                            const keys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
+                            for (const k of keys)
+                                expandState[k] = false;
+                            expandState[accountKey] = false;
+                            saveExpandState();
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "", action: () => { }, separator: true },
+                    { label: "Sync this account now", action: async () => {
+                            try {
+                                await syncAccount(account.id);
+                            }
+                            catch (err) {
+                                alert(`Sync failed: ${err?.message || err}`);
+                            }
+                        } },
+                ];
+                showContextMenu(e.clientX, e.clientY, items);
             });
             accountEl.appendChild(header);
             if (accountExpanded && folders.length > 0) {

package/client/components/message-list.js

@@ -266,8 +266,13 @@ export async function loadSearchResults(query, scope = "all", accountId = "", fo
 export async function loadMessages(accountId, folderId, page = 1, specialUse = "", autoSelect = true) {
     searchMode = false;
     unifiedMode = false;
-    showToInsteadOfFrom = ["sent", "drafts", "outbox"].includes(specialUse) ||
-        ["Sent", "Drafts", "Outbox", "Sent Items"].includes(specialUse);
+    // specialUse is either the DB tag ("sent"/"drafts"/"outbox") or the
+    // folder path lowercased (folder-tree fallback when tag is missing — common
+    // on Dovecot which doesn't advertise \Sent). Match both cases.
+    const su = (specialUse || "").toLowerCase();
+    showToInsteadOfFrom = su === "sent" || su === "drafts" || su === "outbox"
+        || su.endsWith("sent") || su.endsWith("drafts") || su.endsWith("outbox")
+        || su === "sent items" || su === "sent mail" || su.endsWith("/sent items") || su.endsWith(".sent items");
     currentAccountId = accountId;
     currentFolderId = folderId;
     currentPage = 1;
@@ -551,6 +556,15 @@ function appendMessages(body, accountId, items) {
             state.select(msg);
             onMessageSelect(msgAccountId, msg.uid, msg.folderId);
         });
+        // Q64: double-click → pop out the message in a floating overlay so
+        // the user can read it without losing the selected list context.
+        row.addEventListener("dblclick", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            document.dispatchEvent(new CustomEvent("mailx-popout-message", {
+                detail: { accountId: msgAccountId, uid: msg.uid, folderId: msg.folderId, subject: msg.subject }
+            }));
+        });
         row.addEventListener("dragstart", (e) => {
             if (!row.classList.contains("selected")) {
                 clearSelection();

package/client/components/message-viewer.js

@@ -432,26 +432,44 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
         const detailsEl = document.getElementById("mv-details");
         const detailsBtn = document.getElementById("mv-toggle-details");
         if (detailsEl && detailsBtn) {
+            // Q56: every row gets a Copy button so paths / IDs can be pasted
+            // into accounts.jsonc hints or bug reports.
+            const row = (label, value) => `<div class="mv-details-row"><span class="mv-details-label">${label}:</span> <span class="mv-details-value">${escapeText(value)}</span> <button type="button" class="mv-details-copy" data-copy="${escapeText(value).replace(/"/g, "&quot;")}" title="Copy">⧉</button></div>`;
             const lines = [];
             if (msg.deliveredTo)
-                lines.push(`<span class="mv-details-label">Delivered-To:</span> ${escapeText(msg.deliveredTo)}`);
+                lines.push(row("Delivered-To", msg.deliveredTo));
             if (msg.returnPath)
-                lines.push(`<span class="mv-details-label">Return-Path:</span> ${escapeText(msg.returnPath)}`);
+                lines.push(row("Return-Path", msg.returnPath));
             if (msg.messageId)
-                lines.push(`<span class="mv-details-label">Message-ID:</span> ${escapeText(msg.messageId)}`);
+                lines.push(row("Message-ID", msg.messageId));
             if (msg.listUnsubscribe)
-                lines.push(`<span class="mv-details-label">Unsubscribe:</span> ${escapeText(msg.listUnsubscribe)}`);
+                lines.push(row("Unsubscribe", msg.listUnsubscribe));
             if (msg.emlPath)
-                lines.push(`<span class="mv-details-label">EML file:</span> ${escapeText(msg.emlPath)}`);
-            lines.push(`<span class="mv-details-label">Account:</span> ${escapeText(accountId)}`);
-            lines.push(`<span class="mv-details-label">UID:</span> ${msg.uid} (folder ${msg.folderId})`);
-            detailsEl.innerHTML = lines.join("<br>");
+                lines.push(row("EML file", msg.emlPath));
+            lines.push(row("Account", accountId));
+            lines.push(row("UID", `${msg.uid} (folder ${msg.folderId})`));
+            detailsEl.innerHTML = lines.join("");
             detailsEl.hidden = true;
             detailsBtn.textContent = "Details";
             detailsBtn.onclick = () => {
                 detailsEl.hidden = !detailsEl.hidden;
                 detailsBtn.textContent = detailsEl.hidden ? "Details" : "\u2713 Details";
             };
+            // Wire copy buttons.
+            detailsEl.querySelectorAll(".mv-details-copy").forEach(btn => {
+                btn.addEventListener("click", async (e) => {
+                    e.stopPropagation();
+                    const val = btn.dataset.copy || "";
+                    try {
+                        await navigator.clipboard.writeText(val);
+                        btn.textContent = "✓";
+                        setTimeout(() => { btn.textContent = "⧉"; }, 1500);
+                    }
+                    catch {
+                        prompt("Copy:", val);
+                    }
+                });
+            });
         }
         // Remote content banner (collapsible dropdown with sender/recipient details)
         bodyEl.innerHTML = "";
@@ -795,6 +813,21 @@ ${csp}
             window.parent.postMessage({ type: "linkHover", url: "" }, "*");
         }
     });
+    // C29: right-click on a link → ask parent for the Open/Save/Copy menu.
+    document.addEventListener("contextmenu", function (e) {
+        var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
+        if (!a) return;  // let parent's body-context handler take over
+        e.preventDefault();
+        e.stopPropagation();
+        var rect = (e.target.getBoundingClientRect && e.target.getBoundingClientRect()) || { left: 0, top: 0 };
+        window.parent.postMessage({
+            type: "linkContextMenu",
+            url: a.href,
+            text: (a.textContent || "").slice(0, 100),
+            x: e.clientX, y: e.clientY,
+            iframeLeft: rect.left, iframeTop: rect.top
+        }, "*");
+    });
     // Key forwarding — Delete, Ctrl+D, arrow keys, etc. need to reach app.ts
     // even when focus is inside the sandboxed iframe. Parent-side
     // contentDocument listeners (see installPreviewControls) work on