@bobfrankston/mailx 1.0.465 → 1.0.500

package/client/app.ts

@@ -1,3190 +0,0 @@
-/**
- * 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");
-        // Selecting a message means the user is done with the rail / folder
-        // drawers — auto-dismiss either if left open. Without this the rail
-        // floats over the message body (the "rail on top of the letter" bug).
-        document.querySelector(".icon-rail")?.classList.remove("open");
-        document.querySelector(".folder-panel")?.classList.remove("open");
-    }
-});
-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);
-
-// Same auto-dismiss for the icon-rail drawer (narrow only — on medium/wide
-// the rail is a permanent column and `.open` has no visual effect).
-document.addEventListener("pointerdown", (e) => {
-    const rail = document.querySelector(".icon-rail");
-    if (!rail || !rail.classList.contains("open")) return;
-    const target = e.target as HTMLElement;
-    if (target.closest(".icon-rail") || target.closest("#btn-menu")) return;
-    if (window.innerWidth <= 768) rail.classList.remove("open");
-}, true);
-
-// Tapping any rail button dismisses the drawer afterward — the user picked
-// a destination, the drawer's job is done. Skipping the menus that anchor
-// off the rail (settings/view) so the menu has time to open before the
-// rail collapses out from under it.
-document.querySelectorAll<HTMLElement>(".icon-rail .rail-btn").forEach(btn => {
-    btn.addEventListener("click", () => {
-        if (window.innerWidth > 768) return;
-        if (btn.id === "rail-settings" || btn.id === "rail-view") return;
-        document.querySelector(".icon-rail")?.classList.remove("open");
-    });
-});
-
-// ── 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. Clamp horizontally 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`;
-    // Reset any prior anchoring so measurement is clean.
-    dd.style.top = "";
-    dd.style.bottom = "";
-    dd.style.maxHeight = "";
-    dd.style.overflowY = "";
-    dd.style.zIndex = "10000";
-    dd.hidden = false;
-    // Bottom-rail icons (settings, theme, help) sit near the viewport floor.
-    // Anchoring `top: rect.top` makes the menu spill off the bottom — the
-    // user only sees the first section ("Theme") and assumes the rest of
-    // the menu is missing. Measure after revealing, then anchor whichever
-    // edge has more room. Cap height with overflow so a tall menu still
-    // fits on a small viewport.
-    const ddHeight = dd.getBoundingClientRect().height;
-    const spaceBelow = window.innerHeight - rect.top - 8;
-    const spaceAbove = rect.bottom - 8;
-    if (ddHeight > spaceBelow && spaceAbove > spaceBelow) {
-        dd.style.bottom = `${Math.max(8, window.innerHeight - rect.bottom)}px`;
-        if (ddHeight > spaceAbove) {
-            dd.style.maxHeight = `${spaceAbove}px`;
-            dd.style.overflowY = "auto";
-        }
-    } else {
-        dd.style.top = `${Math.max(8, rect.top)}px`;
-        if (ddHeight > spaceBelow) {
-            dd.style.maxHeight = `${spaceBelow}px`;
-            dd.style.overflowY = "auto";
-        }
-    }
-}
-
-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)";
-                // Stash the update banner contents so updateFailed can restore
-                // it (offering a retry) instead of leaving "Updating..." pinned.
-                const restoreHtml = `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>`;
-                (window as any).__mailxUpdateBannerHtml = restoreHtml;
-                text.innerHTML = restoreHtml;
-                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 "updateFailed": {
-            // Service tried to install but failed (typically offline). Restore
-            // the "Update now" banner so the user can retry — and prefix it
-            // with a short status so they know why the previous tap silently
-            // came back. mailx itself keeps running on the current version.
-            const banner = document.getElementById("alert-banner");
-            const text = document.getElementById("alert-text");
-            if (banner && text) {
-                const restoreHtml = (window as any).__mailxUpdateBannerHtml as string | undefined;
-                const prefix = event.offline ? "No connection — update postponed. " : "Update failed — ";
-                banner.hidden = false;
-                banner.style.background = event.offline ? "oklch(0.42 0.06 70)" : "oklch(0.45 0.12 25)";
-                text.innerHTML = `${prefix}${restoreHtml ?? ""}`;
-                document.getElementById("btn-do-update")?.addEventListener("click", () => {
-                    text.textContent = "Updating... mailx will restart when done";
-                    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);
-}