@bobfrankston/mailx 1.0.451 → 1.0.452

package/client/app.ts

@@ -0,0 +1,3112 @@
+/**
+ * mailx client entry point.
+ * Wires together all UI components and WebSocket connection.
+ */
+
+import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced, setOutboxTotal } from "./components/folder-tree.js";
+import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, clearSearchMode, getSelectedMessages, markBodiesCached } from "./components/message-list.js";
+import { showMessage, getCurrentMessage, initViewer, popOutCurrentMessage } from "./components/message-viewer.js";
+import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessage, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags, markAsSpamMessages, logClientEvent, sendMessage as apiSendMessage } from "./lib/api-client.js";
+import * as messageState from "./lib/message-state.js";
+
+// ── New message badge (favicon + title) ──
+let baseTitle = "mailx";
+let lastSeenCount = 0;
+let badgeCount = 0;
+
+function updateBadge(count: number): void {
+    badgeCount = count;
+    // Update title
+    document.title = count > 0 ? `(${count}) ${baseTitle}` : baseTitle;
+    // Generate a single badge bitmap used for both the favicon (visible on
+    // browser tabs / mobile homescreen) AND the Windows taskbar overlay
+    // icon (visible as a Thunderbird-style corner pill on the taskbar
+    // button when running via msger). Rendered once, consumed twice.
+    const canvas = document.createElement("canvas");
+    canvas.width = 32;
+    canvas.height = 32;
+    const ctx = canvas.getContext("2d")!;
+    // Base envelope icon (always drawn — so the favicon is a recognizable
+    // mailx icon even at 0 count).
+    ctx.fillStyle = "#4a7ccc";
+    ctx.fillRect(2, 8, 28, 20);
+    ctx.fillStyle = "#6a9cec";
+    ctx.beginPath();
+    ctx.moveTo(2, 8);
+    ctx.lineTo(16, 20);
+    ctx.lineTo(30, 8);
+    ctx.fill();
+    if (count > 0) {
+        // Red badge circle with count
+        ctx.fillStyle = "#e33";
+        ctx.beginPath();
+        ctx.arc(24, 8, 8, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "#fff";
+        ctx.font = "bold 11px sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(count > 99 ? "99+" : String(count), 24, 8);
+    }
+    // Set as favicon
+    let link = document.querySelector("link[rel='icon']") as HTMLLinkElement;
+    if (!link) {
+        link = document.createElement("link");
+        link.rel = "icon";
+        document.head.appendChild(link);
+    }
+    const dataUrl = canvas.toDataURL("image/png");
+    link.href = dataUrl;
+
+    // Also push to the Windows taskbar overlay via msger's IPC helper —
+    // no-op on Linux/Mac. For count=0, render a dedicated "no-overlay"
+    // icon that's all-transparent so the base icon shows cleanly.
+    try {
+        const msgapi: any = (window as any).msgapi;
+        if (msgapi?.setTaskbarOverlay) {
+            if (count > 0) {
+                // strip "data:image/png;base64," prefix → base64 only
+                const b64 = dataUrl.split(",")[1] || "";
+                msgapi.setTaskbarOverlay(b64, `${count} unread`);
+            } else {
+                msgapi.setTaskbarOverlay("", "");
+            }
+        }
+    } catch { /* msgapi unavailable in browser fallback */ }
+}
+
+async function updateNewMessageCount(): Promise<void> {
+    try {
+        const accounts = await getAccounts();
+        let totalUnread = 0;
+        for (const acct of accounts) {
+            const folders = await getFolders(acct.id);
+            const inbox = folders.find((f: any) => f.specialUse === "inbox");
+            if (inbox) totalUnread += inbox.unreadCount || 0;
+        }
+        // Rail badge: unread count on the Inbox and Unified-inbox rail buttons.
+        // Visible even when those views aren't the active one — part of C33
+        // "rail icon badges for unread counts."
+        updateRailBadge("rail-inbox", totalUnread);
+        updateRailBadge("rail-unified", totalUnread);
+        // First load: set baseline
+        if (lastSeenCount === 0) { lastSeenCount = totalUnread; updateBadge(0); return; }
+        const previousBadge = badgeCount;
+        // New messages = increase since last seen
+        const newCount = Math.max(0, totalUnread - lastSeenCount);
+        updateBadge(newCount);
+        // Flash the title when new mail arrives and the window isn't focused.
+        // Windows' taskbar mirrors document.title so this acts as a taskbar flash.
+        if (newCount > previousBadge && document.visibilityState !== "visible") {
+            startTitleFlash();
+        }
+    } catch { /* offline */ }
+}
+
+function updateRailBadge(buttonId: string, count: number): void {
+    const btn = document.getElementById(buttonId);
+    if (!btn) return;
+    let badge = btn.querySelector<HTMLElement>(".rail-badge");
+    if (count <= 0) {
+        if (badge) badge.remove();
+        return;
+    }
+    if (!badge) {
+        badge = document.createElement("span");
+        badge.className = "rail-badge";
+        btn.appendChild(badge);
+    }
+    badge.textContent = count > 999 ? "999+" : String(count);
+}
+
+// ── Taskbar flash via title alternation ──
+let titleFlashTimer: ReturnType<typeof setInterval> | null = null;
+let titleFlashPhase = false;
+
+function startTitleFlash(): void {
+    stopTitleFlash();
+    titleFlashPhase = true;
+    titleFlashTimer = setInterval(() => {
+        titleFlashPhase = !titleFlashPhase;
+        if (titleFlashPhase) {
+            document.title = `✉ NEW MAIL (${badgeCount})`;
+        } else {
+            document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
+        }
+    }, 1000);
+}
+
+function stopTitleFlash(): void {
+    if (titleFlashTimer) { clearInterval(titleFlashTimer); titleFlashTimer = null; }
+    document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
+}
+
+document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") stopTitleFlash();
+});
+window.addEventListener("focus", stopTitleFlash);
+
+/** Call when user actively views messages — resets the badge */
+function markAsSeen(): void {
+    getAccounts().then(async (accounts: any[]) => {
+        let total = 0;
+        for (const acct of accounts) {
+            const folders = await getFolders(acct.id);
+            const inbox = folders.find((f: any) => f.specialUse === "inbox");
+            if (inbox) total += inbox.unreadCount || 0;
+        }
+        lastSeenCount = total;
+        updateBadge(0);
+    }).catch(() => {});
+}
+
+function setTitle(title: string): void {
+    baseTitle = title;
+    document.title = badgeCount > 0 ? `(${badgeCount}) ${baseTitle}` : baseTitle;
+}
+
+// ── Alert banner ──
+const alertBanner = document.getElementById("alert-banner");
+const alertText = document.getElementById("alert-text");
+const alertDismiss = document.getElementById("alert-dismiss");
+const dismissedAlerts = new Set<string>();
+
+let alertAutoDismissTimer: ReturnType<typeof setTimeout> | null = null;
+function showAlert(message: string, key?: string, opts?: { sticky?: boolean }): void {
+    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(): void {
+    if (alertBanner) {
+        const key = alertBanner.dataset.key;
+        if (key) dismissedAlerts.add(key);
+        alertBanner.hidden = true;
+    }
+}
+
+alertDismiss?.addEventListener("click", hideAlert);
+
+/** Show the alert banner with a "Restart" button wired to the mailxapi
+ *  restartDaemon action. Used when a watched config file whose changes
+ *  don't apply live (accounts.jsonc) has been modified. */
+function showRestartForConfigBanner(): void {
+    if (!alertBanner || !alertText) return;
+    // Timestamp in the banner so repeated / spurious fires are visually
+    // distinguishable (and the user can see when the change actually
+    // happened, useful for debugging false triggers).
+    const ts = new Date().toLocaleTimeString([], { hour12: false });
+    alertText.textContent = `[${ts}] accounts.jsonc changed — restart to apply.`;
+    alertBanner.hidden = false;
+    alertBanner.dataset.key = "config-restart";
+    // Avoid duplicate buttons across repeat changes.
+    const existing = alertBanner.querySelector("#alert-restart-btn");
+    if (existing) return;
+    const btn = document.createElement("button");
+    btn.id = "alert-restart-btn";
+    btn.textContent = "Restart now";
+    btn.style.cssText = "margin-left: 12px; padding: 3px 12px; cursor: pointer;";
+    btn.addEventListener("click", async () => {
+        btn.disabled = true;
+        btn.textContent = "Restarting…";
+        try {
+            const ipc: any = (window as any).mailxapi;
+            if (ipc?.restartDaemon) {
+                await ipc.restartDaemon();
+                // Service is going down; the WebView should reload shortly
+                // when the replacement daemon takes over. Force a reload
+                // after a short delay in case the event doesn't arrive.
+                setTimeout(() => location.reload(), 2000);
+            } else {
+                // Non-IPC (server/browser mode) — location reload won't
+                // restart the daemon but at least gives the user feedback.
+                location.reload();
+            }
+        } catch (e: any) {
+            btn.textContent = `Failed: ${e?.message || e}`;
+            btn.disabled = false;
+        }
+    });
+    alertText.after(btn);
+}
+
+// ── Wire up components ──
+
+const folderTree = document.getElementById("folder-tree")!;
+let currentFolderSpecialUse = "";
+
+function clearViewer(): void {
+    messageState.select(null); // Deselect — viewer clears via subscription
+}
+
+// Anyone can ask the viewer to clear by dispatching a `mailx-clear-viewer`
+// CustomEvent on document. Used by message-list's loadSearchResults so the
+// stale preview from the prior selection doesn't linger over the new search
+// results. Slice D will replace this with row-object-level `unfocus()`.
+document.addEventListener("mailx-clear-viewer", () => clearViewer());
+
+const folderTitleEl = document.getElementById("ml-folder-title");
+let currentFolderName = "";
+let currentFolderSyncedAt: number | undefined;
+
+function formatAge(ms: number): string {
+    const s = Math.round(ms / 1000);
+    if (s < 60) return `${s}s ago`;
+    const m = Math.round(s / 60);
+    if (m < 60) return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24) return `${h}h ago`;
+    return `${Math.round(h / 24)}d ago`;
+}
+
+function renderNarrowFolderTitle(): void {
+    if (!folderTitleEl) return;
+    if (currentFolderSyncedAt) {
+        const age = formatAge(Date.now() - currentFolderSyncedAt);
+        folderTitleEl.innerHTML = `${currentFolderName}<span class="ml-folder-age"> · ${age}</span>`;
+        folderTitleEl.title = `Last synced ${new Date(currentFolderSyncedAt).toLocaleTimeString()}`;
+    } else {
+        folderTitleEl.textContent = currentFolderName;
+        folderTitleEl.title = "";
+    }
+}
+
+function setNarrowFolderTitle(name: string): void {
+    currentFolderName = name;
+    currentFolderSyncedAt = getFolderSynced(currentAccountId, currentFolderId);
+    renderNarrowFolderTitle();
+}
+
+// Tick the "3m ago" text every 30s so it stays truthful without flooding repaints.
+setInterval(() => {
+    if (currentFolderSyncedAt) renderNarrowFolderTitle();
+}, 30_000);
+
+initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
+    currentFolderSpecialUse = specialUse;
+    currentAccountId = accountId;
+    currentFolderId = folderId;
+    if (searchInput) searchInput.value = "";
+    markAsSeen();
+    clearViewer();
+    loadMessages(accountId, folderId, 1, specialUse);
+    setTitle(`mailx - ${folderName}`);
+    setNarrowFolderTitle(folderName);
+    document.dispatchEvent(new CustomEvent("mailx-folder-changed", { detail: { accountId, folderId } }));
+}, () => {
+    // Unified inbox handler
+    currentFolderSpecialUse = "inbox";
+    clearViewer();
+    loadUnifiedInbox();
+    setTitle("mailx - All Inboxes");
+    setNarrowFolderTitle("All Inboxes");
+});
+
+initMessageList((accountId, uid, folderId) => {
+    showMessage(accountId, uid, folderId, currentFolderSpecialUse);
+    // Narrow screen: show message viewer, hide list
+    if (window.innerWidth <= 768) {
+        document.getElementById("message-viewer")?.classList.add("narrow-active");
+        document.getElementById("message-list")?.classList.add("narrow-hidden");
+    }
+});
+initViewer();
+
+// Status bar: show selected message UID/folder for debugging
+messageState.subscribe((change) => {
+    if (change === "selected" || change === "removed") {
+        const acctEl = document.getElementById("status-accounts");
+        if (!acctEl) return;
+        const sel = messageState.getSelected();
+        if (sel) {
+            acctEl.textContent = `${sel.accountId}/uid:${sel.uid} folder:${sel.folderId}`;
+            acctEl.style.color = "";
+        } else {
+            acctEl.textContent = "";
+        }
+    }
+});
+
+// Q53: per-account last-sync timestamps surfaced via the status-sync hover.
+const lastSyncByAccount: Record<string, number> = {};
+function recordAccountSync(accountId: string): void {
+    lastSyncByAccount[accountId] = Date.now();
+    refreshSyncTooltip();
+}
+function refreshSyncTooltip(): void {
+    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) {
+    const twoLineThreshold = 600; // px — switch to two-line below this width
+    const userTwoLine = localStorage.getItem("mailx-two-line") === "true";
+    new ResizeObserver(([entry]) => {
+        const narrow = entry.contentRect.width < twoLineThreshold;
+        // Auto two-line when narrow, respect user preference when wide
+        if (narrow) {
+            messageList.classList.add("two-line");
+        } else if (!userTwoLine) {
+            messageList.classList.remove("two-line");
+        }
+    }).observe(messageList);
+}
+
+// ── Narrow/medium drawer toggles ──
+// Hamburger (☰): rail drawer on narrow; on wider tiers the rail is already
+// visible so this is a no-op visually (the toggle still fires but the rail
+// has no `.open` style to invoke).
+// Folder (📁): folder-panel drawer on any tier where it's positioned as an
+// overlay (medium + narrow).
+document.getElementById("btn-menu")?.addEventListener("click", () => {
+    document.querySelector(".icon-rail")?.classList.toggle("open");
+    // Rail drawer and folder drawer are mutually exclusive — opening one
+    // closes the other so they don't fight for the left edge.
+    document.querySelector(".folder-panel")?.classList.remove("open");
+});
+document.getElementById("btn-folder-toggle")?.addEventListener("click", () => {
+    document.querySelector(".folder-panel")?.classList.toggle("open");
+    document.querySelector(".icon-rail")?.classList.remove("open");
+});
+
+const backToList = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // If user is in full-screen-viewer mode, the first back tap should exit
+    // full-screen and return to the normal narrow split (list + active
+    // viewer). It shouldn't also deselect — that would yank the user out two
+    // levels in one tap.
+    if (document.body.classList.contains("viewer-fullscreen")) {
+        document.body.classList.remove("viewer-fullscreen");
+        return;
+    }
+    document.getElementById("message-viewer")?.classList.remove("narrow-active");
+    document.getElementById("message-list")?.classList.remove("narrow-hidden");
+    // Deselect the message so the viewer component clears. Without this, a
+    // subsequent "selected" state change (e.g. sync reload) could re-show the
+    // same message and re-trigger narrow-active.
+    messageState.select(null);
+};
+document.getElementById("btn-back")?.addEventListener("click", backToList);
+// Android WebView sometimes drops synthetic clicks after a touchend inside a
+// header bar layered above the iframe — handle touchend explicitly too.
+document.getElementById("btn-back")?.addEventListener("touchend", backToList);
+
+// Pop-out viewer button — desktop spawns a floating overlay (multiple at
+// once), mobile toggles `body.viewer-fullscreen` for full-screen reading.
+// Threshold and behavior live in popOutCurrentMessage.
+document.getElementById("mv-popout")?.addEventListener("click", () => popOutCurrentMessage());
+
+// Close folder panel when a folder is selected (narrow mode)
+// Also reset narrow navigation: show message list, hide viewer
+document.getElementById("folder-tree")?.addEventListener("click", (e) => {
+    if (window.innerWidth <= 768 && (e.target as HTMLElement).closest(".ft-folder")) {
+        document.querySelector(".folder-panel")?.classList.remove("open");
+        document.getElementById("message-viewer")?.classList.remove("narrow-active");
+        document.getElementById("message-list")?.classList.remove("narrow-hidden");
+    }
+});
+
+// Close folder overlay when user clicks outside it (narrow mode OR
+// medium-width mode where the folder panel slides in as an overlay).
+// Uses capture phase so it beats any child handler that might stopPropagation.
+document.addEventListener("pointerdown", (e) => {
+    const panel = document.querySelector(".folder-panel");
+    if (!panel || !panel.classList.contains("open")) return;
+    const target = e.target as HTMLElement;
+    // Ignore clicks inside the panel itself and on either toggle button.
+    // Without `#btn-folder-toggle` in this list, clicking the folder icon
+    // while the panel is open closed it here (capture phase) then the click
+    // handler reopened it — net effect: panel stuck open, "doesn't toggle".
+    if (target.closest(".folder-panel")
+        || target.closest("#btn-menu")
+        || target.closest("#btn-folder-toggle")) return;
+    // Only auto-dismiss when we're in overlay mode (small or medium screens).
+    // On wide screens the panel is a permanent column and the "open" class
+    // is irrelevant.
+    if (window.innerWidth <= 1100 || window.innerHeight <= 600) {
+        panel.classList.remove("open");
+    }
+}, true);
+
+// ── Toolbar actions ──
+
+document.getElementById("btn-sync")?.addEventListener("click", async () => {
+    const btn = document.getElementById("btn-sync") as HTMLButtonElement;
+    btn.disabled = true;
+    btn.classList.add("syncing");
+    const statusSync = document.getElementById("status-sync");
+    if (statusSync) statusSync.textContent = "Syncing...";
+
+    try {
+        await triggerSync();
+        // Button stays spinning — WebSocket syncProgress/folderCountsChanged will update UI
+        // Set a timeout to re-enable if no WebSocket response
+        setTimeout(() => {
+            btn.disabled = false;
+            btn.classList.remove("syncing");
+            refreshFolderTree();
+            reloadCurrentFolder();
+            if (statusSync && statusSync.textContent === "Syncing...") {
+                statusSync.textContent = `Synced ${new Date().toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })}`;
+            }
+        }, 30000);
+    } catch (e: any) {
+        if (statusSync) statusSync.textContent = `Sync error: ${e.message}`;
+        btn.disabled = false;
+        btn.classList.remove("syncing");
+    }
+});
+
+// Restart menu dropdown
+const restartBtn = document.getElementById("btn-restart");
+const restartDropdown = document.getElementById("restart-dropdown");
+restartBtn?.addEventListener("click", () => {
+    if (restartDropdown) restartDropdown.hidden = !restartDropdown.hidden;
+});
+document.addEventListener("click", (e) => {
+    if (restartDropdown && !restartDropdown.hidden && !(e.target as HTMLElement).closest("#restart-menu")) {
+        restartDropdown.hidden = true;
+    }
+});
+
+document.getElementById("btn-restart-quick")?.addEventListener("click", async () => {
+    if (restartDropdown) restartDropdown.hidden = true;
+    if (isApp) {
+        // Android has no daemon — only the WebView. Reload-the-page is the
+        // right action there. Desktop IPC mode is a different story below.
+        if ((window as any).mailxapi?.platform === "android") {
+            const f = document.createElement("iframe");
+            f.style.display = "none";
+            f.src = "mailxapi://checkUpdate";
+            document.body.appendChild(f);
+            setTimeout(() => f.remove(), 100);
+            location.reload();
+            return;
+        }
+        // Desktop IPC mode: there IS a daemon (the --daemon child of mailx)
+        // running mailx-service / mailx-imap / mailx-store. Just calling
+        // location.reload() reloads the WebView but the daemon keeps running
+        // the old code, so daemon-side changes (sync, store, IPC handlers)
+        // don't get picked up. Trigger restartDaemon — it spawns a fresh
+        // `mailx` process, hands off the instance.json slot, then gracefully
+        // shuts down the current daemon. The UI reloads after a short delay
+        // so the new daemon's WebView replaces this one.
+        const statusSync = document.getElementById("status-sync");
+        if (statusSync) statusSync.textContent = "Restarting...";
+        const ipc = (window as any).mailxapi;
+        if (ipc?.restartDaemon) {
+            try { await ipc.restartDaemon(); } catch { /* daemon shutting down */ }
+            setTimeout(() => location.reload(), 2000);
+        } else {
+            // Older host with no restartDaemon IPC — fall back to UI reload.
+            location.reload();
+        }
+    } else {
+        const statusSync = document.getElementById("status-sync");
+        if (statusSync) statusSync.textContent = "Restarting...";
+        try { await restartServer(); } catch { /* server is shutting down */ }
+    }
+});
+
+document.getElementById("btn-update")?.addEventListener("click", async () => {
+    if (restartDropdown) restartDropdown.hidden = true;
+    const statusSync = document.getElementById("status-sync");
+    if (statusSync) statusSync.textContent = "Checking for updates...";
+    const ipc = (window as any).mailxapi || (window as any).opener?.mailxapi;
+    if (ipc?.performUpdate) {
+        if (statusSync) statusSync.textContent = "Updating... mailx will restart when done";
+        ipc.performUpdate();
+    } else if (statusSync) {
+        statusSync.textContent = "Update not available in this mode";
+    }
+});
+
+document.getElementById("btn-rebuild")?.addEventListener("click", async () => {
+    if (restartDropdown) restartDropdown.hidden = true;
+    if (!confirm("Rebuild local cache?\n\nThis wipes the local database and message store, then re-downloads everything.\nAccounts and settings are preserved.\n\nThis is safe and usually takes just a few minutes.")) return;
+    const statusSync = document.getElementById("status-sync");
+    if (statusSync) statusSync.textContent = "Rebuilding...";
+    try { await restartServer(); } catch { /* restarting */ }
+});
+
+document.getElementById("btn-factory-reset")?.addEventListener("click", async () => {
+    if (restartDropdown) restartDropdown.hidden = true;
+    if (!confirm("Factory reset?\n\nThis deletes ALL data — accounts, settings, messages, cache.\nYou will need to set up your account again.")) return;
+    const ipc = (window as any).mailxapi;
+    if (ipc?.resetAll) {
+        await ipc.resetAll();
+    } else {
+        // Fallback: clear IndexedDB + localStorage manually
+        const dbs = await indexedDB.databases();
+        for (const db of dbs) { if (db.name) indexedDB.deleteDatabase(db.name); }
+        localStorage.clear();
+        location.reload();
+    }
+});
+
+// ── Compose / Reply / Forward ──
+
+type ComposeMode = "new" | "reply" | "replyAll" | "forward";
+
+async function openCompose(mode: ComposeMode): Promise<void> {
+    logClientEvent("openCompose-entry", { mode });
+    const current = getCurrentMessage();
+    // Local-first: if the row is selected we already have its headers in the
+    // local DB. Populate the compose form unconditionally; the user can edit
+    // anything missing. Don't show "still loading" alerts — the message IS
+    // loaded (it's in the list), body is a separate fetch that isn't needed
+    // for Reply's headers. Missing fields become empty strings.
+    if ((mode === "reply" || mode === "replyAll" || mode === "forward") && !current) {
+        // Only true blocker: no message selected at all.
+        console.warn(`[compose] ${mode} — no message selected`);
+        return;
+    }
+    const accounts = await getAccounts();
+    const accountId = current?.accountId || accounts[0]?.id || "";
+    const msg = current?.message;
+    const rePrefix = /^(re|fwd?):\s*/i;
+    const cleanSubject = msg ? msg.subject.replace(rePrefix, "") : "";
+
+    const init: any = {
+        mode,
+        accountId,
+        to: [],
+        cc: [],
+        subject: "",
+        bodyHtml: "",
+        inReplyTo: "",
+        references: [],
+        accounts: accounts.map((a: any) => ({ 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
+    // in accounts.jsonc), reply from that address instead of the account's
+    // primary. Always derive identityDomains from the account email's domain
+    // when not configured — explicit list was a regression source (users would
+    // see Reply pick the wrong From silently when the list was missing).
+    const account = accounts.find((a: any) => a.id === accountId);
+    const explicitDomains: string[] = (account?.identityDomains || []).map((d: string) => d.toLowerCase());
+    const accountDomain = (account?.email || "").split("@")[1]?.toLowerCase();
+    const identityDomains: string[] = explicitDomains.length > 0
+        ? explicitDomains
+        : (accountDomain ? [accountDomain] : []);
+    function detectReplyFrom(): string | undefined {
+        if (!msg) return undefined;
+        // Delivered-To is set by the receiving server — it IS an identity at this
+        // account, by definition. Trust it unconditionally when present (after
+        // deliveredToPrefix stripping in the service). Fall back to To/Cc only
+        // when their domain matches the account's identityDomains, since To/Cc
+        // can be set by the sender and aren't authoritative.
+        if (msg.deliveredTo) {
+            console.log(`[compose] reply From → ${msg.deliveredTo} (Delivered-To)`);
+            return msg.deliveredTo;
+        }
+        if (identityDomains.length === 0) return undefined;
+        const candidates: string[] = [
+            ...((msg.to || []).map((a: any) => a.address)),
+            ...((msg.cc || []).map((a: any) => a.address)),
+        ].filter(Boolean);
+        for (const addr of candidates) {
+            const domain = addr.split("@")[1]?.toLowerCase();
+            if (domain && identityDomains.some(d => domain === d || domain.endsWith(`.${d}`))) {
+                console.log(`[compose] reply From → ${addr} (To/Cc match)`);
+                return addr;
+            }
+        }
+        console.log(`[compose] no identity match`);
+        return undefined;
+    }
+
+    // Defensive: msg.from / msg.to may be missing on rows that arrived before
+    // headers finished loading. Don't push undefined into init.to — that
+    // bubbles to the compose form as literal "undefined". Empty-out gracefully.
+    if (msg && mode === "reply") {
+        init.to = msg.from ? [msg.from] : [];
+        init.subject = `Re: ${cleanSubject}`;
+        init.bodyHtml = quoteBody(msg);
+        init.inReplyTo = msg.messageId || "";
+        init.references = [...(msg.references || []), msg.messageId].filter(Boolean);
+        init.fromAddress = detectReplyFrom();
+    } else if (msg && mode === "replyAll") {
+        const toList: any[] = msg.from ? [msg.from] : [];
+        if (Array.isArray(msg.to)) {
+            for (const a of msg.to) {
+                if (a?.address && a.address !== msg.from?.address) toList.push(a);
+            }
+        }
+        init.to = toList;
+        init.cc = Array.isArray(msg.cc) ? msg.cc : [];
+        init.subject = `Re: ${cleanSubject}`;
+        init.bodyHtml = quoteBody(msg);
+        init.inReplyTo = msg.messageId || "";
+        init.references = [...(msg.references || []), msg.messageId].filter(Boolean);
+        init.fromAddress = detectReplyFrom();
+    } else if (msg && mode === "forward") {
+        init.subject = `Fwd: ${cleanSubject}`;
+        init.bodyHtml = forwardBody(msg);
+        init.fromAddress = detectReplyFrom();
+    }
+
+
+    // Store init data for compose window to pick up
+    sessionStorage.setItem("composeInit", JSON.stringify(init));
+    // Inline compose: load compose.html in an overlay iframe (same origin, same IPC)
+    // Popup windows don't work in IPC mode (custom protocol doesn't propagate to child windows)
+    // Title reflects mode + subject so the user can see what they're replying to
+    // ("Re: Stars of STEM 2026" instead of just "Compose"). Forward shows the
+    // forward target subject; new compose stays generic.
+    const titlePrefix =
+        mode === "reply"    ? "Reply" :
+        mode === "replyAll" ? "Reply All" :
+        mode === "forward"  ? "Forward" :
+        "Compose";
+    const titleSubject = mode === "new" ? "" : (msg?.subject || init.subject || "");
+    showComposeOverlay(titleSubject ? `${titlePrefix}: ${titleSubject}` : titlePrefix);
+}
+
+function showComposeOverlay(title = "Compose"): void {
+    const wrapper = document.createElement("div");
+    wrapper.className = "compose-overlay";
+    // Full-screen on small/short screens, floating on larger
+    const isSmall = window.innerWidth <= 768 || window.innerHeight <= 600;
+    if (isSmall) {
+        wrapper.style.cssText = "position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#fff;";
+    } else {
+        wrapper.style.cssText = "position:fixed;bottom:0;right:16px;width:min(900px,55vw);height:min(700px,70vh);z-index:1000;border-radius:8px 8px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);display:flex;flex-direction:column;resize:both;overflow:hidden;";
+    }
+
+    // Title bar — drag to move, close button
+    const titleBar = document.createElement("div");
+    titleBar.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:#e8ecf0;border-radius:8px 8px 0 0;cursor:move;user-select:none;flex-shrink:0;";
+    titleBar.textContent = title;
+
+    const closeBtn = document.createElement("button");
+    closeBtn.textContent = "✕";
+    closeBtn.title = "Save draft and close";
+    closeBtn.style.cssText = "background:none;border:none;font-size:16px;cursor:pointer;color:#666;padding:2px 6px;border-radius:4px;";
+    closeBtn.addEventListener("mouseenter", () => closeBtn.style.color = "#c00");
+    closeBtn.addEventListener("mouseleave", () => closeBtn.style.color = "#666");
+    closeBtn.addEventListener("click", () => {
+        // compose.ts handles the prompt (Save/Discard/Cancel) and then calls
+        // window.close() which is redirected to wrapper.remove() at line below.
+        // If the user cancels the prompt, closeCompose() is never called and
+        // the wrapper stays. Don't force-remove on a timer — that defeats Cancel.
+        try {
+            const win = frame.contentWindow;
+            if (win) win.dispatchEvent(new Event("compose-save-and-close"));
+        } catch { /* */ }
+    });
+    titleBar.appendChild(closeBtn);
+
+    // Drag to move. While dragging we set pointer-events:none on the iframe
+    // so mouse events don't get swallowed by the inner document the moment
+    // the cursor crosses into the iframe region. Without that, drag only
+    // worked if you stayed on the title bar pixels, which is why it felt
+    // broken except at the lower-right (resize grip) corner.
+    let dragX = 0, dragY = 0;
+    titleBar.addEventListener("mousedown", (e: MouseEvent) => {
+        if (e.target === closeBtn) return;
+        e.preventDefault();
+        const rect = wrapper.getBoundingClientRect();
+        dragX = e.clientX - rect.left;
+        dragY = e.clientY - rect.top;
+        // Clamp movement to the viewport so the title bar stays grabbable.
+        const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));
+        frame.style.pointerEvents = "none";
+        document.body.style.userSelect = "none";
+        const onMove = (ev: MouseEvent) => {
+            ev.preventDefault();
+            const w = wrapper.offsetWidth;
+            const h = wrapper.offsetHeight;
+            const left = clamp(ev.clientX - dragX, 0, window.innerWidth - 40);
+            const top = clamp(ev.clientY - dragY, 0, window.innerHeight - 40);
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            wrapper.style.bottom = "auto";
+            wrapper.style.right = "auto";
+        };
+        const onUp = () => {
+            frame.style.pointerEvents = "";
+            document.body.style.userSelect = "";
+            document.removeEventListener("mousemove", onMove);
+            document.removeEventListener("mouseup", onUp);
+        };
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+    });
+
+    const frame = document.createElement("iframe");
+    frame.src = "compose/compose.html";
+    frame.style.cssText = "flex:1;border:none;background:#fff;width:100%;";
+
+    // Close when compose calls window.close()
+    frame.addEventListener("load", () => {
+        try {
+            const win = frame.contentWindow;
+            if (win) {
+                (win as any).close = () => wrapper.remove();
+            }
+        } catch { /* cross-origin safety */ }
+    });
+
+    // Bring to front on click
+    wrapper.addEventListener("mousedown", () => {
+        document.querySelectorAll(".compose-overlay").forEach(el => (el as HTMLElement).style.zIndex = "1000");
+        wrapper.style.zIndex = "1001";
+    });
+
+    wrapper.appendChild(titleBar);
+    wrapper.appendChild(frame);
+    document.body.appendChild(wrapper);
+}
+
+// Marketing-email layout tables (deeply nested, fixed widths) collapse to
+// 30-40px columns inside a phone-width compose pane and wrap text
+// character-by-character. Strip styles + flatten tables before quoting.
+function sanitizeQuotedBody(msg: any): string {
+    let body = msg.bodyHtml || `<pre>${msg.bodyText || ""}</pre>`;
+    body = body.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+    body = body.replace(/\s+style="[^"]*"/gi, "");
+    body = body.replace(/\s+class="[^"]*"/gi, "");
+    body = body.replace(/\s+(width|height|align|valign|bgcolor|cellpadding|cellspacing|border)="[^"]*"/gi, "");
+    body = body.replace(/<table[^>]*>/gi, "<div>").replace(/<\/table>/gi, "</div>");
+    body = body.replace(/<t[rdh][^>]*>/gi, "").replace(/<\/t[rdh]>/gi, " ");
+    body = body.replace(/<thead[^>]*>|<\/thead>|<tbody[^>]*>|<\/tbody>/gi, "");
+    return body;
+}
+
+function quoteBody(msg: any): string {
+    const date = new Date(msg.date).toLocaleString();
+    const from = msg.from.name ? `${msg.from.name} &lt;${msg.from.address}&gt;` : msg.from.address;
+    const body = sanitizeQuotedBody(msg);
+    // Two blank lines above the quote so the cursor lands with breathing room
+    // between the user's reply and the "On ... wrote:" line.
+    return `<br><br><div class="reply"><p>On ${date}, ${from} wrote:</p><blockquote>${body}</blockquote></div>`;
+}
+
+function forwardBody(msg: any): string {
+    const date = new Date(msg.date).toLocaleString();
+    const from = msg.from.name ? `${msg.from.name} &lt;${msg.from.address}&gt;` : msg.from.address;
+    const to = msg.to.map((a: any) => a.name ? `${a.name} &lt;${a.address}&gt;` : a.address).join(", ");
+    const body = sanitizeQuotedBody(msg);
+    return `<br><br><div class="reply"><p>---------- Forwarded message ----------<br>From: ${from}<br>Date: ${date}<br>Subject: ${msg.subject}<br>To: ${to}</p>${body}</div>`;
+}
+
+// ── Delete with undo ──
+
+interface DeletedMessage {
+    accountId: string;
+    uid: number;
+    folderId: number;
+    subject: string;
+}
+
+interface MovedBatch {
+    messages: { accountId: string; uid: number; sourceFolderId: number }[];
+    targetAccountId: string;
+    targetFolderId: number;
+}
+
+let lastDeleted: DeletedMessage | null = null;
+let lastMoved: MovedBatch | null = null;
+let undoTimeout: ReturnType<typeof setTimeout> | null = null;
+
+async function deleteSelectedMessages(): Promise<void> {
+    const selected = getSelectedMessages();
+
+    // Fall back to single message from viewer if nothing selected in list
+    if (selected.length === 0) {
+        const current = getCurrentMessage();
+        if (!current) return;
+        selected.push({ accountId: current.accountId, uid: current.message.uid, folderId: current.message.folderId });
+    }
+
+    const statusSync = document.getElementById("status-sync");
+
+    try {
+        // Delete on server — group by account for bulk operations
+        const byAccount = new Map<string, number[]>();
+        for (const msg of selected) {
+            const uids = byAccount.get(msg.accountId) || [];
+            uids.push(msg.uid);
+            byAccount.set(msg.accountId, uids);
+        }
+        for (const [accountId, uids] of byAccount) {
+            await deleteMessages(accountId, uids);
+        }
+
+        // Undo supports the last batch
+        if (selected.length === 1) {
+            lastDeleted = { ...selected[0], subject: "" };
+            if (statusSync) statusSync.textContent = `Trashed 1 message (syncing) — Ctrl+Z to undo`;
+        } else {
+            lastDeleted = null;
+            if (statusSync) statusSync.textContent = `Trashed ${selected.length} messages (syncing)`;
+        }
+
+        if (undoTimeout) clearTimeout(undoTimeout);
+        undoTimeout = setTimeout(() => {
+            lastDeleted = null;
+            if (statusSync?.textContent?.includes("undo")) statusSync.textContent = "";
+        }, 30000);
+
+        // Remove from shared state — list and viewer update automatically
+        messageState.removeMessages(selected);
+    } catch (e: any) {
+        console.error(`Delete failed: ${e.message}`);
+    }
+}
+
+async function undoDelete(): Promise<void> {
+    if (!lastDeleted) return;
+    const { accountId, uid, folderId } = lastDeleted;
+
+    try {
+        await undeleteMessage(accountId, uid, folderId);
+
+        const statusSync = document.getElementById("status-sync");
+        if (statusSync) statusSync.textContent = "Message restored";
+        lastDeleted = null;
+        if (undoTimeout) clearTimeout(undoTimeout);
+        reloadCurrentFolder();
+    } catch (e: any) {
+        console.error(`Undo failed: ${e.message}`);
+    }
+}
+
+async function undoMove(): Promise<void> {
+    if (!lastMoved) return;
+    const { messages } = lastMoved;
+    const statusSync = document.getElementById("status-sync");
+    try {
+        // Group by (sourceAccountId, sourceFolderId) and move each group back
+        const byDest = new Map<string, { accountId: string; folderId: number; uids: number[] }>();
+        for (const m of messages) {
+            const key = `${m.accountId}:${m.sourceFolderId}`;
+            if (!byDest.has(key)) byDest.set(key, { accountId: m.accountId, folderId: m.sourceFolderId, uids: [] });
+            byDest.get(key)!.uids.push(m.uid);
+        }
+        const { moveMessages, moveMessage } = await import("./lib/api-client.js");
+        for (const group of byDest.values()) {
+            if (group.uids.length === 1) await moveMessage(group.accountId, group.uids[0], group.folderId);
+            else await moveMessages(group.accountId, group.uids, group.folderId);
+        }
+        if (statusSync) statusSync.textContent = `Undid move of ${messages.length} message${messages.length !== 1 ? "s" : ""}`;
+        lastMoved = null;
+        if (undoTimeout) clearTimeout(undoTimeout);
+        reloadCurrentFolder();
+    } catch (e: any) {
+        console.error(`Undo move failed: ${e.message}`);
+        if (statusSync) statusSync.textContent = `Undo move failed: ${e.message}`;
+    }
+}
+
+// Listen for the "mailx-moved" custom event emitted by folder-tree's drop
+// handler so Ctrl+Z can reverse the most recent move.
+document.addEventListener("mailx-moved", (e: any) => {
+    lastMoved = e.detail as MovedBatch;
+    lastDeleted = null; // Ctrl+Z undoes whichever came last
+    if (undoTimeout) clearTimeout(undoTimeout);
+    undoTimeout = setTimeout(() => { lastMoved = null; }, 60000);
+});
+
+document.getElementById("btn-delete")?.addEventListener("click", deleteSelectedMessages);
+// Same handlers also bound to the top-toolbar icons so delete/spam work
+// regardless of whether a message is open in the viewer. Useful for quick
+// triage from a list-only view.
+document.getElementById("btn-tb-delete")?.addEventListener("click", deleteSelectedMessages);
+document.getElementById("btn-tb-spam")?.addEventListener("click", spamSelectedMessages);
+
+// ── Flag toggle ──
+document.getElementById("btn-flag")?.addEventListener("click", async () => {
+    const sel = messageState.getSelected();
+    if (!sel) return;
+    const isFlagged = sel.flags.includes("\\Flagged");
+    const newFlags = isFlagged
+        ? sel.flags.filter((f: string) => f !== "\\Flagged")
+        : [...sel.flags, "\\Flagged"];
+    try {
+        await updateFlags(sel.accountId, sel.uid, newFlags);
+        sel.flags = newFlags;
+        messageState.updateMessageFlags(sel.accountId, sel.uid, newFlags);
+        // Update the message-list row's flag indicator
+        const row = document.querySelector(`.ml-row[data-uid="${sel.uid}"][data-account-id="${sel.accountId}"]`) as HTMLElement;
+        if (row) {
+            row.classList.toggle("flagged", newFlags.includes("\\Flagged"));
+            const flagEl = row.querySelector(".ml-flag");
+            if (flagEl) flagEl.textContent = newFlags.includes("\\Flagged") ? "\u2605" : "\u2606";
+        }
+    } catch (e: unknown) {
+        console.error(`Flag toggle failed: ${(e as Error).message}`);
+    }
+});
+
+async function spamSelectedMessages(): Promise<void> {
+    console.log("[spam] click — finding selection");
+    const selected = getSelectedMessages();
+    if (selected.length === 0) {
+        const current = getCurrentMessage();
+        if (!current) {
+            console.warn("[spam] no message selected and none in viewer — nothing to do");
+            alert("No message selected. Click a message first, then the spam button.");
+            return;
+        }
+        selected.push({ accountId: current.accountId, uid: current.message.uid, folderId: current.message.folderId });
+    }
+    console.log(`[spam] marking ${selected.length} message(s):`, selected);
+    const statusSync = document.getElementById("status-sync");
+    // Optimistic: remove from list immediately so the user sees action happen.
+    // If the IPC fails, put them back. This matches local-first — the server
+    // sync is a background detail, the user's action should feel instant.
+    const snapshot = [...selected];
+    messageState.removeMessages(selected);
+    try {
+        const byAccount = new Map<string, number[]>();
+        for (const msg of snapshot) {
+            const uids = byAccount.get(msg.accountId) || [];
+            uids.push(msg.uid);
+            byAccount.set(msg.accountId, uids);
+        }
+        for (const [accountId, uids] of byAccount) {
+            const result = await markAsSpamMessages(accountId, uids);
+            console.log(`[spam] ${accountId}: moved ${result?.moved ?? uids.length} to folderId=${result?.targetFolderId}`);
+        }
+        if (statusSync) statusSync.textContent = `Spam: ${snapshot.length} queued — pending server sync`;
+    } catch (e: any) {
+        console.error(`[spam] failed:`, e);
+        if (statusSync) statusSync.textContent = `Spam failed: ${e?.message || e}`;
+        alert(`Mark-as-spam failed: ${e?.message || e}\n\n${selected.length} message(s) stayed in the list; check Settings → account spam folder and accounts.jsonc.`);
+        // Best-effort restore: re-set the messages we optimistically removed.
+        // removeMessages has no inverse in message-state, so we'll rely on the
+        // next folder reload to repopulate. Surface the failure clearly.
+    }
+}
+
+document.getElementById("btn-spam")?.addEventListener("click", spamSelectedMessages);
+
+/** Show/hide the Spam button based on whether the current account has "spam" configured. */
+async function refreshSpamButtonVisibility(): Promise<void> {
+    const btn = document.getElementById("btn-spam") as HTMLButtonElement | null;
+    if (!btn) return;
+    const current = getCurrentMessage();
+    const accountId = current?.accountId || currentAccountId;
+    if (!accountId) { btn.hidden = true; return; }
+    try {
+        const accounts = await getAccounts();
+        const acct = accounts.find((a: any) => a.id === accountId);
+        btn.hidden = !acct?.spam;
+    } catch { btn.hidden = true; }
+}
+
+document.addEventListener("mailx-message-shown", refreshSpamButtonVisibility);
+document.addEventListener("mailx-folder-changed", refreshSpamButtonVisibility);
+
+// Q100 placeholder — append a row to ~/.mailx/spam.csv for later analysis.
+// No folder move, no flag change, no auto-delete. Button is always visible
+// (no configuration required; unlike btn-spam which needs a junk folder).
+document.getElementById("btn-spam-report")?.addEventListener("click", async () => {
+    const current = getCurrentMessage();
+    const msg = current?.message;
+    const accountId = current?.accountId;
+    if (!msg || !accountId) return;
+    const btn = document.getElementById("btn-spam-report") as HTMLButtonElement;
+    const originalLabel = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = "…";
+    try {
+        const { recordSpamReport } = await import("./lib/api-client.js");
+        await recordSpamReport(accountId, msg.uid, msg.folderId);
+        btn.textContent = "✓";
+        const status = document.getElementById("status-sync");
+        if (status) status.textContent = "Logged to ~/.mailx/spam.csv";
+        setTimeout(() => { btn.textContent = originalLabel; btn.disabled = false; }, 1500);
+    } catch (e: any) {
+        btn.textContent = "✗";
+        const status = document.getElementById("status-sync");
+        if (status) status.textContent = `Spam log failed: ${e?.message || e}`;
+        setTimeout(() => { btn.textContent = originalLabel; btn.disabled = false; }, 2500);
+    }
+});
+
+document.getElementById("btn-compose")?.addEventListener("click", () => openCompose("new"));
+
+document.getElementById("btn-mark-unread")?.addEventListener("click", () => {
+    // Toggle \Seen on the currently-selected message. Mirrors the R
+    // keyboard shortcut and the right-click "Mark unread" menu item, but
+    // as a visible toolbar button so users discover the behavior.
+    const sel = messageState.getSelected();
+    if (!sel) return;
+    const isSeen = sel.flags.includes("\\Seen");
+    const newFlags = isSeen
+        ? sel.flags.filter((f: string) => f !== "\\Seen")
+        : [...sel.flags, "\\Seen"];
+    updateFlags(sel.accountId, sel.uid, newFlags).then(() => {
+        sel.flags = newFlags;
+        messageState.updateMessageFlags(sel.accountId, sel.uid, newFlags);
+        const row = document.querySelector(`.ml-row[data-uid="${sel.uid}"][data-account-id="${sel.accountId}"]`) as HTMLElement;
+        if (row) row.classList.toggle("unread", !newFlags.includes("\\Seen"));
+    }).catch(() => {});
+});
+
+document.getElementById("btn-reply")?.addEventListener("click", () => openCompose("reply"));
+document.getElementById("btn-reply-all")?.addEventListener("click", () => openCompose("replyAll"));
+document.getElementById("btn-forward")?.addEventListener("click", () => openCompose("forward"));
+
+// ── Icon rail wiring ──
+// Rail is the always-visible vertical bar on the far left (Thunderbird/Dovecot
+// style). Mostly mirrors toolbar/menu actions for one-click access; calendar /
+// tasks / contacts buttons are placeholders until those features ship.
+document.getElementById("rail-compose")?.addEventListener("click", () => openCompose("new"));
+document.getElementById("rail-inbox")?.addEventListener("click", () => {
+    // Trigger the existing folder-tree click on the first inbox folder.
+    const inbox = document.querySelector('.folder-tree .folder-item[data-special-use="inbox"]') as HTMLElement | null;
+    inbox?.click();
+});
+document.getElementById("rail-unified")?.addEventListener("click", () => {
+    const unified = document.querySelector('.folder-tree .all-inboxes') as HTMLElement | null
+        || 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");
+});
+// Q114 decided 2026-04-24: full-screen calendar/tasks modals are
+// temporarily retired — the right-docked sidebar (calendar-sidebar.ts)
+// owns both views. Rail buttons now just reveal the sidebar. Files kept
+// (`calendar.ts`, `tasks.ts`) for potential revival; not imported.
+document.getElementById("rail-calendar")?.addEventListener("click", async () => {
+    const { showCalendarSidebar } = await import("./components/calendar-sidebar.js");
+    await showCalendarSidebar();
+    // Flip the View-menu checkbox so the on-state stays coherent across paths.
+    const optSidebar = document.getElementById("opt-calendar-sidebar") as HTMLInputElement | null;
+    if (optSidebar) optSidebar.checked = true;
+    setRailActive("rail-calendar");
+});
+document.getElementById("rail-tasks")?.addEventListener("click", async () => {
+    const { showCalendarSidebar } = await import("./components/calendar-sidebar.js");
+    await showCalendarSidebar();
+    // Scroll the sidebar to the tasks section if possible.
+    document.getElementById("cal-side-tasks")?.scrollIntoView({ block: "start", behavior: "smooth" });
+    const optSidebar = document.getElementById("opt-calendar-sidebar") as HTMLInputElement | null;
+    if (optSidebar) optSidebar.checked = true;
+    setRailActive("rail-tasks");
+});
+/** Open a toolbar dropdown (View / Settings) anchored to a rail icon.
+ *
+ *  In wide mode the toolbar buttons own the menu and do their own toggle.
+ *  In narrow mode the toolbar is `display:none`, so the dropdown — which
+ *  lives as a child of `.tb-menu` inside the toolbar — is invisible no
+ *  matter what `hidden` is set to. Forwarding the rail click to the
+ *  toolbar button toggled `hidden` but the user still saw nothing, hence
+ *  the "setup icon does nothing" bug report.
+ *
+ *  The fix: when a rail icon opens the menu, reparent the dropdown to
+ *  `<body>` (so the toolbar's display:none can't hide it), switch to
+ *  `position: fixed` anchored to the icon, and let the existing menu
+ *  handlers fire normally — same dropdown DOM, same listeners, same
+ *  content. We never put the dropdown back: the toolbar handler also
+ *  works on a body-attached dropdown (it's just toggling .hidden), and
+ *  re-parenting on every toggle would defeat any focus state inside. */
+function openMenuFromRail(dropdownId: string, anchor: HTMLElement): void {
+    const dd = document.getElementById(dropdownId);
+    if (!dd) return;
+    if (!dd.hidden) { dd.hidden = true; return; }
+    // Close sibling rail-opened menus so two don't stack.
+    for (const id of ["settings-dropdown", "view-dropdown", "restart-dropdown"]) {
+        const other = document.getElementById(id);
+        if (other && other !== dd) other.hidden = true;
+    }
+    if (dd.parentElement?.classList.contains("tb-menu")) {
+        document.body.appendChild(dd);
+    }
+    const rect = anchor.getBoundingClientRect();
+    dd.style.position = "fixed";
+    // Anchor to the right of the rail icon, top-aligned. Clamp so the menu
+    // doesn't fall off the right edge on narrow screens.
+    const minWidth = 220;
+    const left = Math.min(rect.right + 6, window.innerWidth - minWidth - 8);
+    dd.style.left = `${Math.max(8, left)}px`;
+    dd.style.top = `${Math.max(8, rect.top)}px`;
+    dd.style.zIndex = "10000";
+    dd.hidden = false;
+}
+
+document.getElementById("rail-settings")?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    openMenuFromRail("settings-dropdown", e.currentTarget as HTMLElement);
+});
+document.getElementById("rail-view")?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    openMenuFromRail("view-dropdown", e.currentTarget as HTMLElement);
+});
+document.getElementById("rail-help")?.addEventListener("click", () => {
+    document.getElementById("btn-about")?.click();
+});
+document.getElementById("rail-theme")?.addEventListener("click", () => {
+    // Rail theme icon cycles system → dark → light → system. Settings menu
+    // exposes the same three as radio buttons for direct selection.
+    const root = document.documentElement;
+    const cur = root.getAttribute("data-theme") || "system";
+    const next = cur === "system" ? "dark" : cur === "dark" ? "light" : "system";
+    applyTheme(next);
+});
+
+function applyTheme(theme: "system" | "light" | "dark"): void {
+    document.documentElement.setAttribute("data-theme", theme);
+    try { localStorage.setItem("mailx-theme", theme); } catch { /* private mode */ }
+    // Reflect in the Settings menu radios so the two paths stay in sync.
+    const radio = document.getElementById(`opt-theme-${theme}`) as HTMLInputElement | null;
+    if (radio) radio.checked = true;
+}
+
+// Restore saved theme + wire the Settings radios. Defaults to "system".
+(() => {
+    const saved = (() => { try { return localStorage.getItem("mailx-theme") || "system"; } catch { return "system"; } })();
+    applyTheme(saved as "system" | "light" | "dark");
+    for (const t of ["system", "light", "dark"] as const) {
+        document.getElementById(`opt-theme-${t}`)?.addEventListener("change", (e) => {
+            if ((e.target as HTMLInputElement).checked) applyTheme(t);
+        });
+    }
+})();
+// Highlight the current rail target. For now just inbox is the default; once
+// calendar/tasks ship, update this on view change.
+function setRailActive(id: string): void {
+    document.querySelectorAll(".rail-btn[data-active]").forEach(el => el.removeAttribute("data-active"));
+    document.getElementById(id)?.setAttribute("data-active", "true");
+}
+document.addEventListener("mailx-folder-changed", () => setRailActive("rail-inbox"));
+
+// Context menu events from message-list right-click
+document.addEventListener("mailx-compose", ((e: CustomEvent) => {
+    if (e.detail.mode === "draft" && sessionStorage.getItem("composeInit")) {
+        // Draft already stored by viewer — just show overlay
+        showComposeOverlay();
+    } else {
+        openCompose(e.detail.mode);
+    }
+}) as EventListener);
+document.addEventListener("mailx-delete", () => deleteSelectedMessages());
+
+// ── Search ──
+
+let searchTimeout: ReturnType<typeof setTimeout>;
+const searchInput = document.getElementById("search-input") as HTMLInputElement;
+const searchScope = document.getElementById("search-scope") as HTMLSelectElement;
+
+function doSearch(immediate = false): void {
+    const query = searchInput.value.trim();
+    if (query.length === 0) { reloadCurrentFolder(); return; }
+    if (query.length < 2 && !immediate) return;
+
+    // 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") as HTMLInputElement | null;
+    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 (effectiveScope === "current" && !immediate) {
+        // Client-side filter of visible rows
+        const body = document.getElementById("ml-body");
+        if (body) {
+            const lower = query.toLowerCase();
+            for (const row of body.querySelectorAll(".ml-row")) {
+                const text = row.textContent?.toLowerCase() || "";
+                (row as HTMLElement).classList.toggle("filter-hidden", !text.includes(lower));
+            }
+        }
+        return;
+    }
+
+    loadSearchResults(query, effectiveScope, currentAccountId, currentFolderId);
+    setTitle(`mailx - Search: ${query}`);
+}
+
+// Track current folder for scoped search
+let currentAccountId = "";
+let currentFolderId = 0;
+let reloadDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+searchInput?.addEventListener("input", () => {
+    clearTimeout(searchTimeout);
+    if (searchInput.value.trim() === "") {
+        // Cleared — reset immediately, no debounce. Must exit search mode
+        // first; otherwise reloadCurrentFolder() sees searchMode=true and
+        // re-runs the stale query (user-reported regression 2026-04-24).
+        clearSearchMode();
+        const body = document.getElementById("ml-body");
+        if (body) body.querySelectorAll(".filter-hidden").forEach(r => r.classList.remove("filter-hidden"));
+        reloadCurrentFolder();
+        setTitle("mailx");
+    } else {
+        searchTimeout = setTimeout(() => doSearch(false), 300);
+    }
+});
+searchInput?.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+        clearTimeout(searchTimeout);
+        doSearch(true);
+    }
+    if (e.key === "Escape") {
+        searchInput.value = "";
+        clearSearchMode();
+        // Clear any client-side filters
+        const body = document.getElementById("ml-body");
+        if (body) body.querySelectorAll(".filter-hidden").forEach(r => r.classList.remove("filter-hidden"));
+        reloadCurrentFolder();
+        setTitle("mailx");
+    }
+});
+
+// Re-run the active search when the scope dropdown or "server too" checkbox
+// flips. Without this, switching all/current/server after typing the query
+// left the old result set on screen — the controls looked like they did
+// nothing. Treat the change as `immediate=true` so the user sees the new
+// scope's results without having to retype Enter; clear any client-side
+// filter-hidden flags from the prior "current folder" path so the row set
+// resets cleanly.
+function rerunActiveSearch(): void {
+    if (!searchInput || searchInput.value.trim() === "") return;
+    const body = document.getElementById("ml-body");
+    if (body) body.querySelectorAll(".filter-hidden").forEach(r => r.classList.remove("filter-hidden"));
+    clearTimeout(searchTimeout);
+    doSearch(true);
+}
+searchScope?.addEventListener("change", rerunActiveSearch);
+document.getElementById("search-server-too")?.addEventListener("change", rerunActiveSearch);
+
+// Message state handles move/delete — no manual event listener needed
+
+// ── Folder filter ──
+const ftFilterInput = document.getElementById("ft-filter-input") as HTMLInputElement;
+if (ftFilterInput) {
+    ftFilterInput.addEventListener("input", () => {
+        const query = ftFilterInput.value.toLowerCase();
+        const tree = document.getElementById("folder-tree");
+        if (!tree) return;
+
+        if (!query) {
+            // Clear filter — show everything
+            tree.querySelectorAll(".ft-filter-hidden").forEach(el => el.classList.remove("ft-filter-hidden"));
+            return;
+        }
+
+        // Hide all folders first, then show matches + their parent accounts
+        const folders = tree.querySelectorAll(".ft-folder");
+        const accounts = tree.querySelectorAll(".ft-account");
+
+        for (const acct of accounts) (acct as HTMLElement).classList.add("ft-filter-hidden");
+        for (const f of folders) (f as HTMLElement).classList.add("ft-filter-hidden");
+
+        for (const f of folders) {
+            const name = f.querySelector(".ft-folder-name")?.textContent?.toLowerCase() || "";
+            if (name.includes(query)) {
+                (f as HTMLElement).classList.remove("ft-filter-hidden");
+                // Show parent account
+                const acct = f.closest(".ft-account");
+                if (acct) (acct as HTMLElement).classList.remove("ft-filter-hidden");
+            }
+        }
+
+        // Also show unified inbox if it matches
+        const unified = tree.querySelector(".ft-unified");
+        if (unified) {
+            const text = unified.textContent?.toLowerCase() || "";
+            (unified as HTMLElement).classList.toggle("ft-filter-hidden", !text.includes(query));
+        }
+    });
+
+    ftFilterInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            ftFilterInput.value = "";
+            ftFilterInput.dispatchEvent(new Event("input"));
+        }
+    });
+}
+
+// ── Open links from email body in system browser ──
+
+window.addEventListener("message", (e) => {
+    // Relay traces from iframes (compose) to Node via our working bridge.
+    // The iframe calls logClientEvent which tries its own bridge first; if
+    // that path is broken it also posts here as backup. Tag gets a `via-relay`
+    // suffix when the iframe couldn't reach its own bridge — that alone
+    // diagnoses whether the iframe bridge works.
+    if (e.data?.type === "mailx-trace" && typeof e.data.tag === "string") {
+        const relayTag = e.data.bridged ? e.data.tag : `${e.data.tag} (via-relay)`;
+        logClientEvent(relayTag, e.data.data);
+        return;
+    }
+    // Compose-send relay: iframe posts the send request here because its own
+    // bridge call to sendMessage was failing to reach Node. This window's
+    // bridge is proven (getAccounts / getOutboxStatus run every few seconds
+    // with no failures), so we do the IPC from here and post the result back
+    // to the iframe via its source. `e.source` is the iframe's window; use it
+    // so targeting works even if the iframe moves in the DOM.
+    // S61 2026-04-24: parent-relay compose close. On Android the
+    // window.close() override applied in `frame.onload` doesn't always fire
+    // (WebView2 / MAUI WebView dispatches close to the shell in some cases),
+    // leaving the compose overlay stuck after Send. postMessage is reliable;
+    // compose.ts's closeCompose() posts this, and we find-and-remove the
+    // overlay whose iframe window matches e.source.
+    if (e.data?.type === "mailx-compose-close") {
+        const src = e.source as Window | null;
+        document.querySelectorAll<HTMLElement>(".compose-overlay").forEach(el => {
+            const iframe = el.querySelector<HTMLIFrameElement>("iframe");
+            if (!src || iframe?.contentWindow === src) el.remove();
+        });
+        return;
+    }
+    if (e.data?.type === "mailx-compose-send" && e.data.id && e.data.body) {
+        const src = e.source as Window | null;
+        const id = e.data.id;
+        logClientEvent("relay-compose-send-received", { id });
+        (async () => {
+            try {
+                await apiSendMessage(e.data.body);
+                logClientEvent("relay-compose-send-ok", { id });
+                src?.postMessage({ type: "mailx-compose-send-result", id, ok: true }, "*" as any);
+            } catch (err: any) {
+                const msg = err?.message || String(err);
+                logClientEvent("relay-compose-send-error", { id, error: msg });
+                src?.postMessage({ type: "mailx-compose-send-result", id, ok: false, error: msg }, "*" as any);
+            }
+        })();
+        return;
+    }
+    // Generic IPC relay: the iframe's api-client routes every IPC call through
+    // postMessage when it's running in a child frame. Same reason as the
+    // compose-send relay — sendMessage wasn't the only method the iframe's
+    // bridge dropped; saveDraft hit the same wall ("Draft save failed: mailxapi
+    // timeout"). This handler invokes the named method on THIS window's
+    // mailxapi and posts the result back to the iframe.
+    if (e.data?.type === "mailx-ipc" && e.data.id && e.data.method) {
+        const src = e.source as Window | null;
+        const { id, method, args } = e.data;
+        const bridge = (window as any).mailxapi;
+        const fn = bridge?.[method];
+        if (typeof fn !== "function") {
+            src?.postMessage({ type: "mailx-ipc-result", id, ok: false, error: `parent bridge has no method "${method}"` }, "*" as any);
+            return;
+        }
+        try {
+            const result = fn.apply(bridge, args || []);
+            Promise.resolve(result).then(
+                (value) => src?.postMessage({ type: "mailx-ipc-result", id, ok: true, result: value }, "*" as any),
+                (err) => src?.postMessage({ type: "mailx-ipc-result", id, ok: false, error: err?.message || String(err) }, "*" as any),
+            );
+        } catch (err: any) {
+            src?.postMessage({ type: "mailx-ipc-result", id, ok: false, error: err?.message || String(err) }, "*" as any);
+        }
+        return;
+    }
+    if (e.data?.type === "openLink" && e.data.url) {
+        window.open(e.data.url, "_blank", "noopener,noreferrer");
+    }
+    if (e.data?.type === "linkClick" && e.data.url) {
+        const url = e.data.url;
+        if ((window as any).mailxapi?.platform === "android") {
+            // Android: use mailxapi:// bridge scheme — OnNavigating intercepts it
+            // and opens in system browser. Raw http:// in sub-frames doesn't trigger OnNavigating.
+            const f = document.createElement("iframe");
+            f.style.display = "none";
+            f.src = `mailxapi://openurl?url=${encodeURIComponent(url)}`;
+            document.body.appendChild(f);
+            setTimeout(() => f.remove(), 500);
+        } else {
+            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: DOMRect | null = null;
+        for (const f of Array.from(document.querySelectorAll("iframe"))) {
+            if ((f as HTMLIFrameElement).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: string = 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: string; action: () => void }[] = [
+            { 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`;
+        // mousedown inside the menu must NOT reach the document-level
+        // dismiss handler — otherwise the menu is removed before click
+        // fires on the row and the action silently no-ops (user report
+        // 2026-04-24). Stop propagation at the menu root covers every row.
+        menu.addEventListener("mousedown", (ev) => ev.stopPropagation());
+        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 as any;
+        if (w._linkHoverShowTimer) { clearTimeout(w._linkHoverShowTimer); w._linkHoverShowTimer = null; }
+        let pop = document.getElementById("link-hover-popover") as HTMLDivElement | null;
+        const hidePop = () => { if (pop) pop.style.display = "none"; };
+        if (!e.data.url) { hidePop(); return; }
+        // 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";
+                // 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 = data.url;
+            pop.style.display = "block";
+            let iframeRect: DOMRect | null = null;
+            for (const f of Array.from(document.querySelectorAll("iframe"))) {
+                if ((f as HTMLIFrameElement).contentWindow === source) { iframeRect = f.getBoundingClientRect(); break; }
+            }
+            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 (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
+        // below runs the same code path as a list-focused keypress. Used
+        // when focus is inside the sandboxed preview iframe — works on
+        // platforms where parent-side contentDocument listeners don't.
+        const ev = new KeyboardEvent("keydown", {
+            key: e.data.key, code: e.data.code || "",
+            ctrlKey: !!e.data.ctrlKey, shiftKey: !!e.data.shiftKey,
+            altKey: !!e.data.altKey, metaKey: !!e.data.metaKey,
+            bubbles: true, cancelable: true,
+        });
+        document.dispatchEvent(ev);
+    }
+});
+
+// ── Splitter drag ──
+
+const splitter = document.getElementById("splitter-h");
+if (splitter) {
+    // Restore saved position
+    const saved = localStorage.getItem("mailx-split");
+    if (saved) document.documentElement.style.setProperty("--list-viewer-split", saved);
+
+    let dragging = false;
+    let startX: number;
+    let startSplit: number;
+
+    splitter.addEventListener("pointerdown", (e: PointerEvent) => {
+        dragging = true;
+        startX = e.clientX;
+        const mainArea = document.querySelector(".main-area") as HTMLElement;
+        startSplit = mainArea.getBoundingClientRect().width * (parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--list-viewer-split")) / 100);
+        splitter.setPointerCapture(e.pointerId);
+    });
+
+    splitter.addEventListener("pointermove", (e: PointerEvent) => {
+        if (!dragging) return;
+        const mainArea = document.querySelector(".main-area") as HTMLElement;
+        const totalWidth = mainArea.getBoundingClientRect().width;
+        const newSplit = ((startSplit + (e.clientX - startX)) / totalWidth) * 100;
+        const clamped = Math.max(15, Math.min(85, newSplit));
+        const val = `${clamped}%`;
+        document.documentElement.style.setProperty("--list-viewer-split", val);
+        localStorage.setItem("mailx-split", val);
+    });
+
+    splitter.addEventListener("pointerup", () => { dragging = false; });
+}
+
+// ── WebSocket for live updates ──
+
+connectWebSocket();
+
+onWsEvent((event) => {
+    const statusSync = document.getElementById("status-sync");
+    const startupStatus = document.getElementById("startup-status");
+
+    switch (event.type) {
+        case "connected":
+            if (statusSync) statusSync.textContent = "Connected";
+            if (startupStatus) startupStatus.textContent = "Loading accounts...";
+            // Don't refresh folder tree on connect — it's already loaded by initFolderTree
+            break;
+        case "syncProgress": {
+            // Aggregate folders phases ("folders:<path>" when starting a folder,
+            // "folders-done" between folders) print as a proportion so the user
+            // can see forward progress instead of a meaningless "47%". Older
+            // phase strings ("sync:<path>", "folders") still render raw.
+            let label = `${event.phase} ${event.progress || 0}%`;
+            if (typeof event.phase === "string" && event.phase.startsWith("folders:")) {
+                const folderPath = event.phase.slice("folders:".length);
+                label = `folders — ${folderPath} (${event.progress || 0}%)`;
+            } else if (event.phase === "folders-done") {
+                label = `folders ${event.progress || 0}% done`;
+            }
+            if (statusSync) statusSync.textContent = `Syncing ${event.accountId}: ${label}`;
+            if (startupStatus) startupStatus.textContent = `Syncing ${event.accountId}: ${label}`;
+            // Mark syncing folder in tree — bubble up to visible parent if collapsed
+            const syncPath = event.phase?.startsWith("sync:") ? event.phase.slice(5) : null;
+            // Clear previous syncing markers for this account
+            document.querySelectorAll(`.ft-folder.ft-syncing[data-account-id="${event.accountId}"]`).forEach(el => el.classList.remove("ft-syncing"));
+            if (syncPath && event.progress < 100) {
+                // Try exact match first
+                let folderEl = document.querySelector(`.ft-folder[data-account-id="${event.accountId}"][data-folder-path="${CSS.escape(syncPath)}"]`);
+                if (!folderEl) {
+                    // Folder not visible (parent collapsed) — find nearest visible ancestor
+                    const parts = syncPath.split(/[./]/);
+                    for (let i = parts.length - 1; i >= 1; i--) {
+                        const parentPath = parts.slice(0, i).join(".");
+                        folderEl = document.querySelector(`.ft-folder[data-account-id="${event.accountId}"][data-folder-path="${CSS.escape(parentPath)}"]`);
+                        if (folderEl) break;
+                    }
+                }
+                if (folderEl) folderEl.classList.add("ft-syncing");
+            }
+            break;
+        }
+        case "syncComplete":
+            // 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.
+            for (const entry of event.entries || []) {
+                setFolderSynced(event.accountId, entry.folderId, entry.syncedAt);
+                if (currentFolderId === entry.folderId && currentAccountId === event.accountId) {
+                    currentFolderSyncedAt = entry.syncedAt;
+                    renderNarrowFolderTitle();
+                }
+            }
+            break;
+        case "folderCountsChanged": {
+            // Incremental update only — updateFolderCounts patches badge counts
+            // in-place and falls back to a full refreshFolderTree() when the
+            // folder structure has actually changed. Calling both was doing a
+            // 300 ms debounced rebuild on every sync tick even when just the
+            // unread count moved — visible as folder-tree flicker on Dovecot
+            // accounts where STATUS polls fire frequently.
+            updateFolderCounts();
+            updateNewMessageCount();
+            // Debounced silent reload — preserves scroll position, selection, and viewer
+            if (reloadDebounceTimer) clearTimeout(reloadDebounceTimer);
+            reloadDebounceTimer = setTimeout(() => {
+                reloadDebounceTimer = null;
+                reloadCurrentFolder();
+            }, 2000);
+            // Sync succeeded — clear any transient error banner and re-enable sync button
+            hideAlert();
+            const syncBtn = document.getElementById("btn-sync") as HTMLButtonElement;
+            if (syncBtn) { syncBtn.disabled = false; syncBtn.classList.remove("syncing"); }
+            if (statusSync) statusSync.textContent = `Synced ${new Date().toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })}`;
+            break;
+        }
+        case "updateAvailable": {
+            const banner = document.getElementById("alert-banner");
+            const text = document.getElementById("alert-text");
+            if (banner && text) {
+                banner.hidden = false;
+                banner.style.background = "oklch(0.45 0.12 250)";
+                text.innerHTML = `mailx ${event.latest} available (you have ${event.current}) — <button id="btn-do-update" style="background:none;border:1px solid #fff;color:#fff;padding:0.15em 0.5em;border-radius:3px;cursor:pointer;margin-left:0.5em">Update now</button>`;
+                document.getElementById("btn-do-update")?.addEventListener("click", () => {
+                    text.textContent = "Updating... mailx will restart when done";
+                    // performUpdate runs npm install then restarts the service
+                    const ipc = (window as any).mailxapi || (window as any).opener?.mailxapi;
+                    if (ipc?.performUpdate) ipc.performUpdate();
+                });
+            }
+            break;
+        }
+        case "syncActionFailed": {
+            // Surface sync failures (move/delete/flag not applied on server)
+            // so the user knows local-first actions haven't propagated yet.
+            const action = event.action === "move" ? "Move" : event.action === "delete" ? "Delete" : event.action;
+            if (statusSync) statusSync.textContent = `Sync failed: ${action} — ${event.error}`;
+            break;
+        }
+        case "reload":
+            location.reload();
+            break;
+        case "bodyCached":
+            // Prefetch (or on-demand fetch) downloaded a body — flip the
+            // "not-downloaded" indicator to the teal dot for any rows in view.
+            markBodiesCached(event.items || []);
+            break;
+        case "configChanged":
+            // A watched config file was modified — could be user edit via the
+            // JSONC editor, a GDrive sync, or mailx itself saving (e.g.
+            // allowlist update on "allow sender").
+            //
+            // For accounts.jsonc specifically, surface a sticky banner with a
+            // Restart button — the file change has no effect on the running
+            // daemon (IMAP connections, token caches, sync loops use the old
+            // config snapshot), and users shouldn't need `mailx -kill` just
+            // to apply an edit. For other files (allowlist / clients /
+            // config) the service handles live, a status-bar flash suffices.
+            if (statusSync) {
+                statusSync.textContent = `${event.filename} updated`;
+                setTimeout(() => {
+                    if (statusSync.textContent === `${event.filename} updated`) statusSync.textContent = "";
+                }, 8000);
+            }
+            if (event.filename && /accounts\.jsonc/i.test(String(event.filename))) {
+                showRestartForConfigBanner();
+            }
+            break;
+        case "cloudError":
+            // Cloud read/write failed (Google Drive auth/network/etc.). Show a
+            // sticky banner so the user knows the change wasn't synced. When
+            // error is null, the next successful op cleared it — hide it.
+            if (event.error) {
+                const where = event.filename ? ` (${event.op || "sync"} ${event.filename})` : "";
+                showAlert(`Cloud sync error${where}: ${event.error}`, "cloud-error");
+            } else {
+                // Only hide if the visible banner is the cloud-error one
+                if (alertBanner && alertBanner.dataset.key === "cloud-error") {
+                    alertBanner.hidden = true;
+                    dismissedAlerts.delete("cloud-error");
+                }
+            }
+            break;
+        case "error":
+            if (statusSync) statusSync.textContent = `Error: ${event.message}`;
+            showAlert(event.message, "ws-error");
+            break;
+        case "outboxStatus":
+            renderOutboxStatus(event);
+            break;
+        case "calendarUpdated":
+        case "tasksUpdated":
+            // Reauth succeeded (or was never broken): clear any lingering
+            // scope banner for this feature. Handled here (not just in the
+            // sidebar) because the global fallback banner isn't tied to the
+            // sidebar's lifecycle.
+            if (alertBanner && /^scope-(calendar|tasks|google)$/.test(alertBanner.dataset.key || "")) {
+                alertBanner.hidden = true;
+                alertBanner.dataset.key = "";
+                alertBanner.querySelector(".status-action")?.remove();
+            }
+            break;
+        case "authScopeError": {
+            // Fallback banner: calendar-sidebar.ts already shows this inline
+            // when the sidebar is visible, but if the user has the sidebar
+            // off or is on a narrow tier where it's hidden, the error would
+            // otherwise be invisible. Global banner with the same button.
+            const feat = event.feature || "google";
+            const key = `scope-${feat}`;
+            const msg = event.message || `Google ${feat} access needs re-consent.`;
+            showAlert(msg, key, { sticky: true });
+            const bannerText = document.getElementById("alert-text");
+            if (bannerText && bannerText.textContent === msg) {
+                const existing = bannerText.parentElement?.querySelector(".status-action");
+                if (!existing) {
+                    const btn = document.createElement("button");
+                    btn.className = "status-action";
+                    btn.textContent = "Re-authenticate";
+                    btn.addEventListener("click", async () => {
+                        btn.disabled = true;
+                        btn.textContent = "Opening browser…";
+                        try {
+                            const { reauthGoogleScopes } = await import("./lib/api-client.js");
+                            await reauthGoogleScopes();
+                            btn.textContent = "Consent opened — finish in browser";
+                        } catch (err: any) {
+                            btn.disabled = false;
+                            btn.textContent = `Failed: ${err?.message || err}`;
+                        }
+                    });
+                    bannerText.parentElement?.insertBefore(btn, document.getElementById("alert-dismiss"));
+                }
+            }
+            break;
+        }
+        case "accountError": {
+            // Show actual error + hint in banner
+            const msg = `${event.accountId}: ${event.error}`;
+            showAlert(msg, `acct-${event.accountId}`);
+            // Add action button: Re-authenticate for OAuth, Retry for password accounts
+            const bannerText = document.getElementById("alert-text");
+            if (bannerText && bannerText.textContent === msg) {
+                const existing = bannerText.parentElement?.querySelector(".status-action");
+                if (!existing) {
+                    const btn = document.createElement("button");
+                    btn.className = "status-action";
+                    if (event.isOAuth) {
+                        btn.textContent = "Re-authenticate";
+                        btn.addEventListener("click", async () => {
+                            btn.disabled = true;
+                            btn.textContent = "Authenticating...";
+                            try {
+                                const data = await reauthenticate(event.accountId);
+                                if (data.ok) {
+                                    hideAlert();
+                                    const acctEl = document.getElementById("status-accounts");
+                                    if (acctEl) { acctEl.textContent = `${event.accountId}: reconnected`; acctEl.style.color = ""; }
+                                } else {
+                                    btn.textContent = "Re-authenticate";
+                                    btn.disabled = false;
+                                }
+                            } catch {
+                                btn.textContent = "Re-authenticate";
+                                btn.disabled = false;
+                            }
+                        });
+                    } else {
+                        btn.textContent = "Retry";
+                        btn.addEventListener("click", async () => {
+                            btn.disabled = true;
+                            btn.textContent = "Syncing...";
+                            try {
+                                const data = await syncAccount(event.accountId);
+                                if (data.ok) {
+                                    hideAlert();
+                                    const acctEl = document.getElementById("status-accounts");
+                                    if (acctEl) { acctEl.textContent = `${event.accountId}: reconnected`; acctEl.style.color = ""; }
+                                } else {
+                                    btn.textContent = "Retry";
+                                    btn.disabled = false;
+                                }
+                            } catch {
+                                btn.textContent = "Retry";
+                                btn.disabled = false;
+                            }
+                        });
+                    }
+                    bannerText.parentElement?.insertBefore(btn, document.getElementById("alert-dismiss"));
+                }
+            }
+            // Also show in status bar
+            const acctEl = document.getElementById("status-accounts");
+            if (acctEl) {
+                acctEl.textContent = `${event.accountId}: ${event.hint}`;
+                acctEl.style.color = "oklch(0.65 0.2 25)";
+            }
+            break;
+        }
+    }
+});
+
+// ── Keyboard shortcuts ──
+
+document.addEventListener("keydown", (e) => {
+    // Ctrl+N or Ctrl+Shift+M = Compose
+    if ((e.ctrlKey && e.key === "n") || (e.ctrlKey && e.shiftKey && e.key === "M")) {
+        e.preventDefault();
+        openCompose("new");
+    }
+    // Ctrl+R = Reply (without Shift)
+    if (e.ctrlKey && e.key === "r" && !e.shiftKey && !e.altKey && !e.metaKey) {
+        e.preventDefault();
+        openCompose("reply");
+    }
+    // Ctrl+Shift+R = Reply All
+    if (e.ctrlKey && e.shiftKey && e.key === "R" && !e.altKey && !e.metaKey) {
+        e.preventDefault();
+        openCompose("replyAll");
+    }
+    // Ctrl+F = Forward (without Shift). Use toLowerCase so a Caps-Lock or
+    // shifted state doesn't bypass us. Single handler — the previous
+    // duplicate fired openCompose twice, which double-loaded the compose
+    // iframe and the second copy got an empty sessionStorage (the first
+    // had already consumed it), producing an empty Forward form.
+    if (e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && (e.key === "f" || e.key === "F")) {
+        e.preventDefault();
+        openCompose("forward");
+    }
+    // Ctrl+A = Select all visible messages
+    if (e.ctrlKey && e.key === "a") {
+        const mlBody = document.getElementById("ml-body");
+        if (mlBody && document.activeElement?.closest(".message-list, .ml-body, body")) {
+            e.preventDefault();
+            mlBody.querySelectorAll(".ml-row").forEach(r => r.classList.add("selected"));
+        }
+    }
+    // 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 as HTMLElement | null;
+        const tag = t?.tagName;
+        const editable = t?.isContentEditable;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || editable) return;
+        e.preventDefault();
+        deleteSelectedMessages();
+    }
+    // Ctrl+Z = Undo the most recent delete or move
+    if (e.ctrlKey && e.key === "z") {
+        if (lastMoved) {
+            e.preventDefault();
+            undoMove();
+        } else if (lastDeleted) {
+            e.preventDefault();
+            undoDelete();
+        }
+    }
+    // F5 = Sync
+    if (e.key === "F5") {
+        e.preventDefault();
+        document.getElementById("btn-sync")?.click();
+    }
+    // R = Toggle read/unread
+    if (e.key.toLowerCase() === "r" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const active = document.activeElement;
+        if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.tagName === "SELECT")) return;
+        const sel = messageState.getSelected();
+        if (!sel) return;
+        e.preventDefault();
+        const isSeen = sel.flags.includes("\\Seen");
+        const newFlags = isSeen
+            ? sel.flags.filter((f: string) => f !== "\\Seen")
+            : [...sel.flags, "\\Seen"];
+        updateFlags(sel.accountId, sel.uid, newFlags).then(() => {
+            sel.flags = newFlags;
+            messageState.updateMessageFlags(sel.accountId, sel.uid, newFlags);
+            const row = document.querySelector(`.ml-row[data-uid="${sel.uid}"][data-account-id="${sel.accountId}"]`) as HTMLElement;
+            if (row) row.classList.toggle("unread", !newFlags.includes("\\Seen"));
+        }).catch(() => {});
+    }
+    // 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 rows = Array.from(body.querySelectorAll<HTMLElement>(".ml-row"));
+        if (rows.length === 0) return;
+        const selected = body.querySelector<HTMLElement>(".ml-row.selected");
+        const idx = selected ? rows.indexOf(selected) : -1;
+        let target: HTMLElement | undefined;
+        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();
+            target.click();
+            target.scrollIntoView({ block: "nearest" });
+        }
+    }
+});
+
+// ── View menu ──
+
+const viewBtn = document.getElementById("btn-view");
+const viewDropdown = document.getElementById("view-dropdown");
+const optTwoLine = document.getElementById("opt-two-line") as HTMLInputElement;
+const optPreview = document.getElementById("opt-preview") as HTMLInputElement;
+const optSnippet = document.getElementById("opt-snippet") as HTMLInputElement;
+const optThreaded = document.getElementById("opt-threaded") as HTMLInputElement;
+const optFlagged = document.getElementById("opt-flagged") as HTMLInputElement;
+const optFolderCounts = document.getElementById("opt-folder-counts") as HTMLInputElement;
+const optCalendarSidebar = document.getElementById("opt-calendar-sidebar") as HTMLInputElement;
+const optThreadFilter = document.getElementById("opt-thread-filter") as HTMLInputElement;
+
+// Toggle dropdown — also close any other open toolbar menu so they can't
+// overlap. Without this, opening View while Settings was already open left
+// both visible at once (user-reported screenshot).
+viewBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const settingsDd = document.getElementById("settings-dropdown");
+    if (settingsDd) settingsDd.hidden = true;
+    const restartDd = document.getElementById("restart-dropdown");
+    if (restartDd) restartDd.hidden = true;
+    if (viewDropdown) viewDropdown.hidden = !viewDropdown.hidden;
+});
+document.addEventListener("click", (e) => {
+    // Only close when the click is genuinely outside the menu container.
+    // The earlier unconditional close had two problems: clicks on radio
+    // buttons / checkboxes INSIDE the menu also closed it (so the user
+    // couldn't toggle anything without reopening), and any handler
+    // upstream that consumed the event (preventDefault paths, focus
+    // shifts) could keep the menu open inappropriately. The closest()
+    // check ensures inside-clicks pass through and outside-clicks close.
+    const target = e.target as HTMLElement | null;
+    if (viewDropdown && !viewDropdown.hidden && !target?.closest("#view-menu") && !target?.closest("#view-dropdown")) {
+        viewDropdown.hidden = true;
+    }
+    if (settingsDropdown && !settingsDropdown.hidden && !target?.closest("#settings-menu") && !target?.closest("#settings-dropdown")) {
+        settingsDropdown.hidden = true;
+    }
+});
+
+// Restore saved view settings
+const savedTwoLine = localStorage.getItem("mailx-two-line") === "true";
+const savedPreview = localStorage.getItem("mailx-preview") !== "false"; // default true
+const savedSnippet = localStorage.getItem("mailx-snippet") !== "false"; // default true
+const savedThreaded = localStorage.getItem("mailx-threaded") === "true";
+const savedFlagged = localStorage.getItem("mailx-flagged") === "true";
+const savedFolderCounts = localStorage.getItem("mailx-folder-counts") === "true";
+if (optTwoLine) optTwoLine.checked = savedTwoLine;
+if (optPreview) optPreview.checked = savedPreview;
+if (optSnippet) optSnippet.checked = savedSnippet;
+if (optThreaded) optThreaded.checked = savedThreaded;
+if (optFlagged) optFlagged.checked = savedFlagged;
+if (optFolderCounts) optFolderCounts.checked = savedFolderCounts;
+if (savedTwoLine) document.getElementById("message-list")?.classList.add("two-line");
+if (!savedPreview) document.querySelector(".main-area")?.classList.add("no-preview");
+if (!savedSnippet) document.getElementById("message-list")?.classList.add("no-snippets");
+if (savedThreaded) document.getElementById("ml-body")?.classList.add("threaded");
+if (savedFlagged) document.getElementById("ml-body")?.classList.add("flagged-only");
+if (savedFolderCounts) document.getElementById("folder-tree")?.classList.add("show-folder-counts");
+
+// "Only this conversation" toggle — hides rows whose threadId differs from
+// the currently-selected message's threadId. Client-side only (no server
+// round-trip); toggling off restores the full list. Persisted per-session
+// but not across reloads (thread context is tied to current selection).
+optThreadFilter?.addEventListener("change", () => {
+    const body = document.getElementById("ml-body");
+    if (!body) return;
+    body.classList.toggle("thread-filter-on", optThreadFilter.checked);
+    applyThreadFilter();
+});
+messageState.subscribe(() => applyThreadFilter());
+
+function applyThreadFilter(): void {
+    const body = document.getElementById("ml-body");
+    if (!body) return;
+    if (!optThreadFilter?.checked) {
+        body.querySelectorAll<HTMLElement>(".ml-row.thread-filter-hidden")
+            .forEach(r => r.classList.remove("thread-filter-hidden"));
+        return;
+    }
+    const sel = messageState.getSelected() as any;
+    const tid = sel?.threadId;
+    if (!tid) return;
+    body.querySelectorAll<HTMLElement>(".ml-row").forEach(r => {
+        const rowTid = r.dataset.threadId;
+        if (rowTid === tid || r.classList.contains("selected")) {
+            r.classList.remove("thread-filter-hidden");
+        } else {
+            r.classList.add("thread-filter-hidden");
+        }
+    });
+}
+
+// S51 — Calendar sidebar: View-menu toggle, restore from localStorage,
+// hide auto-magically on narrow screens (CSS handles that).
+(async () => {
+    const { initCalendarSidebar, isCalendarSidebarOn, showCalendarSidebar, hideCalendarSidebar } =
+        await import("./components/calendar-sidebar.js");
+    initCalendarSidebar();
+    const on = isCalendarSidebarOn();
+    if (optCalendarSidebar) optCalendarSidebar.checked = on;
+    if (on) await showCalendarSidebar();
+    optCalendarSidebar?.addEventListener("change", () => {
+        if (optCalendarSidebar.checked) showCalendarSidebar();
+        else hideCalendarSidebar();
+    });
+})();
+
+// P17 / Q104: alarm subsystem — Thunderbird/Outlook-style popup with
+// snooze + dismiss. Covers calendar events + tasks today; mail reminders
+// will slot in here when the mail-reminder feature lands.
+(async () => {
+    try {
+        const { startAlarmPoller } = await import("./components/alarms.js");
+        startAlarmPoller();
+    } catch (e: any) {
+        console.error("alarm poller init failed:", e?.message || e);
+    }
+})();
+
+// Two-line toggle
+optTwoLine?.addEventListener("change", () => {
+    const list = document.getElementById("message-list");
+    if (optTwoLine.checked) {
+        list?.classList.add("two-line");
+    } else {
+        list?.classList.remove("two-line");
+    }
+    localStorage.setItem("mailx-two-line", String(optTwoLine.checked));
+});
+
+// Preview pane toggle
+optPreview?.addEventListener("change", () => {
+    const main = document.querySelector(".main-area");
+    if (optPreview.checked) {
+        main?.classList.remove("no-preview");
+    } else {
+        main?.classList.add("no-preview");
+    }
+    localStorage.setItem("mailx-preview", String(optPreview.checked));
+});
+
+// Preview snippet toggle
+optSnippet?.addEventListener("change", () => {
+    const list = document.getElementById("message-list");
+    if (optSnippet.checked) {
+        list?.classList.remove("no-snippets");
+    } else {
+        list?.classList.add("no-snippets");
+    }
+    localStorage.setItem("mailx-snippet", String(optSnippet.checked));
+});
+
+// ── JSONC config file editor ──
+document.getElementById("btn-edit-jsonc")?.addEventListener("click", async () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown) settingsDropdown.hidden = true;
+    await openJsoncEditor("accounts.jsonc");
+});
+// Allow other components (remote-content banner, etc.) to open the editor
+// pre-selected to a specific file.
+document.addEventListener("mailx-open-jsonc-editor", async (ev: Event) => {
+    const file = ((ev as CustomEvent).detail?.file as string) || "accounts.jsonc";
+    await openJsoncEditor(file);
+});
+// 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: any) {
+        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: any) {
+        alert(`Couldn't open log: ${e?.message || e}`);
+    }
+});
+
+async function openJsoncEditor(initialFile: string): Promise<void> {
+    const { readJsoncFile, writeJsoncFile, readConfigHelp, formatJsonc } = await import("./lib/api-client.js");
+
+    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">Edit config file</span>
+            <button type="button" class="mailx-modal-close" id="jsonc-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <label class="mailx-modal-label">File
+            <select class="mailx-modal-input" id="jsonc-file">
+                <option value="accounts.jsonc">accounts.jsonc — accounts (shared via Google Drive)</option>
+                <option value="contacts.jsonc">contacts.jsonc — preferred + denylist + discovered (shared)</option>
+                <option value="allowlist.jsonc">allowlist.jsonc — remote-content allowlist (shared)</option>
+                <option value="clients.jsonc">clients.jsonc — per-device registrations (shared)</option>
+                <option value="config.jsonc">config.jsonc — local per-machine overrides (not synced)</option>
+            </select>
+        </label>
+        <div class="mailx-modal-split">
+            <label class="mailx-modal-label mailx-modal-split-left">Contents (JSONC — comments and trailing commas allowed)
+                <div class="jsonc-editor-wrap">
+                    <div class="jsonc-gutter" id="jsonc-gutter" aria-hidden="true"></div>
+                    <textarea class="mailx-modal-input mailx-modal-textarea jsonc-textarea" id="jsonc-content" spellcheck="false"></textarea>
+                </div>
+            </label>
+            <div class="mailx-modal-split-right mailx-help-panel">
+                <div class="mailx-help-title">
+                    <button type="button" class="mailx-help-toggle" id="jsonc-help-toggle" aria-expanded="true" title="Hide/show help">▾ Help</button>
+                </div>
+                <div class="mailx-help-body" id="jsonc-help-body"></div>
+            </div>
+        </div>
+        <div class="mailx-modal-error" id="jsonc-error" hidden></div>
+        <div class="mailx-modal-buttons">
+            <button type="button" class="mailx-modal-btn" data-action="format" title="Reformat indentation while preserving comments and trailing commas">Format</button>
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="cancel">Cancel</button>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="save">Save</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+
+    const fileSelect = panel.querySelector<HTMLSelectElement>("#jsonc-file")!;
+    const textarea = panel.querySelector<HTMLTextAreaElement>("#jsonc-content")!;
+    const gutter = panel.querySelector<HTMLElement>("#jsonc-gutter")!;
+    const errorEl = panel.querySelector<HTMLElement>("#jsonc-error")!;
+    const saveBtn = panel.querySelector<HTMLButtonElement>('[data-action="save"]')!;
+    const helpBody = panel.querySelector<HTMLElement>("#jsonc-help-body")!;
+    const helpToggle = panel.querySelector<HTMLButtonElement>("#jsonc-help-toggle")!;
+    const helpPanel = panel.querySelector<HTMLElement>(".mailx-help-panel")!;
+    fileSelect.value = initialFile;
+
+    // Line-number gutter — recomputed whenever the textarea content changes,
+    // scroll-synced so numbers stay aligned. errorLine (1-based) is highlighted
+    // red so the "Line N, col M" error message in the status bar points at a
+    // visible marker in the gutter.
+    let errorLine = 0;
+    const renderGutter = () => {
+        const lines = textarea.value.split("\n").length;
+        let html = "";
+        for (let i = 1; i <= lines; i++) {
+            html += i === errorLine
+                ? `<div class="jsonc-gutter-line jsonc-gutter-error">${i}</div>`
+                : `<div class="jsonc-gutter-line">${i}</div>`;
+        }
+        gutter.innerHTML = html;
+    };
+    const syncScroll = () => { gutter.scrollTop = textarea.scrollTop; };
+    textarea.addEventListener("scroll", syncScroll);
+    textarea.addEventListener("input", renderGutter);
+
+    helpToggle.addEventListener("click", () => {
+        const open = helpPanel.classList.toggle("mailx-help-collapsed");
+        helpToggle.textContent = open ? "▸ Help" : "▾ Help";
+        helpToggle.setAttribute("aria-expanded", open ? "false" : "true");
+    });
+
+    const loadHelp = async () => {
+        helpBody.textContent = "Loading help…";
+        try {
+            const r = await readConfigHelp(fileSelect.value);
+            const md = (r?.content || "").trim();
+            helpBody.innerHTML = md ? renderMarkdown(md) : "<em>No help available for this file.</em>";
+        } catch (e: any) {
+            helpBody.textContent = `Help unavailable: ${e.message}`;
+        }
+    };
+
+    const clearValidation = () => {
+        errorEl.hidden = true;
+        errorEl.textContent = "";
+        textarea.classList.remove("mailx-modal-input-error");
+        saveBtn.disabled = false;
+        errorLine = 0;
+        renderGutter();
+    };
+    const showValidation = (err: { message: string; pos: number; line: number; col: number }) => {
+        // CRITICAL: do NOT move the cursor here. Validation fires every 600ms
+        // while the user types; auto-selecting the error position yanked the
+        // cursor mid-edit and made fixing the error impossible (the user
+        // reported this as a fatal bug — the very mechanism preventing a save
+        // was preventing the fix). Location is shown via the gutter highlight
+        // + the "Line N, col M" message, and the user can click "Jump" to
+        // explicitly navigate.
+        errorEl.innerHTML = "";
+        const text = document.createElement("span");
+        text.textContent = `Line ${err.line}, col ${err.col}: ${err.message}  `;
+        const jumpBtn = document.createElement("button");
+        jumpBtn.type = "button";
+        jumpBtn.className = "mailx-modal-btn mailx-modal-btn-link";
+        jumpBtn.textContent = "Jump to error";
+        jumpBtn.addEventListener("click", () => {
+            textarea.focus();
+            try { textarea.setSelectionRange(err.pos, err.pos + 1); } catch { /* */ }
+        });
+        errorEl.appendChild(text);
+        errorEl.appendChild(jumpBtn);
+        errorEl.hidden = false;
+        textarea.classList.add("mailx-modal-input-error");
+        saveBtn.disabled = true;
+        errorLine = err.line;
+        renderGutter();
+    };
+
+    let validateTimer: number | undefined;
+    const scheduleValidate = () => {
+        if (validateTimer) window.clearTimeout(validateTimer);
+        validateTimer = window.setTimeout(() => {
+            const err = validateJsonc(textarea.value);
+            if (err) showValidation(err); else clearValidation();
+        }, 600);
+    };
+    textarea.addEventListener("input", scheduleValidate);
+
+    const loadFile = async () => {
+        textarea.value = "Loading...";
+        clearValidation();
+        renderGutter();
+        try {
+            const r = await readJsoncFile(fileSelect.value);
+            textarea.value = r?.content || "";
+            renderGutter();
+            scheduleValidate();
+        } catch (e: any) {
+            textarea.value = "";
+            renderGutter();
+            errorEl.textContent = `Failed to load: ${e.message}`;
+            errorEl.hidden = false;
+        }
+    };
+    await Promise.all([loadFile(), loadHelp()]);
+    fileSelect.addEventListener("change", () => { loadFile(); loadHelp(); });
+
+    const close = () => {
+        if (validateTimer) window.clearTimeout(validateTimer);
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") { e.stopPropagation(); e.preventDefault(); close(); }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector<HTMLButtonElement>("#jsonc-close")!.addEventListener("click", close);
+
+    panel.querySelectorAll<HTMLButtonElement>(".mailx-modal-btn").forEach(btn => {
+        btn.addEventListener("click", async () => {
+            const action = btn.dataset.action;
+            if (action === "cancel") { close(); return; }
+            if (action === "format") {
+                // Reformat via the service-side jsonc-parser format() — the
+                // edits are whitespace-only, so `//` and `/* */` comments
+                // survive intact (which JSON.stringify(parse(...)) does not).
+                btn.disabled = true;
+                const orig = btn.textContent;
+                btn.textContent = "Formatting…";
+                try {
+                    const r = await formatJsonc(textarea.value);
+                    if (r?.content !== undefined) {
+                        textarea.value = r.content;
+                        renderGutter();
+                        scheduleValidate();
+                    }
+                } catch (e: any) {
+                    errorEl.textContent = `Format failed: ${e.message}`;
+                    errorEl.hidden = false;
+                } finally {
+                    btn.disabled = false;
+                    btn.textContent = orig || "Format";
+                }
+                return;
+            }
+            if (action === "save") {
+                // Final sync-check; refuse to save if it doesn't parse
+                const err = validateJsonc(textarea.value);
+                if (err) { showValidation(err); return; }
+                errorEl.hidden = true;
+                btn.disabled = true;
+                btn.textContent = "Saving...";
+                try {
+                    await writeJsoncFile(fileSelect.value, textarea.value);
+                    close();
+                    const statusSync = document.getElementById("status-sync");
+                    if (statusSync) statusSync.textContent = `Saved ${fileSelect.value} — restart mailx to apply`;
+                } catch (e: any) {
+                    errorEl.textContent = `${e.message}`;
+                    errorEl.hidden = false;
+                    btn.disabled = false;
+                    btn.textContent = "Save";
+                }
+            }
+        });
+    });
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop) close(); });
+}
+
+// JSONC validator — strips comments + trailing commas (preserving source positions
+// by replacing stripped chars with spaces/newlines) and runs JSON.parse. Reports
+// only the *first* error; cascading errors are suppressed.
+function validateJsonc(src: string): { message: string; pos: number; line: number; col: number } | null {
+    const stripped = stripJsoncPreservingPositions(src);
+    if (stripped.error) {
+        const { pos, line, col } = offsetToLineCol(src, stripped.error.pos);
+        return { message: stripped.error.message, pos, line, col };
+    }
+    if (stripped.text.trim() === "") return null; // empty file: treat as valid (settings code handles)
+    try {
+        JSON.parse(stripped.text);
+        return null;
+    } catch (e: any) {
+        const msg = String(e?.message || "parse error");
+        const m = msg.match(/at position (\d+)/i);
+        const pos = m ? Math.min(parseInt(m[1], 10), src.length - 1) : 0;
+        const lc = offsetToLineCol(src, pos);
+        return { message: msg.replace(/\s*at position \d+/i, ""), pos: lc.pos, line: lc.line, col: lc.col };
+    }
+}
+
+function stripJsoncPreservingPositions(src: string): { text: string; error?: { message: string; pos: number } } {
+    const out: string[] = new Array(src.length);
+    let i = 0;
+    const n = src.length;
+    while (i < n) {
+        const c = src[i];
+        const next = src[i + 1];
+        if (c === '"') {
+            out[i] = c; i++;
+            while (i < n) {
+                const ch = src[i];
+                out[i] = ch; i++;
+                if (ch === "\\" && i < n) { out[i] = src[i]; i++; continue; }
+                if (ch === '"') break;
+                if (ch === "\n") return { text: out.join(""), error: { message: "unterminated string", pos: i - 1 } };
+            }
+        } else if (c === "/" && next === "/") {
+            while (i < n && src[i] !== "\n") { out[i] = " "; i++; }
+        } else if (c === "/" && next === "*") {
+            const start = i;
+            out[i] = " "; out[i + 1] = " "; i += 2;
+            let closed = false;
+            while (i < n) {
+                if (src[i] === "*" && src[i + 1] === "/") { out[i] = " "; out[i + 1] = " "; i += 2; closed = true; break; }
+                out[i] = src[i] === "\n" ? "\n" : " "; i++;
+            }
+            if (!closed) return { text: out.join(""), error: { message: "unterminated block comment", pos: start } };
+        } else if (c === ",") {
+            // trailing comma before } or ] → replace with space
+            let j = i + 1;
+            while (j < n && /\s/.test(src[j])) j++;
+            if (j < n && (src[j] === "}" || src[j] === "]")) { out[i] = " "; i++; }
+            else { out[i] = c; i++; }
+        } else {
+            out[i] = c; i++;
+        }
+    }
+    return { text: out.join("") };
+}
+
+function offsetToLineCol(src: string, pos: number): { pos: number; line: number; col: number } {
+    pos = Math.max(0, Math.min(pos, src.length));
+    let line = 1, col = 1;
+    for (let i = 0; i < pos; i++) {
+        if (src[i] === "\n") { line++; col = 1; } else col++;
+    }
+    return { pos, line, col };
+}
+
+// Minimal markdown renderer for the help panel. Supports: headings, fenced code blocks,
+// inline code, bold, italic, links, bullet lists, paragraphs. HTML is escaped first.
+function renderMarkdown(md: string): string {
+    const esc = (s: string) => s.replace(/[&<>"']/g, c =>
+        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]!);
+
+    // Pull fenced code blocks out first so their contents aren't processed as markdown.
+    const blocks: string[] = [];
+    let src = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, _lang, code) => {
+        const i = blocks.length;
+        blocks.push(`<pre class="mailx-help-code"><code>${esc(code)}</code></pre>`);
+        return `\u0000BLOCK${i}\u0000`;
+    });
+
+    const lines = src.split(/\r?\n/);
+    const out: string[] = [];
+    let inList = false;
+    let para: string[] = [];
+    const flushPara = () => {
+        if (para.length) { out.push(`<p>${inline(para.join(" "))}</p>`); para = []; }
+    };
+    const closeList = () => { if (inList) { out.push("</ul>"); inList = false; } };
+
+    function inline(s: string): string {
+        s = esc(s);
+        s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+        s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+        s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+        s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+        return s;
+    }
+
+    for (const raw of lines) {
+        const blockMatch = /^\u0000BLOCK(\d+)\u0000$/.exec(raw);
+        if (blockMatch) { flushPara(); closeList(); out.push(blocks[parseInt(blockMatch[1], 10)]); continue; }
+        const h = /^(#{1,6})\s+(.+)$/.exec(raw);
+        if (h) { flushPara(); closeList(); const lvl = h[1].length; out.push(`<h${lvl}>${inline(h[2])}</h${lvl}>`); continue; }
+        const bullet = /^\s*[-*]\s+(.+)$/.exec(raw);
+        if (bullet) {
+            flushPara();
+            if (!inList) { out.push("<ul>"); inList = true; }
+            out.push(`<li>${inline(bullet[1])}</li>`);
+            continue;
+        }
+        if (raw.trim() === "") { flushPara(); closeList(); continue; }
+        para.push(raw);
+    }
+    flushPara();
+    closeList();
+    return out.join("\n");
+}
+
+// ── About dialog ──
+document.getElementById("btn-about")?.addEventListener("click", () => {
+    const settingsDropdown = document.getElementById("settings-dropdown");
+    if (settingsDropdown) settingsDropdown.hidden = true;
+    openAboutDialog();
+});
+// Clicking the version string (toolbar in wide mode, status bar in narrow mode) also opens About
+document.querySelectorAll<HTMLElement>(".app-version").forEach(el => {
+    el.style.cursor = "pointer";
+    el.addEventListener("click", openAboutDialog);
+});
+
+async function openAboutDialog(): Promise<void> {
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">About mailx</span>
+            <button type="button" class="mailx-modal-close" id="about-x" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="mailx-about" id="about-body">Loading...</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(panel.parentElement!);
+
+    const body = panel.querySelector<HTMLElement>("#about-body")!;
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+    };
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") { e.stopPropagation(); e.preventDefault(); close(); }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector<HTMLButtonElement>('[data-action="close"]')!
+        .addEventListener("click", close);
+    panel.querySelector<HTMLButtonElement>("#about-x")!
+        .addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop) close(); });
+
+    try {
+        const [v, accounts] = await Promise.all([
+            getVersion().catch(() => ({} as any)),
+            getAccounts().catch(() => [] as any[]),
+        ]);
+        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: [string, string][] = [
+            ["Version", versionHtml],
+            ["Platform", platform],
+            ["Storage", storage.provider || "local"],
+        ];
+        if (storage.cloudPath) rows.push(["Cloud path", `My Drive/${storage.cloudPath}/`]);
+        if (storage.mode) rows.push(["Storage mode", storage.mode]);
+        rows.push(["Accounts", String((accounts || []).length)]);
+        rows.push(["User agent", navigator.userAgent]);
+        rows.push(["Screen", `${screen.width}×${screen.height}`]);
+        rows.push(["Window", `${window.innerWidth}×${window.innerHeight}`]);
+
+        // 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>${k === "Version" ? val : escapeHtml(val)}</dd>`).join("")}
+            </dl>
+            ${(accounts || []).length ? `
+            <div class="mailx-about-accounts">
+              <div class="mailx-about-section">Accounts</div>
+              <ul>
+                ${(accounts as any[]).map(a => `<li>${escapeHtml(a.email || a.id)}${a.name ? ` — ${escapeHtml(a.name)}` : ""}</li>`).join("")}
+              </ul>
+            </div>` : ""}
+            <div class="mailx-about-foot">mailx — local-first mail client</div>`;
+    } catch (e: any) {
+        body.textContent = `Failed to load: ${e.message}`;
+    }
+}
+
+function escapeHtml(s: string): string {
+    return String(s).replace(/[&<>"']/g, c =>
+        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]!);
+}
+
+// Threaded view toggle
+optThreaded?.addEventListener("change", () => {
+    const body = document.getElementById("ml-body");
+    if (optThreaded.checked) {
+        body?.classList.add("threaded");
+    } else {
+        body?.classList.remove("threaded");
+    }
+    localStorage.setItem("mailx-threaded", String(optThreaded.checked));
+    reloadCurrentFolder();
+});
+
+// Flagged-only filter — keeps the CSS-level hiding for instant feedback on
+// the current page AND re-queries the folder so flagged messages that live
+// outside the currently-loaded page show up.
+optFlagged?.addEventListener("change", () => {
+    const body = document.getElementById("ml-body");
+    if (optFlagged.checked) body?.classList.add("flagged-only");
+    else body?.classList.remove("flagged-only");
+    localStorage.setItem("mailx-flagged", String(optFlagged.checked));
+    reloadCurrentFolder();
+});
+
+// Folder counts toggle
+optFolderCounts?.addEventListener("change", () => {
+    const tree = document.getElementById("folder-tree");
+    if (optFolderCounts.checked) {
+        tree?.classList.add("show-folder-counts");
+    } else {
+        tree?.classList.remove("show-folder-counts");
+    }
+    localStorage.setItem("mailx-folder-counts", String(optFolderCounts.checked));
+});
+
+// Q52: Reset column widths — clears persisted list/viewer splitter and
+// restores the default CSS-var value. Currently only the list/viewer split
+// is user-resizable; if per-column drag-resize lands later, add its keys to
+// the cleanup list below.
+document.getElementById("btn-reset-widths")?.addEventListener("click", () => {
+    localStorage.removeItem("mailx-split");
+    document.documentElement.style.removeProperty("--list-viewer-split");
+    if (viewDropdown) viewDropdown.hidden = true;
+});
+
+// ── Settings menu ──
+
+const settingsBtn = document.getElementById("btn-settings");
+const settingsDropdown = document.getElementById("settings-dropdown");
+const optEditorQuill = document.getElementById("opt-editor-quill") as HTMLInputElement;
+const optEditorTiptap = document.getElementById("opt-editor-tiptap") as HTMLInputElement;
+
+settingsBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (viewDropdown) viewDropdown.hidden = true;
+    const restartDd = document.getElementById("restart-dropdown");
+    if (restartDd) restartDd.hidden = true;
+    if (settingsDropdown) settingsDropdown.hidden = !settingsDropdown.hidden;
+});
+// Close handled by the shared document click handler above
+
+// Load current editor setting from server
+getSettings().then((s: any) => {
+    const ed = s.ui?.editor || "quill";
+    if (optEditorQuill) optEditorQuill.checked = ed === "quill";
+    if (optEditorTiptap) optEditorTiptap.checked = ed === "tiptap";
+}).catch(() => {});
+
+// Save editor choice to server settings
+function saveEditorSetting(editor: string): void {
+    getSettings().then((settings: any) => {
+        settings.ui = { ...settings.ui, editor };
+        saveSettings(settings);
+    }).catch(() => {});
+}
+
+optEditorQuill?.addEventListener("change", () => {
+    if (optEditorQuill.checked) saveEditorSetting("quill");
+});
+optEditorTiptap?.addEventListener("change", () => {
+    if (optEditorTiptap.checked) saveEditorSetting("tiptap");
+});
+
+// External editor preference (Edit-in-Word handoff target). Stored under
+// settings.externalEditor so the service can read it via loadSettings().
+// "auto" tries Word → LibreOffice → OS default; explicit values force
+// that editor (still falling back to OS default if it isn't installed).
+const optExtEditAuto = document.getElementById("opt-extedit-auto") as HTMLInputElement | null;
+const optExtEditWord = document.getElementById("opt-extedit-word") as HTMLInputElement | null;
+const optExtEditLibre = document.getElementById("opt-extedit-libre") as HTMLInputElement | null;
+getSettings().then((s: any) => {
+    const v = s.externalEditor || "auto";
+    if (optExtEditAuto) optExtEditAuto.checked = v === "auto";
+    if (optExtEditWord) optExtEditWord.checked = v === "word";
+    if (optExtEditLibre) optExtEditLibre.checked = v === "libreoffice";
+}).catch(() => {});
+function saveExtEditor(v: "auto" | "word" | "libreoffice"): void {
+    getSettings().then((settings: any) => {
+        settings.externalEditor = v;
+        saveSettings(settings);
+    }).catch(() => {});
+}
+optExtEditAuto?.addEventListener("change", () => { if (optExtEditAuto.checked) saveExtEditor("auto"); });
+optExtEditWord?.addEventListener("change", () => { if (optExtEditWord.checked) saveExtEditor("word"); });
+optExtEditLibre?.addEventListener("change", () => { if (optExtEditLibre.checked) saveExtEditor("libreoffice"); });
+
+// ── AI feature toggles ──
+// One umbrella settings record (AutocompleteSettings) holds the provider config
+// + per-feature on/off flags. All features default OFF — user must opt into
+// each AI behavior individually. Per user preference (2026-04-21).
+const optAutocomplete = document.getElementById("opt-autocomplete") as HTMLInputElement | null;
+const optAiTranslate = document.getElementById("opt-ai-translate") as HTMLInputElement | null;
+const optAiProofread = document.getElementById("opt-ai-proofread") as HTMLInputElement | null;
+
+getAutocompleteSettings().then((ac: any) => {
+    if (optAutocomplete) optAutocomplete.checked = !!ac.enabled;
+    if (optAiTranslate) optAiTranslate.checked = !!ac.translateEnabled;
+    if (optAiProofread) optAiProofread.checked = !!ac.proofreadEnabled;
+}).catch(() => {});
+
+function persistAi(mutator: (ac: any) => void): void {
+    getAutocompleteSettings().then((ac: any) => {
+        mutator(ac);
+        saveAutocompleteSettings(ac);
+    }).catch(() => {});
+}
+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; });
+    // 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 { /* */ }
+});
+
+// Sender reputation check (Spamhaus DBL). Stored at top-level settings so
+// the service can read it cheaply without going through autocomplete config.
+// Off by default — enabling it leaks read-recipient domains to Spamhaus's
+// DNS infra, which the user should opt into knowingly.
+const optCheckReputation = document.getElementById("opt-check-reputation") as HTMLInputElement | null;
+getSettings().then((s: any) => {
+    if (optCheckReputation) optCheckReputation.checked = !!s.checkDomainReputation;
+}).catch(() => {});
+optCheckReputation?.addEventListener("change", () => {
+    getSettings().then((settings: any) => {
+        settings.checkDomainReputation = !!optCheckReputation.checked;
+        saveSettings(settings);
+    }).catch(() => {});
+});
+
+// Auto mark-as-read settings (per-device localStorage; the viewer reads
+// these directly when showing a message). Default on with a 2s delay so
+// scrolling through a folder doesn't mark every glanced-at message as
+// read, but a deliberate read still gets recorded.
+const optAutomarkRead = document.getElementById("opt-automark-read") as HTMLInputElement | null;
+const optAutomarkDelay = document.getElementById("opt-automark-delay") as HTMLInputElement | null;
+try {
+    if (optAutomarkRead) optAutomarkRead.checked = localStorage.getItem("mailx-automark-read") !== "false";
+    if (optAutomarkDelay) optAutomarkDelay.value = localStorage.getItem("mailx-automark-delay") || "2";
+} catch { /* private mode */ }
+optAutomarkRead?.addEventListener("change", () => {
+    try { localStorage.setItem("mailx-automark-read", String(optAutomarkRead.checked)); } catch { /* */ }
+});
+optAutomarkDelay?.addEventListener("change", () => {
+    const v = parseFloat(optAutomarkDelay.value);
+    if (Number.isFinite(v) && v >= 0) {
+        try { localStorage.setItem("mailx-automark-delay", String(v)); } catch { /* */ }
+    }
+});
+
+// ── Version display ──
+declare const mailxapi: { isApp: boolean; platform: string; ensureServer: () => Promise<boolean>; getVersion: () => Promise<any> } | undefined;
+const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
+
+// Wait for server ready signal, then fetch version
+const versionPromise = getVersion();
+versionPromise.then((d: any) => {
+    const els = document.querySelectorAll<HTMLElement>(".app-version");
+    const storage = d.storage || {};
+    const storageLabel = storage.provider && storage.provider !== "local"
+        ? ` [${storage.provider}]`
+        : "";
+    const text = `mailx v${d.version}${storageLabel}${isApp ? "" : " [browser]"}`;
+    const tip = storage.provider && storage.provider !== "local"
+        ? (storage.cloudPath ? `My Drive/${storage.cloudPath}/` : storage.provider)
+        : "";
+    for (const el of els) {
+        el.textContent = text;
+        if (tip) el.title = tip;
+    }
+    if (d.settingsError) {
+        showAlert(d.settingsError, "settings-error");
+        // Add repair button to the banner
+        const banner = document.getElementById("alert-banner");
+        if (banner && !banner.querySelector(".repair-btn")) {
+            const btn = document.createElement("button");
+            btn.className = "repair-btn status-action";
+            btn.textContent = "Repair: restore accounts from cache";
+            btn.style.cssText = "margin-left:1rem;padding:0.25rem 0.75rem;background:#a6e3a1;color:#1e1e2e;border:none;border-radius:4px;cursor:pointer;font-weight:bold";
+            btn.onclick = async () => {
+                btn.textContent = "Restoring...";
+                btn.disabled = true;
+                try {
+                    const data = await repairAccounts();
+                    if (data.ok) {
+                        hideAlert();
+                        setTimeout(() => location.reload(), 1000);
+                    } else {
+                        btn.textContent = `Failed: ${data.error}`;
+                    }
+                } catch (e: any) {
+                    btn.textContent = `Error: ${e.message}`;
+                }
+            };
+            banner.querySelector("#alert-text")?.after(btn);
+        }
+    } else if (storage.cloudError) {
+        showAlert(`Cloud storage error: ${storage.cloudError}`, "cloud-error");
+    }
+}).catch((e: any) => {
+    // Version fetch failed
+    const els = document.querySelectorAll<HTMLElement>(".app-version");
+    const text = isApp ? `mailx [version error: ${e.message}]` : "mailx [server offline]";
+    for (const el of els) el.textContent = text;
+});
+
+// ── Sync pending indicator + server health check (HTTP mode only) ──
+let serverDown = false;
+if (isApp) {
+    // IPC mode: events come via push, no polling needed
+} else
+setInterval(async () => {
+    try {
+        const data = await getSyncPending();
+        const el = document.getElementById("status-pending");
+        if (el) {
+            el.textContent = data.pending > 0 ? `↻ ${data.pending} pending` : "";
+            el.style.color = data.pending > 0 ? "oklch(0.75 0.15 60)" : "";
+        }
+        // Server is back — reload if it was down
+        if (serverDown) {
+            serverDown = false;
+            const statusEl = document.getElementById("status-sync");
+            if (statusEl) statusEl.textContent = "Server reconnected";
+            location.reload();
+        }
+    } catch {
+        if (!serverDown) {
+            serverDown = true;
+            const statusEl = document.getElementById("status-sync");
+            if (statusEl) {
+                statusEl.textContent = "SERVER OFFLINE";
+                statusEl.style.color = "oklch(0.65 0.2 25)";
+            }
+        }
+    }
+}, 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: any): void {
+    // Feed the folder-tree synthesized "Send-pending" row. Idempotent —
+    // it no-ops when the presence state and count haven't changed.
+    setOutboxTotal(s?.total || 0);
+    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: string[] = [`✉ ${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, getDiagnostics } = await import("./lib/api-client.js");
+        renderOutboxStatus(await getOutboxStatus());
+        renderDiagnosticsBadge(await getDiagnostics());
+    } catch { /* service unreachable */ }
+}, 15000);
+// First read on startup so the bar isn't blank.
+(async () => {
+    try {
+        const { getOutboxStatus, getDiagnostics } = await import("./lib/api-client.js");
+        renderOutboxStatus(await getOutboxStatus());
+        renderDiagnosticsBadge(await getDiagnostics());
+    } catch { /* */ }
+})();
+
+/** Render the ⚠ "something's wrong" badge next to status-sync. Shown when
+ *  any account has non-zero diagnostic counters (inactivity timeouts,
+ *  connection-cap hits, rate-limit waits). Tooltip breaks down per-account. */
+function renderDiagnosticsBadge(snapshot: any[]): void {
+    const host = document.getElementById("status-diag");
+    if (!host) return;
+    const issues = (snapshot || []).filter(d => d.inactivityTimeouts > 0 || d.connCapHits > 0 || d.rateLimitWaits > 0);
+    if (issues.length === 0) {
+        host.hidden = true;
+        host.textContent = "";
+        host.title = "";
+        return;
+    }
+    host.hidden = false;
+    host.textContent = "⚠";
+    const totalTimeouts = issues.reduce((a, d) => a + d.inactivityTimeouts, 0);
+    const totalCapHits = issues.reduce((a, d) => a + d.connCapHits, 0);
+    const totalRateLimits = issues.reduce((a, d) => a + d.rateLimitWaits, 0);
+    const summary = [
+        totalTimeouts > 0 ? `${totalTimeouts} IMAP inactivity timeout${totalTimeouts === 1 ? "" : "s"}` : null,
+        totalCapHits > 0 ? `${totalCapHits} conn-cap rejection${totalCapHits === 1 ? "" : "s"}` : null,
+        totalRateLimits > 0 ? `${totalRateLimits} rate-limit wait${totalRateLimits === 1 ? "" : "s"}` : null,
+    ].filter(Boolean).join("; ");
+    const detail = issues.map(d => {
+        const parts = [
+            d.inactivityTimeouts > 0 ? `${d.inactivityTimeouts} timeout${d.inactivityTimeouts === 1 ? "" : "s"}` : null,
+            d.connCapHits > 0 ? `${d.connCapHits} conn-cap` : null,
+            d.rateLimitWaits > 0 ? `${d.rateLimitWaits} rate-limit` : null,
+        ].filter(Boolean).join(", ");
+        const last = d.lastCommand ? `\n  last: ${d.lastCommand}` : "";
+        return `${d.accountId}: ${parts}${last}`;
+    }).join("\n");
+    host.title = `Connection issues — ${summary}\n\n${detail}`;
+}
+// Q64: pop-out a message into a floating overlay (real-OS-window pending C44).
+document.addEventListener("mailx-popout-message", (async (e: any) => {
+    const { accountId, uid, folderId, subject } = e.detail || {};
+    if (!accountId || !uid) return;
+    const { getMessage } = await import("./lib/api-client.js");
+    let msg: any;
+    try {
+        msg = await getMessage(accountId, uid, false, folderId);
+    } catch (err: any) {
+        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: any) => escapeHtmlBasic(`${a.name||""} <${a.address}>`)).join(", ")}</div>
+                      ${msg.cc?.length ? `<div><b>Cc:</b> ${msg.cc.map((a:any) => 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: MouseEvent) => {
+        if ((de.target as HTMLElement).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; });
+}) as EventListener);
+function escapeHtmlBasic(s: string): string {
+    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: any) {
+        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();
+
+// Offline indicator — show/hide based on navigator.onLine. Doesn't gate any
+// functionality (the store is local-first; edits queue and replay on
+// reconnect regardless) but tells the user their queued actions are stacking
+// up for a later push rather than hitting the server now.
+const offlineEl = document.getElementById("status-offline");
+function refreshOfflineIndicator(): void {
+    if (!offlineEl) return;
+    offlineEl.hidden = navigator.onLine;
+}
+window.addEventListener("online", refreshOfflineIndicator);
+window.addEventListener("offline", refreshOfflineIndicator);
+refreshOfflineIndicator();
+
+// ── Midnight refresh — update date display when day changes ──
+function scheduleMiddnightRefresh(): void {
+    const now = new Date();
+    const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+    const ms = midnight.getTime() - now.getTime();
+    setTimeout(() => {
+        reloadCurrentFolder();
+        scheduleMiddnightRefresh();
+    }, ms + 1000); // 1s after midnight
+}
+scheduleMiddnightRefresh();
+
+// ── Apply theme from settings ──
+versionPromise.then((d: any) => {
+    if (d.theme === "dark") document.documentElement.classList.add("theme-dark");
+    else if (d.theme === "light") document.documentElement.classList.add("theme-light");
+}).catch(() => {});
+
+// ── Save window geometry on close (IPC mode only) ──
+// Sends window position and size so the next launch restores them.
+if (isApp) {
+    const ipcApi = (window as unknown as Record<string, unknown>).mailxapi as
+        { saveWindowGeometry?: (g: { x: number; y: number; width: number; height: number }) => Promise<unknown> } | undefined;
+
+    function sendGeometry(): void {
+        if (!ipcApi?.saveWindowGeometry) return;
+        ipcApi.saveWindowGeometry({
+            x: window.screenX,
+            y: window.screenY,
+            width: window.outerWidth,
+            height: window.outerHeight,
+        }).catch(() => { /* fire-and-forget */ });
+    }
+
+    // Save on unload (window close) and periodically as a safety net
+    window.addEventListener("beforeunload", sendGeometry);
+    setInterval(sendGeometry, 60_000);
+}