@bobfrankston/mailx 1.0.310 → 1.0.317

package/README.md

@@ -123,11 +123,16 @@ Gmail OAuth requires a one-time Google Cloud setup:
 
 ## Usage
 
+### Layout
+
+A vertical **icon rail** sits on the far left (Thunderbird / Dovecot style) with one-click access to Compose, Inbox, All Inboxes, and Settings; Calendar / Tasks / Contacts slots are placeholders until those features land. The rail is always visible on wide and medium screens; it folds into the hamburger menu on narrow ones.
+
 ### Reading Mail
 
 - Click a **folder** to see its messages
 - Click a **message** to read it in the preview pane
 - **All Inboxes** combines inboxes from all accounts (appears with 2+ accounts)
+- A small filled teal dot before the date means the message body is downloaded locally (offline-ready); a hollow circle means not yet prefetched. Prefetch runs as a background task every ~60 s independent of folder sync.
 - Unread counts show on folders; sub-folder counts bubble up to collapsed parents
 - Use the **folder search** box to find folders by name
 
@@ -150,15 +155,18 @@ Gmail OAuth requires a one-time Google Cloud setup:
 
 ### Managing Messages
 
-- **Delete** or **Ctrl+D** -- Delete selected messages (moves to Trash)
+- **Delete** or **Ctrl+D** -- Delete selected messages (moves to Trash; second delete in Trash is a hard delete + EXPUNGE)
 - **Ctrl+Z** -- Undo the last **delete or move** (whichever came last, 60s window)
 - **Ctrl+A** -- Select all messages in the list
 - **Drag and drop** -- Move messages to a folder by dragging them
+- **Right-click a message → Move to folder…** -- Searchable folder picker; useful on narrow layouts where the folder tree is hidden
 - Click the **star** column to flag/unflag a message
-- **Unsubscribe** button appears when the message has a List-Unsubscribe header (one-click)
+- **Unsubscribe** button appears when the message has a List-Unsubscribe header. One-click (RFC 8058) when the sender advertises `List-Unsubscribe-Post: List-Unsubscribe=One-Click`; otherwise opens the URL or a pre-filled compose for `mailto:` lists.
 - **Right-click on a From/To/Cc address** -- Copy name, Copy address, Copy both, Add to contacts, or Reply/Reply All/Forward
+- **Right-click in the message body → Translate** (opt-in) -- Uses the configured AI provider; select text first to translate just the selection. Off by default; enable under **Settings → AI translate**.
 - **Preview pane zoom** -- Ctrl+wheel, Ctrl+= / Ctrl+- / Ctrl+0, or right-click menu (Zoom in/out/reset, Copy, Select all). Persisted across messages.
 - **Cross-folder search results** show the folder name for each hit
+- **Empty Trash / Empty Junk** -- Right-click the folder in the tree → Empty (confirmation prompt)
 
 ### Searching
 
@@ -191,6 +199,10 @@ Under **View** in the toolbar:
 Under **Settings** in the toolbar:
 - **Editor** -- Choose between Quill (default) and tiptap for compose
 - **AI autocomplete** -- Enable LLM-powered writing suggestions (Ollama, Claude, or OpenAI)
+- **AI translate** -- Enable the right-click Translate item in the message viewer (off by default; uses the same provider as autocomplete)
+- **AI proofread** -- Enable the proofread path (off by default; provider method available, UI wiring in progress)
+
+All AI features are opt-in. Provider + API key live in the autocomplete settings; toggling a feature only controls whether that specific capability calls out to the provider.
 
 ### Keyboard Shortcuts
 

package/bin/mailx.js

@@ -21,8 +21,9 @@ import path from "node:path";
 import os from "node:os";
 import net from "node:net";
 import { ports } from "@bobfrankston/miscinfo";
-import { showMessageBox, showService, setAppName } from "@bobfrankston/mailx-host";
+import { showMessageBox, showService, setAppName, setAppIcon } from "@bobfrankston/mailx-host";
 setAppName("mailx");
+setAppIcon(path.resolve(import.meta.dirname, "..", "client", "icon.png"));
 const PORT = ports.mailx;
 const args = process.argv.slice(2);
 // Normalize: accept both -flag and --flag
@@ -146,6 +147,46 @@ for (const arg of args) {
 }
 function log(...msg) { if (verbose)
     console.log("[mailx]", ...msg); }
+/** Detect whether we're running with administrator / root privileges.
+ *  Windows: `net session` requires admin — succeeds silently when elevated,
+ *  errors "Access is denied" otherwise. Linux/Mac: check process uid.
+ *  Returns true only when positively detected as elevated; on ambiguity
+ *  (e.g. child_process spawn failed for non-privilege reasons), returns
+ *  false so we don't block users on false positives. */
+function isElevated() {
+    try {
+        if (process.platform === "win32") {
+            const { execSync } = require("node:child_process");
+            execSync("net session >nul 2>&1", { stdio: "ignore", windowsHide: true });
+            return true;
+        }
+        if (typeof process.getuid === "function") {
+            return process.getuid() === 0;
+        }
+    }
+    catch { /* non-admin → net session fails */ }
+    return false;
+}
+/** Put up a blocking warning dialog via showMessageBox. Returns the label
+ *  the user clicked. The default (Quit) is first so Enter dismisses to
+ *  safety. Caller decides what to do with "Continue anyway". */
+async function warnElevated() {
+    const res = await showMessageBox({
+        title: "mailx — elevated run not recommended",
+        message: "mailx is running with Administrator privileges.\n\n" +
+            "This can corrupt the per-user WebView2 profile at\n" +
+            "%LOCALAPPDATA%\\msger\\webview2\\ and create admin-owned files\n" +
+            "under ~/.mailx/ that later non-admin runs can't write to\n" +
+            "(SQLite db, tokens, config).\n\n" +
+            "Quit, relaunch from a normal shell, and only use admin if\n" +
+            "you specifically know you need it. To bypass this warning\n" +
+            "(for scripted admin use), pass --allow-elevated.",
+        buttons: ["Quit", "Continue anyway"],
+        size: { width: 540, height: 340 },
+        escapeCloses: true,
+    });
+    return res.button;
+}
 // Kill any running mailx server
 if (hasFlag("kill")) {
     log("Killing mailx processes...");
@@ -731,6 +772,20 @@ async function main() {
     log(`Platform: ${process.platform} ${process.arch}`);
     log(`Node: ${process.version}`);
     log(`Mode: ${setupMode ? "setup" : "auto"}`);
+    // Refuse to run elevated unless explicitly opted in. An elevated mailx
+    // can poison %LOCALAPPDATA%\msger\webview2\ (see msger/notes.md WebView2
+    // profile playbook) and create admin-owned files under ~/.mailx/ that
+    // later non-admin runs can't write to. `net session` requires admin on
+    // Windows; succeeds → admin, fails → non-admin. Linux/Mac use process
+    // uid (0 = root). --allow-elevated bypasses for scripted admin use.
+    if (!hasFlag("allow-elevated") && !isDaemon && isElevated()) {
+        const button = await warnElevated();
+        if (button !== "Continue anyway") {
+            log("User chose Quit on elevated-run warning. Exiting.");
+            process.exit(0);
+        }
+        log("User chose Continue anyway on elevated-run warning. Proceeding (will likely poison local state).");
+    }
     // Test connectivity
     if (testMode) {
         await runTest();

package/client/app.js

@@ -415,6 +415,28 @@ document.getElementById("btn-factory-reset")?.addEventListener("click", async ()
 });
 async function openCompose(mode) {
     const current = getCurrentMessage();
+    // Reply / Reply-All / Forward all need an original message to populate
+    // From, To, Subject, and the quoted body. Two failure modes used to
+    // silently produce a blank compose:
+    //   (1) getCurrentMessage() returns null — viewer still loading, message
+    //       cleared mid-folder-switch, or fetch failed.
+    //   (2) currentMessage is set but is a stub — header metadata arrived
+    //       but body / from / subject haven't been populated yet.
+    // Bail out in both cases instead of opening an empty form.
+    if (mode === "reply" || mode === "replyAll" || mode === "forward") {
+        const m = current?.message;
+        const stubReason = !current ? "no current message" :
+            !m?.from ? "msg.from missing" :
+                !m?.subject && m?.subject !== "" ? "msg.subject missing" :
+                    (mode !== "forward" && !m?.messageId) ? "msg.messageId missing (can't thread reply)" :
+                        null;
+        if (stubReason) {
+            console.warn(`[compose] ${mode} ignored — ${stubReason}; current=`, current);
+            alert(`Cannot ${mode === "forward" ? "forward" : "reply to"} this message yet — ` +
+                `it's still loading (${stubReason}). Please wait a moment and try again.`);
+            return;
+        }
+    }
     const accounts = await getAccounts();
     const accountId = current?.accountId || accounts[0]?.id || "";
     const msg = current?.message;
@@ -431,20 +453,34 @@ async function openCompose(mode) {
         references: [],
         accounts: accounts.map((a) => ({ id: a.id, name: a.name, email: a.email })),
     };
-    // Auto-detect reply From: if the message was delivered to an identity domain,
-    // reply from that address instead of the default account address.
-    // Identity domains configured per-account in accounts.jsonc (identityDomains array).
+    // 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) => a.id === accountId);
-    const identityDomains = account?.identityDomains || [];
+    const explicitDomains = (account?.identityDomains || []).map((d) => d.toLowerCase());
+    const accountDomain = (account?.email || "").split("@")[1]?.toLowerCase();
+    const identityDomains = explicitDomains.length > 0
+        ? explicitDomains
+        : (accountDomain ? [accountDomain] : []);
     function detectReplyFrom() {
         if (!msg || identityDomains.length === 0)
             return undefined;
-        const candidates = [msg.deliveredTo, ...(msg.to || []).map((a) => a.address)].filter(Boolean);
-        console.log(`[compose] detectReplyFrom: deliveredTo=${msg.deliveredTo}, to=${msg.to?.map((a) => a.address)}, domains=${identityDomains}`);
+        // Prefer Delivered-To header (the address the server actually delivered
+        // to, which is the alias the message arrived at). Fall back to To, then
+        // Cc, in order. Bcc isn't visible to recipients so skipped.
+        const candidates = [
+            msg.deliveredTo,
+            ...((msg.to || []).map((a) => a.address)),
+            ...((msg.cc || []).map((a) => a.address)),
+        ].filter(Boolean);
+        console.log(`[compose] detectReplyFrom: deliveredTo=${msg.deliveredTo}, to=${msg.to?.map((a) => a.address)}, cc=${msg.cc?.map((a) => a.address)}, identityDomains=${identityDomains}, accountEmail=${account?.email}`);
         for (const addr of candidates) {
             const domain = addr.split("@")[1]?.toLowerCase();
-            if (domain && identityDomains.some((d) => domain === d.toLowerCase())) {
-                console.log(`[compose] matched: ${addr}`);
+            if (domain && identityDomains.some(d => domain === d || domain.endsWith(`.${d}`))) {
+                console.log(`[compose] reply From → ${addr}`);
                 return addr;
             }
         }
@@ -789,6 +825,45 @@ document.getElementById("btn-compose")?.addEventListener("click", () => openComp
 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"]');
+    inbox?.click();
+});
+document.getElementById("rail-unified")?.addEventListener("click", () => {
+    const unified = document.querySelector('.folder-tree .all-inboxes')
+        || document.getElementById("ft-all-inboxes");
+    unified?.click();
+});
+document.getElementById("rail-settings")?.addEventListener("click", () => {
+    document.getElementById("btn-settings")?.click();
+});
+document.getElementById("rail-help")?.addEventListener("click", () => {
+    document.getElementById("btn-about")?.click();
+});
+document.getElementById("rail-theme")?.addEventListener("click", () => {
+    // Cycle theme: system → dark → light → system.
+    const root = document.documentElement;
+    const cur = root.getAttribute("data-theme") || "system";
+    const next = cur === "system" ? "dark" : cur === "dark" ? "light" : "system";
+    root.setAttribute("data-theme", next);
+    try {
+        localStorage.setItem("mailx-theme", next);
+    }
+    catch { /* private mode */ }
+});
+// Highlight the current rail target. For now just inbox is the default; once
+// calendar/tasks ship, update this on view change.
+function setRailActive(id) {
+    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) => {
     if (e.detail.mode === "draft" && sessionStorage.getItem("composeInit")) {
@@ -1907,19 +1982,30 @@ optEditorTiptap?.addEventListener("change", () => {
     if (optEditorTiptap.checked)
         saveEditorSetting("tiptap");
 });
-// ── AI autocomplete toggle ──
+// ── 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");
-// Load current autocomplete setting
+const optAiTranslate = document.getElementById("opt-ai-translate");
+const optAiProofread = document.getElementById("opt-ai-proofread");
 getAutocompleteSettings().then((ac) => {
     if (optAutocomplete)
-        optAutocomplete.checked = ac.enabled || false;
+        optAutocomplete.checked = !!ac.enabled;
+    if (optAiTranslate)
+        optAiTranslate.checked = !!ac.translateEnabled;
+    if (optAiProofread)
+        optAiProofread.checked = !!ac.proofreadEnabled;
 }).catch(() => { });
-optAutocomplete?.addEventListener("change", () => {
+function persistAi(mutator) {
     getAutocompleteSettings().then((ac) => {
-        ac.enabled = optAutocomplete.checked;
+        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; }));
 const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 // Wait for server ready signal, then fetch version
 const versionPromise = getVersion();

package/client/components/folder-picker.js

@@ -0,0 +1,119 @@
+/**
+ * Folder picker — small modal for choosing a destination folder.
+ * Used by the message-list right-click "Move to folder…" item and any
+ * other UI that needs the user to pick a folder.
+ *
+ * Reads folders from the local DB via getFolders() (local-first — no
+ * server round-trip). Filters by typed text. Returns the selected
+ * folder, or null if the user dismissed.
+ */
+import { getFolders } from "../lib/api-client.js";
+/** Show a modal folder picker. Returns a promise resolving to the picked
+ *  folder, or null if dismissed. The list is restricted to one account
+ *  (the current message's account) so it doesn't get cluttered with
+ *  unrelated folders; cross-account moves can be added later via an
+ *  account selector at the top of the picker. */
+export function pickFolder(accountId, opts) {
+    return new Promise(async (resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "folder-picker-overlay";
+        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;";
+        const modal = document.createElement("div");
+        modal.className = "folder-picker-modal";
+        modal.style.cssText = "background:var(--bg, #fff);color:var(--fg, #000);border:1px solid var(--border, #ccc);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,0.3);width:380px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;";
+        const header = document.createElement("div");
+        header.style.cssText = "padding:10px 14px;border-bottom:1px solid var(--border, #ddd);font-weight:600;";
+        header.textContent = opts?.title || "Move to folder…";
+        modal.appendChild(header);
+        const search = document.createElement("input");
+        search.type = "text";
+        search.placeholder = "Filter folders…";
+        search.style.cssText = "margin:8px 12px;padding:6px 10px;border:1px solid var(--border, #ccc);border-radius:4px;font-size:13px;";
+        modal.appendChild(search);
+        const listEl = document.createElement("div");
+        listEl.style.cssText = "flex:1;overflow-y:auto;padding:4px 0;";
+        modal.appendChild(listEl);
+        const footer = document.createElement("div");
+        footer.style.cssText = "padding:8px 12px;border-top:1px solid var(--border, #ddd);display:flex;justify-content:flex-end;gap:8px;";
+        const cancelBtn = document.createElement("button");
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.style.cssText = "padding:6px 14px;cursor:pointer;";
+        footer.appendChild(cancelBtn);
+        modal.appendChild(footer);
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        const dismiss = (result) => {
+            overlay.remove();
+            document.removeEventListener("keydown", onKey);
+            resolve(result);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                dismiss(null);
+            }
+            if (e.key === "Enter") {
+                const first = listEl.querySelector(".folder-picker-row.match");
+                if (first)
+                    first.click();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        overlay.addEventListener("click", (e) => { if (e.target === overlay)
+            dismiss(null); });
+        cancelBtn.addEventListener("click", () => dismiss(null));
+        // Local-first: load from DB synchronously-ish (one IPC round-trip).
+        let folders = [];
+        try {
+            folders = (await getFolders(accountId)) || [];
+        }
+        catch (e) {
+            listEl.textContent = "Failed to load folders";
+            return;
+        }
+        // Hide special-use that don't make sense as targets (Outbox).
+        // Allow Trash / Junk so users can manually file into them.
+        const excluded = new Set(opts?.excludeFolderIds || []);
+        const targets = folders
+            .filter((f) => !excluded.has(f.id))
+            .filter((f) => f.specialUse !== "outbox")
+            .sort((a, b) => a.path.localeCompare(b.path));
+        function render(filter) {
+            listEl.innerHTML = "";
+            const lc = filter.toLowerCase().trim();
+            let firstMatchSet = false;
+            for (const f of targets) {
+                const row = document.createElement("div");
+                row.className = "folder-picker-row";
+                row.style.cssText = "padding:6px 14px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px;";
+                const name = document.createElement("span");
+                name.textContent = f.path;
+                const tag = document.createElement("span");
+                tag.style.cssText = "color:var(--muted, #888);font-size:11px;";
+                tag.textContent = f.specialUse || "";
+                row.appendChild(name);
+                row.appendChild(tag);
+                const matches = !lc || f.path.toLowerCase().includes(lc);
+                if (matches) {
+                    row.classList.add("match");
+                    if (!firstMatchSet) {
+                        row.style.background = "var(--hover, #eee)";
+                        firstMatchSet = true;
+                    }
+                }
+                row.addEventListener("mouseenter", () => row.style.background = "var(--hover, #eee)");
+                row.addEventListener("mouseleave", () => row.style.background = "");
+                row.addEventListener("click", () => {
+                    dismiss({ accountId, folderId: f.id, folderPath: f.path, folderName: f.path.split(/[./]/).pop() || f.path });
+                });
+                if (!matches)
+                    row.style.display = "none";
+                listEl.appendChild(row);
+            }
+        }
+        render("");
+        search.addEventListener("input", () => render(search.value));
+        setTimeout(() => search.focus(), 0);
+    });
+}
+//# sourceMappingURL=folder-picker.js.map

package/client/components/message-list.js

@@ -2,9 +2,10 @@
  * Message list component — renders paginated message rows.
  * Reads from message-state; operations mutate state, list reacts.
  */
-import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags, getThreadMessages } from "../lib/api-client.js";
+import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags, getThreadMessages, moveMessages as apiMoveMessages } from "../lib/api-client.js";
 import * as state from "../lib/message-state.js";
 import { showContextMenu } from "./context-menu.js";
+import { pickFolder } from "./folder-picker.js";
 let onMessageSelect;
 let currentAccountId;
 let currentFolderId;
@@ -620,6 +621,27 @@ function appendMessages(body, accountId, items) {
                     action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })),
                 },
                 { label: "", action: () => { }, separator: true },
+                {
+                    label: "Move to folder…",
+                    action: async () => {
+                        // Move all currently-selected rows (or just this one if it's the only selection)
+                        const selectedRows = Array.from(document.querySelectorAll(".ml-row.selected"));
+                        const uids = selectedRows.length > 0
+                            ? selectedRows.map((r) => Number(r.dataset.uid)).filter(u => !isNaN(u))
+                            : [msg.uid];
+                        const pick = await pickFolder(msgAccountId, { excludeFolderIds: [msg.folderId] });
+                        if (!pick)
+                            return;
+                        try {
+                            await apiMoveMessages(msgAccountId, uids, pick.folderId);
+                            // Remove from local state — reconciler handles server sync.
+                            state.removeMessages(uids.map(u => ({ accountId: msgAccountId, uid: u })));
+                        }
+                        catch (err) {
+                            alert(`Move failed: ${err.message}`);
+                        }
+                    },
+                },
                 {
                     label: "Delete",
                     action: () => document.dispatchEvent(new CustomEvent("mailx-delete")),

package/client/components/message-viewer.js

@@ -64,6 +64,61 @@ function setZoom(z, doc) {
 }
 /** Install preview iframe controls: key forwarding to parent, Ctrl+wheel zoom,
  *  keyboard zoom shortcuts (Ctrl+= / Ctrl+- / Ctrl+0), and the right-click menu. */
+/** Run AI translate on `text` and show result in a small modal. Disabled
+ *  by default — user enables via Settings (translateEnabled in
+ *  AutocompleteSettings). When disabled, the modal explains how to enable. */
+async function translateAndShow(text) {
+    if (!text.trim())
+        return;
+    const status = document.getElementById("status-sync");
+    if (status)
+        status.textContent = "Translating…";
+    const overlay = document.createElement("div");
+    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;";
+    const modal = document.createElement("div");
+    modal.style.cssText = "background:var(--bg, #fff);color:var(--fg, #000);border:1px solid var(--border, #ccc);border-radius:6px;width:560px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 4px 24px rgba(0,0,0,0.3);";
+    const header = document.createElement("div");
+    header.style.cssText = "padding:10px 14px;border-bottom:1px solid var(--border, #ddd);font-weight:600;display:flex;justify-content:space-between;align-items:center;";
+    header.innerHTML = `<span>Translation</span><button style="cursor:pointer;border:0;background:transparent;font-size:16px;" aria-label="Close">×</button>`;
+    const body = document.createElement("div");
+    body.style.cssText = "flex:1;overflow:auto;padding:12px 14px;white-space:pre-wrap;font-size:13px;line-height:1.45;";
+    body.textContent = "Working…";
+    modal.appendChild(header);
+    modal.appendChild(body);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    const close = () => overlay.remove();
+    header.querySelector("button")?.addEventListener("click", close);
+    overlay.addEventListener("click", (e) => { if (e.target === overlay)
+        close(); });
+    document.addEventListener("keydown", function onKey(e) {
+        if (e.key === "Escape") {
+            document.removeEventListener("keydown", onKey);
+            close();
+        }
+    });
+    try {
+        const { aiTransform } = await import("../lib/api-client.js");
+        const r = await aiTransform({ action: "translate", text, targetLang: "en" });
+        if (r.text) {
+            body.textContent = r.text;
+            if (status)
+                status.textContent = "";
+        }
+        else {
+            body.innerHTML = `<div style="color:var(--muted, #888);">No result.</div>` +
+                `<div style="margin-top:8px;font-size:12px;color:var(--muted, #888);">${r.reason || ""}</div>` +
+                `<div style="margin-top:14px;font-size:12px;">Enable AI translate in Settings → AI features (off by default).</div>`;
+            if (status)
+                status.textContent = `Translate: ${r.reason || "no result"}`;
+        }
+    }
+    catch (err) {
+        body.textContent = `Error: ${err?.message || String(err)}`;
+        if (status)
+            status.textContent = `Translate error: ${err?.message || ""}`;
+    }
+}
 function installPreviewControls(iframe) {
     const attach = () => {
         const doc = iframe.contentDocument;
@@ -124,18 +179,23 @@ function installPreviewControls(iframe) {
             const x = rect.left + me.clientX;
             const y = rect.top + me.clientY;
             const pct = Math.round(previewZoom * 100);
+            const sel = doc.defaultView?.getSelection();
+            const selectedText = sel?.toString().trim() || "";
             const items = [
                 { label: "Copy", action: () => doc.execCommand("copy") },
                 { label: "Select all", action: () => {
-                        const sel = doc.defaultView?.getSelection();
-                        if (!sel)
+                        const s = doc.defaultView?.getSelection();
+                        if (!s)
                             return;
                         const range = doc.createRange();
                         range.selectNodeContents(doc.body);
-                        sel.removeAllRanges();
-                        sel.addRange(range);
+                        s.removeAllRanges();
+                        s.addRange(range);
                     } },
                 { label: "", action: () => { }, separator: true },
+                { label: selectedText ? "Translate selection" : "Translate message",
+                    action: () => translateAndShow(selectedText || (doc.body?.innerText || "")) },
+                { label: "", action: () => { }, separator: true },
                 { label: "Zoom in", action: () => setZoom(previewZoom + ZOOM_STEP, doc) },
                 { label: "Zoom out", action: () => setZoom(previewZoom - ZOOM_STEP, doc) },
                 { label: `Reset zoom (${pct}%)`, action: () => setZoom(1, doc) },