@agenticmail/api 0.7.18 → 0.7.19

package/package.json

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

package/public/js/app.js

@@ -12,7 +12,7 @@ import { renderProfile, toggleProfileMenu, closeProfileMenu } from './profile.js
 import { renderSidebar } from './sidebar.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 { populateComposeFrom, openCompose, openDraft, closeCompose, discardCompose, sendCompose } from './compose.js';
 import { subscribeToAllAgents, maybeRequestNotificationPermission } from './sse.js';
 import { icon } from './icons.js';
 
@@ -137,6 +137,14 @@ function route() {
     openMessage(Number(msgMatch[1]));
     return;
   }
+  // Drafts use UUIDs as ids and open the compose modal pre-
+  // populated rather than the read-only message view. The list
+  // row click handler emits #/d/<uuid> for draft rows.
+  const draftMatch = hash.match(/^#\/d\/([a-zA-Z0-9-]+)$/);
+  if (draftMatch) {
+    openDraft(draftMatch[1]);
+    return;
+  }
   const folderMatch = hash.match(/^#\/folder\/([a-z]+)$/);
   const folder = folderMatch ? folderMatch[1] : 'inbox';
   if (state.selectedFolder !== folder) {
@@ -185,7 +193,7 @@ document.addEventListener('click', e => {
 
 // ─── Compose modal wiring ────────────────────────────────────────────
 document.getElementById('compose-close').addEventListener('click', closeCompose);
-document.getElementById('compose-cancel').addEventListener('click', closeCompose);
+document.getElementById('compose-cancel').addEventListener('click', discardCompose);
 document.getElementById('compose-send').addEventListener('click', sendCompose);
 document.getElementById('compose-bg').addEventListener('click', e => {
   if (e.target.id === 'compose-bg') closeCompose();

package/public/js/compose.js

@@ -9,7 +9,7 @@
 // in the Drafts folder.
 import { state } from './state.js';
 import { escapeHtml, toast } from './utils.js';
-import { apiPost, apiPut, apiDelete } from './api.js';
+import { apiGet, apiPost, apiPut, apiDelete } from './api.js';
 import { loadList } from './list-view.js';
 
 const AUTOSAVE_DEBOUNCE_MS = 2000;
@@ -81,6 +81,44 @@ export function openReply(replyAll) {
   setTimeout(() => document.getElementById('compose-body').focus(), 50);
 }
 
+/**
+ * Open an existing autosaved draft for further editing. Pulls the
+ * SQL row, populates every field, and arms `composeDraftId` so
+ * subsequent autosaves PUT to the same row instead of creating a
+ * second draft. The user can resume right where they left off.
+ */
+export async function openDraft(draftId) {
+  state.composeReplyContext = null;
+  state.composeDraftId = draftId;
+  pendingAttachments = [];
+  document.getElementById('compose-title').textContent = 'Draft';
+  if (state.selectedAgent) document.getElementById('compose-from').value = state.selectedAgent.id;
+  // Clear first so we don't leak data from a previous compose if
+  // the fetch fails halfway.
+  ['compose-to', 'compose-cc', 'compose-wake', 'compose-subject', 'compose-body']
+    .forEach(id => { document.getElementById(id).value = ''; });
+  setComposeStatus('Loading…');
+  showModal();
+  wireAutosave();
+  wireAttachmentPicker();
+  try {
+    const data = await apiGet('/drafts', { agentKey: state.selectedAgent.apiKey });
+    const draft = (data?.drafts ?? []).find(d => d.id === draftId);
+    if (!draft) throw new Error('Draft not found');
+    document.getElementById('compose-to').value = draft.to_addr ?? '';
+    document.getElementById('compose-cc').value = draft.cc ?? '';
+    document.getElementById('compose-subject').value = draft.subject ?? '';
+    document.getElementById('compose-body').value = draft.text_body ?? '';
+    document.getElementById('compose-title').textContent =
+      `Draft: ${draft.subject || '(no subject)'}`;
+    renderAttachmentChips();
+    setComposeStatus('Loaded from Drafts');
+    setTimeout(() => document.getElementById('compose-body').focus(), 50);
+  } catch (err) {
+    setComposeStatus(`Couldn't load draft: ${err.message}`);
+  }
+}
+
 export function closeCompose() {
   document.getElementById('compose-bg').style.display = 'none';
   // Flush a final save synchronously-ish on close so a quick
@@ -94,6 +132,34 @@ export function closeCompose() {
   }
 }
 
+/**
+ * Discard the in-progress compose — delete the autosaved draft
+ * (if any) and close the modal. Distinct from `closeCompose`
+ * which just hides the modal and lets the draft persist for
+ * later resumption from the Drafts folder. Bound to the
+ * "Discard" button in the compose footer.
+ */
+export async function discardCompose() {
+  // Cancel any pending autosave so it doesn't race the delete.
+  if (autosaveTimer) { clearTimeout(autosaveTimer); autosaveTimer = null; }
+  const draftId = state.composeDraftId;
+  const agent = state.agents.find(a => a.id === document.getElementById('compose-from').value) ?? state.selectedAgent;
+  // Close UI first so the user gets immediate feedback even if
+  // the delete is slow / fails.
+  document.getElementById('compose-bg').style.display = 'none';
+  state.composeDraftId = null;
+  pendingAttachments = [];
+  if (draftId && agent) {
+    try { await apiDelete(`/drafts/${draftId}`, { agentKey: agent.apiKey }); }
+    catch { /* draft already gone or transient failure — fine */ }
+    // If the user is currently looking at the Drafts list, refresh
+    // so the deleted draft disappears from the visible rows.
+    if (state.selectedAgent && state.selectedFolder === 'drafts') {
+      try { await loadList(state.selectedAgent, 'drafts'); } catch { /* ignore */ }
+    }
+  }
+}
+
 function showModal() {
   document.getElementById('compose-bg').style.display = 'flex';
 }

package/public/js/list-view.js

@@ -97,15 +97,18 @@ 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; });
   });
+
+  // Drafts are a SQL-backed app primitive, not an IMAP mailbox.
+  // The autosave path writes to /drafts (sqlite) and the agent
+  // MCP tools operate on the same table — so the list must come
+  // from there, not from /mail/digest?folder=Drafts (which would
+  // miss everything autosaved by the web UI).
+  if (folder === 'drafts') return loadDraftsList(agent);
   await ensureFolderCache(agent);
 
   // Resolve the real IMAP folder. Starred reuses INBOX + a client-
@@ -142,6 +145,51 @@ function folderTitle(folder) {
   return f ? f.label : 'Inbox';
 }
 
+/**
+ * Drafts list — sourced from the SQL drafts table via `/drafts`,
+ * not from the IMAP Drafts mailbox.
+ *
+ * The autosave path (compose.js) writes here, and the MCP
+ * `manage_drafts` tool operates on the same rows, so this is
+ * the single source of truth for app-level drafts.
+ *
+ * We normalise each row into the same envelope shape `renderList`
+ * expects (uid → draft id, subject, from = agent itself, date =
+ * updated_at, preview = first 240 chars of text_body) so the
+ * row markup stays identical across folders. Click handling
+ * branches on `state.selectedFolder === 'drafts'` to open the
+ * compose modal pre-populated instead of the read-only message
+ * view.
+ */
+async function loadDraftsList(agent) {
+  try {
+    const data = await apiGet('/drafts', { agentKey: agent.apiKey });
+    const rows = Array.isArray(data?.drafts) ? data.drafts : [];
+    state.messages = rows.map(r => ({
+      // We store the draft id under `uid` so renderList +
+      // click handlers can use the same field. Drafts also
+      // get a `__draftId` marker so the click handler can
+      // route differently.
+      uid: r.id,
+      __draftId: r.id,
+      subject: r.subject || '(no subject)',
+      from: [{ name: agent.name, address: agent.email }],
+      // SQLite returns updated_at as a UTC string without an
+      // explicit Z. Date() parses it as local; force UTC
+      // interpretation by appending Z so the formatter shows
+      // the actual save time.
+      date: r.updated_at ? `${r.updated_at}Z`.replace('ZZ', 'Z') : null,
+      preview: (r.text_body || '').slice(0, 240),
+      flags: [],
+      __recipient: r.to_addr || '(no recipient)',
+    }));
+    renderList();
+  } catch (err) {
+    document.getElementById('list-rows').innerHTML =
+      `<div class="empty">Failed to load drafts: ${escapeHtml(err.message ?? err)}</div>`;
+  }
+}
+
 export function renderList() {
   const root = document.getElementById('list-rows');
   if (!root) return;
@@ -183,6 +231,7 @@ export function renderList() {
   // ellipsis so longer preview lines never wrap. Identical markup
   // for every folder so Sent / Drafts / Spam etc render the same
   // way Inbox does.
+  const isDrafts = state.selectedFolder === 'drafts';
   root.innerHTML = filtered.map(m => {
     const unread = !flagsHas(m.flags, '\\Seen');
     const starred = flagsHas(m.flags, '\\Flagged');
@@ -195,11 +244,22 @@ export function renderList() {
       .replace(/^>+ ?/gm, '')
       .replace(/\s+/g, ' ')
       .trim();
+    // In Drafts the "from" column reads naturally as the recipient
+    // ("To: alice@…") since the user is always the sender. Add a
+    // small "Draft" tag in red so the row is unmistakeable.
+    const leadingCell = isDrafts
+      ? `<span class="from drafts-recipient" title="${escapeHtml(m.__recipient ?? '')}"><span class="drafts-tag">Draft</span> ${escapeHtml(m.__recipient ?? '(no recipient)')}</span>`
+      : `<span class="from" title="${escapeHtml(fromAddr)}">${highlightTerm(fromName, hlTerm)}</span>`;
+    // Drafts can't be starred; suppress the star icon to keep the
+    // row visually quiet for the user.
+    const starCell = isDrafts
+      ? `<span class="star drafts-star-placeholder"></span>`
+      : `<span class="star ${starred ? 'starred' : ''}" data-action="star" data-uid="${m.uid}">${starIcon}</span>`;
     return `
-      <div class="list-row ${unread ? 'unread' : ''}" data-uid="${m.uid}">
+      <div class="list-row ${unread ? 'unread' : ''}${isDrafts ? ' draft-row' : ''}" data-uid="${m.uid}">
         <label class="row-check" data-action="select"><input type="checkbox" /></label>
-        <span class="star ${starred ? 'starred' : ''}" data-action="star" data-uid="${m.uid}">${starIcon}</span>
-        <span class="from" title="${escapeHtml(fromAddr)}">${highlightTerm(fromName, hlTerm)}</span>
+        ${starCell}
+        ${leadingCell}
         <span class="subject-cell">
           <span class="subject">${highlightTerm(subject, hlTerm)}</span>
           ${cleanPreview ? `<span class="preview-sep"> — </span><span class="preview">${highlightTerm(cleanPreview, hlTerm)}</span>` : ''}
@@ -224,6 +284,14 @@ export function renderList() {
         e.stopPropagation();
         return;
       }
+      // Drafts open the compose modal pre-populated with the
+      // saved draft, NOT the read-only message view. The UID
+      // we put on the row is actually a draft UUID; route as
+      // #/d/<id> so the router knows to call openDraft().
+      if (isDrafts) {
+        location.hash = `#/d/${el.dataset.uid}`;
+        return;
+      }
       const uid = Number(el.dataset.uid);
       location.hash = `#/m/${uid}`;
     });

package/public/styles.css

@@ -482,6 +482,27 @@ a { color: var(--accent-strong); }
 }
 .list-row.unread .date { color: var(--unread-bold); font-weight: 700; }
 
+/* ─── Drafts folder list ───────────────────────────────────────────
+   In the Drafts list, the leading column reads as the recipient
+   ("To: alice@…") since the user is always the sender; we tag it
+   with a small red "Draft" pill so the row is unmistakable.
+   Stars don't apply to drafts — the star slot is left empty. */
+.list-row.draft-row .drafts-tag {
+  display: inline-block;
+  background: #ea4335;
+  color: white;
+  font-size: 11px; font-weight: 600;
+  padding: 1px 6px; border-radius: 4px;
+  margin-right: 6px;
+  letter-spacing: .02em;
+}
+.list-row.draft-row .drafts-recipient .drafts-tag + * { vertical-align: middle; }
+.list-row.draft-row .drafts-star-placeholder {
+  /* Reserve grid space but render nothing — keeps every row's
+     subject column aligned with non-draft folder rows. */
+  width: 32px; height: 32px;
+}
+
 mark.search-hl {
   background: #fff475; color: inherit;
   padding: 0 1px;