@agenticmail/api 0.7.15 → 0.7.17

package/README.md

@@ -8,7 +8,14 @@ The API server for [AgenticMail](https://github.com/agenticmail/agenticmail) —
 
 This package runs a web server that handles everything: sending email and SMS, reading inboxes, managing agents, phone number access, real-time notifications, inter-agent messaging, spam filtering, outbound security scanning, and gateway configuration. Every feature in AgenticMail is accessible through this API.
 
-## ✨ What's new in 0.7.9
+## ✨ What's new in 0.7.16
+
+- **📐 Typed task contracts** — `POST /tasks/assign` and the long-poll `POST /tasks/rpc` accept an optional `outputSchema` field (JSON Schema, draft-7 subset). The schema is persisted on the task row via migration `014_task_output_schema.sql` and is rendered into the worker's wake prompt. `POST /tasks/:id/result` validates against the schema before accepting; mismatches return **400** with a flat `schemaErrors: [{ path, message }]` list. Validator lives at `src/lib/schema-validator.ts` (hand-rolled, no `ajv` dep) and supports `type`, `required`, `properties`, `items`, `enum`, `additionalProperties: false`, `minLength`/`maxLength`, `minimum`/`maximum`. Tasks without a schema keep the v0.8.x behaviour — fully back-compat.
+- **⭐ Star endpoint** — `POST /mail/messages/:uid/star` with `{ starred: boolean, folder?: string }`. Maps to IMAP's `\Flagged` flag — same on-disk bit Gmail's star uses.
+- **📥 Long-running worker visibility** — `POST /dispatcher/worker-heartbeat`, `GET /dispatcher/worker-log/:id`. Combined with the dropped 30-min `active` TTL, workers can run for hours; staleness is a flag, not an eviction trigger.
+- **🌐 Web UI** under `packages/api/public/` — Gmail two-column layout, official Claude + AgenticMail logos, hash router (`#/folder/<id>`, `#/m/<uid>`), folder auto-discovery (works on Stalwart / Gmail / Outlook / macOS Mail conventions), 2-line preview rows, mobile-responsive sidebar, draft autosave, vector icon library.
+
+## ✨ Earlier — 0.7.9
 
 - **🌐 Gmail-style web UI, fully redesigned** — `packages/api/public/` ships a proper two-column Gmail layout (sidebar with Compose + folders / content pane) served by `express.static` at the API root. Every emoji replaced with an inline 24×24 vector icon library (`public/js/icons.js`). HTML shell + dedicated `styles.css` + 14 modular ES module JS files under `public/js/`. Hash router (`#/inbox`, `#/m/<uid>`), search with `from:` / `subject:` operators, real-time SSE updates, browser notifications. Run via `agenticmail web` from the CLI.
 - **Wake allowlist on `POST /mail/send`** — accept a `wake` parameter (array of agent names or comma-separated string). The API normalises it, sets an `X-AgenticMail-Wake` header on the outgoing SMTP envelope, AND surfaces it as `wakeAllowlist` on the SSE event so the dispatcher can decide which CC'd recipients to actually give a Claude turn.

package/dist/index.js

@@ -3147,12 +3147,120 @@ function createGatewayRoutes(gatewayManager) {
 import { Router as Router10 } from "express";
 import { v4 as uuidv43 } from "uuid";
 import { MailSender as MailSender4 } from "@agenticmail/core";
+
+// src/lib/schema-validator.ts
+function validate(value, schema, path = "") {
+  const errors = [];
+  if (!schema || typeof schema !== "object") return errors;
+  if (schema.type !== void 0) {
+    const types = Array.isArray(schema.type) ? schema.type : [schema.type];
+    if (!types.some((t) => matchesType(value, t))) {
+      errors.push({ path: path || "(root)", message: `expected type ${types.join("|")}, got ${jsType(value)}` });
+      return errors;
+    }
+  }
+  if (schema.enum && Array.isArray(schema.enum)) {
+    if (!schema.enum.some((e) => deepEqual(e, value))) {
+      errors.push({ path: path || "(root)", message: `value not in enum [${schema.enum.map((e) => JSON.stringify(e)).join(", ")}]` });
+    }
+  }
+  if (typeof value === "string") {
+    if (schema.minLength !== void 0 && value.length < schema.minLength) {
+      errors.push({ path: path || "(root)", message: `string shorter than minLength ${schema.minLength}` });
+    }
+    if (schema.maxLength !== void 0 && value.length > schema.maxLength) {
+      errors.push({ path: path || "(root)", message: `string longer than maxLength ${schema.maxLength}` });
+    }
+  }
+  if (typeof value === "number") {
+    if (schema.minimum !== void 0 && value < schema.minimum) {
+      errors.push({ path: path || "(root)", message: `value below minimum ${schema.minimum}` });
+    }
+    if (schema.maximum !== void 0 && value > schema.maximum) {
+      errors.push({ path: path || "(root)", message: `value above maximum ${schema.maximum}` });
+    }
+  }
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    const obj = value;
+    for (const key of schema.required ?? []) {
+      if (!(key in obj)) {
+        errors.push({ path: childPath(path, key), message: "required property is missing" });
+      }
+    }
+    if (schema.properties) {
+      for (const [key, subSchema] of Object.entries(schema.properties)) {
+        if (key in obj) {
+          errors.push(...validate(obj[key], subSchema, childPath(path, key)));
+        }
+      }
+      if (schema.additionalProperties === false) {
+        for (const key of Object.keys(obj)) {
+          if (!(key in schema.properties)) {
+            errors.push({ path: childPath(path, key), message: "unknown property (additionalProperties: false)" });
+          }
+        }
+      }
+    }
+  }
+  if (Array.isArray(value) && schema.items) {
+    value.forEach((item, i) => {
+      errors.push(...validate(item, schema.items, `${path}[${i}]`));
+    });
+  }
+  return errors;
+}
+function matchesType(value, t) {
+  switch (t) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+      return typeof value === "number" && !Number.isNaN(value);
+    case "integer":
+      return typeof value === "number" && Number.isInteger(value);
+    case "boolean":
+      return typeof value === "boolean";
+    case "null":
+      return value === null;
+    case "object":
+      return typeof value === "object" && value !== null && !Array.isArray(value);
+    case "array":
+      return Array.isArray(value);
+    default:
+      return true;
+  }
+}
+function jsType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+function childPath(parent, key) {
+  return parent ? `${parent}.${key}` : key;
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== typeof b) return false;
+  if (a && b && typeof a === "object") {
+    if (Array.isArray(a) !== Array.isArray(b)) return false;
+    if (Array.isArray(a)) {
+      if (a.length !== b.length) return false;
+      return a.every((v, i) => deepEqual(v, b[i]));
+    }
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    return aKeys.every((k) => deepEqual(a[k], b[k]));
+  }
+  return false;
+}
+
+// src/routes/tasks.ts
 var rpcResolvers = /* @__PURE__ */ new Map();
 function createTaskRoutes(db, accountManager2, config) {
   const router = Router10();
   router.post("/tasks/assign", requireAuth, async (req, res, next) => {
     try {
-      const { assignee, taskType, payload, expiresInSeconds } = req.body || {};
+      const { assignee, taskType, payload, expiresInSeconds, outputSchema } = req.body || {};
       if (!assignee) {
         res.status(400).json({ error: "assignee (agent name) is required" });
         return;
@@ -3162,13 +3270,32 @@ function createTaskRoutes(db, accountManager2, config) {
         res.status(404).json({ error: `Agent "${assignee}" not found` });
         return;
       }
+      if (outputSchema !== void 0 && (typeof outputSchema !== "object" || outputSchema === null)) {
+        res.status(400).json({ error: "outputSchema must be a JSON Schema object" });
+        return;
+      }
       const assignerId = req.agent?.id ?? "master";
       const id = uuidv43();
       const expiresAt = expiresInSeconds ? new Date(Date.now() + expiresInSeconds * 1e3).toISOString() : null;
       db.prepare(
-        "INSERT INTO agent_tasks (id, assigner_id, assignee_id, task_type, payload, expires_at) VALUES (?, ?, ?, ?, ?, ?)"
-      ).run(id, assignerId, target.id, taskType || "generic", JSON.stringify(payload || {}), expiresAt);
+        "INSERT INTO agent_tasks (id, assigner_id, assignee_id, task_type, payload, expires_at, output_schema) VALUES (?, ?, ?, ?, ?, ?, ?)"
+      ).run(
+        id,
+        assignerId,
+        target.id,
+        taskType || "generic",
+        JSON.stringify(payload || {}),
+        expiresAt,
+        outputSchema ? JSON.stringify(outputSchema) : null
+      );
       const taskDescription = payload?.task || payload?.description || JSON.stringify(payload || {});
+      const schemaSection = outputSchema ? `
+
+Your submit_result MUST conform to this JSON Schema:
+\`\`\`json
+${JSON.stringify(outputSchema, null, 2)}
+\`\`\`
+The API will reject a non-conformant result with the validator errors so you can retry.` : "";
       const spawnEvent = {
         type: "task",
         taskId: id,
@@ -3176,7 +3303,7 @@ function createTaskRoutes(db, accountManager2, config) {
         task: `You have a pending task (ID: ${id}). Check your pending tasks, claim it, process it, and submit the result.
 
 Type: ${taskType || "generic"}
-Task: ${taskDescription}`,
+Task: ${taskDescription}${schemaSection}`,
         assignee: target.name,
         from: req.agent?.name ?? "system"
       };
@@ -3257,6 +3384,25 @@ Please check your pending tasks.`
   router.post("/tasks/:id/result", requireAgent, async (req, res, next) => {
     try {
       const { result } = req.body || {};
+      const taskRow = db.prepare("SELECT output_schema FROM agent_tasks WHERE id = ?").get(req.params.id);
+      if (taskRow?.output_schema) {
+        let schema;
+        try {
+          schema = JSON.parse(taskRow.output_schema);
+        } catch {
+        }
+        if (schema) {
+          const errors = validate(result, schema);
+          if (errors.length > 0) {
+            res.status(400).json({
+              error: "Result does not match the task outputSchema",
+              schemaErrors: errors,
+              hint: "Retry submit_result with a value matching the schema. Use GET /tasks/:id to re-read the schema."
+            });
+            return;
+          }
+        }
+      }
       const resultJson = JSON.stringify(result ?? null);
       const dbResult = db.prepare(
         "UPDATE agent_tasks SET status = 'completed', result = ?, completed_at = datetime('now') WHERE id = ? AND status = 'claimed'"
@@ -3443,6 +3589,7 @@ function parseTask(row) {
   if (!row) return null;
   let payload = {};
   let result = null;
+  let outputSchema = null;
   try {
     payload = JSON.parse(row.payload);
   } catch {
@@ -3453,6 +3600,11 @@ function parseTask(row) {
   } catch {
     result = row.result;
   }
+  try {
+    outputSchema = row.output_schema ? JSON.parse(row.output_schema) : null;
+  } catch {
+    outputSchema = null;
+  }
   return {
     id: row.id,
     assignerId: row.assigner_id,
@@ -3465,7 +3617,8 @@ function parseTask(row) {
     createdAt: row.created_at,
     claimedAt: row.claimed_at,
     completedAt: row.completed_at,
-    expiresAt: row.expires_at
+    expiresAt: row.expires_at,
+    outputSchema
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.7.15",
+  "version": "0.7.17",
   "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,14 @@
       <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>
   </div>

package/public/js/api.js

@@ -23,3 +23,53 @@ export async function apiPost(path, body, opts = {}) {
   if (!r.ok) throw new Error(`${r.status} ${path}`);
   return await r.json();
 }
+
+export async function apiPut(path, body, opts = {}) {
+  const r = await fetch(`${API_URL}/api/agenticmail${path}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${opts.agentKey ?? state.masterKey}`,
+    },
+    body: JSON.stringify(body),
+  });
+  if (!r.ok) throw new Error(`${r.status} ${path}`);
+  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',
+    headers: { Authorization: `Bearer ${opts.agentKey ?? state.masterKey}` },
+  });
+  if (!r.ok) throw new Error(`${r.status} ${path}`);
+  // DELETE may return 204 No Content — guard against empty body.
+  const text = await r.text();
+  return text ? JSON.parse(text) : { ok: true };
+}

package/public/js/app.js

@@ -10,7 +10,7 @@ import { apiGet } from './api.js';
 import { isBridgeAgent } from './avatar.js';
 import { renderProfile, toggleProfileMenu, closeProfileMenu } from './profile.js';
 import { renderSidebar } from './sidebar.js';
-import { loadList, renderList, clearSearch } from './list-view.js';
+import { loadList, renderList, clearSearch, ensureFolderCache } from './list-view.js';
 import { openMessage } from './message-view.js';
 import { populateComposeFrom, openCompose, closeCompose, sendCompose } from './compose.js';
 import { subscribeToAllAgents, maybeRequestNotificationPermission } from './sse.js';
@@ -96,6 +96,15 @@ async function selectAgent(agent) {
   state.selectedAgent = agent;
   state.selectedUid = null;
   state.currentMessage = null;
+  // Reset the per-agent folder cache so a fresh discovery runs
+  // against the new agent's IMAP. Otherwise switching to an
+  // account that uses different folder names (e.g. Gmail relay
+  // vs vanilla Stalwart) keeps the previous cache.
+  state.folderNames = {};
+  // Discover folders BEFORE the first sidebar render so the
+  // `requiresDiscovery` hide-rule (All Mail on non-Gmail servers)
+  // has the cache to consult. Falls back to defaults on failure.
+  await ensureFolderCache(agent);
   renderSidebar(onFolderSelect);
   renderProfile();
   await loadList(agent, state.selectedFolder);

package/public/js/compose.js

@@ -1,10 +1,30 @@
 // Gmail-style bottom-right compose popup. Handles both new-message
 // and reply flows. `wake` is the AgenticMail selective-wake hint.
+//
+// Draft autosave: every keystroke on the to / cc / subject / body
+// fields schedules a 2s-debounced save to `/drafts`. First save
+// POSTs and stores the returned id; subsequent saves PUT to that
+// id. On Send, the draft (if any) is deleted after the send
+// succeeds — otherwise it stays around so the user can find it
+// in the Drafts folder.
 import { state } from './state.js';
 import { escapeHtml, toast } from './utils.js';
-import { apiPost } from './api.js';
+import { apiPost, apiPut, apiDelete } from './api.js';
 import { loadList } from './list-view.js';
 
+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
@@ -14,11 +34,17 @@ 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);
 }
 
@@ -26,6 +52,7 @@ export function openReply(replyAll) {
   if (!state.currentMessage) return;
   const msg = state.currentMessage;
   state.composeReplyContext = { uid: msg.uid, agent: state.selectedAgent, replyAll };
+  state.composeDraftId = null;
   document.getElementById('compose-title').textContent =
     `Reply${replyAll ? ' all' : ''}: ${msg.subject ?? '(no subject)'}`;
   document.getElementById('compose-from').value = state.selectedAgent.id;
@@ -45,18 +72,188 @@ 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);
 }
 
 export function closeCompose() {
   document.getElementById('compose-bg').style.display = 'none';
+  // Flush a final save synchronously-ish on close so a quick
+  // "type → close" doesn't lose work. We only fire if there's a
+  // pending debounce — if the user already saved or never typed,
+  // skip the network call.
+  if (autosaveTimer) {
+    clearTimeout(autosaveTimer);
+    autosaveTimer = null;
+    void runAutosave();
+  }
 }
 
 function showModal() {
   document.getElementById('compose-bg').style.display = 'flex';
 }
 
+/**
+ * Build the field set the drafts API expects from current modal
+ * state. Returns null when the draft is empty (no point persisting
+ * a blank shell).
+ */
+function readComposeFields() {
+  const to = document.getElementById('compose-to').value.trim();
+  const subject = document.getElementById('compose-subject').value.trim();
+  const text = document.getElementById('compose-body').value;
+  const cc = document.getElementById('compose-cc').value.trim();
+  if (!to && !subject && !text.trim() && !cc) return null;
+  return {
+    to: to || null,
+    subject: subject || null,
+    text: text || null,
+    cc: cc || null,
+  };
+}
+
+/**
+ * Wire the autosave debounce to every input/textarea in the modal.
+ * Re-wires on every open() so removed/replaced DOM nodes don't
+ * accumulate listeners.
+ */
+function wireAutosave() {
+  ['compose-to', 'compose-cc', 'compose-subject', 'compose-body'].forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    // Marker prevents double-binding.
+    if (el._autosaveBound) return;
+    el._autosaveBound = true;
+    el.addEventListener('input', scheduleAutosave);
+  });
+}
+
+function scheduleAutosave() {
+  setComposeStatus('Saving…');
+  if (autosaveTimer) clearTimeout(autosaveTimer);
+  autosaveTimer = setTimeout(runAutosave, AUTOSAVE_DEBOUNCE_MS);
+}
+
+async function runAutosave() {
+  autosaveTimer = null;
+  if (autosaveInFlight) {
+    // Coalesce: re-schedule one more pass after the current
+    // request lands so we don't lose the latest keystroke.
+    autosaveTimer = setTimeout(runAutosave, AUTOSAVE_DEBOUNCE_MS);
+    return;
+  }
+  const fields = readComposeFields();
+  if (!fields) { setComposeStatus(''); return; }
+  const agentId = document.getElementById('compose-from').value;
+  const agent = state.agents.find(a => a.id === agentId) ?? state.selectedAgent;
+  if (!agent) return;
+  autosaveInFlight = true;
+  try {
+    if (state.composeDraftId) {
+      await apiPut(`/drafts/${state.composeDraftId}`, fields, { agentKey: agent.apiKey });
+    } else {
+      const r = await apiPost('/drafts', fields, { agentKey: agent.apiKey });
+      state.composeDraftId = r?.id ?? null;
+    }
+    setComposeStatus('Saved to Drafts');
+  } catch (err) {
+    setComposeStatus(`Save failed: ${err.message}`);
+  } finally {
+    autosaveInFlight = false;
+  }
+}
+
+function setComposeStatus(text) {
+  const el = document.getElementById('compose-status');
+  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);
@@ -70,8 +267,26 @@ 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
+    // the real Sent folder now, no need to keep a Drafts entry.
+    if (state.composeDraftId) {
+      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/list-view.js

@@ -97,6 +97,15 @@ export async function loadList(agent, folder) {
     <div class="list-rows" id="list-rows"><div class="empty">Loading…</div></div>
   `;
   document.getElementById('list-refresh-btn')?.addEventListener('click', () => loadList(agent, folder));
+  // Select-all toggles every visible row checkbox. We don't currently
+  // expose a bulk-action toolbar (delete/archive/move) yet, so this
+  // is purely a visual selection state for now — but wiring it
+  // means it works the moment a bulk-action surface lands.
+  document.getElementById('list-select-all-input')?.addEventListener('change', (e) => {
+    const checked = e.target.checked;
+    document.querySelectorAll('#list-rows .row-check input[type=checkbox]')
+      .forEach(cb => { cb.checked = checked; });
+  });
   await ensureFolderCache(agent);
 
   // Resolve the real IMAP folder. Starred reuses INBOX + a client-

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 } 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;
@@ -19,6 +20,8 @@ export async function openMessage(uid) {
       <button class="icon-btn" id="msg-reply" title="Reply">${icon('reply')}</button>
       <button class="icon-btn" id="msg-reply-all" title="Reply all">${icon('replyAll')}</button>
       <button class="icon-btn" id="msg-unread" title="Mark unread">${icon('mailUnread')}</button>
+      <button class="icon-btn" id="msg-spam" title="Report spam">${icon('spam')}</button>
+      <button class="icon-btn" id="msg-delete" title="Delete">${icon('trash')}</button>
       <div class="toolbar-spacer"></div>
     </div>
     <div class="message-view"><div class="empty">Loading…</div></div>
@@ -27,6 +30,8 @@ export async function openMessage(uid) {
   document.getElementById('msg-reply').addEventListener('click', () => openReply(false));
   document.getElementById('msg-reply-all').addEventListener('click', () => openReply(true));
   document.getElementById('msg-unread').addEventListener('click', () => markUnread());
+  document.getElementById('msg-spam').addEventListener('click', () => markSpam());
+  document.getElementById('msg-delete').addEventListener('click', () => deleteMessage());
 
   try {
     const msg = await apiGet(`/mail/messages/${uid}`, { agentKey: state.selectedAgent.apiKey });
@@ -49,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>`
     : '';
 
@@ -69,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);
@@ -85,3 +213,53 @@ async function markUnread() {
     toast(`Failed: ${err.message}`, true);
   }
 }
+
+/**
+ * Move the open message to the Junk Mail folder (IMAP). The API
+ * route is POST /mail/messages/:uid/spam — it does the move +
+ * flags the message so future scans treat it as known spam.
+ */
+async function markSpam() {
+  if (!state.currentMessage || !state.selectedAgent) 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.selectedUid}/spam`, {}, { agentKey: state.selectedAgent.apiKey });
+    toast('Reported as spam.');
+    location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
+    await loadList(state.selectedAgent, state.selectedFolder);
+  } catch (err) {
+    toast(`Spam failed: ${err.message}`, true);
+  }
+}
+
+/**
+ * Delete the open message. DELETE /mail/messages/:uid moves it
+ * to the IMAP \Deleted state (Stalwart auto-expunges on server
+ * config, otherwise it stays in Trash). Confirm before firing
+ * since this is destructive.
+ */
+async function deleteMessage() {
+  if (!state.currentMessage || !state.selectedAgent) return;
+  const subject = state.currentMessage.subject ?? '(no subject)';
+  const ok = await confirmModal({
+    title: 'Delete this message?',
+    body: `"${subject}" will be moved to Trash. This can't be undone from the web UI.`,
+    confirm: 'Delete',
+    danger: true,
+  });
+  if (!ok) return;
+  try {
+    await apiDelete(`/mail/messages/${state.selectedUid}`, { agentKey: state.selectedAgent.apiKey });
+    toast('Deleted.');
+    location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
+    await loadList(state.selectedAgent, state.selectedFolder);
+  } catch (err) {
+    toast(`Delete failed: ${err.message}`, true);
+  }
+}

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/js/sidebar.js

@@ -8,12 +8,18 @@
 import { state } from './state.js';
 import { icon } from './icons.js';
 
+// `All Mail` is a Gmail-only concept (a virtual folder that
+// aggregates every message regardless of mailbox). Stalwart and most
+// other IMAP servers don't expose anything equivalent, so we ship
+// the link but hide it at render time when the discovery cache
+// didn't find a real folder name — see `renderSidebar`. The
+// flag below is what the renderer keys off.
 export const FOLDERS = [
   { id: 'inbox',   label: 'Inbox',    icon: 'inbox' },
   { id: 'starred', label: 'Starred',  icon: 'starOutline' },
   { id: 'sent',    label: 'Sent',     icon: 'sent' },
   { id: 'drafts',  label: 'Drafts',   icon: 'drafts' },
-  { id: 'all',     label: 'All Mail', icon: 'allMail' },
+  { id: 'all',     label: 'All Mail', icon: 'allMail', requiresDiscovery: true },
   { id: 'spam',    label: 'Spam',     icon: 'spam' },
   { id: 'trash',   label: 'Trash',    icon: 'trash' },
 ];
@@ -23,7 +29,13 @@ export function renderSidebar(onSelect) {
   if (!root) return;
   const active = state.selectedFolder ?? 'inbox';
   const unread = state.unread?.[state.selectedAgent?.id] ?? 0;
-  root.innerHTML = FOLDERS.map(f => {
+  // Hide folders that need discovery but didn't get a real IMAP
+  // name from the per-agent folder cache. Saves the user from
+  // clicking "All Mail" and getting an empty-state error on
+  // servers that don't have an equivalent (Stalwart, most non-
+  // Gmail providers).
+  const visible = FOLDERS.filter(f => !f.requiresDiscovery || state.folderNames?.[f.id]);
+  root.innerHTML = visible.map(f => {
     const isActive = f.id === active;
     const showCount = f.id === 'inbox' && unread > 0;
     return `

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;
+}
+.attachment-chip .chip-name {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  max-width: 160px;
 }
-.message-attachment .att-icon { font-size: 18px; }
+.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 {
@@ -691,8 +778,13 @@ mark.search-hl {
   font-weight: 500; font-size: 14px;
 }
 .btn-send:hover { background: var(--accent-strong); }
+.compose-status {
+  font-size: 12px; color: var(--muted);
+  margin-left: 12px;
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
 .btn-discard {
-  margin-left: auto;
   color: var(--muted);
   padding: 8px 12px;
 }
@@ -701,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;