@agenticmail/api 0.7.16 → 0.7.18

package/dist/index.js

@@ -2167,9 +2167,23 @@ function createMailRoutes(accountManager2, config, db, gatewayManager) {
         res.status(400).json({ error: "Invalid UID" });
         return;
       }
+      const permanent = req.query.permanent === "true" || req.query.permanent === "1";
+      const sourceFolder = req.query.folder || "INBOX";
       const password = getAgentPassword(agent);
       const receiver = await getReceiver(agent.stalwartPrincipal, password, config);
-      await receiver.deleteMessage(uid);
+      if (permanent) {
+        await receiver.expungeMessage(uid, sourceFolder);
+        res.status(204).send();
+        return;
+      }
+      const folders = await receiver.listFolders();
+      const trashRe = /^trash\b|deleted items|deleted messages|\[gmail\]\/trash|\[gmail\]\/bin/i;
+      const trashFolder = folders.find((f) => trashRe.test(f.name) || trashRe.test(f.path))?.path ?? folders.find((f) => f.specialUse === "\\Trash")?.path;
+      if (!trashFolder || trashFolder === sourceFolder) {
+        await receiver.expungeMessage(uid, sourceFolder);
+      } else {
+        await receiver.moveToTrash(uid, sourceFolder, trashFolder);
+      }
       res.status(204).send();
     } catch (err) {
       next(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.7.16",
+  "version": "0.7.18",
   "description": "REST API server for AgenticMail — email and SMS endpoints for AI agents",
   "type": "module",
   "main": "dist/index.js",

package/public/index.html

@@ -86,10 +86,13 @@
       <div class="compose-row"><label>Wake</label><input id="compose-wake" placeholder="(optional) names to wake — e.g. alice, bob" /></div>
       <div class="compose-row"><label>Subject</label><input id="compose-subject" /></div>
       <textarea id="compose-body" placeholder="Markdown supported: **bold**, *italic*, `code`, ```fenced```, ## headings, lists, tables…"></textarea>
+      <div id="compose-attachments" class="compose-attachments"></div>
+      <input id="compose-file-input" type="file" multiple style="display:none" />
       <p class="compose-hint">Tip: pass <code class="mono">wake</code> to limit which CC'd agents get a Claude turn. Add <code class="mono">[FINAL]</code> to the subject to close the thread.</p>
     </div>
     <div class="compose-foot">
       <button class="btn-send" id="compose-send">Send</button>
+      <button class="btn-attach icon-btn" id="compose-attach-btn" title="Attach files" data-icon="attachment"></button>
       <span class="compose-status" id="compose-status"></span>
       <button class="btn-discard" id="compose-cancel">Discard</button>
     </div>

package/public/js/api.js

@@ -37,6 +37,32 @@ export async function apiPut(path, body, opts = {}) {
   return await r.json();
 }
 
+/**
+ * Fetch an attachment with auth and trigger a browser download.
+ *
+ * Browsers don't send custom headers on `<a href>` clicks, so a
+ * plain anchor pointing at the authed endpoint returns 401. We
+ * fetch the bytes via `fetch` + Authorization header, convert to a
+ * blob, build an object URL, and synthesise a click on a hidden
+ * anchor. The object URL is revoked after a short tick so memory
+ * isn't held forever.
+ */
+export async function downloadAttachment(uid, index, filename, opts = {}) {
+  const r = await fetch(`${API_URL}/api/agenticmail/mail/messages/${uid}/attachments/${index}`, {
+    headers: { Authorization: `Bearer ${opts.agentKey ?? state.masterKey}` },
+  });
+  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
+  const blob = await r.blob();
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename || 'attachment';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
 export async function apiDelete(path, opts = {}) {
   const r = await fetch(`${API_URL}/api/agenticmail${path}`, {
     method: 'DELETE',

package/public/js/compose.js

@@ -16,6 +16,15 @@ const AUTOSAVE_DEBOUNCE_MS = 2000;
 let autosaveTimer = null;
 let autosaveInFlight = false;
 
+/**
+ * In-memory attachment buffer for the current compose. Each entry
+ * is `{ filename, contentType, content (base64), encoding }` —
+ * the same shape the API's `/mail/send` accepts. We don't persist
+ * attachments to the draft store (the drafts table doesn't have
+ * a binary column); a draft round-trip loses them by design.
+ */
+let pendingAttachments = [];
+
 export function populateComposeFrom() {
   const sel = document.getElementById('compose-from');
   sel.innerHTML = state.agents
@@ -26,13 +35,16 @@ export function populateComposeFrom() {
 export function openCompose() {
   state.composeReplyContext = null;
   state.composeDraftId = null;
+  pendingAttachments = [];
   document.getElementById('compose-title').textContent = 'New message';
   if (state.selectedAgent) document.getElementById('compose-from').value = state.selectedAgent.id;
   ['compose-to', 'compose-cc', 'compose-wake', 'compose-subject', 'compose-body']
     .forEach(id => { document.getElementById(id).value = ''; });
+  renderAttachmentChips();
   setComposeStatus('');
   showModal();
   wireAutosave();
+  wireAttachmentPicker();
   setTimeout(() => document.getElementById('compose-to').focus(), 50);
 }
 
@@ -60,9 +72,12 @@ export function openReply(replyAll) {
   const quoted = (msg.text ?? '').split('\n').map(l => `> ${l}`).join('\n');
   const stub = `\n\nOn ${msg.date}, ${fromAddr} wrote:\n${quoted}`;
   document.getElementById('compose-body').value = stub;
+  pendingAttachments = [];
+  renderAttachmentChips();
   setComposeStatus('');
   showModal();
   wireAutosave();
+  wireAttachmentPicker();
   setTimeout(() => document.getElementById('compose-body').focus(), 50);
 }
 
@@ -158,6 +173,87 @@ function setComposeStatus(text) {
   if (el) el.textContent = text;
 }
 
+/**
+ * Wire the paperclip button + hidden file input. Reads files as
+ * base64 (FileReader → ArrayBuffer → btoa) and appends them to
+ * `pendingAttachments`. We cap total payload at 20 MB because
+ * Stalwart's default SMTP message-size limit is in that range —
+ * larger and the send would silently fail on the wire.
+ */
+const ATTACHMENT_TOTAL_CAP_BYTES = 20 * 1024 * 1024;
+
+function wireAttachmentPicker() {
+  const btn = document.getElementById('compose-attach-btn');
+  const input = document.getElementById('compose-file-input');
+  if (!btn || !input) return;
+  if (btn._attachBound) return;
+  btn._attachBound = true;
+  btn.addEventListener('click', () => input.click());
+  input.addEventListener('change', async () => {
+    const files = Array.from(input.files ?? []);
+    input.value = '';  // allow re-picking the same file later
+    for (const f of files) {
+      const currentBytes = pendingAttachments.reduce((s, a) => s + a.sizeBytes, 0);
+      if (currentBytes + f.size > ATTACHMENT_TOTAL_CAP_BYTES) {
+        toast(`Skipped ${f.name}: total attachments would exceed 20 MB.`, true);
+        continue;
+      }
+      try {
+        const content = await fileToBase64(f);
+        pendingAttachments.push({
+          filename: f.name,
+          contentType: f.type || 'application/octet-stream',
+          content,
+          encoding: 'base64',
+          sizeBytes: f.size,
+        });
+      } catch (err) {
+        toast(`Couldn't read ${f.name}: ${err.message}`, true);
+      }
+    }
+    renderAttachmentChips();
+  });
+}
+
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      // result is `data:<mime>;base64,<payload>` — strip the prefix.
+      const r = String(reader.result ?? '');
+      const i = r.indexOf(',');
+      resolve(i >= 0 ? r.slice(i + 1) : r);
+    };
+    reader.onerror = () => reject(reader.error ?? new Error('FileReader failed'));
+    reader.readAsDataURL(file);
+  });
+}
+
+function renderAttachmentChips() {
+  const root = document.getElementById('compose-attachments');
+  if (!root) return;
+  if (pendingAttachments.length === 0) { root.innerHTML = ''; return; }
+  root.innerHTML = pendingAttachments.map((a, i) => `
+    <span class="attachment-chip" data-att-index="${i}">
+      <span class="chip-name" title="${escapeHtml(a.filename)}">${escapeHtml(a.filename)}</span>
+      <span class="chip-size">${formatBytes(a.sizeBytes)}</span>
+      <button class="chip-remove" data-att-remove="${i}" title="Remove">×</button>
+    </span>
+  `).join('');
+  root.querySelectorAll('[data-att-remove]').forEach(el => {
+    el.addEventListener('click', () => {
+      pendingAttachments.splice(Number(el.dataset.attRemove), 1);
+      renderAttachmentChips();
+    });
+  });
+}
+
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export async function sendCompose() {
   const agentId = document.getElementById('compose-from').value;
   const agent = state.agents.find(a => a.id === agentId);
@@ -171,6 +267,17 @@ export async function sendCompose() {
   const body = { to, subject, text };
   if (cc) body.cc = cc;
   if (wakeRaw) body.wake = wakeRaw.split(',').map(s => s.trim()).filter(Boolean);
+  if (pendingAttachments.length > 0) {
+    // Strip the local-only `sizeBytes` field — the API expects
+    // only filename/contentType/content/encoding. Keeping the
+    // extra field works (it's ignored) but is noise on the wire.
+    body.attachments = pendingAttachments.map(a => ({
+      filename: a.filename,
+      contentType: a.contentType,
+      content: a.content,
+      encoding: a.encoding,
+    }));
+  }
   try {
     await apiPost('/mail/send', body, { agentKey: agent.apiKey });
     // Clean up the autosaved draft (if any) — the message is in
@@ -179,6 +286,7 @@ export async function sendCompose() {
       try { await apiDelete(`/drafts/${state.composeDraftId}`, { agentKey: agent.apiKey }); } catch { /* ignore */ }
       state.composeDraftId = null;
     }
+    pendingAttachments = [];
     closeCompose();
     toast('Sent.');
     if (state.selectedAgent?.id === agent.id) await loadList(agent, state.selectedFolder);

package/public/js/message-view.js

@@ -4,10 +4,11 @@ import { escapeHtml, stripHtml, toast } from './utils.js';
 import { formatDateFull } from './time.js';
 import { renderMarkdown } from './markdown.js';
 import { avatarHtml } from './avatar.js';
-import { apiGet, apiPost, apiDelete } from './api.js';
+import { apiGet, apiPost, apiDelete, downloadAttachment } from './api.js';
 import { openReply } from './compose.js';
 import { loadList } from './list-view.js';
 import { icon } from './icons.js';
+import { confirmModal } from './modal.js';
 
 export async function openMessage(uid) {
   if (!state.selectedAgent) return;
@@ -53,8 +54,12 @@ function renderMessage(msg) {
   const bodyText = msg.text ?? stripHtml(msg.html ?? '');
 
   const attachmentsHtml = (msg.attachments ?? []).length > 0
-    ? `<div class="message-attachments">${msg.attachments.map(a =>
-        `<span class="message-attachment"><span class="att-icon">${icon('attachment', { size: 18 })}</span>${escapeHtml(a.filename ?? '(unnamed)')}${a.size ? ` · ${Math.round(a.size/1024)}KB` : ''}</span>`
+    ? `<div class="message-attachments">${msg.attachments.map((a, i) =>
+        `<button class="message-attachment" data-att-index="${i}" data-att-filename="${escapeHtml(a.filename ?? 'attachment')}" title="Click to download">
+          <span class="att-icon">${icon('attachment', { size: 18 })}</span>
+          <span class="att-name">${escapeHtml(a.filename ?? '(unnamed)')}</span>
+          ${a.size ? `<span class="att-size">${formatBytes(a.size)}</span>` : ''}
+        </button>`
       ).join('')}</div>`
     : '';
 
@@ -73,15 +78,134 @@ function renderMessage(msg) {
         <div class="message-date">${escapeHtml(formatDateFull(msg.date))}</div>
       </div>
     </div>
-    <div class="message-body">${renderMarkdown(bodyText)}</div>
+    <div class="message-body">${renderBodyWithThreading(bodyText)}</div>
     ${attachmentsHtml}
   `;
+
+  // Wire attachment download clicks. Browsers don't pass our auth
+  // header on a plain <a href>, so we fetch+blob+synthesise the
+  // click in api.js → downloadAttachment.
+  view.querySelectorAll('.message-attachment').forEach((el) => {
+    el.addEventListener('click', async () => {
+      const idx = Number(el.dataset.attIndex);
+      const filename = el.dataset.attFilename;
+      el.classList.add('downloading');
+      try {
+        await downloadAttachment(state.selectedUid, idx, filename, { agentKey: state.selectedAgent.apiKey });
+      } catch (err) {
+        toast(`Download failed: ${err.message}`, true);
+      } finally {
+        el.classList.remove('downloading');
+      }
+    });
+  });
+}
+
+/** Pretty-print byte counts (KB / MB) for attachment size display. */
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Render a message body with proper email-thread chrome around
+ * quoted replies.
+ *
+ * Most clients (including ours, via `openReply` in compose.js)
+ * prefix a quoted-reply block with the canonical header line:
+ *
+ *   On 2026-05-13T22:50:24.000Z, claudecode@localhost wrote:
+ *   > original body line 1
+ *   > original body line 2
+ *
+ * Rendered with our plain markdown that becomes raw text + a
+ * blockquote of `>` lines — visible but ugly: ISO timestamp, no
+ * avatar, no nice formatting. This function detects the pattern,
+ * extracts (date, sender, quoted body), and renders each quoted
+ * chunk as a styled "thread-quote" card with the right chrome:
+ * sender avatar, name, friendly date, and the quoted body
+ * recursively threaded (for replies-to-replies).
+ *
+ * Non-matching prose flows through untouched via `renderMarkdown`.
+ */
+function renderBodyWithThreading(src) {
+  if (!src) return '<div class="empty">(no body)</div>';
+  const lines = src.split('\n');
+  const out = [];
+  let prose = [];
+  let i = 0;
+
+  const flushProse = () => {
+    if (prose.length === 0) return;
+    out.push(renderMarkdown(prose.join('\n')));
+    prose = [];
+  };
+
+  // Header pattern: `On <date>, <addr> wrote:` with optional
+  // angle-bracket form `<addr@host>`. Date is anything up to the
+  // comma; addr is anything not whitespace + an @.
+  const headerRe = /^On (.+?), <?([^\s<>]+@[^\s<>]+)>? wrote:\s*$/;
+
+  while (i < lines.length) {
+    const m = lines[i].match(headerRe);
+    if (!m) {
+      prose.push(lines[i]);
+      i++;
+      continue;
+    }
+    flushProse();
+    const dateRaw = m[1];
+    const sender = m[2];
+    i++;
+    // Collect contiguous `>` lines (with possible blank-line gaps
+    // inside the quote, which most clients tolerate). Stop at the
+    // first non-quote, non-blank line.
+    const quoted = [];
+    while (i < lines.length) {
+      const l = lines[i];
+      if (l.startsWith('>')) { quoted.push(l.replace(/^>\s?/, '')); i++; continue; }
+      if (l.trim() === '') {
+        // Peek ahead — if the next non-blank is another `>`, the
+        // blank line is part of the quote; otherwise we're done.
+        let j = i + 1;
+        while (j < lines.length && lines[j].trim() === '') j++;
+        if (j < lines.length && lines[j].startsWith('>')) { quoted.push(''); i++; continue; }
+      }
+      break;
+    }
+    out.push(renderThreadQuote(dateRaw, sender, quoted.join('\n')));
+  }
+  flushProse();
+  return out.join('');
+}
+
+function renderThreadQuote(dateRaw, sender, quotedBody) {
+  // Try to format the ISO date through the same helper the
+  // message header uses; fall back to the raw string on parse fail.
+  const friendlyDate = (() => {
+    const d = new Date(dateRaw);
+    if (!Number.isNaN(d.getTime())) return formatDateFull(d.toISOString());
+    return dateRaw;
+  })();
+  const sub = renderBodyWithThreading(quotedBody);  // recurse for nested threads
+  return `
+    <div class="thread-quote">
+      <div class="thread-quote-head">
+        ${avatarHtml({ name: sender }, 'avatar-sm')}
+        <span class="thread-quote-from">${escapeHtml(sender)}</span>
+        <span class="thread-quote-dot">·</span>
+        <span class="thread-quote-date">${escapeHtml(friendlyDate)}</span>
+      </div>
+      <div class="thread-quote-body">${sub}</div>
+    </div>
+  `;
 }
 
 async function markUnread() {
   if (!state.currentMessage || !state.selectedAgent) return;
   try {
-    await apiPost(`/mail/messages/${state.currentMessage.uid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
+    await apiPost(`/mail/messages/${state.selectedUid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
     toast('Marked unread.');
     location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
     await loadList(state.selectedAgent, state.selectedFolder);
@@ -97,9 +221,15 @@ async function markUnread() {
  */
 async function markSpam() {
   if (!state.currentMessage || !state.selectedAgent) return;
-  if (!confirm('Report this message as spam? It will be moved to the Junk folder.')) return;
+  const ok = await confirmModal({
+    title: 'Report this message as spam?',
+    body: 'It will be moved to the Junk folder and used to train the spam filter.',
+    confirm: 'Report spam',
+    danger: true,
+  });
+  if (!ok) return;
   try {
-    await apiPost(`/mail/messages/${state.currentMessage.uid}/spam`, {}, { agentKey: state.selectedAgent.apiKey });
+    await apiPost(`/mail/messages/${state.selectedUid}/spam`, {}, { agentKey: state.selectedAgent.apiKey });
     toast('Reported as spam.');
     location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
     await loadList(state.selectedAgent, state.selectedFolder);
@@ -116,9 +246,26 @@ async function markSpam() {
  */
 async function deleteMessage() {
   if (!state.currentMessage || !state.selectedAgent) return;
-  if (!confirm('Delete this message?')) return;
+  const subject = state.currentMessage.subject ?? '(no subject)';
+  // From Trash, delete is permanent (no further fallback). From
+  // every other folder it's a move-to-trash, recoverable.
+  const isTrash = state.selectedFolder === 'trash';
+  const ok = await confirmModal({
+    title: isTrash ? 'Delete this message forever?' : 'Delete this message?',
+    body: isTrash
+      ? `"${subject}" will be permanently removed. This can't be undone.`
+      : `"${subject}" will be moved to Trash. You can recover it from there.`,
+    confirm: isTrash ? 'Delete forever' : 'Move to Trash',
+    danger: true,
+  });
+  if (!ok) return;
   try {
-    await apiDelete(`/mail/messages/${state.currentMessage.uid}`, { agentKey: state.selectedAgent.apiKey });
+    // Pass the real IMAP folder name + permanent flag. The API
+    // uses the folder for the IMAP source mailbox and decides
+    // move-to-trash vs expunge based on `permanent`.
+    const imap = state.folderNames?.[state.selectedFolder] ?? 'INBOX';
+    const qs = `?folder=${encodeURIComponent(imap)}${isTrash ? '&permanent=true' : ''}`;
+    await apiDelete(`/mail/messages/${state.selectedUid}${qs}`, { agentKey: state.selectedAgent.apiKey });
     toast('Deleted.');
     location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
     await loadList(state.selectedAgent, state.selectedFolder);

package/public/js/modal.js

@@ -0,0 +1,107 @@
+// Generic centered confirmation modal — a proper replacement for
+// the browser's `window.confirm()`. We use it for every destructive
+// action in the UI (delete, report spam, etc.) so the experience
+// matches the rest of the app rather than dropping the user into
+// the OS-styled alert UI.
+//
+// Usage:
+//   const ok = await confirmModal({
+//     title: 'Delete this message?',
+//     body: "This can't be undone.",
+//     confirm: 'Delete',
+//     danger: true,
+//   });
+//   if (!ok) return;
+//
+// Implementation notes:
+//   - Promise-based so callers can `await` the result the same
+//     way they would `confirm()`. Resolves true on confirm, false
+//     on cancel / Escape / backdrop click.
+//   - Built lazily on first call and reused thereafter. Closing
+//     the modal detaches its keydown listener so we don't pile
+//     up handlers across the session.
+//   - Focus is moved to the confirm button on open so Enter
+//     confirms by default. Escape always cancels.
+
+import { escapeHtml } from './utils.js';
+
+let modalRoot = null;
+let activeResolve = null;
+let activeKeydownHandler = null;
+
+function ensureModal() {
+  if (modalRoot) return modalRoot;
+  modalRoot = document.createElement('div');
+  modalRoot.className = 'confirm-modal-bg';
+  modalRoot.style.display = 'none';
+  modalRoot.innerHTML = `
+    <div class="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-modal-title">
+      <h2 class="confirm-modal-title" id="confirm-modal-title"></h2>
+      <p class="confirm-modal-body"></p>
+      <div class="confirm-modal-actions">
+        <button class="btn-confirm-cancel" data-action="cancel">Cancel</button>
+        <button class="btn-confirm-ok" data-action="confirm"></button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modalRoot);
+  // Backdrop click → cancel (only when the click landed on the
+  // backdrop itself, not the inner card).
+  modalRoot.addEventListener('click', (e) => {
+    if (e.target === modalRoot) resolveModal(false);
+  });
+  modalRoot.querySelector('[data-action=cancel]').addEventListener('click', () => resolveModal(false));
+  modalRoot.querySelector('[data-action=confirm]').addEventListener('click', () => resolveModal(true));
+  return modalRoot;
+}
+
+function resolveModal(value) {
+  if (!activeResolve) return;
+  const resolve = activeResolve;
+  activeResolve = null;
+  if (modalRoot) modalRoot.style.display = 'none';
+  if (activeKeydownHandler) {
+    document.removeEventListener('keydown', activeKeydownHandler);
+    activeKeydownHandler = null;
+  }
+  resolve(value);
+}
+
+export function confirmModal({
+  title = 'Are you sure?',
+  body = '',
+  confirm = 'OK',
+  cancel = 'Cancel',
+  danger = false,
+} = {}) {
+  // If a previous modal is somehow still open, cancel it before
+  // opening the new one. Guarantees a single instance.
+  if (activeResolve) resolveModal(false);
+
+  const root = ensureModal();
+  root.querySelector('.confirm-modal-title').textContent = title;
+  const bodyEl = root.querySelector('.confirm-modal-body');
+  bodyEl.innerHTML = body ? escapeHtml(body) : '';
+  bodyEl.style.display = body ? 'block' : 'none';
+  const okBtn = root.querySelector('[data-action=confirm]');
+  okBtn.textContent = confirm;
+  okBtn.classList.toggle('btn-confirm-danger', !!danger);
+  root.querySelector('[data-action=cancel]').textContent = cancel;
+  root.style.display = 'flex';
+  // Focus the confirm button so Enter resolves true by default.
+  setTimeout(() => okBtn.focus(), 0);
+
+  activeKeydownHandler = (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); resolveModal(false); }
+    else if (e.key === 'Enter' && document.activeElement?.dataset?.action === 'confirm') {
+      // Default Enter only fires when the OK button has focus —
+      // prevents a textarea-Enter elsewhere from accidentally
+      // confirming a hidden modal.
+      e.preventDefault();
+      resolveModal(true);
+    }
+  };
+  document.addEventListener('keydown', activeKeydownHandler);
+
+  return new Promise((resolve) => { activeResolve = resolve; });
+}

package/public/styles.css

@@ -579,6 +579,42 @@ mark.search-hl {
   margin: .8em 0; padding: .2em 0 .2em 12px;
   color: var(--muted); white-space: pre-wrap;
 }
+
+/* ─── In-body thread quote (replies inline in the body) ───────── */
+/* When a message body contains an "On <date>, <addr> wrote:" line
+   followed by `>`-quoted text, we render that section as a
+   styled card with proper avatar + name + friendly date instead
+   of leaving the raw ISO timestamp visible. Nested replies recurse
+   so a 3-deep thread gets 3 nested cards. */
+.thread-quote {
+  margin: 16px 0;
+  border-left: 3px solid var(--pink-rule);
+  padding: 0 0 0 16px;
+}
+.thread-quote .thread-quote {
+  border-left-color: #c084fc;
+  margin: 12px 0;
+}
+.thread-quote .thread-quote .thread-quote { border-left-color: #f59e0b; }
+.thread-quote-head {
+  display: flex; align-items: center; gap: 8px;
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: var(--muted);
+}
+.thread-quote-head .avatar-sm {
+  width: 22px; height: 22px; font-size: 10px;
+}
+.thread-quote-from { font-weight: 500; color: var(--ink-soft); }
+.thread-quote-dot { opacity: .5; }
+.thread-quote-date { color: var(--muted); }
+.thread-quote-body {
+  color: var(--ink-soft);
+}
+.thread-quote-body p,
+.thread-quote-body div { color: var(--ink-soft); }
+.thread-quote-body code { background: var(--code-bg); color: var(--code-fg); }
+
 .message-body blockquote blockquote { border-left-color: #c084fc; }
 .message-body blockquote blockquote blockquote { border-left-color: #f59e0b; }
 .message-body table { border-collapse: collapse; margin: .5em 0; }
@@ -597,11 +633,62 @@ mark.search-hl {
   width: 100%;
 }
 .message-attachment {
+  /* Clickable chip — fetches the file via the authed download
+     helper and triggers a browser download. */
   display: inline-flex; align-items: center; gap: 8px;
   padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
-  font-size: 13px; color: var(--ink-soft);
+  background: var(--bg-soft); color: var(--ink-soft);
+  font-size: 13px; cursor: pointer;
+  font: inherit;
+  transition: background .12s, border-color .12s, transform .06s;
+}
+.message-attachment:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent-strong);
+  color: var(--ink);
+}
+.message-attachment:active { transform: translateY(1px); }
+.message-attachment.downloading { opacity: .6; cursor: progress; }
+.message-attachment .att-icon { display: inline-flex; }
+.message-attachment .att-size {
+  color: var(--muted); font-size: 12px;
+  padding-left: 4px;
+  border-left: 1px solid var(--line);
+}
+
+/* Compose attachment chips (in the open compose modal) */
+.compose-attachments {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  padding: 8px 0 0;
+}
+.compose-attachments:empty { display: none; }
+.attachment-chip {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 4px 4px 10px;
+  background: var(--bg-soft); border: 1px solid var(--line);
+  border-radius: 16px;
+  font-size: 12px; color: var(--ink-soft);
+  max-width: 240px;
 }
-.message-attachment .att-icon { font-size: 18px; }
+.attachment-chip .chip-name {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  max-width: 160px;
+}
+.attachment-chip .chip-size { color: var(--muted); }
+.attachment-chip .chip-remove {
+  width: 20px; height: 20px; border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 14px; line-height: 1; color: var(--muted);
+  background: transparent; cursor: pointer;
+}
+.attachment-chip .chip-remove:hover { background: var(--bg-hover); color: var(--ink); }
+
+/* Paperclip attach button in compose footer. */
+.btn-attach {
+  width: 36px; height: 36px;
+  color: var(--muted);
+}
+.btn-attach:hover { background: var(--bg-hover); color: var(--ink); }
 
 /* ─── Auth gate ─────────────────────────────────────────────────────── */
 .auth-gate {
@@ -706,6 +793,60 @@ mark.search-hl {
   font-size: 11px; color: var(--muted); padding: 0 8px;
 }
 
+/* ─── Confirm modal (used by destructive actions: delete, spam) ──── */
+/* Centered dialog backed by a dimmed full-screen backdrop. Replaces
+   browser-native window.confirm() so destructive actions match the
+   rest of the app's chrome rather than dropping into OS-styled
+   alerts. Focus lands on the confirm button on open; Esc cancels;
+   Enter confirms only when the button has focus. */
+.confirm-modal-bg {
+  position: fixed; inset: 0; z-index: 80;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px;
+  animation: confirm-fade-in .12s ease-out;
+}
+@keyframes confirm-fade-in { from { opacity: 0; } to { opacity: 1; } }
+.confirm-modal {
+  width: 100%; max-width: 420px;
+  background: var(--bg); color: var(--ink);
+  border-radius: 14px;
+  padding: 24px 24px 18px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1);
+}
+.confirm-modal-title {
+  margin: 0 0 8px;
+  font: 500 18px/1.35 'Google Sans', sans-serif;
+  color: var(--ink);
+}
+.confirm-modal-body {
+  margin: 0 0 20px;
+  font-size: 14px; line-height: 1.5;
+  color: var(--ink-soft);
+}
+.confirm-modal-actions {
+  display: flex; gap: 8px; justify-content: flex-end;
+}
+.btn-confirm-cancel,
+.btn-confirm-ok {
+  font: 500 14px/1 'Google Sans', sans-serif;
+  padding: 10px 18px; border-radius: 8px;
+  cursor: pointer; transition: background .12s;
+}
+.btn-confirm-cancel {
+  background: transparent; color: var(--accent-strong);
+}
+.btn-confirm-cancel:hover { background: var(--bg-hover); }
+.btn-confirm-ok {
+  background: var(--pink); color: white;
+}
+.btn-confirm-ok:hover { background: var(--accent-strong); }
+.btn-confirm-ok.btn-confirm-danger {
+  /* Destructive variant — red instead of brand pink. */
+  background: #d93025;
+}
+.btn-confirm-ok.btn-confirm-danger:hover { background: #b3261e; }
+
 /* ─── Toast ────────────────────────────────────────────────────────── */
 .toast {
   position: fixed; bottom: 24px; left: 24px; z-index: 60;