@bobfrankston/mailx 1.0.225 → 1.0.226

package/client/app.js

@@ -1019,6 +1019,7 @@ const viewDropdown = document.getElementById("view-dropdown");
 const optTwoLine = document.getElementById("opt-two-line");
 const optPreview = document.getElementById("opt-preview");
 const optSnippet = document.getElementById("opt-snippet");
+const optThreaded = document.getElementById("opt-threaded");
 const optFlagged = document.getElementById("opt-flagged");
 const optFolderCounts = document.getElementById("opt-folder-counts");
 // Toggle dropdown
@@ -1037,6 +1038,7 @@ document.addEventListener("click", () => {
 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)
@@ -1045,6 +1047,8 @@ if (optPreview)
     optPreview.checked = savedPreview;
 if (optSnippet)
     optSnippet.checked = savedSnippet;
+if (optThreaded)
+    optThreaded.checked = savedThreaded;
 if (optFlagged)
     optFlagged.checked = savedFlagged;
 if (optFolderCounts)
@@ -1055,6 +1059,8 @@ 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)
@@ -1092,6 +1098,18 @@ optSnippet?.addEventListener("change", () => {
     }
     localStorage.setItem("mailx-snippet", String(optSnippet.checked));
 });
+// 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
 optFlagged?.addEventListener("change", () => {
     const body = document.getElementById("ml-body");

package/client/components/message-list.js

@@ -302,7 +302,33 @@ function restoreSelection(body, savedUid) {
     }
 }
 function appendMessages(body, accountId, items) {
-    for (const msg of 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,
+    // with a small pill indicating the thread size. Pre-threading messages have
+    // no threadId — those are treated as singletons keyed by their own uid.
+    const threaded = body.classList.contains("threaded");
+    let rowsToRender = items;
+    let threadSize = null;
+    if (threaded) {
+        const threadMap = new Map(); // threadId → newest msg
+        threadSize = new Map();
+        for (const msg of items) {
+            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
+            const existing = threadMap.get(key);
+            if (!existing || (msg.date || 0) > (existing.date || 0)) {
+                threadMap.set(key, msg);
+            }
+        }
+        // Count messages per thread
+        for (const msg of items) {
+            const key = msg.threadId || `_msg_${msg.accountId || accountId}_${msg.uid}`;
+            const head = threadMap.get(key);
+            if (head)
+                threadSize.set(head, (threadSize.get(head) || 0) + 1);
+        }
+        rowsToRender = Array.from(threadMap.values()).sort((a, b) => (b.date || 0) - (a.date || 0));
+    }
+    for (const msg of rowsToRender) {
         const msgAccountId = msg.accountId || accountId;
         const row = document.createElement("div");
         row.className = "ml-row";
@@ -347,6 +373,18 @@ 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.
+        if (threadSize) {
+            const n = threadSize.get(msg) || 1;
+            if (n > 1) {
+                const threadPill = document.createElement("span");
+                threadPill.className = "ml-thread-pill";
+                threadPill.textContent = String(n);
+                threadPill.title = `${n} messages in this thread`;
+                subject.prepend(threadPill);
+            }
+        }
         if (msg.preview) {
             const preview = document.createElement("span");
             preview.className = "ml-preview";

package/client/index.html

@@ -25,6 +25,7 @@
                     <label class="tb-menu-item"><input type="checkbox" id="opt-two-line"> Two-line view</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-threaded"> Group by thread</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
                     <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                 </div>

package/client/styles/components.css

@@ -399,6 +399,19 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.ml-thread-pill {
+    display: inline-block;
+    padding: 0 6px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    border-radius: 999px;
+    margin-right: 6px;
+    color: #fff;
+    background: var(--color-accent);
+    vertical-align: baseline;
+    min-width: 1.5em;
+    text-align: center;
+}
 .ml-subject {
     overflow: hidden;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.225",
+  "version": "1.0.226",
   "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.287",
+    "@bobfrankston/msger": "^0.1.288",
     "@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.287",
+      "@bobfrankston/msger": "^0.1.288",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",

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

@@ -56,6 +56,7 @@ export declare function getMessage(params: {
     messageId: string;
     inReplyTo: string;
     references: string[];
+    threadId?: string;
     date: number;
     subject: string;
     from: import("@bobfrankston/mailx-types").EmailAddress;

package/packages/mailx-imap/index.js

@@ -530,7 +530,9 @@ export class ImapManager extends EventEmitter {
                     flags.push("\\Draft");
                 this.db.upsertMessage({
                     accountId, folderId, uid: msg.uid,
-                    messageId: msg.messageId || "", inReplyTo: "", references: [],
+                    messageId: msg.messageId || "",
+                    inReplyTo: msg.inReplyTo || "",
+                    references: [],
                     date: msg.date instanceof Date ? msg.date.getTime() : (typeof msg.date === "number" ? msg.date : Date.now()),
                     subject: msg.subject || "",
                     from: toEmailAddress(msg.from?.[0] || {}),
@@ -687,7 +689,7 @@ export class ImapManager extends EventEmitter {
                         folderId,
                         uid: msg.uid,
                         messageId: msg.messageId || "",
-                        inReplyTo: "",
+                        inReplyTo: msg.inReplyTo || "",
                         references: [],
                         date: msg.date instanceof Date ? msg.date.getTime() : (typeof msg.date === "number" ? msg.date : Date.now()),
                         subject: msg.subject || "",
@@ -1021,7 +1023,9 @@ export class ImapManager extends EventEmitter {
                     flags.push("\\Draft");
                 this.db.upsertMessage({
                     accountId, folderId, uid: msg.uid,
-                    messageId: msg.messageId || "", inReplyTo: "", references: [],
+                    messageId: msg.messageId || "",
+                    inReplyTo: msg.inReplyTo || "",
+                    references: msg.references || [],
                     date: msg.date instanceof Date ? msg.date.getTime() : Date.now(),
                     subject: msg.subject || "",
                     from: toEmailAddress(msg.from?.[0] || {}),

package/packages/mailx-imap/providers/gmail-api.js

@@ -135,7 +135,7 @@ export class GmailApiProvider {
             for (const id of chunk) {
                 const params = new URLSearchParams({ format });
                 if (format === "metadata") {
-                    for (const h of ["From", "To", "Cc", "Subject", "Message-ID", "Date"]) {
+                    for (const h of ["From", "To", "Cc", "Subject", "Message-ID", "Date", "In-Reply-To", "References"]) {
                         params.append("metadataHeaders", h);
                     }
                 }
@@ -164,6 +164,11 @@ export class GmailApiProvider {
         const dateRaw = getHeader(headers, "Date") || "";
         const subject = getHeader(headers, "Subject") || msg.snippet || "";
         const messageId = getHeader(headers, "Message-ID") || "";
+        const inReplyTo = getHeader(headers, "In-Reply-To") || "";
+        const referencesRaw = getHeader(headers, "References") || "";
+        const references = referencesRaw.trim()
+            ? referencesRaw.split(/\s+/).filter(r => r.startsWith("<") && r.endsWith(">"))
+            : [];
         return {
             uid: idToUid(msg.id),
             messageId,
@@ -173,6 +178,8 @@ export class GmailApiProvider {
             from: parseAddressList(fromRaw),
             to: parseAddressList(toRaw),
             cc: parseAddressList(ccRaw),
+            inReplyTo,
+            references,
             seen: !labels.includes("UNREAD"),
             flagged: labels.includes("STARRED"),
             answered: false, // Gmail API doesn't expose this directly
@@ -218,7 +225,7 @@ export class GmailApiProvider {
         const format = options.source ? "raw" : "metadata";
         const params = new URLSearchParams({ format });
         if (format === "metadata") {
-            for (const h of ["From", "To", "Cc", "Subject", "Message-ID", "Date"]) {
+            for (const h of ["From", "To", "Cc", "Subject", "Message-ID", "Date", "In-Reply-To", "References"]) {
                 params.append("metadataHeaders", h);
             }
         }

package/packages/mailx-imap/providers/types.d.ts

@@ -27,6 +27,8 @@ export interface ProviderMessage {
         name?: string;
         address?: string;
     }[];
+    inReplyTo?: string;
+    references?: string[];
     seen: boolean;
     flagged: boolean;
     answered: boolean;

package/packages/mailx-store/db.d.ts

@@ -7,6 +7,17 @@ import type { MessageEnvelope, Folder, EmailAddress, PagedResult, MessageQuery }
 export declare class MailxDB {
     private db;
     constructor(dbDir: string);
+    /** Idempotently add a column to a table if it's missing. */
+    private addColumnIfMissing;
+    /** Compute a thread id for an incoming message. Strategy:
+     *  1. If any ancestor (in_reply_to or references) is already present in
+     *     messages with a thread_id, reuse it — this handles the case where
+     *     replies arrive before / after the root.
+     *  2. Otherwise use the oldest ref (first entry in References), or
+     *     in_reply_to, or the message's own messageId as the thread root. */
+    private computeThreadId;
+    /** Get all messages in a thread (across folders) for a given account. */
+    getThreadMessages(accountId: string, threadId: string): MessageEnvelope[];
     close(): void;
     upsertAccount(id: string, name: string, email: string, configJson: string): void;
     getAccounts(): {

package/packages/mailx-store/db.js

@@ -37,6 +37,7 @@ const SCHEMA = `
         message_id TEXT,
         in_reply_to TEXT,
         refs TEXT,
+        thread_id TEXT,
         date INTEGER NOT NULL,
         subject TEXT DEFAULT '',
         from_address TEXT DEFAULT '',
@@ -58,6 +59,9 @@ const SCHEMA = `
     CREATE INDEX IF NOT EXISTS idx_messages_message_id
         ON messages(message_id);
 
+    CREATE INDEX IF NOT EXISTS idx_messages_thread_id
+        ON messages(account_id, thread_id);
+
     CREATE TABLE IF NOT EXISTS queue (
         id INTEGER PRIMARY KEY AUTOINCREMENT,
         status TEXT NOT NULL DEFAULT 'pending',
@@ -122,6 +126,73 @@ export class MailxDB {
         this.db.exec("PRAGMA journal_mode = WAL");
         this.db.exec("PRAGMA foreign_keys = ON");
         this.db.exec(SCHEMA);
+        // Idempotent migrations for older databases that predate new columns.
+        // SQLite doesn't support "ADD COLUMN IF NOT EXISTS", so we probe the
+        // table schema and add missing columns one by one.
+        this.addColumnIfMissing("messages", "thread_id", "TEXT");
+        try {
+            this.db.exec("CREATE INDEX IF NOT EXISTS idx_messages_thread_id ON messages(account_id, thread_id)");
+        }
+        catch { /* already exists */ }
+    }
+    /** Idempotently add a column to a table if it's missing. */
+    addColumnIfMissing(table, column, sqlType) {
+        const cols = this.db.prepare(`PRAGMA table_info(${table})`).all();
+        if (cols.some(c => c.name === column))
+            return;
+        this.db.exec(`ALTER TABLE ${table} ADD COLUMN ${column} ${sqlType}`);
+    }
+    /** Compute a thread id for an incoming message. Strategy:
+     *  1. If any ancestor (in_reply_to or references) is already present in
+     *     messages with a thread_id, reuse it — this handles the case where
+     *     replies arrive before / after the root.
+     *  2. Otherwise use the oldest ref (first entry in References), or
+     *     in_reply_to, or the message's own messageId as the thread root. */
+    computeThreadId(accountId, messageId, inReplyTo, references) {
+        const candidates = [];
+        if (references && references.length)
+            candidates.push(...references);
+        if (inReplyTo && !candidates.includes(inReplyTo))
+            candidates.push(inReplyTo);
+        if (messageId && !candidates.includes(messageId))
+            candidates.push(messageId);
+        // Look for an existing thread anchored on any of the ancestors
+        for (const mid of candidates) {
+            if (!mid)
+                continue;
+            const row = this.db.prepare("SELECT thread_id FROM messages WHERE account_id = ? AND message_id = ? AND thread_id IS NOT NULL LIMIT 1").get(accountId, mid);
+            if (row?.thread_id)
+                return row.thread_id;
+        }
+        // No existing thread — seed from the oldest ref, falling back to
+        // in_reply_to, then messageId
+        return (references && references[0]) || inReplyTo || messageId || `orphan-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    }
+    /** Get all messages in a thread (across folders) for a given account. */
+    getThreadMessages(accountId, threadId) {
+        if (!threadId)
+            return [];
+        const rows = this.db.prepare(`SELECT * FROM messages WHERE account_id = ? AND thread_id = ? ORDER BY date ASC`).all(accountId, threadId);
+        return rows.map(r => ({
+            id: r.id,
+            accountId: r.account_id,
+            folderId: r.folder_id,
+            uid: r.uid,
+            messageId: r.message_id || "",
+            inReplyTo: r.in_reply_to || "",
+            references: JSON.parse(r.refs || "[]"),
+            threadId: r.thread_id || undefined,
+            date: r.date,
+            subject: r.subject,
+            from: { name: r.from_name, address: r.from_address },
+            to: JSON.parse(r.to_json),
+            cc: JSON.parse(r.cc_json),
+            flags: JSON.parse(r.flags_json),
+            size: r.size,
+            hasAttachments: !!r.has_attachments,
+            preview: r.preview,
+            bodyPath: r.body_path || undefined,
+        }));
     }
     close() {
         this.db.close();
@@ -201,13 +272,18 @@ export class MailxDB {
         }
         const toText = msg.to.map(a => `${a.name} ${a.address}`).join(" ");
         const ccText = msg.cc.map(a => `${a.name} ${a.address}`).join(" ");
+        // Thread id = oldest ancestor in the reference chain, or the in-reply-to
+        // parent, or the message's own Message-ID as a fallback. We also check
+        // whether an existing row already has a thread_id for any of the refs,
+        // so late-arriving replies latch onto the same thread.
+        const threadId = this.computeThreadId(msg.accountId, msg.messageId, msg.inReplyTo, msg.references);
         const result = this.db.prepare(`
             INSERT INTO messages (
-                account_id, folder_id, uid, message_id, in_reply_to, refs,
+                account_id, folder_id, uid, message_id, in_reply_to, refs, thread_id,
                 date, subject, from_address, from_name, to_json, cc_json,
                 flags_json, size, has_attachments, preview, body_path, cached_at
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-        `).run(msg.accountId, msg.folderId, msg.uid, msg.messageId, msg.inReplyTo, JSON.stringify(msg.references), msg.date, msg.subject, msg.from.address, msg.from.name, JSON.stringify(msg.to), JSON.stringify(msg.cc), JSON.stringify(msg.flags), msg.size, msg.hasAttachments ? 1 : 0, msg.preview, msg.bodyPath, Date.now());
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        `).run(msg.accountId, msg.folderId, msg.uid, msg.messageId, msg.inReplyTo, JSON.stringify(msg.references), threadId, msg.date, msg.subject, msg.from.address, msg.from.name, JSON.stringify(msg.to), JSON.stringify(msg.cc), JSON.stringify(msg.flags), msg.size, msg.hasAttachments ? 1 : 0, msg.preview, msg.bodyPath, Date.now());
         const rowId = Number(result.lastInsertRowid);
         // Index for full-text search
         try {
@@ -240,6 +316,7 @@ export class MailxDB {
             messageId: r.message_id || "",
             inReplyTo: r.in_reply_to || "",
             references: JSON.parse(r.refs || "[]"),
+            threadId: r.thread_id || undefined,
             date: r.date,
             subject: r.subject,
             from: { name: r.from_name, address: r.from_address },
@@ -272,6 +349,7 @@ export class MailxDB {
             messageId: r.message_id || "",
             inReplyTo: r.in_reply_to || "",
             references: JSON.parse(r.refs || "[]"),
+            threadId: r.thread_id || undefined,
             date: r.date,
             subject: r.subject,
             from: { name: r.from_name, address: r.from_address },
@@ -301,6 +379,7 @@ export class MailxDB {
             messageId: r.message_id || "",
             inReplyTo: r.in_reply_to || "",
             references: JSON.parse(r.refs || "[]"),
+            threadId: r.thread_id || undefined,
             date: r.date,
             subject: r.subject,
             from: { name: r.from_name, address: r.from_address },

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

@@ -64,6 +64,7 @@ export interface MessageEnvelope {
     messageId: string; /** RFC Message-ID header */
     inReplyTo: string; /** For threading */
     references: string[]; /** For threading */
+    threadId?: string; /** Computed thread id (root Message-ID of the conversation) */
     date: number; /** Epoch ms */
     subject: string;
     from: EmailAddress;