@bobfrankston/mailx 1.0.1

package/client/components/folder-tree.js

@@ -0,0 +1,286 @@
+/**
+ * Folder tree component -- renders account folders with hierarchy,
+ * expand/collapse, and optional unified inbox.
+ */
+import { getAccounts, getFolders } from "../lib/api-client.js";
+let onFolderSelect;
+let onUnifiedInbox = null;
+let selectedElement;
+let selectedAccountId = null;
+let selectedFolderId = null;
+// Persist expand/collapse state in localStorage
+const expandState = JSON.parse(localStorage.getItem("mailx-folders-expanded") || "{}");
+function saveExpandState() {
+    localStorage.setItem("mailx-folders-expanded", JSON.stringify(expandState));
+}
+/** Build a tree from flat folder list using delimiter */
+function buildTree(folders, delimiter, accountId) {
+    const root = [];
+    const byPath = {};
+    // Sort by path so parents come before children
+    const sorted = [...folders].sort((a, b) => a.path.localeCompare(b.path));
+    for (const f of sorted) {
+        const node = {
+            id: f.id,
+            accountId: f.accountId,
+            path: f.path,
+            name: f.name,
+            specialUse: f.specialUse,
+            delimiter: f.delimiter || delimiter,
+            unreadCount: f.unreadCount || 0,
+            totalCount: f.totalCount || 0,
+            children: [],
+        };
+        byPath[f.path] = node;
+        // Find parent by stripping the last segment
+        const lastDelim = f.path.lastIndexOf(delimiter);
+        if (lastDelim > 0) {
+            const parentPath = f.path.substring(0, lastDelim);
+            let parent = byPath[parentPath];
+            if (!parent) {
+                // Create virtual parent for non-selectable folders (e.g., "Added2")
+                const parentName = parentPath.split(delimiter).pop() || parentPath;
+                parent = {
+                    id: -1, // virtual, not selectable
+                    accountId,
+                    path: parentPath,
+                    name: parentName,
+                    specialUse: "",
+                    delimiter,
+                    unreadCount: 0,
+                    totalCount: 0,
+                    children: [],
+                };
+                byPath[parentPath] = parent;
+                // Insert the virtual parent into the tree
+                const grandParentDelim = parentPath.lastIndexOf(delimiter);
+                if (grandParentDelim > 0) {
+                    const grandParent = byPath[parentPath.substring(0, grandParentDelim)];
+                    if (grandParent) {
+                        grandParent.children.push(parent);
+                    }
+                    else {
+                        root.push(parent);
+                    }
+                }
+                else {
+                    root.push(parent);
+                }
+            }
+            parent.children.push(node);
+        }
+        else {
+            root.push(node);
+        }
+    }
+    return root;
+}
+/** Sort: INBOX first, then special folders, then alphabetical */
+function sortFolders(nodes) {
+    const specialOrder = { inbox: 0, drafts: 1, sent: 2, outbox: 3, trash: 4, junk: 5, archive: 6 };
+    nodes.sort((a, b) => {
+        const aOrder = specialOrder[a.specialUse] ?? (a.path.toLowerCase() === "outbox" ? 3 : 99);
+        const bOrder = specialOrder[b.specialUse] ?? (b.path.toLowerCase() === "outbox" ? 3 : 99);
+        if (aOrder !== bOrder)
+            return aOrder - bOrder;
+        return a.name.localeCompare(b.name);
+    });
+    for (const n of nodes) {
+        if (n.children.length > 0)
+            sortFolders(n.children);
+    }
+}
+/** Render a folder node and its children recursively */
+function renderNode(node, container, depth) {
+    const hasChildren = node.children.length > 0;
+    const expandKey = `${node.accountId}:${node.path}`;
+    const isExpanded = expandState[expandKey] === true; // default collapsed
+    const folderEl = document.createElement("div");
+    folderEl.className = "ft-folder";
+    folderEl.dataset.accountId = node.accountId;
+    folderEl.dataset.folderId = String(node.id);
+    folderEl.style.paddingLeft = `${depth * 16 + 8}px`;
+    // Expand/collapse toggle
+    const toggle = document.createElement("span");
+    toggle.className = "ft-toggle";
+    if (hasChildren) {
+        toggle.textContent = isExpanded ? "▾" : "▸";
+        toggle.addEventListener("click", (e) => {
+            e.stopPropagation();
+            expandState[expandKey] = !isExpanded;
+            saveExpandState();
+            // Re-render the tree
+            const treeContainer = document.getElementById("folder-tree");
+            if (treeContainer)
+                loadFolderTree(treeContainer);
+        });
+    }
+    else {
+        toggle.textContent = " ";
+    }
+    folderEl.appendChild(toggle);
+    const nameSpan = document.createElement("span");
+    nameSpan.className = "ft-folder-name";
+    nameSpan.textContent = node.name;
+    folderEl.appendChild(nameSpan);
+    if (node.unreadCount > 0) {
+        const badge = document.createElement("span");
+        badge.className = "ft-badge";
+        badge.textContent = String(node.unreadCount);
+        folderEl.appendChild(badge);
+    }
+    folderEl.addEventListener("click", () => {
+        if (node.id === -1) {
+            // Virtual parent — toggle expand instead of selecting
+            expandState[expandKey] = !isExpanded;
+            saveExpandState();
+            const treeContainer = document.getElementById("folder-tree");
+            if (treeContainer)
+                loadFolderTree(treeContainer);
+            return;
+        }
+        if (selectedElement)
+            selectedElement.classList.remove("selected");
+        folderEl.classList.add("selected");
+        selectedElement = folderEl;
+        selectedAccountId = node.accountId;
+        selectedFolderId = node.id;
+        onFolderSelect(node.accountId, node.id, node.name, node.specialUse || node.path.toLowerCase());
+    });
+    container.appendChild(folderEl);
+    // Render children if expanded
+    if (hasChildren && isExpanded) {
+        for (const child of node.children) {
+            renderNode(child, container, depth + 1);
+        }
+    }
+}
+export function initFolderTree(container, handler, unifiedHandler) {
+    onFolderSelect = handler;
+    onUnifiedInbox = unifiedHandler || null;
+    loadFolderTree(container);
+}
+async function loadFolderTree(container) {
+    container.innerHTML = "";
+    try {
+        const accounts = await getAccounts();
+        if (accounts.length === 0) {
+            container.innerHTML = `<div class="folder-loading">No accounts configured.<br>Edit ~/.mailx/settings.jsonc</div>`;
+            return;
+        }
+        // Unified Inbox (if multiple accounts)
+        if (accounts.length > 1) {
+            const unifiedEl = document.createElement("div");
+            unifiedEl.className = "ft-folder ft-unified";
+            unifiedEl.innerHTML = `<span class="ft-toggle"> </span><span class="ft-folder-name">All Inboxes</span>`;
+            unifiedEl.addEventListener("click", () => {
+                if (selectedElement)
+                    selectedElement.classList.remove("selected");
+                unifiedEl.classList.add("selected");
+                selectedElement = unifiedEl;
+                selectedAccountId = null;
+                selectedFolderId = -1;
+                if (onUnifiedInbox)
+                    onUnifiedInbox();
+            });
+            container.appendChild(unifiedEl);
+        }
+        for (const account of accounts) {
+            const accountEl = document.createElement("div");
+            accountEl.className = "ft-account";
+            const accountKey = `account:${account.id}`;
+            const accountExpanded = expandState[accountKey] !== false; // accounts default expanded
+            const header = document.createElement("div");
+            header.className = "ft-account-header";
+            header.textContent = `${accountExpanded ? "▾" : "▸"} ${account.name}`;
+            header.addEventListener("click", () => {
+                expandState[accountKey] = !accountExpanded;
+                saveExpandState();
+                const treeContainer = document.getElementById("folder-tree");
+                if (treeContainer)
+                    loadFolderTree(treeContainer);
+            });
+            // Collapse all on right-click
+            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 allFolders = 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 allFolders)
+                    expandState[key] = newState;
+                expandState[accountKey] = newState;
+                saveExpandState();
+                const treeContainer = document.getElementById("folder-tree");
+                if (treeContainer)
+                    loadFolderTree(treeContainer);
+            });
+            accountEl.appendChild(header);
+            if (accountExpanded) {
+                const allFolders = await getFolders(account.id);
+                const delimiter = allFolders[0]?.delimiter || ".";
+                const tree = buildTree(allFolders, delimiter, account.id);
+                sortFolders(tree);
+                for (const node of tree) {
+                    renderNode(node, accountEl, 1);
+                }
+            }
+            container.appendChild(accountEl);
+        }
+        // Re-select previous folder on refresh, or auto-select Inbox on first load
+        const allFolderEls = container.querySelectorAll('.ft-folder');
+        let target = null;
+        if (selectedAccountId && selectedFolderId !== null && selectedFolderId >= 0) {
+            for (const f of allFolderEls) {
+                const el = f;
+                if (el.dataset.accountId === selectedAccountId && el.dataset.folderId === String(selectedFolderId)) {
+                    el.classList.add("selected");
+                    selectedElement = el;
+                    target = el;
+                    break;
+                }
+            }
+        }
+        if (!target) {
+            // Prefer unified inbox if available, otherwise pick inbox with most unread
+            const unified = container.querySelector('.ft-unified');
+            if (unified) {
+                target = unified;
+            }
+            else {
+                // Find all inboxes, pick the one with a badge (unread count)
+                let bestInbox = null;
+                let bestCount = -1;
+                for (const f of allFolderEls) {
+                    const name = f.querySelector('.ft-folder-name')?.textContent ?? "";
+                    if (name.toLowerCase() === "inbox") {
+                        const badge = f.querySelector('.ft-badge');
+                        const count = badge ? parseInt(badge.textContent || "0") : 0;
+                        if (count > bestCount) {
+                            bestCount = count;
+                            bestInbox = f;
+                        }
+                    }
+                }
+                target = bestInbox;
+            }
+            if (!target && allFolderEls.length > 0)
+                target = allFolderEls[0];
+            if (target)
+                target.click();
+        }
+    }
+    catch (e) {
+        container.innerHTML = `<div class="folder-loading">Error loading folders: ${e.message}</div>`;
+    }
+}
+/** Refresh folder tree (e.g., after sync) */
+export function refreshFolderTree() {
+    const container = document.getElementById("folder-tree");
+    if (container)
+        loadFolderTree(container);
+}
+//# sourceMappingURL=folder-tree.js.map

package/client/components/message-list.js

@@ -0,0 +1,230 @@
+/**
+ * Message list component -- renders paginated message rows.
+ * Loads more messages on scroll.
+ */
+import { getMessages, getUnifiedInbox, searchMessages } from "../lib/api-client.js";
+let onMessageSelect;
+let currentAccountId;
+let currentFolderId;
+let selectedRow;
+let currentPage;
+let totalMessages;
+let loading = false;
+let unifiedMode = false;
+let searchMode = false;
+let currentSearchQuery = "";
+let showToInsteadOfFrom = false;
+const timeFmt = { hour: "2-digit", minute: "2-digit", hour12: false };
+const dateFmt = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
+const dateFmtSameYear = { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false };
+export function initMessageList(handler) {
+    onMessageSelect = handler;
+    // Infinite scroll
+    const body = document.getElementById("ml-body");
+    if (body) {
+        body.addEventListener("scroll", () => {
+            if (loading)
+                return;
+            const nearBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 200;
+            if (nearBottom && currentPage * 50 < totalMessages) {
+                loadMoreMessages();
+            }
+        });
+    }
+}
+/** Reload the currently displayed folder */
+export function reloadCurrentFolder() {
+    if (searchMode) {
+        loadSearchResults(currentSearchQuery);
+    }
+    else if (unifiedMode) {
+        loadUnifiedInbox();
+    }
+    else if (currentAccountId && currentFolderId) {
+        loadMessages(currentAccountId, currentFolderId);
+    }
+}
+/** Load unified inbox (all accounts) */
+export async function loadUnifiedInbox() {
+    unifiedMode = true;
+    currentPage = 1;
+    totalMessages = 0;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    body.innerHTML = `<div class="ml-empty">Loading...</div>`;
+    try {
+        const result = await getUnifiedInbox(1);
+        totalMessages = result.total;
+        if (result.items.length === 0) {
+            body.innerHTML = `<div class="ml-empty">No messages</div>`;
+            return;
+        }
+        body.innerHTML = "";
+        appendMessages(body, "", result.items);
+    }
+    catch (e) {
+        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
+    }
+}
+/** Load search results */
+export async function loadSearchResults(query) {
+    searchMode = true;
+    unifiedMode = false;
+    currentSearchQuery = query;
+    currentPage = 1;
+    totalMessages = 0;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    body.innerHTML = `<div class="ml-empty">Searching...</div>`;
+    try {
+        const result = await searchMessages(query, 1);
+        totalMessages = result.total;
+        if (result.items.length === 0) {
+            body.innerHTML = `<div class="ml-empty">No results for "${query}"</div>`;
+            return;
+        }
+        body.innerHTML = "";
+        appendMessages(body, "", result.items);
+    }
+    catch (e) {
+        body.innerHTML = `<div class="ml-empty">Search error: ${e.message}</div>`;
+    }
+}
+export async function loadMessages(accountId, folderId, page = 1, specialUse = "") {
+    searchMode = false;
+    unifiedMode = false;
+    showToInsteadOfFrom = ["sent", "drafts", "outbox"].includes(specialUse) ||
+        ["Sent", "Drafts", "Outbox", "Sent Items"].includes(specialUse);
+    currentAccountId = accountId;
+    currentFolderId = folderId;
+    currentPage = 1;
+    totalMessages = 0;
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    // Update header label
+    const fromHeader = document.querySelector(".ml-col-from");
+    if (fromHeader)
+        fromHeader.textContent = showToInsteadOfFrom ? "To" : "From";
+    body.innerHTML = `<div class="ml-empty">Loading...</div>`;
+    try {
+        const result = await getMessages(accountId, folderId, 1);
+        totalMessages = result.total;
+        if (result.items.length === 0) {
+            body.innerHTML = `<div class="ml-empty">No messages</div>`;
+            return;
+        }
+        body.innerHTML = "";
+        appendMessages(body, accountId, result.items);
+    }
+    catch (e) {
+        body.innerHTML = `<div class="ml-empty">Error: ${e.message}</div>`;
+    }
+}
+async function loadMoreMessages() {
+    const body = document.getElementById("ml-body");
+    if (!body)
+        return;
+    loading = true;
+    currentPage++;
+    try {
+        const result = searchMode
+            ? await searchMessages(currentSearchQuery, currentPage)
+            : unifiedMode
+                ? await getUnifiedInbox(currentPage)
+                : await getMessages(currentAccountId, currentFolderId, currentPage);
+        appendMessages(body, unifiedMode ? "" : currentAccountId, result.items);
+    }
+    catch (e) {
+        console.error(`Load more error: ${e.message}`);
+    }
+    finally {
+        loading = false;
+    }
+}
+function appendMessages(body, accountId, items) {
+    for (const msg of items) {
+        const row = document.createElement("div");
+        row.className = "ml-row";
+        if (!msg.flags.includes("\\Seen"))
+            row.classList.add("unread");
+        if (msg.flags.includes("\\Flagged"))
+            row.classList.add("flagged");
+        row.dataset.uid = String(msg.uid);
+        const flag = document.createElement("span");
+        flag.className = "ml-flag";
+        flag.textContent = msg.flags.includes("\\Flagged") ? "\u2605" : "\u2606"; // ★ or ☆
+        flag.title = "Toggle flag";
+        const from = document.createElement("span");
+        from.className = "ml-from";
+        if (showToInsteadOfFrom && msg.to?.length) {
+            from.textContent = msg.to.map((a) => a.name || a.address).join(", ");
+        }
+        else {
+            from.textContent = msg.from.name || msg.from.address;
+        }
+        const subject = document.createElement("span");
+        subject.className = "ml-subject";
+        subject.innerHTML = escapeHtml(msg.subject);
+        if (msg.preview) {
+            const preview = document.createElement("span");
+            preview.className = "ml-preview";
+            preview.textContent = ` \u2014 ${msg.preview}`;
+            subject.appendChild(preview);
+        }
+        const date = document.createElement("span");
+        date.className = "ml-date";
+        date.textContent = formatDate(msg.date);
+        flag.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            const isFlagged = row.classList.contains("flagged");
+            const currentFlags = msg.flags || [];
+            const newFlags = isFlagged
+                ? currentFlags.filter((f) => f !== "\\Flagged")
+                : [...currentFlags, "\\Flagged"];
+            try {
+                await fetch(`/api/message/${accountId}/${msg.uid}/flags`, {
+                    method: "PATCH",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ flags: newFlags }),
+                });
+                msg.flags = newFlags;
+                row.classList.toggle("flagged");
+                flag.textContent = row.classList.contains("flagged") ? "\u2605" : "\u2606";
+            }
+            catch { /* ignore */ }
+        });
+        row.appendChild(flag);
+        row.appendChild(from);
+        row.appendChild(date);
+        row.appendChild(subject);
+        row.addEventListener("click", () => {
+            if (selectedRow)
+                selectedRow.classList.remove("selected");
+            row.classList.add("selected");
+            selectedRow = row;
+            row.classList.remove("unread");
+            onMessageSelect(accountId, msg.uid);
+        });
+        body.appendChild(row);
+    }
+}
+function formatDate(epochMs) {
+    const d = new Date(epochMs);
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    if (msgDay.getTime() === today.getTime())
+        return d.toLocaleTimeString(undefined, timeFmt);
+    if (d.getFullYear() === now.getFullYear())
+        return d.toLocaleString(undefined, dateFmtSameYear);
+    return d.toLocaleString(undefined, dateFmt);
+}
+function escapeHtml(s) {
+    const div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+}
+//# sourceMappingURL=message-list.js.map

package/client/components/message-viewer.js

@@ -0,0 +1,161 @@
+/**
+ * Message viewer component -- displays full message in sandboxed iframe.
+ */
+import { getMessage, updateFlags } from "../lib/api-client.js";
+/** Currently displayed message (for reply/forward) */
+let currentMessage = null;
+let currentAccountId = "";
+export function getCurrentMessage() {
+    if (!currentMessage)
+        return null;
+    return { accountId: currentAccountId, message: currentMessage };
+}
+export async function showMessage(accountId, uid) {
+    const headerEl = document.getElementById("mv-header");
+    const bodyEl = document.getElementById("mv-body");
+    const attEl = document.getElementById("mv-attachments");
+    bodyEl.innerHTML = `<div class="mv-empty">Loading...</div>`;
+    headerEl.hidden = true;
+    attEl.hidden = true;
+    try {
+        // Timeout after 15 seconds
+        const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout loading message")), 15000));
+        const msg = await Promise.race([getMessage(accountId, uid), timeout]);
+        currentMessage = msg;
+        currentAccountId = accountId;
+        // Mark as read
+        if (!msg.flags.includes("\\Seen")) {
+            const newFlags = [...msg.flags, "\\Seen"];
+            updateFlags(accountId, uid, newFlags);
+        }
+        // Header
+        headerEl.hidden = false;
+        headerEl.querySelector(".mv-from").textContent = formatAddr(msg.from);
+        headerEl.querySelector(".mv-to").textContent = `To: ${msg.to.map(formatAddr).join(", ")}`;
+        if (msg.cc?.length) {
+            headerEl.querySelector(".mv-to").textContent += `  Cc: ${msg.cc.map(formatAddr).join(", ")}`;
+        }
+        headerEl.querySelector(".mv-subject").textContent = msg.subject;
+        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 });
+        // Remote content banner
+        bodyEl.innerHTML = "";
+        if (msg.hasRemoteContent) {
+            const senderAddr = msg.from?.address || "";
+            const senderDomain = senderAddr.split("@")[1] || "";
+            const banner = document.createElement("div");
+            banner.className = "mv-remote-banner";
+            banner.innerHTML = `Remote content blocked from <b>${senderAddr}</b>. ` +
+                `<button id="btn-load-remote">Load this time</button> ` +
+                `<button id="btn-allow-sender">Always from ${senderAddr}</button> ` +
+                (senderDomain ? `<button id="btn-allow-domain">Always from ${senderDomain}</button>` : "");
+            bodyEl.appendChild(banner);
+            const loadRemote = async () => {
+                banner.remove();
+                const full = await getMessage(accountId, uid, true);
+                if (full.bodyHtml) {
+                    const oldIframe = bodyEl.querySelector("iframe");
+                    if (oldIframe)
+                        oldIframe.remove();
+                    const iframe = document.createElement("iframe");
+                    iframe.srcdoc = wrapHtmlBody(full.bodyHtml, true);
+                    bodyEl.appendChild(iframe);
+                }
+            };
+            banner.querySelector("#btn-load-remote").addEventListener("click", loadRemote);
+            banner.querySelector("#btn-allow-sender")?.addEventListener("click", async () => {
+                await fetch("/api/settings/allow-remote", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ type: "sender", value: senderAddr }),
+                });
+                loadRemote();
+            });
+            banner.querySelector("#btn-allow-domain")?.addEventListener("click", async () => {
+                await fetch("/api/settings/allow-remote", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ type: "domain", value: senderDomain }),
+                });
+                loadRemote();
+            });
+        }
+        // Body in sandboxed iframe
+        if (msg.bodyHtml) {
+            const iframe = document.createElement("iframe");
+            iframe.sandbox.add("allow-same-origin");
+            iframe.sandbox.add("allow-popups");
+            iframe.sandbox.add("allow-popups-to-escape-sandbox");
+            iframe.srcdoc = wrapHtmlBody(msg.bodyHtml);
+            bodyEl.appendChild(iframe);
+        }
+        else if (msg.bodyText) {
+            const pre = document.createElement("pre");
+            pre.style.cssText = "padding: 1rem; white-space: pre-wrap; word-break: break-word;";
+            pre.textContent = msg.bodyText;
+            bodyEl.appendChild(pre);
+        }
+        else {
+            bodyEl.innerHTML = `<div class="mv-empty">No content</div>`;
+        }
+        // Attachments
+        if (msg.attachments?.length) {
+            attEl.hidden = false;
+            attEl.innerHTML = "";
+            for (const att of msg.attachments) {
+                const chip = document.createElement("span");
+                chip.className = "mv-att-chip";
+                chip.textContent = `\uD83D\uDCCE ${att.filename} (${formatSize(att.size)})`;
+                attEl.appendChild(chip);
+            }
+        }
+    }
+    catch (e) {
+        bodyEl.innerHTML = `<div class="mv-empty">Error: ${e.message}</div>`;
+    }
+}
+function formatAddr(addr) {
+    if (addr.name)
+        return `${addr.name} <${addr.address}>`;
+    return addr.address;
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1048576)
+        return `${(bytes / 1024).toFixed(0)} KB`;
+    return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+function wrapHtmlBody(html, allowRemote = false) {
+    const csp = allowRemote
+        ? "" // no CSP restriction when remote content allowed
+        : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data: cid:;">`;
+    return `<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8">
+${csp}
+<style>
+    body {
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #1a1a2e;
+        background: #fff;
+        padding: 1rem;
+        margin: 0;
+        word-break: break-word;
+        color-scheme: dark light;
+    }
+    img { max-width: 100%; height: auto; }
+    a { color: #1a6dd4; }
+    pre, code { white-space: pre-wrap; }
+    blockquote { border-left: 3px solid #ccc; padding-left: 1rem; margin-left: 0; color: #666; }
+    @media (prefers-color-scheme: dark) {
+        body { color: #cdd6f4; background: #282840; }
+        a { color: #89b4fa; }
+        blockquote { border-color: #45475a; color: #6c7086; }
+    }
+</style>
+<base target="_blank">
+</head><body>${html}</body></html>`;
+}
+//# sourceMappingURL=message-viewer.js.map