@bobfrankston/rmfmail 1.1.36 → 1.1.37

package/client/components/message-list.ts

@@ -82,7 +82,7 @@ function cacheKey(mode: "folder" | "search", a?: string, f?: number, flagged?: b
  *  Gmail's hash-derived ids). If no smaller uid exists either, fall
  *  back to whatever row sits at the same numeric index. Survives a
  *  session reload via sessionStorage. */
-interface ViewPosition { uid: number; scroll: number; }
+interface ViewPosition { uid: number; uuid?: string; scroll: number; }
 const positionMemory = new Map<string, ViewPosition>();
 const POSITION_STORAGE_KEY = "mailx-list-positions";
 try {
@@ -117,25 +117,36 @@ function rememberPosition(): void {
     if (!sel) return;
     const uid = Number(sel.dataset.uid);
     if (!Number.isFinite(uid)) return;
-    positionMemory.set(key, { uid, scroll: body.scrollTop });
+    // Remember the stable `uuid` as the primary identity — bare `uid` is only
+    // unique within (account, folder), so restoring by it can rebind the
+    // viewer to a different message that happens to share the uid number.
+    // `uid` is kept only for the next-older-neighbor fallback when the
+    // remembered message has since been deleted.
+    positionMemory.set(key, { uid, uuid: sel.dataset.uuid || "", scroll: body.scrollTop });
     persistPositions();
 }
 /** Choose the row to focus when re-entering a view with saved position.
  *  Returns the uid to focus, or null to fall back to selectFirst. */
-function pickRestoreUid(items: any[], saved: number): number | null {
+function pickRestoreUid(items: any[], saved: ViewPosition): string | null {
     if (!items.length) return null;
-    if (items.some(m => m.uid === saved)) return saved;
-    // Next-older entry: largest remaining uid that is < saved. Stable
-    // even if list is unsorted by uid (loops through all rows).
-    let best = -1;
+    // Exact restore by stable uuid — globally unique, so this can never
+    // rebind the viewer to a same-uid-number message in another folder
+    // (the bug: viewer silently jumped to a different letter mid-cleanup).
+    if (saved.uuid) {
+        const exact = items.find(m => m.uuid && m.uuid === saved.uuid);
+        if (exact?.uuid) return exact.uuid;
+    }
+    // Saved message is gone (deleted). Pick the next-older entry by uid —
+    // uid is roughly monotonic with arrival on IMAP/Gmail — and return ITS
+    // uuid so the restore stays uuid-keyed end to end.
+    let best: any = null;
     for (const m of items) {
-        if (typeof m.uid !== "number") continue;
-        if (m.uid < saved && m.uid > best) best = m.uid;
+        if (typeof m.uid !== "number" || !m.uuid) continue;
+        if (m.uid < saved.uid && (!best || m.uid > best.uid)) best = m;
     }
-    if (best >= 0) return best;
-    // No older entry — saved was the bottom of the list. Snap to the
-    // first row that sorts "after" via date-desc tie-break (top of list).
-    return typeof items[0]?.uid === "number" ? items[0].uid : null;
+    if (best) return best.uuid;
+    // No older entry — saved was the bottom. Snap to the top of the list.
+    return items[0]?.uuid || null;
 }
 
 /** Quick equality check — same UID set, same flag pattern, same total.
@@ -680,10 +691,10 @@ export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
         totalMessages = cached.total;
         state.setMessages(cached.items);
         renderMessages(body, "", cached.items);
-        const targetUid = remembered ? pickRestoreUid(cached.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        if (targetUuid) {
             body.scrollTop = savedScroll;
-            restoreSelection(body, String(targetUid));
+            restoreSelection(body, targetUuid);
         } else if (autoSelect) {
             selectFirst(body);
         }
@@ -711,10 +722,10 @@ export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
         state.setMessages(result.items);
         renderMessages(body, "", result.items);
 
-        const targetUid = remembered ? pickRestoreUid(result.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        if (targetUuid) {
             body.scrollTop = savedScroll;
-            restoreSelection(body, String(targetUid));
+            restoreSelection(body, targetUuid);
         } else if (autoSelect) {
             selectFirst(body);
         }
@@ -858,11 +869,11 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         totalMessages = cached.total;
         state.setMessages(cached.items);
         renderMessages(body, accountId, cached.items);
-        const targetUid = remembered ? pickRestoreUid(cached.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        if (targetUuid) {
             requestAnimationFrame(() => {
                 body.scrollTop = savedScroll;
-                restoreSelection(body, String(targetUid));
+                restoreSelection(body, targetUuid);
             });
         } else if (autoSelect) {
             selectFirst(body);
@@ -893,12 +904,12 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         renderMessages(body, accountId, result.items);
 
         // Prefer saved position; otherwise default by autoSelect.
-        const targetUid = remembered ? pickRestoreUid(result.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        if (targetUuid) {
             requestAnimationFrame(() => {
                 if (myGen !== loadGen) return;
                 body.scrollTop = savedScroll;
-                restoreSelection(body, String(targetUid));
+                restoreSelection(body, targetUuid);
             });
         } else if (autoSelect) {
             selectFirst(body);
@@ -957,15 +968,19 @@ function selectFirst(body: HTMLElement): void {
     if (firstRow) firstRow.click();
 }
 
-function restoreSelection(body: HTMLElement, savedUid: string | null | undefined): void {
-    if (!savedUid) return;
-    const accountId = (body.querySelector(`.ml-row[data-uid="${savedUid}"]`) as HTMLElement)?.dataset.accountId;
-    if (accountId) {
-        // {scroll:false} — this is a programmatic restore after a sync-driven
-        // reload. The user might be reading rows ABOVE the focused one; do
-        // NOT yank their scroll back to the focused row every time the list
-        // rebuilds.
-        focusByIdentity(accountId, Number(savedUid), { scroll: false });
+function restoreSelection(body: HTMLElement, savedUuid: string | null | undefined): void {
+    if (!savedUuid) return;
+    // Locate the row by stable uuid — unique, so this is the exact message
+    // the user had selected, never a uid-number collision in another folder.
+    const row = body.querySelector(`.ml-row[data-uuid="${CSS.escape(savedUuid)}"]`) as HTMLElement | null;
+    if (!row) return;
+    const accountId = row.dataset.accountId;
+    const uid = Number(row.dataset.uid);
+    if (accountId && Number.isFinite(uid)) {
+        // {scroll:false} — programmatic restore after a sync-driven reload.
+        // The user might be reading rows ABOVE the focused one; do NOT yank
+        // their scroll back to the focused row every time the list rebuilds.
+        focusByIdentity(accountId, uid, { scroll: false });
     }
 }
 
@@ -1081,6 +1096,12 @@ class MessageRow {
         row.dataset.uid = String(msg.uid);
         row.dataset.accountId = accountId;
         row.dataset.folderId = String(msg.folderId);
+        // Stable local identity. `uid` is only unique within (account, folder)
+        // — in a unified / multi-folder list two messages can share a uid
+        // NUMBER, so selection memory keyed on bare uid can rebind the viewer
+        // to the wrong letter after a re-render. `uuid` is globally unique
+        // and never changes; selection restore keys on it.
+        if (msg.uuid) row.dataset.uuid = msg.uuid;
         if (msg.threadId) row.dataset.threadId = msg.threadId;
         if (threadHead) row.classList.add("thread-head");
 

package/client/components/tabs.js

@@ -0,0 +1,155 @@
+/** View tabs — multiple views over one mailbox / one backend.
+ *
+ *  See docs/multi-view.md. A tab is a self-contained *view descriptor*: which
+ *  folder / unified-inbox / search it shows. The expensive things (DB, the
+ *  live sync stream, folder counts, contacts) stay shared in the daemon and
+ *  the one IPC channel — a tab is just the cheap "which folder, restored how"
+ *  bundle. That bundle is also exactly what a future tear-off window needs,
+ *  so this module is the seam for Stage 3.
+ *
+ *  Stage 1: snapshot/restore. The DOM has ONE three-pane; switching tabs
+ *  re-invokes the existing load functions for the target tab's view, and the
+ *  list's own `positionMemory` restores selection + scroll per view. Inactive
+ *  tabs hold only their descriptor — no detached DOM, no second list state.
+ */
+const STORAGE_KEY = "mailx-view-tabs";
+let tabs = [];
+let activeId = "";
+let stripEl = null;
+/** Applies a tab's view to the single three-pane. Set by initTabs; defined in
+ *  app.ts because it must touch app-level view state + the load functions. */
+let applyView = () => { };
+let _nextId = 1;
+function newId() { return `t${_nextId++}`; }
+function persist() {
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ tabs, activeId }));
+    }
+    catch { /* sessionStorage unavailable — tabs just won't survive reload */ }
+}
+function render() {
+    if (!stripEl)
+        return;
+    stripEl.innerHTML = "";
+    for (const tab of tabs) {
+        const chip = document.createElement("div");
+        chip.className = "view-tab" + (tab.id === activeId ? " active" : "");
+        chip.dataset.tabId = tab.id;
+        const label = document.createElement("span");
+        label.className = "view-tab-label";
+        label.textContent = tab.title || "(view)";
+        chip.appendChild(label);
+        // Close affordance — hidden when only one tab remains (can't close
+        // the last one; the window always shows something).
+        if (tabs.length > 1) {
+            const close = document.createElement("button");
+            close.className = "view-tab-close";
+            close.textContent = "×";
+            close.title = "Close tab";
+            close.addEventListener("click", (e) => { e.stopPropagation(); closeTab(tab.id); });
+            chip.appendChild(close);
+        }
+        chip.addEventListener("click", () => activate(tab.id));
+        stripEl.appendChild(chip);
+    }
+    const plus = document.createElement("button");
+    plus.className = "view-tab-new";
+    plus.textContent = "+";
+    plus.title = "New tab (All Inboxes)";
+    plus.addEventListener("click", () => openTab({ kind: "unified" }, "All Inboxes", true));
+    stripEl.appendChild(plus);
+    // Strip is visible whenever a tab exists — the "+" must stay reachable so
+    // the user can open a second view (browser model: one tab still shows a
+    // tab bar). Hidden only in the brief pre-first-selection boot window.
+    stripEl.hidden = tabs.length < 1;
+}
+/** Wire the strip. `apply` is the app.ts callback that loads a tab's view. */
+export function initTabs(strip, apply) {
+    stripEl = strip;
+    applyView = apply;
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed?.tabs) && parsed.tabs.length) {
+                tabs = parsed.tabs;
+                activeId = parsed.activeId || tabs[0].id;
+                for (const t of tabs) {
+                    const n = Number(String(t.id).replace(/^t/, ""));
+                    if (Number.isFinite(n) && n >= _nextId)
+                        _nextId = n + 1;
+                }
+            }
+        }
+    }
+    catch { /* corrupt — start fresh */ }
+    render();
+}
+/** The currently-active tab, or null before any tab exists. */
+export function activeTab() {
+    return tabs.find(t => t.id === activeId) || null;
+}
+/** Open a new tab for `view` and (by default) switch to it. */
+export function openTab(view, title, activateIt = true) {
+    const tab = { id: newId(), title, view };
+    tabs.push(tab);
+    if (activateIt)
+        activeId = tab.id;
+    persist();
+    render();
+    if (activateIt)
+        applyView(tab);
+}
+/** Switch to an existing tab and load its view. */
+export function activate(id) {
+    const tab = tabs.find(t => t.id === id);
+    if (!tab || id === activeId)
+        return;
+    activeId = id;
+    persist();
+    render();
+    applyView(tab);
+}
+/** Close a tab. Never closes the last one. If the active tab is closed, the
+ *  neighbour to its left (or right) becomes active. */
+export function closeTab(id) {
+    if (tabs.length < 2)
+        return;
+    const idx = tabs.findIndex(t => t.id === id);
+    if (idx < 0)
+        return;
+    const wasActive = id === activeId;
+    tabs.splice(idx, 1);
+    if (wasActive) {
+        const next = tabs[Math.max(0, idx - 1)];
+        activeId = next.id;
+        persist();
+        render();
+        applyView(next);
+    }
+    else {
+        persist();
+        render();
+    }
+}
+/** Record the view the user just navigated to in the CURRENT tab — called
+ *  from the folder-tree / search handlers. Does NOT re-apply the view (the
+ *  navigation already loaded it); only keeps the active tab's descriptor +
+ *  title in sync so a later tab-switch restores the right thing. If no tab
+ *  exists yet (first navigation after boot), this creates the first tab —
+ *  so the very first folder/inbox selection seeds the strip. */
+export function setActiveView(view, title) {
+    let tab = activeTab();
+    if (!tab) {
+        tab = { id: newId(), title, view };
+        tabs.push(tab);
+        activeId = tab.id;
+    }
+    else {
+        tab.view = view;
+        tab.title = title;
+    }
+    persist();
+    render();
+}
+//# sourceMappingURL=tabs.js.map

package/client/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"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"}

package/client/components/tabs.ts

@@ -0,0 +1,163 @@
+/** View tabs — multiple views over one mailbox / one backend.
+ *
+ *  See docs/multi-view.md. A tab is a self-contained *view descriptor*: which
+ *  folder / unified-inbox / search it shows. The expensive things (DB, the
+ *  live sync stream, folder counts, contacts) stay shared in the daemon and
+ *  the one IPC channel — a tab is just the cheap "which folder, restored how"
+ *  bundle. That bundle is also exactly what a future tear-off window needs,
+ *  so this module is the seam for Stage 3.
+ *
+ *  Stage 1: snapshot/restore. The DOM has ONE three-pane; switching tabs
+ *  re-invokes the existing load functions for the target tab's view, and the
+ *  list's own `positionMemory` restores selection + scroll per view. Inactive
+ *  tabs hold only their descriptor — no detached DOM, no second list state.
+ */
+
+export type TabView =
+    | { kind: "unified" }
+    | { kind: "folder"; accountId: string; folderId: number; specialUse: string }
+    | { kind: "search"; query: string; scope: string; accountId: string; folderId: number; includeTrash: boolean };
+
+export interface ViewTab {
+    id: string;
+    title: string;
+    view: TabView;
+}
+
+const STORAGE_KEY = "mailx-view-tabs";
+let tabs: ViewTab[] = [];
+let activeId = "";
+let stripEl: HTMLElement | null = null;
+/** Applies a tab's view to the single three-pane. Set by initTabs; defined in
+ *  app.ts because it must touch app-level view state + the load functions. */
+let applyView: (tab: ViewTab) => void = () => { /* */ };
+let _nextId = 1;
+function newId(): string { return `t${_nextId++}`; }
+
+function persist(): void {
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ tabs, activeId }));
+    } catch { /* sessionStorage unavailable — tabs just won't survive reload */ }
+}
+
+function render(): void {
+    if (!stripEl) return;
+    stripEl.innerHTML = "";
+    for (const tab of tabs) {
+        const chip = document.createElement("div");
+        chip.className = "view-tab" + (tab.id === activeId ? " active" : "");
+        chip.dataset.tabId = tab.id;
+        const label = document.createElement("span");
+        label.className = "view-tab-label";
+        label.textContent = tab.title || "(view)";
+        chip.appendChild(label);
+        // Close affordance — hidden when only one tab remains (can't close
+        // the last one; the window always shows something).
+        if (tabs.length > 1) {
+            const close = document.createElement("button");
+            close.className = "view-tab-close";
+            close.textContent = "×";
+            close.title = "Close tab";
+            close.addEventListener("click", (e) => { e.stopPropagation(); closeTab(tab.id); });
+            chip.appendChild(close);
+        }
+        chip.addEventListener("click", () => activate(tab.id));
+        stripEl.appendChild(chip);
+    }
+    const plus = document.createElement("button");
+    plus.className = "view-tab-new";
+    plus.textContent = "+";
+    plus.title = "New tab (All Inboxes)";
+    plus.addEventListener("click", () => openTab({ kind: "unified" }, "All Inboxes", true));
+    stripEl.appendChild(plus);
+    // Strip is visible whenever a tab exists — the "+" must stay reachable so
+    // the user can open a second view (browser model: one tab still shows a
+    // tab bar). Hidden only in the brief pre-first-selection boot window.
+    stripEl.hidden = tabs.length < 1;
+}
+
+/** Wire the strip. `apply` is the app.ts callback that loads a tab's view. */
+export function initTabs(strip: HTMLElement, apply: (tab: ViewTab) => void): void {
+    stripEl = strip;
+    applyView = apply;
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw) as { tabs: ViewTab[]; activeId: string };
+            if (Array.isArray(parsed?.tabs) && parsed.tabs.length) {
+                tabs = parsed.tabs;
+                activeId = parsed.activeId || tabs[0].id;
+                for (const t of tabs) {
+                    const n = Number(String(t.id).replace(/^t/, ""));
+                    if (Number.isFinite(n) && n >= _nextId) _nextId = n + 1;
+                }
+            }
+        }
+    } catch { /* corrupt — start fresh */ }
+    render();
+}
+
+/** The currently-active tab, or null before any tab exists. */
+export function activeTab(): ViewTab | null {
+    return tabs.find(t => t.id === activeId) || null;
+}
+
+/** Open a new tab for `view` and (by default) switch to it. */
+export function openTab(view: TabView, title: string, activateIt = true): void {
+    const tab: ViewTab = { id: newId(), title, view };
+    tabs.push(tab);
+    if (activateIt) activeId = tab.id;
+    persist();
+    render();
+    if (activateIt) applyView(tab);
+}
+
+/** Switch to an existing tab and load its view. */
+export function activate(id: string): void {
+    const tab = tabs.find(t => t.id === id);
+    if (!tab || id === activeId) return;
+    activeId = id;
+    persist();
+    render();
+    applyView(tab);
+}
+
+/** Close a tab. Never closes the last one. If the active tab is closed, the
+ *  neighbour to its left (or right) becomes active. */
+export function closeTab(id: string): void {
+    if (tabs.length < 2) return;
+    const idx = tabs.findIndex(t => t.id === id);
+    if (idx < 0) return;
+    const wasActive = id === activeId;
+    tabs.splice(idx, 1);
+    if (wasActive) {
+        const next = tabs[Math.max(0, idx - 1)];
+        activeId = next.id;
+        persist();
+        render();
+        applyView(next);
+    } else {
+        persist();
+        render();
+    }
+}
+
+/** Record the view the user just navigated to in the CURRENT tab — called
+ *  from the folder-tree / search handlers. Does NOT re-apply the view (the
+ *  navigation already loaded it); only keeps the active tab's descriptor +
+ *  title in sync so a later tab-switch restores the right thing. If no tab
+ *  exists yet (first navigation after boot), this creates the first tab —
+ *  so the very first folder/inbox selection seeds the strip. */
+export function setActiveView(view: TabView, title: string): void {
+    let tab = activeTab();
+    if (!tab) {
+        tab = { id: newId(), title, view };
+        tabs.push(tab);
+        activeId = tab.id;
+    } else {
+        tab.view = view;
+        tab.title = title;
+    }
+    persist();
+    render();
+}

package/client/index.html

@@ -821,6 +821,7 @@
 
     <main class="main-area">
         <section class="message-list" id="message-list">
+            <div class="view-tab-strip" id="view-tab-strip" hidden></div>
             <search class="search-bar ml-search">
                 <select id="search-scope" title="Local search scope">
                     <option value="all">All folders</option>

package/client/styles/components.css

@@ -146,6 +146,64 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     }
 }
 
+/* View tabs — see docs/multi-view.md. Hidden until a 2nd tab exists. */
+.view-tab-strip {
+    display: flex;
+    align-items: stretch;
+    gap: 2px;
+    padding: 2px 4px 0;
+    overflow-x: auto;
+    background: var(--color-bg-subtle, #f0f0f0);
+    border-bottom: 1px solid var(--color-border, #ccc);
+
+    & .view-tab {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        max-width: 200px;
+        font-size: 0.85em;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-bottom: none;
+        border-radius: 5px 5px 0 0;
+        white-space: nowrap;
+        color: var(--color-text-muted, #555);
+
+        & .view-tab-label { overflow: hidden; text-overflow: ellipsis; }
+
+        &.active {
+            background: var(--color-bg, #fff);
+            border-color: var(--color-border, #ccc);
+            color: var(--color-text, #000);
+            font-weight: 600;
+        }
+        &:not(.active):hover { background: var(--color-hover, #e4e4e4); }
+
+        & .view-tab-close {
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 1.1em;
+            line-height: 1;
+            padding: 0 2px;
+            color: inherit;
+            opacity: 0.6;
+        }
+        & .view-tab-close:hover { opacity: 1; }
+    }
+
+    & .view-tab-new {
+        border: none;
+        background: none;
+        cursor: pointer;
+        font-size: 1.1em;
+        padding: 0 8px;
+        color: var(--color-text-muted, #555);
+    }
+    & .view-tab-new:hover { color: var(--color-text, #000); }
+}
+
 .search-bar {
     display: flex;
     flex-wrap: wrap;     /* Server / Trash-Spam checkboxes drop to a second row when the column is too narrow to fit them inline */

package/docs/multi-view.md

@@ -0,0 +1,81 @@
+# Multi-view: tabs, tear-off, separate windows
+
+Goal: multiple **views** over one backend — like Thunderbird/Outlook — so the
+user can keep a message open while working the list, compare two folders, etc.
+NOT multiple daemon instances (`--another` already exists for that, and a
+second daemon means a second DB connection — contention, not what's wanted).
+
+## Key fact: reminders already spawn separate native windows
+
+`MailxService.showReminderPopup` → injected `popupFn` → msger
+`showMessageBoxEx` opens a **real OS WebView window** fed a self-contained HTML
+document (`rawHtml: true`: the caller ships a full HTML doc with its own button
+row + an inline script that posts results back over the wry bridge). It returns
+a handle with `pid` + `close()`.
+
+Consequence: msger spawning extra native windows is **not** the blocker. The
+"popups don't inherit the custom protocol" limitation only blocks a window that
+must load the *multi-file app* (index.html + app.bundle.js + CSS + importmap
+deps, all served from `msger.localhost`). A **single rendered view** is
+self-contained content — the reminder shape.
+
+So:
+- **Torn-off READ-ONLY message reader** = the reminder mechanism. The daemon
+  already has rendered `bodyHtml` from `getMessage`; wrap header + sanitized
+  body as a standalone HTML doc, hand to `showMessageBoxEx`. No custom
+  protocol, no second IPC channel. Cheap.
+- **Torn-off INTERACTIVE view** (reply / navigate / delete / live sync
+  updates) needs a real IPC channel back to the daemon → msger multi-channel
+  work. Expensive. Deferred.
+
+## Three view modes, one backend
+
+1. **Tabs** inside the main window — one WebView, one IPC channel, a tab strip;
+   each tab is an independent three-pane (or a single-message view). Pure
+   client work.
+2. **Tear-off** — detach a tab into its own OS window.
+   - Read-only message tab → `showMessageBoxEx` + `rawHtml` (reminder path).
+   - Interactive tab → needs msger multi-channel IPC (later).
+3. **Re-dock** — drag a torn-off window's content back in as a tab. For the
+   read-only reader this is just: close the popup, re-open the message as an
+   in-window tab. For interactive, follows whatever (2) settles on.
+
+## Tabs architecture (the real work)
+
+Today the list view is module-level global state in `client/components/
+message-list.ts` — `currentAccountId`, `currentFolderId`, `searchMode`,
+`currentSearchQuery`, `positionMemory`, `listCache` — and `message-state.ts` is
+a single global "source of truth" for the list+viewer. One window = one view.
+
+Tabs require that view-state to become **per-tab**:
+
+- **Per-tab:** selected account+folder (or search), selected message, list
+  scroll position, the `message-state` instance, sort order, flagged-only
+  toggle.
+- **Shared (stays global):** the IPC connection + sync event stream, folder
+  counts, the contacts cache, settings, the parsed-body LRU on the daemon.
+  Sync/new-mail events broadcast to every tab; each tab decides if the event
+  touches its folder.
+
+Shape: a `TabManager` owning an array of `ViewTab`, each `ViewTab` holding its
+own `MessageListState` + the DOM subtree for its three-pane. Only the active
+tab's subtree is in layout; inactive tabs keep their DOM detached (cheap) or
+their state and rebuild on activate. `message-list.ts` functions take a
+`ViewTab` (or read `TabManager.active`) instead of the module globals.
+
+## Staging
+
+1. **Tab strip + per-tab three-pane.** Extract the message-list globals into a
+   `ViewTab`/`TabManager`; render a tab strip; New Tab opens another inbox
+   view. The bulk of the work and the architectural commit.
+2. **Open-in-new-tab** for a message (and a folder). Exercises per-tab state on
+   the simplest views.
+3. **Tear-off a read-only message tab** → `showMessageBoxEx` standalone window
+   (reminder mechanism). Re-dock = reopen as a tab.
+4. **Interactive tear-off / true second app window.** Needs msger to let a
+   spawned window inherit the custom protocol AND carry its own IPC channel,
+   plus the daemon multiplexing IPC and broadcasting events to N channels.
+   Separate, cross-component project — do last, only if the read-only
+   tear-off proves insufficient.
+
+Start at stage 1. Each stage is independently shippable.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -77,7 +77,8 @@
   "author": "Bob Frankston",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "dev"
   },
   "repository": {
     "type": "git",