@bobfrankston/mailx 1.0.228 → 1.0.230

package/bin/mailx.js

@@ -775,6 +775,9 @@ async function main() {
     imapManager.on("accountError", (accountId, error, hint, isOAuth) => {
         handle.send({ _event: "accountError", type: "accountError", accountId, error, hint, isOAuth });
     });
+    imapManager.on("configChanged", (filename) => {
+        handle.send({ _event: "configChanged", type: "configChanged", filename });
+    });
     // Brief pause for WebView2 to initialize before starting IMAP (avoids stdin writes during init)
     await new Promise(r => setTimeout(r, 500));
     // Register all accounts (OAuth may open browser for Gmail — event loop stays free for IPC)
@@ -797,6 +800,7 @@ async function main() {
     }
     imapManager.startPeriodicSync(settings.sync.intervalMinutes);
     imapManager.startOutboxWorker();
+    imapManager.watchConfigFiles();
     // Graceful shutdown — close IMAP connections, stop timers, close DB
     let shuttingDown = false;
     async function gracefulShutdown(reason) {

package/client/app.js

@@ -866,6 +866,11 @@ onWsEvent((event) => {
         case "reload":
             location.reload();
             break;
+        case "configChanged":
+            // A watched config file (accounts.jsonc etc.) was modified externally.
+            // Show a banner telling the user to restart for changes to take effect.
+            showAlert(`${event.filename} was updated — restart mailx to apply changes`, `config-${event.filename}`);
+            break;
         case "error":
             if (statusSync)
                 statusSync.textContent = `Error: ${event.message}`;

package/client/components/message-list.js

@@ -2,7 +2,7 @@
  * 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 } from "../lib/api-client.js";
+import { getMessages as apiGetMessages, getUnifiedInbox as apiGetUnifiedInbox, searchMessages, updateFlags, getThreadMessages } from "../lib/api-client.js";
 import * as state from "../lib/message-state.js";
 import { showContextMenu } from "./context-menu.js";
 let onMessageSelect;
@@ -301,6 +301,61 @@ function restoreSelection(body, savedUid) {
             row.classList.add("selected");
     }
 }
+/** Show a floating list of all messages in a thread when the pill is clicked.
+ *  Each entry in the popup selects that message in the viewer when clicked.
+ *  This is simpler than inline expansion and avoids duplicating the row builder. */
+async function showThreadPopup(pillEl, headMsg) {
+    // Remove any existing popup
+    document.querySelectorAll(".ml-thread-popup").forEach(el => el.remove());
+    let thread = [];
+    try {
+        thread = await getThreadMessages(headMsg.accountId, headMsg.threadId);
+    }
+    catch { /* ignore */ }
+    if (!thread || thread.length === 0)
+        return;
+    thread.sort((a, b) => (a.date || 0) - (b.date || 0));
+    const popup = document.createElement("div");
+    popup.className = "ml-thread-popup";
+    for (const msg of thread) {
+        const item = document.createElement("div");
+        item.className = "ml-thread-popup-item";
+        if (!msg.flags.includes("\\Seen"))
+            item.classList.add("unread");
+        const from = document.createElement("span");
+        from.className = "ml-thread-popup-from";
+        from.textContent = msg.from?.name || msg.from?.address || "?";
+        const date = document.createElement("span");
+        date.className = "ml-thread-popup-date";
+        date.textContent = formatDate(msg.date);
+        const subject = document.createElement("span");
+        subject.className = "ml-thread-popup-subject";
+        subject.textContent = msg.subject || "(no subject)";
+        item.appendChild(from);
+        item.appendChild(date);
+        item.appendChild(subject);
+        item.addEventListener("click", async () => {
+            state.select({ accountId: msg.accountId, uid: msg.uid, folderId: msg.folderId, subject: msg.subject, from: msg.from, to: msg.to, cc: msg.cc, date: msg.date, flags: msg.flags, size: msg.size, preview: msg.preview, hasAttachments: msg.hasAttachments });
+            onMessageSelect(msg.accountId, msg.uid, msg.folderId);
+            popup.remove();
+        });
+        popup.appendChild(item);
+    }
+    document.body.appendChild(popup);
+    const rect = pillEl.getBoundingClientRect();
+    popup.style.left = `${rect.left}px`;
+    popup.style.top = `${rect.bottom + 4}px`;
+    // Dismiss on outside click
+    setTimeout(() => {
+        const dismiss = (e) => {
+            if (!popup.contains(e.target)) {
+                popup.remove();
+                document.removeEventListener("mousedown", dismiss, true);
+            }
+        };
+        document.addEventListener("mousedown", dismiss, true);
+    }, 0);
+}
 function appendMessages(body, accountId, items) {
     // Thread grouping: when the list has the "threaded" class, collapse messages
     // sharing the same threadId to a single row showing the most recent message,
@@ -373,15 +428,20 @@ function appendMessages(body, accountId, items) {
         const subject = document.createElement("span");
         subject.className = "ml-subject";
         subject.innerHTML = escapeHtml(msg.subject);
-        // Thread size pill: e.g. "(3)" next to the subject when this row
-        // represents a collapsed thread with multiple messages.
+        // Thread size pill: click to show a popup list of the thread's messages.
         if (threadSize) {
             const n = threadSize.get(msg) || 1;
-            if (n > 1) {
+            if (n > 1 && msg.threadId) {
+                row.classList.add("thread-head");
+                row.dataset.threadId = msg.threadId;
                 const threadPill = document.createElement("span");
                 threadPill.className = "ml-thread-pill";
                 threadPill.textContent = String(n);
-                threadPill.title = `${n} messages in this thread`;
+                threadPill.title = `${n} messages in this thread — click to see list`;
+                threadPill.addEventListener("click", async (e) => {
+                    e.stopPropagation();
+                    await showThreadPopup(threadPill, msg);
+                });
                 subject.prepend(threadPill);
             }
         }

package/client/lib/api-client.js

@@ -149,6 +149,9 @@ export function deleteDraft(accountId, draftUid, draftId) {
 export function addContact(name, email) {
     return ipc().addContact?.(name, email);
 }
+export function getThreadMessages(accountId, threadId) {
+    return ipc().getThreadMessages?.(accountId, threadId);
+}
 export function readJsoncFile(name) {
     return ipc().readJsoncFile?.(name);
 }

package/client/lib/mailxapi.js

@@ -100,6 +100,9 @@
         addContact: function(name, email) {
             return callNode("addContact", { name: name, email: email });
         },
+        getThreadMessages: function(accountId, threadId) {
+            return callNode("getThreadMessages", { accountId: accountId, threadId: threadId });
+        },
         readJsoncFile: function(name) {
             return callNode("readJsoncFile", { name: name });
         },

package/client/styles/components.css

@@ -411,6 +411,58 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     vertical-align: baseline;
     min-width: 1.5em;
     text-align: center;
+    cursor: pointer;
+}
+.ml-thread-pill:hover { filter: brightness(1.15); }
+
+/* Popup that lists the messages in a thread, anchored below the clicked pill. */
+.ml-thread-popup {
+    position: fixed;
+    min-width: 320px;
+    max-width: 600px;
+    max-height: 60vh;
+    overflow-y: auto;
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    padding: var(--gap-xs);
+    z-index: 1500;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-sm);
+}
+.ml-thread-popup-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 4px var(--gap-sm);
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+.ml-thread-popup-item:hover { background: var(--color-bg-hover); }
+.ml-thread-popup-item.unread .ml-thread-popup-from,
+.ml-thread-popup-item.unread .ml-thread-popup-subject { font-weight: 600; }
+.ml-thread-popup-from {
+    grid-column: 1;
+    grid-row: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.ml-thread-popup-date {
+    grid-column: 2;
+    grid-row: 1;
+    color: var(--color-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+.ml-thread-popup-subject {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    color: var(--color-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /* Generic modal — used by the JSONC config editor launched from Settings */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.228",
+  "version": "1.0.230",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -24,7 +24,7 @@
     "@bobfrankston/iflow-node": "^0.1.2",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.22",
-    "@bobfrankston/msger": "^0.1.290",
+    "@bobfrankston/msger": "^0.1.292",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -78,7 +78,7 @@
       "@bobfrankston/iflow-node": "^0.1.2",
       "@bobfrankston/miscinfo": "^1.0.8",
       "@bobfrankston/oauthsupport": "^1.0.22",
-      "@bobfrankston/msger": "^0.1.290",
+      "@bobfrankston/msger": "^0.1.292",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",

package/packages/mailx-imap/index.d.ts

@@ -18,6 +18,7 @@ export interface ImapManagerEvents {
         unread: number;
     }>) => void;
     accountError: (accountId: string, error: string, hint: string, isOAuth: boolean) => void;
+    configChanged: (filename: string) => void;
 }
 export declare class ImapManager extends EventEmitter {
     private configs;
@@ -205,6 +206,13 @@ export declare class ImapManager extends EventEmitter {
     startOutboxWorker(): void;
     /** Stop Outbox worker */
     stopOutboxWorker(): void;
+    private configWatchers;
+    /** Watch the local config files for external changes. On change, emit
+     *  configChanged so the UI can show a "restart to apply" banner. Uses
+     *  a debounce to coalesce rapid writes from save tools. */
+    watchConfigFiles(): void;
+    /** Stop all config file watchers */
+    stopWatchingConfig(): void;
     private contactsSyncToken;
     /** Get an OAuth token for Google APIs (contacts, calendar, etc.)
      *  Uses the SAME token as IMAP — scopes are combined in one grant */

package/packages/mailx-imap/index.js

@@ -2116,6 +2116,47 @@ export class ImapManager extends EventEmitter {
             this.outboxInterval = null;
         }
     }
+    // ── Config file watcher ──
+    configWatchers = [];
+    /** Watch the local config files for external changes. On change, emit
+     *  configChanged so the UI can show a "restart to apply" banner. Uses
+     *  a debounce to coalesce rapid writes from save tools. */
+    watchConfigFiles() {
+        const files = ["accounts.jsonc", "allowlist.jsonc", "clients.jsonc", "config.jsonc"];
+        const configDir = getConfigDir();
+        const debounce = new Map();
+        for (const filename of files) {
+            const full = path.join(configDir, filename);
+            if (!fs.existsSync(full))
+                continue;
+            try {
+                const watcher = fs.watch(full, () => {
+                    const prev = debounce.get(filename);
+                    if (prev)
+                        clearTimeout(prev);
+                    debounce.set(filename, setTimeout(() => {
+                        debounce.delete(filename);
+                        console.log(`  [watch] ${filename} changed`);
+                        this.emit("configChanged", filename);
+                    }, 500));
+                });
+                this.configWatchers.push(watcher);
+            }
+            catch (e) {
+                console.error(`  [watch] Failed to watch ${filename}: ${e.message}`);
+            }
+        }
+    }
+    /** Stop all config file watchers */
+    stopWatchingConfig() {
+        for (const w of this.configWatchers) {
+            try {
+                w.close();
+            }
+            catch { /* ignore */ }
+        }
+        this.configWatchers = [];
+    }
     // ── Google Contacts Sync ──
     contactsSyncToken = null;
     /** Get an OAuth token for Google APIs (contacts, calendar, etc.)

package/packages/mailx-service/index.d.ts

@@ -59,6 +59,8 @@ export declare class MailxService {
      *  action on From/To/Cc addresses in the message viewer. Just calls the same
      *  validated upsert path as recordSentAddress. */
     addContact(name: string, email: string): boolean;
+    /** Get all messages in a thread (across folders) for an account. */
+    getThreadMessages(accountId: string, threadId: string): any;
     /** Read a JSONC config file from the shared cloud dir or local ~/.mailx.
      *  Names are whitelisted so the UI can't read arbitrary files. */
     readJsoncFile(name: string): Promise<string | null>;

package/packages/mailx-service/index.js

@@ -659,6 +659,10 @@ export class MailxService {
         this.db.recordSentAddress(name || "", email);
         return true;
     }
+    /** Get all messages in a thread (across folders) for an account. */
+    getThreadMessages(accountId, threadId) {
+        return this.db.getThreadMessages(accountId, threadId);
+    }
     /** Read a JSONC config file from the shared cloud dir or local ~/.mailx.
      *  Names are whitelisted so the UI can't read arbitrary files. */
     async readJsoncFile(name) {

package/packages/mailx-service/jsonrpc.js

@@ -96,6 +96,8 @@ async function dispatchAction(svc, action, p) {
             return svc.searchContacts(p.query);
         case "addContact":
             return { ok: svc.addContact(p.name, p.email) };
+        case "getThreadMessages":
+            return svc.getThreadMessages(p.accountId, p.threadId);
         case "readJsoncFile":
             return { content: await svc.readJsoncFile(p.name) };
         case "writeJsoncFile":