@bobfrankston/mailx 1.0.339 → 1.0.348

package/client/app.js

@@ -151,13 +151,32 @@ const alertBanner = document.getElementById("alert-banner");
 const alertText = document.getElementById("alert-text");
 const alertDismiss = document.getElementById("alert-dismiss");
 const dismissedAlerts = new Set();
-function showAlert(message, key) {
+let alertAutoDismissTimer = null;
+function showAlert(message, key, opts) {
     if (key && dismissedAlerts.has(key))
         return;
     if (alertBanner && alertText) {
         alertText.textContent = message;
         alertBanner.hidden = false;
         alertBanner.dataset.key = key || "";
+        // Q65: auto-dismiss non-critical banners after 30s; sticky ones
+        // (acct-*, ws-error, config-restart) keep showing until user acts.
+        if (alertAutoDismissTimer) {
+            clearTimeout(alertAutoDismissTimer);
+            alertAutoDismissTimer = null;
+        }
+        const isCritical = !!opts?.sticky
+            || (key?.startsWith("acct-"))
+            || key === "ws-error"
+            || key === "config-restart";
+        if (!isCritical) {
+            alertAutoDismissTimer = setTimeout(() => {
+                if (alertBanner && alertBanner.dataset.key === (key || "")) {
+                    alertBanner.hidden = true;
+                }
+                alertAutoDismissTimer = null;
+            }, 30_000);
+        }
     }
 }
 function hideAlert() {
@@ -304,6 +323,30 @@ messageState.subscribe((change) => {
         }
     }
 });
+// Q53: per-account last-sync timestamps surfaced via the status-sync hover.
+const lastSyncByAccount = {};
+function recordAccountSync(accountId) {
+    lastSyncByAccount[accountId] = Date.now();
+    refreshSyncTooltip();
+}
+function refreshSyncTooltip() {
+    const el = document.getElementById("status-sync");
+    if (!el)
+        return;
+    const accts = Object.keys(lastSyncByAccount).sort();
+    if (accts.length === 0) {
+        el.title = "";
+        return;
+    }
+    el.title = "Last sync:\n" + accts.map(a => {
+        const ts = lastSyncByAccount[a];
+        const d = new Date(ts);
+        return `  ${a}: ${d.toLocaleTimeString()}  (${formatAge(Date.now() - ts)})`;
+    }).join("\n");
+}
+// Refresh the tooltip every 30s so the "(12m ago)" stays current even with
+// no new sync events.
+setInterval(refreshSyncTooltip, 30_000);
 // ── Auto two-line when message list is narrow ──
 const messageList = document.getElementById("message-list");
 if (messageList) {
@@ -506,7 +549,7 @@ async function openCompose(mode) {
         bodyHtml: "",
         inReplyTo: "",
         references: [],
-        accounts: accounts.map((a) => ({ id: a.id, name: a.name, email: a.email })),
+        accounts: accounts.map((a) => ({ id: a.id, name: a.name, email: a.email, signature: a.signature })),
     };
     // Auto-detect reply From: if the message was delivered to an identity address
     // (an alias on the account's domain, or the explicit `identityDomains` list
@@ -938,6 +981,21 @@ document.getElementById("rail-unified")?.addEventListener("click", () => {
         || document.getElementById("ft-all-inboxes");
     unified?.click();
 });
+document.getElementById("rail-contacts")?.addEventListener("click", async () => {
+    const { openAddressBook } = await import("./components/address-book.js");
+    openAddressBook();
+    setRailActive("rail-contacts");
+});
+document.getElementById("rail-calendar")?.addEventListener("click", async () => {
+    const { openCalendar } = await import("./components/calendar.js");
+    openCalendar();
+    setRailActive("rail-calendar");
+});
+document.getElementById("rail-tasks")?.addEventListener("click", async () => {
+    const { openTasks } = await import("./components/tasks.js");
+    openTasks();
+    setRailActive("rail-tasks");
+});
 document.getElementById("rail-settings")?.addEventListener("click", () => {
     document.getElementById("btn-settings")?.click();
 });
@@ -985,9 +1043,14 @@ function doSearch(immediate = false) {
     }
     if (query.length < 2 && !immediate)
         return;
-    const scope = searchScope?.value || "all";
+    // P20: orthogonal "Server" checkbox. When checked, scope switches to
+    // "server" which spans all folders on all accounts. Local scope dropdown
+    // is unchanged (all/current) for the local-only case.
+    const serverCheck = document.getElementById("search-server-too");
+    const localScope = searchScope?.value || "all";
+    const effectiveScope = serverCheck?.checked ? "server" : localScope;
     // "This folder" scope: instant client-side filter on debounce, server search on Enter
-    if (scope === "current" && !immediate) {
+    if (effectiveScope === "current" && !immediate) {
         // Client-side filter of visible rows
         const body = document.getElementById("ml-body");
         if (body) {
@@ -999,7 +1062,7 @@ function doSearch(immediate = false) {
         }
         return;
     }
-    loadSearchResults(query, scope, currentAccountId, currentFolderId);
+    loadSearchResults(query, effectiveScope, currentAccountId, currentFolderId);
     setTitle(`mailx - Search: ${query}`);
 }
 // Track current folder for scoped search
@@ -1098,41 +1161,163 @@ window.addEventListener("message", (e) => {
             window.open(url, "_blank", "noopener,noreferrer");
         }
     }
+    if (e.data?.type === "linkContextMenu") {
+        // C29: right-click in body iframe → Open / Save / Copy URL menu.
+        // Iframe's clientX/Y is relative to the iframe; translate to viewport.
+        let iframeRect = null;
+        for (const f of Array.from(document.querySelectorAll("iframe"))) {
+            if (f.contentWindow === e.source) {
+                iframeRect = f.getBoundingClientRect();
+                break;
+            }
+        }
+        const x = (iframeRect?.left || 0) + (e.data.x || 0);
+        const y = (iframeRect?.top || 0) + (e.data.y || 0);
+        const url = e.data.url || "";
+        // Find a sensible filename for the Save action.
+        const guessName = (() => {
+            try {
+                const u = new URL(url);
+                const last = u.pathname.split("/").pop() || "";
+                return last && last.includes(".") ? last : "";
+            }
+            catch {
+                return "";
+            }
+        })();
+        const items = [
+            { label: "Open in browser", action: () => {
+                    window.open(url, "_blank", "noopener,noreferrer");
+                } },
+            { label: guessName ? `Save "${guessName}"…` : "Save link as…", action: () => {
+                    // Trigger a download via anchor with download attr.
+                    const a = document.createElement("a");
+                    a.href = url;
+                    if (guessName)
+                        a.download = guessName;
+                    else
+                        a.download = "";
+                    a.style.display = "none";
+                    document.body.appendChild(a);
+                    a.click();
+                    setTimeout(() => a.remove(), 1000);
+                } },
+            { label: "Copy URL", action: async () => {
+                    try {
+                        await navigator.clipboard.writeText(url);
+                    }
+                    catch {
+                        prompt("URL:", url);
+                    }
+                } },
+            { label: "Copy link text", action: async () => {
+                    try {
+                        await navigator.clipboard.writeText(e.data.text || url);
+                    }
+                    catch {
+                        prompt("Text:", e.data.text || url);
+                    }
+                } },
+        ];
+        // Build a tiny inline menu (showContextMenu would do but it's in components/).
+        const menu = document.createElement("div");
+        menu.style.cssText = `position:fixed;z-index:2400;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.2);padding:4px 0;font-size:13px;min-width:180px;`;
+        menu.style.left = `${Math.min(x, window.innerWidth - 200)}px`;
+        menu.style.top = `${Math.min(y, window.innerHeight - 200)}px`;
+        for (const it of items) {
+            const row = document.createElement("div");
+            row.textContent = it.label;
+            row.style.cssText = `padding:6px 12px;cursor:pointer;`;
+            row.addEventListener("mouseenter", () => row.style.background = "var(--color-bg-hover)");
+            row.addEventListener("mouseleave", () => row.style.background = "");
+            row.addEventListener("click", () => { menu.remove(); it.action(); });
+            menu.appendChild(row);
+        }
+        document.body.appendChild(menu);
+        const dismiss = () => { menu.remove(); document.removeEventListener("mousedown", dismiss); document.removeEventListener("keydown", dismiss); };
+        setTimeout(() => {
+            document.addEventListener("mousedown", dismiss);
+            document.addEventListener("keydown", dismiss);
+        }, 0);
+        return;
+    }
+    if (e.data?.type === "mailx-send-error") {
+        // Send failed AFTER compose closed (fire-and-forget model). Surface in
+        // the status bar so the user sees something instead of the silence.
+        const statusSync = document.getElementById("status-sync");
+        if (statusSync) {
+            statusSync.textContent = `Send failed: ${e.data.message}`;
+            statusSync.style.color = "oklch(0.65 0.2 25)";
+        }
+        return;
+    }
     if (e.data?.type === "linkHover") {
+        // Cancel any pending show — every hoverover/hoverout from the iframe
+        // triggers this branch. Without the timer, the popover appears
+        // instantly and lingers when the user moves to do anything else,
+        // including punching through the compose overlay (which sits at
+        // z-index 1000 — popover was at 10000, hence the bug in the
+        // screenshot). Now: 500ms hover delay; suppressed entirely when
+        // any overlay (compose, modal) is open; auto-dismissed on click,
+        // scroll, blur, or any keypress.
+        const w = window;
+        if (w._linkHoverShowTimer) {
+            clearTimeout(w._linkHoverShowTimer);
+            w._linkHoverShowTimer = null;
+        }
         let pop = document.getElementById("link-hover-popover");
+        const hidePop = () => { if (pop)
+            pop.style.display = "none"; };
         if (!e.data.url) {
-            if (pop)
-                pop.style.display = "none";
+            hidePop();
+            return;
         }
-        else {
+        // Suppress when compose / modal overlay is up — user shouldn't see
+        // a tooltip for a link they can't reach without dismissing first.
+        if (document.querySelector(".compose-overlay, .mailx-modal-backdrop")) {
+            hidePop();
+            return;
+        }
+        const data = e.data;
+        const source = e.source;
+        w._linkHoverShowTimer = setTimeout(() => {
+            // Re-check overlay state at fire time — overlay may have appeared
+            // during the 500ms wait.
+            if (document.querySelector(".compose-overlay, .mailx-modal-backdrop"))
+                return;
             if (!pop) {
                 pop = document.createElement("div");
                 pop.id = "link-hover-popover";
-                pop.style.cssText = "position:fixed;z-index:10000;max-width:520px;padding:6px 10px;background:var(--color-surface,#fff);color:var(--color-text,#000);border:1px solid var(--color-border,#888);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.18);font-size:12px;line-height:1.4;word-break:break-all;pointer-events:none;";
+                // z-index 500 — above the message body iframe (no z-index)
+                // but BELOW the compose overlay (z-index 1000) and modals (2000).
+                pop.style.cssText = "position:fixed;z-index:500;max-width:520px;padding:6px 10px;background:var(--color-surface,#fff);color:var(--color-text,#000);border:1px solid var(--color-border,#888);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.18);font-size:12px;line-height:1.4;word-break:break-all;pointer-events:none;";
                 document.body.appendChild(pop);
+                // One-time dismissers on the popover lifetime.
+                const dismiss = () => hidePop();
+                document.addEventListener("mousedown", dismiss, true);
+                document.addEventListener("scroll", dismiss, true);
+                document.addEventListener("keydown", dismiss, true);
+                window.addEventListener("blur", dismiss);
             }
-            pop.textContent = e.data.url;
+            pop.textContent = data.url;
             pop.style.display = "block";
-            // Locate the iframe whose contentWindow matches e.source so we can
-            // translate iframe-local rect coords into viewport coords.
             let iframeRect = null;
             for (const f of Array.from(document.querySelectorAll("iframe"))) {
-                if (f.contentWindow === e.source) {
+                if (f.contentWindow === source) {
                     iframeRect = f.getBoundingClientRect();
                     break;
                 }
             }
-            const r = e.data.rect;
+            const r = data.rect;
             if (iframeRect && r) {
                 const x = Math.max(4, Math.min(window.innerWidth - 528, iframeRect.left + r.left));
                 let y = iframeRect.top + r.bottom + 4;
-                // If it would clip bottom, flip above the link
                 if (y + 60 > window.innerHeight)
                     y = Math.max(4, iframeRect.top + r.top - 60);
                 pop.style.left = x + "px";
                 pop.style.top = y + "px";
             }
-        }
+        }, 500);
     }
     if (e.data?.type === "previewKey" && typeof e.data.key === "string") {
         // Re-dispatch as a real keydown on document so the hotkey handler
@@ -1222,6 +1407,8 @@ onWsEvent((event) => {
             // After sync completes, refresh the folder tree (critical for first-run on Android
             // where folders don't exist until sync fetches them from Gmail API)
             refreshFolderTree();
+            // Q53: track per-account last-sync timestamp for the status-bar hover.
+            recordAccountSync(event.accountId);
             break;
         case "folderSynced":
             // Per-folder timestamps — drives the tooltip + freshness dot.
@@ -1335,6 +1522,9 @@ onWsEvent((event) => {
                 statusSync.textContent = `Error: ${event.message}`;
             showAlert(event.message, "ws-error");
             break;
+        case "outboxStatus":
+            renderOutboxStatus(event);
+            break;
         case "accountError": {
             // Show actual error + hint in banner
             const msg = `${event.accountId}: ${event.error}`;
@@ -1446,8 +1636,15 @@ document.addEventListener("keydown", (e) => {
             mlBody.querySelectorAll(".ml-row").forEach(r => r.classList.add("selected"));
         }
     }
-    // Ctrl+D or Delete = Delete selected messages
+    // Ctrl+D or Delete = Delete selected messages.
+    // P15: don't hijack Delete inside text inputs / textareas / contenteditable
+    // — JSONC editor's Delete key was being eaten because we always preventDefault'd.
     if ((e.ctrlKey && e.key === "d") || e.key === "Delete") {
+        const t = e.target;
+        const tag = t?.tagName;
+        const editable = t?.isContentEditable;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || editable)
+            return;
         e.preventDefault();
         deleteSelectedMessages();
     }
@@ -1488,26 +1685,36 @@ document.addEventListener("keydown", (e) => {
                 row.classList.toggle("unread", !newFlags.includes("\\Seen"));
         }).catch(() => { });
     }
-    // Arrow keys — navigate message list
-    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+    // Arrow keys + Home/End/PgUp/PgDn — navigate message list (Q58).
+    if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(e.key)) {
         const active = document.activeElement;
         if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.tagName === "SELECT"))
             return;
         const body = document.getElementById("ml-body");
         if (!body)
             return;
-        const selected = body.querySelector(".ml-row.selected");
-        if (!selected) {
-            const first = body.querySelector(".ml-row");
-            if (first)
-                first.click();
+        const rows = Array.from(body.querySelectorAll(".ml-row"));
+        if (rows.length === 0)
             return;
-        }
-        const next = (e.key === "ArrowDown" ? selected.nextElementSibling : selected.previousElementSibling);
-        if (next?.classList.contains("ml-row")) {
+        const selected = body.querySelector(".ml-row.selected");
+        const idx = selected ? rows.indexOf(selected) : -1;
+        let target;
+        if (e.key === "ArrowDown")
+            target = rows[idx + 1] || rows[idx];
+        else if (e.key === "ArrowUp")
+            target = rows[Math.max(0, idx - 1)];
+        else if (e.key === "Home")
+            target = rows[0];
+        else if (e.key === "End")
+            target = rows[rows.length - 1];
+        else if (e.key === "PageDown")
+            target = rows[Math.min(rows.length - 1, idx + 10)];
+        else if (e.key === "PageUp")
+            target = rows[Math.max(0, idx - 10)];
+        if (target && (!selected || target !== selected)) {
             e.preventDefault();
-            next.click();
-            next.scrollIntoView({ block: "nearest" });
+            target.click();
+            target.scrollIntoView({ block: "nearest" });
         }
     }
 });
@@ -1603,6 +1810,32 @@ document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () =>
         settingsDropdown.hidden = true;
     await openJsoncEditor("accounts.jsonc");
 });
+// Q61: open ~/.mailx in OS file explorer.
+document.getElementById("btn-open-mailx-dir")?.addEventListener("click", async () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    try {
+        const { openLocalPath } = await import("./lib/api-client.js");
+        await openLocalPath("config");
+    }
+    catch (e) {
+        alert(`Couldn't open folder: ${e?.message || e}`);
+    }
+});
+// Q62: open today's log file.
+document.getElementById("btn-open-log")?.addEventListener("click", async () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown)
+        settingsDropdown.hidden = true;
+    try {
+        const { openLocalPath } = await import("./lib/api-client.js");
+        await openLocalPath("log");
+    }
+    catch (e) {
+        alert(`Couldn't open log: ${e?.message || e}`);
+    }
+});
 async function openJsoncEditor(initialFile) {
     const { readJsoncFile, writeJsoncFile, readConfigHelp } = await import("./lib/api-client.js");
     const backdrop = document.createElement("div");
@@ -1991,8 +2224,12 @@ async function openAboutDialog() {
         const storage = v.storage || {};
         const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
         const platform = isApp ? (mailxapi?.platform || "app") : "browser";
+        const versionText = v.version ? `v${v.version}` : "unknown";
+        const versionHtml = v.version
+            ? `<a href="https://github.com/BobFrankston/mailx/releases/tag/v${v.version}" target="_blank" rel="noopener">${versionText}</a>`
+            : versionText;
         const rows = [
-            ["Version", v.version ? `v${v.version}` : "unknown"],
+            ["Version", versionHtml],
             ["Platform", platform],
             ["Storage", storage.provider || "local"],
         ];
@@ -2004,9 +2241,11 @@ async function openAboutDialog() {
         rows.push(["User agent", navigator.userAgent]);
         rows.push(["Screen", `${screen.width}×${screen.height}`]);
         rows.push(["Window", `${window.innerWidth}×${window.innerHeight}`]);
+        // Version row contains an anchor tag; all other rows are plain text
+        // and must be escaped. Treat row[0]==="Version" as pre-formatted HTML.
         body.innerHTML = `
             <dl class="mailx-about-dl">
-              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${escapeHtml(val)}</dd>`).join("")}
+              ${rows.map(([k, val]) => `<dt>${k}</dt><dd>${k === "Version" ? val : escapeHtml(val)}</dd>`).join("")}
             </dl>
             ${(accounts || []).length ? `
             <div class="mailx-about-accounts">
@@ -2116,7 +2355,15 @@ function persistAi(mutator) {
 }
 optAutocomplete?.addEventListener("change", () => persistAi((ac) => { ac.enabled = optAutocomplete.checked; }));
 optAiTranslate?.addEventListener("change", () => persistAi((ac) => { ac.translateEnabled = optAiTranslate.checked; }));
-optAiProofread?.addEventListener("change", () => persistAi((ac) => { ac.proofreadEnabled = optAiProofread.checked; }));
+optAiProofread?.addEventListener("change", () => {
+    persistAi((ac) => { ac.proofreadEnabled = optAiProofread.checked; });
+    // Mirror to localStorage so the compose editor (separate page/iframe with
+    // its own getSettings cycle) can read it synchronously.
+    try {
+        localStorage.setItem("mailx-ai-proofread-enabled", String(optAiProofread.checked));
+    }
+    catch { /* */ }
+});
 const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 // Wait for server ready signal, then fetch version
 const versionPromise = getVersion();
@@ -2208,6 +2455,140 @@ else
             }
         }
     }, 5000);
+// ── Outbox queue indicator (status-queue span) ──
+// Event-driven in IPC mode (service pushes outboxStatus on every mutation).
+// Plus a 15s poll safety net for both modes so a missed event doesn't leave
+// the user staring at stale numbers. Idempotent — renderOutboxStatus just
+// overwrites the text.
+function renderOutboxStatus(s) {
+    const el = document.getElementById("status-queue");
+    if (!el)
+        return;
+    if (!s || !s.total || s.total === 0) {
+        el.textContent = "";
+        el.title = "";
+        el.style.color = "";
+        return;
+    }
+    const parts = [`✉ ${s.total} queued`];
+    if (s.claimed > 0)
+        parts.push(`${s.claimed} sending`);
+    if (s.retrying > 0)
+        parts.push(`${s.retrying} retrying (×${s.maxAttempts})`);
+    if (s.oldestAgeSec >= 60) {
+        const age = s.oldestAgeSec >= 3600
+            ? `${Math.floor(s.oldestAgeSec / 3600)}h`
+            : `${Math.floor(s.oldestAgeSec / 60)}m`;
+        parts.push(`oldest ${age}`);
+    }
+    el.textContent = parts.join(" · ");
+    const perAcct = s.perAccount || {};
+    const detail = Object.keys(perAcct).sort().map(a => `${a}: ${perAcct[a].total} total, ${perAcct[a].claimed} sending, ${perAcct[a].retrying} retrying`).join("\n");
+    el.title = detail || "";
+    // Orange when retrying, red when stuck >5min, else muted.
+    el.style.color = s.oldestAgeSec > 300 ? "oklch(0.65 0.2 25)"
+        : s.retrying > 0 ? "oklch(0.75 0.15 60)"
+            : "";
+}
+setInterval(async () => {
+    try {
+        const { getOutboxStatus } = await import("./lib/api-client.js");
+        const s = await getOutboxStatus();
+        renderOutboxStatus(s);
+    }
+    catch { /* service unreachable */ }
+}, 15000);
+// First read on startup so the bar isn't blank.
+(async () => {
+    try {
+        const { getOutboxStatus } = await import("./lib/api-client.js");
+        renderOutboxStatus(await getOutboxStatus());
+    }
+    catch { /* */ }
+})();
+// Q64: pop-out a message into a floating overlay (real-OS-window pending C44).
+document.addEventListener("mailx-popout-message", (async (e) => {
+    const { accountId, uid, folderId, subject } = e.detail || {};
+    if (!accountId || !uid)
+        return;
+    const { getMessage } = await import("./lib/api-client.js");
+    let msg;
+    try {
+        msg = await getMessage(accountId, uid, false, folderId);
+    }
+    catch (err) {
+        alert(`Couldn't load message: ${err?.message || err}`);
+        return;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.className = "popout-overlay";
+    wrapper.style.cssText = "position:fixed;top:5vh;right:5vw;width:min(900px,60vw);height:min(800px,80vh);z-index:1500;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,0.3);display:flex;flex-direction:column;resize:both;overflow:hidden;";
+    const header = document.createElement("div");
+    header.style.cssText = "display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-bg-surface);border-bottom:1px solid var(--color-border);font-weight:600;cursor:move;";
+    const title = document.createElement("span");
+    title.textContent = subject || "(no subject)";
+    title.style.cssText = "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+    const closeBtn = document.createElement("button");
+    closeBtn.textContent = "×";
+    closeBtn.style.cssText = "background:none;border:none;font-size:1.4rem;cursor:pointer;padding:0 8px;";
+    closeBtn.addEventListener("click", () => wrapper.remove());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const meta = document.createElement("div");
+    meta.style.cssText = "padding:8px 12px;border-bottom:1px solid var(--color-border);font-size:0.9rem;color:var(--color-text-muted);";
+    meta.innerHTML = `<div><b>From:</b> ${escapeHtmlBasic(msg.from?.name || "")} &lt;${escapeHtmlBasic(msg.from?.address || "")}&gt;</div>
+                      <div><b>To:</b> ${(msg.to || []).map((a) => escapeHtmlBasic(`${a.name || ""} <${a.address}>`)).join(", ")}</div>
+                      ${msg.cc?.length ? `<div><b>Cc:</b> ${msg.cc.map((a) => escapeHtmlBasic(`${a.name || ""} <${a.address}>`)).join(", ")}</div>` : ""}
+                      <div><b>Date:</b> ${new Date(msg.date).toLocaleString()}</div>`;
+    const body = document.createElement("iframe");
+    body.style.cssText = "flex:1;border:none;width:100%;background:#fff;";
+    body.sandbox.add("allow-same-origin");
+    wrapper.appendChild(header);
+    wrapper.appendChild(meta);
+    wrapper.appendChild(body);
+    document.body.appendChild(wrapper);
+    body.srcdoc = msg.bodyHtml || `<pre style="white-space:pre-wrap;font-family:ui-sans-serif">${escapeHtmlBasic(msg.bodyText || "(no body)")}</pre>`;
+    // Drag-to-move.
+    let dragX = 0, dragY = 0, dragging = false;
+    header.addEventListener("mousedown", (de) => {
+        if (de.target.tagName === "BUTTON")
+            return;
+        dragging = true;
+        const rect = wrapper.getBoundingClientRect();
+        dragX = de.clientX - rect.left;
+        dragY = de.clientY - rect.top;
+        de.preventDefault();
+    });
+    document.addEventListener("mousemove", (de) => {
+        if (!dragging)
+            return;
+        wrapper.style.left = `${de.clientX - dragX}px`;
+        wrapper.style.top = `${de.clientY - dragY}px`;
+        wrapper.style.right = "auto";
+    });
+    document.addEventListener("mouseup", () => { dragging = false; });
+}));
+function escapeHtmlBasic(s) {
+    return (s || "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+// Click the status-queue pill to open the outbox view (pink-row list).
+document.getElementById("status-queue")?.addEventListener("click", async () => {
+    try {
+        const { openOutboxView } = await import("./components/outbox-view.js");
+        openOutboxView();
+    }
+    catch (e) {
+        console.error("Outbox view failed:", e);
+    }
+});
+// Make it look clickable.
+(() => {
+    const el = document.getElementById("status-queue");
+    if (el) {
+        el.style.cursor = "pointer";
+        el.title = "Click to view queued messages";
+    }
+})();
 console.log("mailx client initialized, location:", location.href);
 updateNewMessageCount();
 // ── Midnight refresh — update date display when day changes ──