@bobfrankston/mailx 1.0.340 → 1.0.349

package/client/index.html

@@ -42,6 +42,8 @@
                     <label class="tb-menu-item" title="Right-click in compose editor → Proofread (when wired)"><input type="checkbox" id="opt-ai-proofread"> AI proofread (off by default)</label>
                     <hr class="tb-menu-sep">
                     <button class="tb-menu-item" id="btn-edit-jsonc" title="Edit accounts.jsonc / allowlist.jsonc">Edit config files...</button>
+                    <button class="tb-menu-item" id="btn-open-mailx-dir" title="Open ~/.mailx in file explorer">Open mailx folder...</button>
+                    <button class="tb-menu-item" id="btn-open-log" title="Open today's log file">Open log...</button>
                     <button class="tb-menu-item" id="btn-about" title="Show version and build info">About mailx...</button>
                 </div>
             </div>
@@ -76,9 +78,9 @@
             <button class="rail-btn" id="rail-compose" title="Compose (Ctrl+N)" aria-label="Compose">✏</button>
             <button class="rail-btn" id="rail-inbox" title="Inbox" aria-label="Inbox" data-active="true">✉</button>
             <button class="rail-btn" id="rail-unified" title="All Inboxes" aria-label="All Inboxes">⌘</button>
-            <button class="rail-btn" id="rail-contacts" title="Contacts (coming soon)" aria-label="Contacts" disabled>👤</button>
-            <button class="rail-btn" id="rail-calendar" title="Calendar (Phase 4)" aria-label="Calendar" disabled>📅</button>
-            <button class="rail-btn" id="rail-tasks" title="Tasks (Phase 4)" aria-label="Tasks" disabled>☑</button>
+            <button class="rail-btn" id="rail-contacts" title="Contacts / Address book" aria-label="Contacts">👤</button>
+            <button class="rail-btn" id="rail-calendar" title="Calendar" aria-label="Calendar">📅</button>
+            <button class="rail-btn" id="rail-tasks" title="Tasks" aria-label="Tasks">☑</button>
         </div>
         <div class="rail-bottom">
             <button class="rail-btn" id="rail-settings" title="Settings" aria-label="Settings">⚙</button>
@@ -99,12 +101,12 @@
     <main class="main-area">
         <section class="message-list" id="message-list">
             <search class="search-bar ml-search">
-                <select id="search-scope" title="Search scope">
+                <select id="search-scope" title="Local search scope">
                     <option value="all">All folders</option>
                     <option value="current">This folder</option>
-                    <option value="server">IMAP server</option>
                 </select>
-                <input type="search" id="search-input" placeholder="Search... (/regex/)" autocomplete="off" title="Search messages. /pattern/ for regex. Qualifiers: from: to: subject:">
+                <input type="search" id="search-input" placeholder="Search... (/regex/)" autocomplete="off" title="Search messages. /pattern/ for regex. Qualifiers: from: to: subject: date: after: before: has:attachment is:flagged|unread|answered|draft folder:">
+                <label class="search-server-check" title="Also search the IMAP server (slower; spans all folders on all accounts)"><input type="checkbox" id="search-server-too"> Server</label>
             </search>
             <div class="ml-folder-title" id="ml-folder-title"></div>
             <div class="ml-header">

package/client/lib/api-client.js

@@ -65,9 +65,27 @@ export function getSyncPending() {
 export function getOutboxStatus() {
     return ipc().getOutboxStatus();
 }
+export function listQueuedOutgoing() {
+    return ipc().listQueuedOutgoing();
+}
+export function cancelQueuedOutgoing(p) {
+    return ipc().cancelQueuedOutgoing(p);
+}
 export function searchContacts(query) {
     return ipc().searchContacts(query);
 }
+export function listContacts(query, page = 1, pageSize = 100) {
+    return ipc().listContacts(query, page, pageSize);
+}
+export function upsertContact(name, email) {
+    return ipc().upsertContact(name, email);
+}
+export function deleteContact(email) {
+    return ipc().deleteContact(email);
+}
+export function openLocalPath(which) {
+    return ipc().openLocalPath(which);
+}
 export function allowRemoteContent(type, value) {
     return ipc().allowRemoteContent(type, value);
 }

package/client/lib/mailxapi.js

@@ -135,12 +135,26 @@
         searchContacts: function(query) {
             return callNode("searchContacts", { query: query });
         },
+        listContacts: function(query, page, pageSize) {
+            return callNode("listContacts", { query: query || "", page: page || 1, pageSize: pageSize || 100 });
+        },
+        upsertContact: function(name, email) {
+            return callNode("upsertContact", { name: name, email: email });
+        },
+        deleteContact: function(email) {
+            return callNode("deleteContact", { email: email });
+        },
+        openLocalPath: function(which) {
+            return callNode("openLocalPath", { which: which });
+        },
 
         // Sync
         syncAll: function() { return callNode("syncAll"); },
         syncAccount: function(accountId) { return callNode("syncAccount", { accountId: accountId }); },
         getSyncPending: function() { return callNode("getSyncPending"); },
         getOutboxStatus: function() { return callNode("getOutboxStatus"); },
+        listQueuedOutgoing: function() { return callNode("listQueuedOutgoing"); },
+        cancelQueuedOutgoing: function(p) { return callNode("cancelQueuedOutgoing", { path: p }); },
         reauthenticate: function(accountId) { return callNode("reauthenticate", { accountId: accountId }); },
 
         // Bulk operations

package/client/styles/components.css

@@ -924,6 +924,29 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
         color: var(--color-text);
         font-weight: 600;
     }
+    .mv-details-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 2px 0;
+    }
+    .mv-details-value {
+        flex: 1;
+        font-family: var(--font-mono);
+        font-size: 0.85em;
+        word-break: break-all;
+    }
+    .mv-details-copy {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--color-text-muted);
+        font-size: 1rem;
+        padding: 0 4px;
+        border-radius: 3px;
+
+        &:hover { background: var(--color-bg-hover); color: var(--color-text); }
+    }
     .mv-action-primary {
         background: var(--color-brand-dark) !important;
         color: white !important;
@@ -1062,6 +1085,337 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 .status-action:hover { background: oklch(0.65 0.15 25); color: #fff; }
 .status-action:disabled { opacity: 0.5; cursor: default; }
 
+/* ── Address Book ── */
+.ab-toolbar {
+    display: flex;
+    gap: var(--gap-sm);
+    align-items: center;
+}
+.ab-toolbar input {
+    flex: 1;
+}
+.ab-count {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+}
+.ab-list {
+    flex: 1;
+    overflow: auto;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    min-height: 240px;
+}
+.ab-row {
+    display: grid;
+    grid-template-columns: 180px minmax(220px, 1fr) 80px 50px 80px 96px;
+    gap: var(--gap-sm);
+    padding: 4px 8px;
+    align-items: center;
+    border-bottom: 1px solid var(--color-border-faint, rgba(0,0,0,0.05));
+    font-size: var(--font-size-sm);
+
+    &:hover { background: var(--color-bg-hover); }
+    &.ab-header {
+        font-weight: 600;
+        background: var(--color-bg-surface);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+}
+.ab-name, .ab-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ab-name-input { width: 100%; box-sizing: border-box; }
+.ab-source { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; }
+.ab-count-cell { text-align: right; color: var(--color-text-muted); }
+.ab-last { color: var(--color-text-muted); font-size: 0.85em; }
+.ab-actions { display: flex; gap: 2px; justify-content: flex-end; }
+.ab-actions button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.9rem;
+
+    &:hover { background: var(--color-bg-hover); }
+}
+.ab-empty {
+    padding: 24px;
+    text-align: center;
+    color: var(--color-text-muted);
+}
+
+/* ── Calendar ── */
+.cal-grid {
+    display: grid;
+    grid-template-columns: 380px 1fr;
+    gap: var(--gap-md);
+    flex: 1;
+    min-height: 0;
+}
+.cal-month, .cal-upcoming {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.cal-upcoming { overflow: auto; }
+.cal-nav {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: 4px 0;
+}
+.cal-nav-title { flex: 1; font-weight: 600; }
+.cal-nav-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 2px 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+
+    &:hover { background: var(--color-bg-hover); }
+}
+.cal-month-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+}
+.cal-dow {
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    padding: 4px 0;
+}
+.cal-day {
+    aspect-ratio: 1;
+    border: 1px solid transparent;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    color: var(--color-text);
+
+    &.cal-day-blank { visibility: hidden; cursor: default; }
+    &:hover:not(.cal-day-blank) { background: var(--color-bg-hover); }
+    &.cal-day-today { font-weight: 700; color: var(--color-accent); }
+    &.cal-day-selected { background: var(--color-accent); color: #fff; }
+    &.cal-day-has-event::after {
+        content: "•";
+        display: block;
+        margin-top: -4px;
+        font-size: 0.6rem;
+    }
+}
+.cal-section-title {
+    font-weight: 600;
+    margin-bottom: var(--gap-sm);
+    color: var(--color-text-muted);
+}
+.cal-event {
+    border-left: 3px solid var(--color-accent);
+    padding: 6px 8px;
+    margin-bottom: 6px;
+    background: var(--color-bg-surface);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    position: relative;
+}
+.cal-event-time { font-size: 0.75rem; color: var(--color-text-muted); }
+.cal-event-title { font-weight: 500; }
+.cal-event-loc { font-size: 0.85rem; color: var(--color-text-muted); }
+.cal-event-del {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    font-size: 1.1rem;
+
+    &:hover { color: oklch(0.65 0.2 25); }
+}
+.cal-empty { color: var(--color-text-muted); padding: 12px 0; }
+.cal-source-note { font-size: 0.75rem; color: var(--color-text-muted); }
+
+/* ── Tasks ── */
+.tk-toolbar { padding-bottom: var(--gap-sm); }
+.tk-toolbar input { width: 100%; box-sizing: border-box; }
+.tk-filters {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    padding-bottom: var(--gap-sm);
+    border-bottom: 1px solid var(--color-border);
+}
+.tk-filter-btn {
+    background: none;
+    border: 1px solid transparent;
+    padding: 4px 10px;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+
+    &:hover { background: var(--color-bg-hover); }
+    &.tk-filter-active {
+        background: var(--color-bg-surface);
+        border-color: var(--color-border);
+        color: var(--color-text);
+        font-weight: 500;
+    }
+}
+.tk-spacer { flex: 1; }
+.tk-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
+.tk-list {
+    flex: 1;
+    overflow: auto;
+    min-height: 240px;
+}
+.tk-row {
+    display: grid;
+    grid-template-columns: 24px 24px minmax(180px, 1fr) auto 80px 28px 28px;
+    gap: var(--gap-sm);
+    padding: 6px 4px;
+    align-items: center;
+    border-bottom: 1px solid var(--color-border-faint, rgba(0,0,0,0.05));
+
+    &:hover { background: var(--color-bg-hover); }
+    &.tk-done .tk-title { text-decoration: line-through; color: var(--color-text-muted); }
+}
+.tk-prio {
+    text-align: center;
+    font-weight: 700;
+
+    &.tk-prio-3 { color: oklch(0.65 0.2 25); }
+    &.tk-prio-2 { color: oklch(0.7 0.18 60); }
+    &.tk-prio-1 { color: var(--color-text-muted); }
+}
+.tk-title {
+    outline: none;
+    padding: 2px 4px;
+    border-radius: 3px;
+
+    &:focus { background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-accent); }
+}
+.tk-tags {
+    color: var(--color-accent);
+    font-size: 0.85em;
+}
+.tk-due {
+    text-align: right;
+    color: var(--color-text-muted);
+    font-size: 0.85em;
+
+    &.tk-overdue { color: oklch(0.65 0.2 25); font-weight: 500; }
+}
+.tk-snooze, .tk-del {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    padding: 2px 4px;
+    border-radius: 3px;
+
+    &:hover { background: var(--color-bg-hover); color: var(--color-text); }
+}
+.tk-empty {
+    padding: 24px;
+    text-align: center;
+    color: var(--color-text-muted);
+}
+
+/* Server-search orthogonal checkbox */
+.search-server-check {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 6px;
+    padding: 2px 6px;
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+
+    &:has(input:checked) {
+        color: var(--color-accent);
+        font-weight: 500;
+    }
+}
+
+/* ── Outbox / Pink-row view ── */
+.ob-info {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    padding-bottom: var(--gap-sm);
+}
+.ob-list {
+    flex: 1;
+    overflow: auto;
+    min-height: 200px;
+}
+.ob-row {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    position: relative;
+    font-size: 0.9rem;
+}
+.ob-pink {
+    /* Visible-reconciliation-state: local-only not yet on the server. */
+    background: color-mix(in oklch, oklch(0.75 0.15 350) 15%, var(--color-bg-surface));
+    border-color: oklch(0.7 0.15 350);
+}
+.ob-row-hdr {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    flex-wrap: wrap;
+    margin-bottom: 4px;
+}
+.ob-acct {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    background: var(--color-bg);
+    padding: 1px 6px;
+    border-radius: 3px;
+    text-transform: uppercase;
+}
+.ob-subject { font-weight: 600; flex: 1; }
+.ob-created { color: var(--color-text-muted); font-size: 0.8rem; }
+.ob-badge {
+    font-size: 0.75rem;
+    padding: 1px 6px;
+    border-radius: 10px;
+    background: var(--color-bg);
+    color: var(--color-text-muted);
+}
+.ob-claimed { background: oklch(0.7 0.15 200); color: #fff; }
+.ob-retry { background: oklch(0.75 0.15 60); color: #fff; }
+.ob-row-meta { font-size: 0.85rem; color: var(--color-text-muted); }
+.ob-row-path {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    margin-top: 4px;
+    word-break: break-all;
+}
+.ob-row-actions { margin-top: 6px; }
+.ob-cancel {
+    background: none;
+    border: 1px solid oklch(0.65 0.2 25);
+    color: oklch(0.65 0.2 25);
+    padding: 3px 10px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: 0.85rem;
+
+    &:hover:not(:disabled) { background: oklch(0.65 0.2 25); color: #fff; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+.ob-empty { padding: 24px; text-align: center; color: var(--color-text-muted); }
+
 /* ── Startup Overlay ── */
 
 .startup-overlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.340",
+  "version": "1.0.349",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -20,7 +20,7 @@
     "postinstall": "node bin/postinstall.js"
   },
   "dependencies": {
-    "@bobfrankston/iflow-direct": "^0.1.23",
+    "@bobfrankston/iflow-direct": "^0.1.24",
     "@bobfrankston/iflow-node": "^0.1.7",
     "@bobfrankston/miscinfo": "^1.0.9",
     "@bobfrankston/oauthsupport": "^1.0.24",
@@ -84,7 +84,7 @@
   },
   ".transformedSnapshot": {
     "dependencies": {
-      "@bobfrankston/iflow-direct": "^0.1.23",
+      "@bobfrankston/iflow-direct": "^0.1.24",
       "@bobfrankston/iflow-node": "^0.1.7",
       "@bobfrankston/miscinfo": "^1.0.9",
       "@bobfrankston/oauthsupport": "^1.0.24",

package/packages/mailx-imap/index.js

@@ -303,8 +303,25 @@ export class ImapManager extends EventEmitter {
      *  logout() is wrapped as a no-op so legacy callers don't close it. */
     async getOpsClient(accountId) {
         let client = this.opsClients.get(accountId);
-        if (client)
-            return client;
+        if (client) {
+            // C38: health-check the cached client before returning. If the
+            // underlying socket is dead (Dovecot silently dropped IDLE after
+            // the inactivity timeout, or we lost connectivity), the next
+            // command would fail with "Not connected" — and nothing would
+            // recover it until an explicit reconnectOps was called from the
+            // catch handler. Cheap pre-check here catches it earlier.
+            const sock = client?.native?.transport?.socket;
+            const dead = sock?.destroyed || sock?.readyState === "closed" || client?._dead;
+            if (!dead)
+                return client;
+            try {
+                await (client._realLogout || client.logout)();
+            }
+            catch { /* */ }
+            this.opsClients.delete(accountId);
+            console.log(`  [conn] ${accountId}: stale ops client detected in getOpsClient — reconnecting`);
+            client = undefined;
+        }
         client = this.newClient(accountId, "ops");
         // Wrap logout as no-op — this is a persistent connection. The
         // newClient wrapper's close-counter runs on `_realLogout`.

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

@@ -36,6 +36,13 @@ export declare class MailxService {
     };
     /** Outbox queue depth + retry status for the UI status bar. Cheap to call. */
     getOutboxStatus(): any;
+    /** List queued outgoing messages with parsed envelope headers so the UI
+     *  can render a pink-row "pending" view before IMAP APPEND succeeds. */
+    listQueuedOutgoing(): any[];
+    /** Manually drop a queued message (not yet sent). Removes the .ltr file. */
+    cancelQueuedOutgoing(filePath: string): {
+        ok: true;
+    };
     syncAll(): Promise<void>;
     syncAccount(accountId: string): Promise<void>;
     /** Force re-authentication for an account (deletes token, opens browser consent) */
@@ -75,6 +82,22 @@ 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;
+    /** Address-book listing — paginated, filterable. */
+    listContacts(query: string, page?: number, pageSize?: number): any;
+    /** Upsert a contact from the address book UI (edit name). */
+    upsertContact(name: string, email: string): {
+        ok: true;
+    };
+    /** Delete a contact from the address book. */
+    deleteContact(email: string): {
+        ok: true;
+    };
+    /** Open a configured local path in the OS file explorer. Whitelisted to
+     *  avoid the UI poking at arbitrary paths. */
+    openLocalPath(which: "config" | "log"): Promise<{
+        ok: true;
+        path: string;
+    }>;
     /** 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.