@bobfrankston/mailx 1.0.306 → 1.0.313

package/client/styles/components.css

@@ -562,6 +562,88 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     outline: 2px solid var(--color-accent);
     outline-offset: -1px;
 }
+.mailx-modal-input-error {
+    outline: 2px solid oklch(0.65 0.2 25) !important;
+    outline-offset: -1px;
+    background: color-mix(in oklch, oklch(0.65 0.2 25) 6%, var(--color-bg-surface));
+}
+.mailx-modal-input-error::selection {
+    background: oklch(0.65 0.2 25);
+    color: #fff;
+}
+
+/* Split content area — textarea on the left, help on the right */
+.mailx-modal-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
+    gap: var(--gap-md);
+    min-height: 0;
+
+    &:has(.mailx-help-collapsed) {
+        grid-template-columns: minmax(0, 1fr) auto;
+    }
+}
+@media (max-width: 900px) {
+    .mailx-modal-split { grid-template-columns: 1fr; }
+}
+.mailx-modal-split-left, .mailx-modal-split-right {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.mailx-help-panel {
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: var(--gap-sm);
+    overflow: auto;
+    max-height: 60vh;
+    font-size: var(--font-size-sm);
+    line-height: 1.4;
+
+    &.mailx-help-collapsed .mailx-help-body { display: none; }
+    &.mailx-help-collapsed { max-height: none; padding: 4px; }
+}
+.mailx-help-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-xs); }
+.mailx-help-toggle {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    font-weight: 600;
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    padding: 2px 4px;
+}
+.mailx-help-toggle:hover { background: var(--color-bg-hover); border-radius: var(--radius-sm); }
+
+.mailx-help-body {
+    & h1, & h2, & h3 { margin-top: var(--gap-sm); margin-bottom: 4px; font-size: 1em; }
+    & h1 { font-size: 1.1em; }
+    & p { margin: 4px 0; }
+    & ul { margin: 4px 0 4px var(--gap-md); padding: 0; }
+    & li { margin: 2px 0; }
+    & code {
+        font-family: var(--font-mono);
+        font-size: 0.9em;
+        background: var(--color-bg);
+        padding: 1px 4px;
+        border-radius: 3px;
+    }
+    & a { color: var(--color-accent); }
+}
+.mailx-help-code {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: var(--gap-xs);
+    overflow-x: auto;
+    margin: 4px 0;
+    white-space: pre;
+}
+.mailx-help-code code { background: none; padding: 0; }
 .mailx-modal-error {
     color: oklch(0.65 0.2 25);
     font-size: var(--font-size-sm);
@@ -593,6 +675,39 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     font-weight: 500;
 }
 .mailx-modal-btn-primary:hover { filter: brightness(1.1); }
+
+/* About dialog */
+.mailx-about { font-size: var(--font-size-sm); line-height: 1.5; }
+.mailx-about-dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px var(--gap-md);
+    margin: 0;
+
+    & dt { color: var(--color-text-muted); font-weight: 500; }
+    & dd { margin: 0; word-break: break-word; }
+}
+.mailx-about-section {
+    font-weight: 600;
+    margin-top: var(--gap-sm);
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.mailx-about-accounts ul {
+    margin: 4px 0 0 var(--gap-md);
+    padding: 0;
+}
+.mailx-about-foot {
+    margin-top: var(--gap-sm);
+    padding-top: var(--gap-sm);
+    border-top: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    text-align: center;
+}
+
 .ml-subject {
     overflow: hidden;
     text-overflow: ellipsis;

package/client/styles/layout.css

@@ -8,13 +8,14 @@
 
 body {
     display: grid;
-    grid-template-columns: var(--folder-width) 1fr;
+    /* rail | folders | main */
+    grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr;
     grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
     grid-template-areas:
-        "toolbar  toolbar"
-        "alert    alert"
-        "folders  main"
-        "status   status";
+        "toolbar  toolbar  toolbar"
+        "alert    alert    alert"
+        "rail     folders  main"
+        "status   status   status";
     height: 100vh;
     overflow: hidden;
     font-family: var(--font-ui);
@@ -25,11 +26,55 @@ body {
 }
 
 .toolbar { grid-area: toolbar; }
+.icon-rail { grid-area: rail; }
 .folder-panel { grid-area: folders; display: flex; flex-direction: column; overflow: hidden; }
 .folder-tree { flex: 1; overflow-y: auto; }
 .main-area { grid-area: main; }
 .status-bar { grid-area: status; }
 
+/* Vertical icon rail (Dovecot/Thunderbird-style). Always visible on
+   wide+medium tiers; collapses on narrow (icons move into the hamburger
+   menu — TBD; for now hidden on narrow). */
+.icon-rail {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: var(--color-bg-alt, #f4f4f5);
+    border-right: 1px solid var(--color-border);
+    padding: 6px 0;
+    overflow: hidden;
+}
+.rail-top, .rail-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.rail-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rail-width, 48px);
+    height: 38px;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    color: var(--color-text);
+    border-left: 3px solid transparent;
+    transition: background 0.12s, border-color 0.12s;
+}
+.rail-btn:hover:not([disabled]) {
+    background: var(--color-hover, rgba(0,0,0,0.06));
+}
+.rail-btn[data-active="true"] {
+    background: var(--color-hover, rgba(0,0,0,0.06));
+    border-left-color: var(--color-accent, #1a6dd4);
+}
+.rail-btn[disabled] {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
 /* Main area: message list left, viewer right, vertical splitter */
 .main-area {
     display: grid;
@@ -56,22 +101,22 @@ body {
     background: var(--color-accent);
 }
 
-/* Responsive: mid-width (tablets, foldables) — hide folders, keep list + preview */
+/* Responsive: mid-width (tablets, foldables) — keep rail + list + viewer; folders overlay */
 @media (max-width: 1100px) and (min-width: 769px) {
     body {
-        grid-template-columns: 1fr;
+        grid-template-columns: var(--rail-width, 48px) 1fr;
         grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
         grid-template-areas:
-            "toolbar"
-            "alert"
-            "main"
-            "status";
+            "toolbar  toolbar"
+            "alert    alert"
+            "rail     main"
+            "status   status";
     }
 
-    /* Folder panel: overlay slide-in from left (same as narrow) */
+    /* Folder panel: overlay slide-in from left, sitting just to the right of the rail */
     .folder-panel {
         position: fixed;
-        left: -280px;
+        left: calc(var(--rail-width, 48px) - 280px);
         top: var(--toolbar-height);
         bottom: var(--statusbar-height);
         width: 280px;
@@ -81,7 +126,7 @@ body {
         border-right: 1px solid var(--color-border);
         box-shadow: 2px 0 8px rgba(0,0,0,0.3);
     }
-    .folder-panel.open { left: 0; }
+    .folder-panel.open { left: var(--rail-width, 48px); }
 
     /* Show hamburger */
     #btn-menu { display: inline-flex !important; }
@@ -122,6 +167,11 @@ body {
             "status";
     }
 
+    /* Rail hidden on narrow — its commands fold into the hamburger / toolbar.
+       Future work: a slide-in rail behind the hamburger so power-users on phone
+       can still reach calendar/contacts/etc. */
+    .icon-rail { display: none; }
+
     /* Folder panel: overlay slide-in from left */
     .folder-panel {
         position: fixed;

package/client/styles/variables.css

@@ -3,6 +3,7 @@
 
 :root {
     /* Layout */
+    --rail-width: 44px;            /* vertical icon rail (Thunderbird/Dovecot style) */
     --folder-width: 220px;
     --toolbar-height: 44px;
     --statusbar-height: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.306",
+  "version": "1.0.313",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -22,9 +22,10 @@
   "dependencies": {
     "@bobfrankston/iflow-direct": "^0.1.23",
     "@bobfrankston/iflow-node": "^0.1.7",
-    "@bobfrankston/miscinfo": "^1.0.8",
+    "@bobfrankston/miscinfo": "^1.0.9",
     "@bobfrankston/oauthsupport": "^1.0.24",
-    "@bobfrankston/msger": "^0.1.327",
+    "@bobfrankston/msger": "^0.1.342",
+    "@bobfrankston/mailx-host": "^0.1.3",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -65,6 +66,7 @@
     "@bobfrankston/miscinfo": "file:../../projects/npm/miscinfo",
     "@bobfrankston/oauthsupport": "file:../../projects/oauth/oauthsupport",
     "@bobfrankston/msger": "file:../../utils/msgx/msger",
+    "@bobfrankston/mailx-host": "file:packages/mailx-host",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -84,9 +86,10 @@
     "dependencies": {
       "@bobfrankston/iflow-direct": "^0.1.23",
       "@bobfrankston/iflow-node": "^0.1.7",
-      "@bobfrankston/miscinfo": "^1.0.8",
+      "@bobfrankston/miscinfo": "^1.0.9",
       "@bobfrankston/oauthsupport": "^1.0.24",
-      "@bobfrankston/msger": "^0.1.327",
+      "@bobfrankston/msger": "^0.1.342",
+      "@bobfrankston/mailx-host": "^0.1.3",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",

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

@@ -48,6 +48,9 @@ export declare function getMessage(params: {
     deliveredTo: string;
     returnPath: string;
     listUnsubscribe: string;
+    listUnsubscribeMail: string;
+    listUnsubscribeHttp: string;
+    listUnsubscribeOneClick: boolean;
     emlPath: string;
     id: number;
     accountId: string;

package/packages/mailx-core/index.js

@@ -141,6 +141,9 @@ export async function getMessage(params) {
     let deliveredTo = "";
     let returnPath = "";
     let listUnsubscribe = "";
+    let listUnsubscribeMail = "";
+    let listUnsubscribeHttp = "";
+    let listUnsubscribeOneClick = false;
     const raw = await imapManager.fetchMessageBody(accountId, envelope.folderId, envelope.uid);
     if (raw) {
         const parsed = await simpleParser(raw);
@@ -204,12 +207,9 @@ export async function getMessage(params) {
             }
         }
         returnPath = hdr("return-path").replace(/[<>]/g, "");
-        // mailparser merges List-* headers into a "list" object
-        const listHeaders = parsed.headers.get("list");
-        if (listHeaders?.unsubscribe) {
-            const unsub = listHeaders.unsubscribe;
-            listUnsubscribe = unsub.url || (unsub.mail ? `mailto:${unsub.mail}` : "");
-        }
+        ({ listUnsubscribeMail, listUnsubscribeHttp, listUnsubscribeOneClick } =
+            parseListUnsubscribe(parsed.headers));
+        listUnsubscribe = listUnsubscribeHttp || listUnsubscribeMail;
     }
     if (bodyHtml && !allowRemote) {
         const allowList = loadAllowlist();
@@ -231,7 +231,45 @@ export async function getMessage(params) {
     // Build .eml file path for "View Source"
     const storePath = getStorePath();
     const emlPath = `${storePath}/${accountId}/${envelope.folderId}/${envelope.uid}.eml`;
-    return { ...envelope, bodyHtml, bodyText, hasRemoteContent, remoteAllowed: allowRemote, attachments, deliveredTo, returnPath, listUnsubscribe, emlPath };
+    return { ...envelope, bodyHtml, bodyText, hasRemoteContent, remoteAllowed: allowRemote, attachments, deliveredTo, returnPath, listUnsubscribe, listUnsubscribeMail, listUnsubscribeHttp, listUnsubscribeOneClick, emlPath };
+}
+/** Parse `List-Unsubscribe` (RFC 2369) and `List-Unsubscribe-Post` (RFC 8058).
+ *  Returns mailto URL, HTTPS URL, and whether one-click POST is allowed.
+ *  mailparser only exposes ONE of mail/url even when both are present, so we
+ *  also scan the raw header text for the full set of angle-bracketed URIs. */
+function parseListUnsubscribe(headers) {
+    let mail = "";
+    let http = "";
+    let oneClick = false;
+    // Raw header scan — most reliable.
+    const raw = headers.get("list-unsubscribe");
+    const rawStr = typeof raw === "string" ? raw : (raw && typeof raw.text === "string" ? raw.text : "");
+    if (rawStr) {
+        const matches = rawStr.match(/<([^>]+)>/g) || [];
+        for (const m of matches) {
+            const url = m.slice(1, -1).trim();
+            if (!mail && /^mailto:/i.test(url))
+                mail = url;
+            else if (!http && /^https?:/i.test(url))
+                http = url;
+        }
+    }
+    // mailparser fallback — for builds where headers.get returns the parsed object.
+    if (!mail && !http) {
+        const listHeaders = headers.get("list");
+        if (listHeaders?.unsubscribe) {
+            const unsub = listHeaders.unsubscribe;
+            if (unsub.url)
+                http = Array.isArray(unsub.url) ? unsub.url[0] : unsub.url;
+            if (unsub.mail)
+                mail = `mailto:${Array.isArray(unsub.mail) ? unsub.mail[0] : unsub.mail}`;
+        }
+    }
+    const post = headers.get("list-unsubscribe-post");
+    const postStr = typeof post === "string" ? post : (post && typeof post.text === "string" ? post.text : "");
+    if (postStr && /one-?click/i.test(postStr))
+        oneClick = true;
+    return { listUnsubscribeMail: mail, listUnsubscribeHttp: http, listUnsubscribeOneClick: oneClick };
 }
 export async function updateFlags(params) {
     const envelope = db.getMessageByUid(params.accountId, params.uid);

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

@@ -0,0 +1,21 @@
+/**
+ * mailx-host — runtime WebView host selector.
+ *
+ * Today: msger on every platform.
+ * Future: lazy-load @bobfrankston/mailx-host-msgview for Mac and niche
+ * Linux systems that can't get webkit2gtk-4.1.
+ *
+ * Callers (bin/mailx.ts) import showMessageBox / showService / setAppName
+ * from here instead of @bobfrankston/msger directly, so the swap is a
+ * one-line change when msgview arrives.
+ */
+import * as msger from "@bobfrankston/msger";
+export type { MessageBoxOptions, MessageBoxResult, ServiceHandle } from "@bobfrankston/msger";
+export type HostName = "msger" | "msgview";
+export declare function selectHost(): HostName;
+export declare const showMessageBox: typeof msger.showMessageBox;
+export declare const showService: typeof msger.showService;
+export declare const setAppName: typeof msger.setAppName;
+export declare const setAppIcon: typeof msger.setAppIcon;
+export declare const hostName: HostName;
+//# sourceMappingURL=index.d.ts.map

package/packages/mailx-host/index.js

@@ -0,0 +1,31 @@
+/**
+ * mailx-host — runtime WebView host selector.
+ *
+ * Today: msger on every platform.
+ * Future: lazy-load @bobfrankston/mailx-host-msgview for Mac and niche
+ * Linux systems that can't get webkit2gtk-4.1.
+ *
+ * Callers (bin/mailx.ts) import showMessageBox / showService / setAppName
+ * from here instead of @bobfrankston/msger directly, so the swap is a
+ * one-line change when msgview arrives.
+ */
+import * as msger from "@bobfrankston/msger";
+export function selectHost() {
+    const requested = (process.env.MAILX_HOST || "").toLowerCase();
+    if (requested === "msger" || requested === "msgview")
+        return requested;
+    if (process.platform === "darwin")
+        return "msgview";
+    return "msger";
+}
+const _hostName = selectHost();
+if (_hostName !== "msger") {
+    throw new Error(`mailx-host: "${_hostName}" adapter not implemented yet — set MAILX_HOST=msger to fall back, ` +
+        `or implement @bobfrankston/mailx-host-msgview (see docs/host-abstraction-plan.md).`);
+}
+export const showMessageBox = msger.showMessageBox;
+export const showService = msger.showService;
+export const setAppName = msger.setAppName;
+export const setAppIcon = msger.setAppIcon;
+export const hostName = _hostName;
+//# sourceMappingURL=index.js.map

package/packages/mailx-host/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@bobfrankston/mailx-host",
+  "version": "0.1.3",
+  "description": "Host abstraction for mailx — dispatches to msger or msgview",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "release": "npmglobalize"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@bobfrankston/msger": "file:../../../../utils/msgx/msger"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:BobFrankston/mailx-host.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/mailx-imap/index.js

@@ -964,6 +964,18 @@ export class ImapManager extends EventEmitter {
                 if (!inboxDone) {
                     console.error(`  [sync] ${accountId}: INBOX failed after ${maxAttempts} attempts — will retry next sync cycle`);
                     this.emit("syncError", accountId, `INBOX sync failed after ${maxAttempts} attempts`);
+                    // Even when sync failed, try to prefetch bodies for messages
+                    // already in the local DB. Prefetch uses a separate body
+                    // client (not the ops client that just timed out), so a
+                    // sync timeout on SELECT/SEARCH doesn't necessarily mean
+                    // body fetches will also fail. Without this, a server
+                    // having a slow patch would leave every message with a
+                    // white "not-downloaded" dot indefinitely until sync
+                    // recovers — even though prior syncs already populated
+                    // headers that prefetch can flesh out independently.
+                    if (getPrefetch()) {
+                        this.prefetchBodies(accountId).catch(e => console.error(`  [prefetch] ${accountId}: ${e.message}`));
+                    }
                 }
             }
             else {
@@ -1431,6 +1443,27 @@ export class ImapManager extends EventEmitter {
             }
         }, 30000);
         this.syncIntervals.set("actions", actionsInterval);
+        // Body prefetch as a first-class background task — independent of
+        // sync success. Prefetch was previously only triggered from inside
+        // sync, so any account with slow/failing IMAP had its "not downloaded"
+        // dots stuck forever even though body fetches use a separate
+        // connection that might succeed. Every 60s, for every account, fire
+        // prefetchBodies() (cheap when body_path is already populated — just a
+        // DB query that returns 0 rows; the prefetchingAccounts guard
+        // short-circuits concurrent triggers).
+        if (getPrefetch()) {
+            const kickPrefetch = () => {
+                for (const [accountId] of this.configs) {
+                    this.prefetchBodies(accountId).catch(e => console.error(`  [prefetch] ${accountId}: ${e?.message || e}`));
+                }
+            };
+            // Fire once now so the "not downloaded" dots start filling in
+            // immediately on app start, don't make the user wait a minute.
+            setTimeout(kickPrefetch, 2000);
+            const prefetchInterval = setInterval(kickPrefetch, 60000);
+            this.syncIntervals.set("prefetch", prefetchInterval);
+            console.log(`  [periodic] body prefetch every 60s (independent of sync)`);
+        }
         // Full sync (all folders + IDLE restart) at configured interval
         const fullInterval = setInterval(async () => {
             console.log(`  [periodic] Full sync at ${new Date().toLocaleTimeString()}`);

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

@@ -5,7 +5,7 @@
  */
 import { MailxDB } from "@bobfrankston/mailx-store";
 import { ImapManager } from "@bobfrankston/mailx-imap";
-import type { Folder, AutocompleteRequest, AutocompleteResponse, AutocompleteSettings } from "@bobfrankston/mailx-types";
+import type { Folder, AutocompleteRequest, AutocompleteResponse, AutocompleteSettings, AiTransformRequest, AiTransformResponse } from "@bobfrankston/mailx-types";
 export declare class MailxService {
     private db;
     private imapManager;
@@ -15,6 +15,15 @@ export declare class MailxService {
     getUnifiedInbox(page?: number, pageSize?: number): any;
     getMessages(accountId: string, folderId: number, page?: number, pageSize?: number, sort?: string, sortDir?: string, search?: string, flaggedOnly?: boolean): any;
     getMessage(accountId: string, uid: number, allowRemote?: boolean, folderId?: number): Promise<any>;
+    /** RFC 8058 one-click unsubscribe: POST `List-Unsubscribe=One-Click` to the
+     *  HTTPS URL the message's List-Unsubscribe header advertised. Done server-
+     *  side because the unsubscribe endpoint usually doesn't set CORS headers,
+     *  so a browser-side fetch would be blocked. */
+    unsubscribeOneClick(url: string): Promise<{
+        ok: boolean;
+        status: number;
+        statusText: string;
+    }>;
     updateFlags(accountId: string, uid: number, flags: string[]): Promise<void>;
     allowRemoteContent(type: "sender" | "domain" | "recipient", value: string): Promise<void>;
     search(q: string, page?: number, pageSize?: number, scope?: string, accountId?: string, folderId?: number): Promise<any>;
@@ -67,6 +76,9 @@ export declare class MailxService {
      *  Names are whitelisted so the UI can't read arbitrary files.
      *  `config.jsonc` is the local per-machine config (not cloud-synced). */
     readJsoncFile(name: string): Promise<string | null>;
+    /** Return the help section for a named config file, extracted from docs/config-help.md.
+     *  Matches a level-2 heading whose text equals the filename. Returns markdown. */
+    readConfigHelp(name: string): Promise<string>;
     /** Write a JSONC config file. Validates that the content parses as JSONC
      *  (loosely — strips comments/trailing commas) before writing. */
     writeJsoncFile(name: string, content: string): Promise<void>;
@@ -89,5 +101,10 @@ export declare class MailxService {
     getAutocompleteSettings(): AutocompleteSettings;
     saveAutocompleteSettings(settings: AutocompleteSettings): void;
     autocomplete(req: AutocompleteRequest): Promise<AutocompleteResponse>;
+    /** Generic AI text transform — translate / proofread / summarize.
+     *  Shares the autocomplete provider config (provider, key, model). Each
+     *  feature has its own opt-in toggle (translateEnabled / proofreadEnabled),
+     *  default false. Returns empty text + reason when disabled or on error. */
+    aiTransform(req: AiTransformRequest): Promise<AiTransformResponse>;
 }
 //# sourceMappingURL=index.d.ts.map