@bobfrankston/mailx 1.0.244 → 1.0.251

package/bin/mailx.js

@@ -513,14 +513,14 @@ async function runTest() {
         // Test IMAP
         try {
             const { createAutoImapConfig, CompatImapClient } = await import("@bobfrankston/iflow-direct");
-            const { NodeTransport } = await import("@bobfrankston/iflow-node");
+            const { NodeTcpTransport } = await import("@bobfrankston/node-tcp-transport");
             const config = createAutoImapConfig({
                 server: account.imap.host,
                 port: account.imap.port,
                 username: account.imap.user,
                 password: account.imap.password
             });
-            const client = new CompatImapClient(config, () => new NodeTransport());
+            const client = new CompatImapClient(config, () => new NodeTcpTransport());
             const folders = await client.getFolderList();
             await client.logout();
             console.log(`  IMAP: OK (${folders.length} folders)`);
@@ -698,8 +698,8 @@ async function main() {
         }
     }
     const db = new MailxDB(getConfigDir());
-    const { NodeTransport } = await import("@bobfrankston/iflow-node");
-    const imapManager = new ImapManager(db, () => new NodeTransport());
+    const { NodeTcpTransport } = await import("@bobfrankston/node-tcp-transport");
+    const imapManager = new ImapManager(db, () => new NodeTcpTransport());
     // Native client is the only option (iflow-direct)
     const svc = new MailxService(db, imapManager);
     // Open msger in service mode — custom protocol serves files from client dir
@@ -769,6 +769,22 @@ async function main() {
             }, 1000); // batch count updates every 1s
         }
     });
+    // Batch folderSynced events (same cadence as counts) so a sync-all burst
+    // doesn't flood the WebView with one stdin write per folder.
+    let pendingSynced = {};
+    let syncedTimer = null;
+    imapManager.on("folderSynced", (accountId, folderId, syncedAt) => {
+        (pendingSynced[accountId] ||= []).push({ folderId, syncedAt });
+        if (!syncedTimer) {
+            syncedTimer = setTimeout(() => {
+                syncedTimer = null;
+                for (const [id, entries] of Object.entries(pendingSynced)) {
+                    handle.send({ _event: "folderSynced", type: "folderSynced", accountId: id, entries });
+                }
+                pendingSynced = {};
+            }, 1000);
+        }
+    });
     imapManager.on("syncError", (accountId, error) => {
         handle.send({ _event: "error", type: "error", message: `${accountId}: ${error}` });
     });

package/client/.msger-window.json

@@ -1 +1 @@
-{"height":1344,"width":2151,"x":419,"y":152}
+{"height":1344,"width":2151,"x":380,"y":73}

package/client/android.html

@@ -17,6 +17,10 @@
             "@bobfrankston/mailx-types": "../packages/mailx-types/index.js",
             "@bobfrankston/iflow-direct": "../node_modules/@bobfrankston/iflow-direct/index.js",
             "@bobfrankston/iflow-direct/": "../node_modules/@bobfrankston/iflow-direct/",
+            "@bobfrankston/smtp-direct": "../node_modules/@bobfrankston/smtp-direct/index.js",
+            "@bobfrankston/smtp-direct/": "../node_modules/@bobfrankston/smtp-direct/",
+            "@bobfrankston/tcp-transport": "../node_modules/@bobfrankston/tcp-transport/index.js",
+            "@bobfrankston/tcp-transport/": "../node_modules/@bobfrankston/tcp-transport/",
             "sql.js": "../packages/mailx-store-web/sql-wasm-esm.js"
         }
     }

package/client/app.js

@@ -2,7 +2,7 @@
  * mailx client entry point.
  * Wires together all UI components and WebSocket connection.
  */
-import { initFolderTree, refreshFolderTree, updateFolderCounts } from "./components/folder-tree.js";
+import { initFolderTree, refreshFolderTree, updateFolderCounts, setFolderSynced, getFolderSynced } from "./components/folder-tree.js";
 import { initMessageList, loadMessages, loadUnifiedInbox, loadSearchResults, reloadCurrentFolder, getSelectedMessages } from "./components/message-list.js";
 import { showMessage, getCurrentMessage, initViewer } from "./components/message-viewer.js";
 import { connectWebSocket, onWsEvent, triggerSync, syncAccount, reauthenticate, getAccounts, getFolders, deleteMessages, undeleteMessage, restartServer, getSyncPending, getVersion, getSettings, saveSettings, getAutocompleteSettings, saveAutocompleteSettings, repairAccounts, updateFlags } from "./lib/api-client.js";
@@ -154,6 +154,44 @@ let currentFolderSpecialUse = "";
 function clearViewer() {
     messageState.select(null); // Deselect — viewer clears via subscription
 }
+const folderTitleEl = document.getElementById("ml-folder-title");
+let currentFolderName = "";
+let currentFolderSyncedAt;
+function formatAge(ms) {
+    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() {
+    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) {
+    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;
@@ -164,12 +202,14 @@ initFolderTree(folderTree, (accountId, folderId, folderName, specialUse) => {
     clearViewer();
     loadMessages(accountId, folderId, 1, specialUse);
     setTitle(`mailx - ${folderName}`);
+    setNarrowFolderTitle(folderName);
 }, () => {
     // Unified inbox handler
     currentFolderSpecialUse = "inbox";
     clearViewer();
     loadUnifiedInbox();
     setTitle("mailx - All Inboxes");
+    setNarrowFolderTitle("All Inboxes");
 });
 initMessageList((accountId, uid, folderId) => {
     showMessage(accountId, uid, folderId, currentFolderSpecialUse);
@@ -216,14 +256,27 @@ if (messageList) {
 document.getElementById("btn-menu")?.addEventListener("click", () => {
     document.querySelector(".folder-panel")?.classList.toggle("open");
 });
-document.getElementById("btn-back")?.addEventListener("click", () => {
+const backToList = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     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);
 // 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.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
@@ -289,6 +342,14 @@ document.getElementById("btn-restart-quick")?.addEventListener("click", async ()
     if (restartDropdown)
         restartDropdown.hidden = true;
     if (isApp) {
+        // Android: check for updates before reloading
+        if (window.mailxapi?.platform === "android") {
+            const f = document.createElement("iframe");
+            f.style.display = "none";
+            f.src = "mailxapi://checkUpdate";
+            document.body.appendChild(f);
+            setTimeout(() => f.remove(), 100);
+        }
         // IPC mode: reload the UI (no server to restart)
         location.reload();
     }
@@ -755,10 +816,11 @@ window.addEventListener("message", (e) => {
     if (e.data?.type === "linkClick" && e.data.url) {
         const url = e.data.url;
         if (window.mailxapi?.platform === "android") {
-            // Android: use a hidden iframe to trigger OnNavigating which opens in Chrome
+            // 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 = url;
+            f.src = `mailxapi://openurl?url=${encodeURIComponent(url)}`;
             document.body.appendChild(f);
             setTimeout(() => f.remove(), 500);
         }
@@ -855,6 +917,16 @@ onWsEvent((event) => {
             // where folders don't exist until sync fetches them from Gmail API)
             refreshFolderTree();
             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": {
             // Update folder badges + silently refresh message list (preserves selection and viewer)
             updateFolderCounts();
@@ -1339,18 +1411,19 @@ const isApp = typeof mailxapi !== "undefined" && mailxapi?.isApp;
 // Wait for server ready signal, then fetch version
 const versionPromise = getVersion();
 versionPromise.then((d) => {
-    const el = document.getElementById("app-version");
+    const els = document.querySelectorAll(".app-version");
     const storage = d.storage || {};
     const storageLabel = storage.provider && storage.provider !== "local"
         ? ` [${storage.provider}]`
         : "";
-    if (el) {
-        el.textContent = `mailx v${d.version}${storageLabel}${isApp ? "" : " [browser]"}`;
-        // Tooltip: show Drive path on hover
-        if (storage.provider && storage.provider !== "local") {
-            const drivePath = storage.cloudPath ? `My Drive/${storage.cloudPath}/` : storage.provider;
-            el.title = drivePath;
-        }
+    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");
@@ -1386,15 +1459,10 @@ versionPromise.then((d) => {
     }
 }).catch((e) => {
     // Version fetch failed
-    const el = document.getElementById("app-version");
-    if (isApp) {
-        if (el)
-            el.textContent = `mailx [version error: ${e.message}]`;
-    }
-    else {
-        if (el)
-            el.textContent = "mailx [server offline]";
-    }
+    const els = document.querySelectorAll(".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;

package/client/components/folder-tree.js

@@ -18,6 +18,47 @@ const expandState = JSON.parse(localStorage.getItem("mailx-folders-expanded") ||
 function saveExpandState() {
     localStorage.setItem("mailx-folders-expanded", JSON.stringify(expandState));
 }
+// Last-sync tracking: populated by folderSynced events. Memory-only; fresh
+// restarts start with an empty map and fill in as syncs happen.
+const folderLastSync = new Map(); // key = `${accountId}:${folderId}`
+function syncKey(accountId, folderId) {
+    return `${accountId}:${folderId}`;
+}
+export function setFolderSynced(accountId, folderId, syncedAt) {
+    folderLastSync.set(syncKey(accountId, folderId), syncedAt);
+    // Update the row in place if rendered — avoids a full re-render.
+    const el = document.querySelector(`.ft-folder[data-account-id="${CSS.escape(accountId)}"][data-folder-id="${folderId}"]`);
+    if (el)
+        applyFreshness(el, syncedAt);
+}
+export function getFolderSynced(accountId, folderId) {
+    return folderLastSync.get(syncKey(accountId, folderId));
+}
+function formatAge(ms) {
+    const secs = Math.round(ms / 1000);
+    if (secs < 60)
+        return `${secs}s ago`;
+    const mins = Math.round(secs / 60);
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hours = Math.round(mins / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${Math.round(hours / 24)}d ago`;
+}
+function freshnessClass(ageMs) {
+    if (ageMs < 5 * 60_000)
+        return "fresh"; // green
+    if (ageMs < 30 * 60_000)
+        return "stale-soft"; // yellow
+    return "stale"; // red
+}
+function applyFreshness(el, syncedAt) {
+    const age = Date.now() - syncedAt;
+    el.classList.remove("fresh", "stale-soft", "stale");
+    el.classList.add(freshnessClass(age));
+    el.title = `Last synced: ${formatAge(age)} (${new Date(syncedAt).toLocaleTimeString()})`;
+}
 /** Build a tree from flat folder list using delimiter */
 function buildTree(folders, delimiter, accountId) {
     const root = [];
@@ -140,10 +181,17 @@ function renderNode(node, container, depth) {
         toggle.textContent = " ";
     }
     folderEl.appendChild(toggle);
+    const freshnessDot = document.createElement("span");
+    freshnessDot.className = "ft-freshness";
+    freshnessDot.setAttribute("aria-hidden", "true");
+    folderEl.appendChild(freshnessDot);
     const nameSpan = document.createElement("span");
     nameSpan.className = "ft-folder-name";
     nameSpan.textContent = node.name;
     folderEl.appendChild(nameSpan);
+    const syncedAt = getFolderSynced(node.accountId, node.id);
+    if (syncedAt)
+        applyFreshness(folderEl, syncedAt);
     const isOutbox = node.specialUse === "outbox" || node.path.toLowerCase() === "outbox";
     if (isOutbox && node.totalCount > 0) {
         // Outbox: show total (pending) count with warning style

package/client/components/message-viewer.js

@@ -49,8 +49,13 @@ function clampZoom(z) {
     return Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, Math.round(z * 100) / 100));
 }
 function applyZoom(doc) {
-    if (doc.body)
-        doc.body.style.zoom = String(previewZoom);
+    // Zoom lives on <html>, not <body>, because WebView2/Chromium's scroll
+    // container is the root element — body.style.zoom leaves the scroll
+    // container out of sync with the zoomed content, breaking scrollbar
+    // display and wheel scrolling. documentElement.style.zoom keeps them
+    // aligned so the iframe scrolls normally at any zoom level.
+    if (doc.documentElement)
+        doc.documentElement.style.zoom = String(previewZoom);
 }
 function setZoom(z, doc) {
     previewZoom = clampZoom(z);
@@ -96,6 +101,9 @@ function installPreviewControls(iframe) {
             e.preventDefault();
             setZoom(previewZoom + (e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP), doc);
         }, { passive: false });
+        // Link interception lives in the iframe's own inline <script> (see
+        // wrapHtmlBody). That script runs under a CSP nonce so email-body
+        // scripts stay blocked while ours forwards taps to the parent frame.
         doc.addEventListener("contextmenu", (e) => {
             e.preventDefault();
             const me = e;
@@ -411,6 +419,12 @@ export async function showMessage(accountId, uid, folderId, specialUse, isRetry
             iframe.sandbox.add("allow-popups");
             iframe.sandbox.add("allow-popups-to-escape-sandbox");
             iframe.sandbox.add("allow-top-navigation-by-user-activation");
+            // allow-scripts lets OUR injected <script> run (for Android link
+            // interception — parent-side contentDocument listeners don't fire
+            // reliably on Android WebView). CSP with a nonce restricts script
+            // execution to our tag only; inline scripts in the email body are
+            // still blocked.
+            iframe.sandbox.add("allow-scripts");
             iframe.srcdoc = wrapHtmlBody(msg.bodyHtml, msg.remoteAllowed);
             bodyEl.appendChild(iframe);
             installPreviewControls(iframe);
@@ -503,7 +517,14 @@ function formatSize(bytes) {
     return `${(bytes / 1048576).toFixed(1)} MB`;
 }
 function wrapHtmlBody(html, allowRemote = false) {
-    // CSP blocks remote resource loading (tracking pixels, external CSS) but allows link clicks
+    // CSP blocks remote resources (tracking pixels, external CSS). Inline
+    // scripts are allowed via 'unsafe-inline' so our injected link-tap handler
+    // runs; email-body <script> tags and on* handlers are stripped server-side
+    // by sanitizeHtml() in mailx-core, so this doesn't actually widen the
+    // attack surface. (A per-render nonce would be tidier, but meta-CSP with
+    // nonces isn't reliably honored across older WebViews — and when a nonce
+    // is present, 'unsafe-inline' is ignored, so our script fell back to
+    // blocked on those WebViews.)
     const csp = allowRemote
         ? ""
         : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: cid:; form-action 'none';">`;
@@ -512,6 +533,7 @@ function wrapHtmlBody(html, allowRemote = false) {
 <meta charset="UTF-8">
 ${csp}
 <style>
+    html { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
     body {
         font-family: system-ui, sans-serif;
         font-size: 17.5px;
@@ -520,6 +542,7 @@ ${csp}
         background: #fff;
         padding: 1rem;
         margin: 0;
+        min-height: 100%;
         word-break: break-word;
         color-scheme: dark light;
     }
@@ -535,19 +558,34 @@ ${csp}
 </style>
 <base target="_blank">
 <script>
-document.addEventListener("mouseover", e => {
-    const a = e.target.closest("a[href]");
-    window.parent.postMessage({ type: "linkHover", url: a ? a.href : "" }, "*");
-});
-// Intercept link clicks — Android WebView silently drops window.open, so forward to parent
-document.addEventListener("click", e => {
-    const a = e.target.closest("a[href]");
-    if (!a) return;
-    const url = a.href;
-    if (!url || url.startsWith("javascript:") || url.startsWith("#")) return;
-    e.preventDefault();
-    window.parent.postMessage({ type: "linkClick", url: url }, "*");
-}, true);
+// Link interception — Android WebView doesn't fire the default <a target="_blank">
+// new-window handler, so we postMessage to the parent which routes through the
+// native bridge (mailxapi://openurl) to Launcher.OpenAsync.
+(function () {
+    function handleLinkTap(e) {
+        var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
+        if (!a) return;
+        var url = a.href;
+        if (!url || url.indexOf("javascript:") === 0 || url.charAt(0) === "#") return;
+        e.preventDefault();
+        e.stopPropagation();
+        window.parent.postMessage({ type: "linkClick", url: url }, "*");
+    }
+    document.addEventListener("click", handleLinkTap, true);
+    var lastTouchTarget = null;
+    document.addEventListener("touchstart", function (e) {
+        lastTouchTarget = (e.target && e.target.closest) ? e.target.closest("a[href]") || e.target : e.target;
+    }, true);
+    document.addEventListener("touchend", function (e) {
+        var t = (e.target && e.target.closest) ? e.target.closest("a[href]") || e.target : e.target;
+        if (lastTouchTarget && lastTouchTarget === t) handleLinkTap(e);
+        lastTouchTarget = null;
+    }, true);
+    document.addEventListener("mouseover", function (e) {
+        var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
+        window.parent.postMessage({ type: "linkHover", url: a ? a.href : "" }, "*");
+    });
+})();
 </script>
 </head><body>${html}</body></html>`;
 }

package/client/index.html

@@ -15,7 +15,7 @@
         <div class="toolbar-left">
             <button class="tb-btn" id="btn-menu" title="Folders" hidden>☰</button>
             <button class="tb-btn" id="btn-compose" title="Compose (Ctrl+N)">
-                <span class="tb-icon">✏</span> Compose
+                <span class="tb-icon">✏</span><span class="tb-label"> Compose</span>
             </button>
         </div>
         <div class="toolbar-center">
@@ -46,11 +46,11 @@
         </div>
         <div class="toolbar-right">
             <button class="tb-btn" id="btn-sync" title="Sync all folders (F5)">
-                <span class="tb-icon">↻</span> Sync
+                <span class="tb-icon">↻</span><span class="tb-label"> Sync</span>
             </button>
             <div class="tb-menu" id="restart-menu">
                 <button class="tb-btn" id="btn-restart" title="Reload">
-                    <span class="tb-icon">⚡</span> Restart ▾
+                    <span class="tb-icon">⚡</span><span class="tb-label"> Restart ▾</span>
                 </button>
                 <div class="tb-menu-dropdown" id="restart-dropdown" hidden>
                     <button class="tb-menu-item" id="btn-restart-quick" title="Reload the page">Reload</button>
@@ -86,6 +86,7 @@
                 </select>
                 <input type="search" id="search-input" placeholder="Search... (/regex/)" autocomplete="off" title="Search messages. /pattern/ for regex. Qualifiers: from: to: subject:">
             </search>
+            <div class="ml-folder-title" id="ml-folder-title"></div>
             <div class="ml-header">
                 <span class="ml-col ml-col-flag"></span>
                 <span class="ml-col ml-col-from" data-sort="from">From</span>
@@ -134,6 +135,7 @@
         <span id="status-sync">Syncing...</span>
         <span id="status-pending"></span>
         <span id="status-queue"></span>
+        <span class="app-version" id="status-version">mailx</span>
     </footer>
 
     <div id="startup-overlay" class="startup-overlay">

package/client/styles/components.css

@@ -334,6 +334,43 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     .ml-col { cursor: pointer; &:hover { color: var(--color-text); } }
 }
 
+/* Narrow-mode folder title above the list — hidden on wide where the window
+   title and toolbar already convey location. */
+.ml-folder-title {
+    grid-column: 1 / -1;
+    display: none;
+    padding: var(--gap-sm) var(--gap-md);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--color-text);
+    user-select: none;
+}
+.ml-folder-age {
+    font-weight: 400;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin-left: var(--gap-xs);
+}
+
+/* Per-folder freshness dot — empty by default, colored once the folder has
+   a known last-sync time. Fresh (<5m) green, stale-soft (<30m) yellow,
+   stale (30m+) red. */
+.ft-folder .ft-freshness {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background: transparent;
+    border: 1px solid color-mix(in oklch, var(--color-text-muted) 40%, transparent);
+    flex-shrink: 0;
+}
+.ft-folder.fresh .ft-freshness { background: #4a9; border-color: transparent; }
+.ft-folder.stale-soft .ft-freshness { background: #d7a324; border-color: transparent; }
+.ft-folder.stale .ft-freshness { background: #c74; border-color: transparent; }
+
 .ml-body {
     grid-column: 1 / -1;
     overflow-y: auto;

package/client/styles/layout.css

@@ -91,6 +91,25 @@ body {
 @media (max-width: 768px), (max-height: 600px) {
     /* Hide preview snippet under message subject — save space */
     .ml-preview { display: none; }
+    /* Column headers (From/Date/Subject) take space without being useful on narrow */
+    .ml-header { display: none; }
+    /* Current folder name shown above the list, Dovecot-style */
+    .ml-folder-title { display: block; }
+    /* Version string overflows the toolbar on narrow — move to the status bar */
+    #app-version { display: none; }
+    #status-version {
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+        margin-left: auto;
+    }
+    /* Drop button captions on narrow — icons are self-explanatory and captions overflow */
+    .toolbar .tb-label { display: none; }
+    /* View and Settings menus don't need to shout on narrow */
+    #view-menu, #settings-menu { display: none; }
+}
+@media (min-width: 769px) {
+    /* Status-bar version is a narrow-only mirror — keep it hidden on wide */
+    #status-version { display: none; }
 }
 @media (max-width: 768px), (max-height: 600px) {
     body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.244",
+  "version": "1.0.251",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -20,11 +20,11 @@
     "postinstall": "node bin/postinstall.js"
   },
   "dependencies": {
-    "@bobfrankston/iflow-direct": "^0.1.12",
-    "@bobfrankston/iflow-node": "^0.1.2",
+    "@bobfrankston/iflow-direct": "^0.1.15",
+    "@bobfrankston/iflow-node": "^0.1.5",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.22",
-    "@bobfrankston/msger": "^0.1.306",
+    "@bobfrankston/msger": "^0.1.313",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -34,7 +34,10 @@
     "nodemailer": "^7.0.0",
     "quill": "^2.0.3",
     "ws": "^8.18.0",
-    "sql.js": "^1.14.1"
+    "sql.js": "^1.14.1",
+    "@bobfrankston/tcp-transport": "^0.1.3",
+    "@bobfrankston/node-tcp-transport": "^0.1.1",
+    "@bobfrankston/smtp-direct": "^0.1.2"
   },
   "devDependencies": {
     "@types/mailparser": "^3.4.6"
@@ -70,15 +73,18 @@
     "nodemailer": "^7.0.0",
     "quill": "^2.0.3",
     "ws": "^8.18.0",
-    "sql.js": "^1.14.1"
+    "sql.js": "^1.14.1",
+    "@bobfrankston/tcp-transport": "file:../MailApps/tcp-transport",
+    "@bobfrankston/node-tcp-transport": "file:../MailApps/node-tcp-transport",
+    "@bobfrankston/smtp-direct": "file:../MailApps/smtp-direct"
   },
   ".transformedSnapshot": {
     "dependencies": {
-      "@bobfrankston/iflow-direct": "^0.1.12",
-      "@bobfrankston/iflow-node": "^0.1.2",
+      "@bobfrankston/iflow-direct": "^0.1.15",
+      "@bobfrankston/iflow-node": "^0.1.5",
       "@bobfrankston/miscinfo": "^1.0.8",
       "@bobfrankston/oauthsupport": "^1.0.22",
-      "@bobfrankston/msger": "^0.1.306",
+      "@bobfrankston/msger": "^0.1.313",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",
@@ -88,7 +94,10 @@
       "nodemailer": "^7.0.0",
       "quill": "^2.0.3",
       "ws": "^8.18.0",
-      "sql.js": "^1.14.1"
+      "sql.js": "^1.14.1",
+      "@bobfrankston/tcp-transport": "^0.1.3",
+      "@bobfrankston/node-tcp-transport": "^0.1.1",
+      "@bobfrankston/smtp-direct": "^0.1.2"
     }
   }
 }