@agenticmail/api 0.7.18 → 0.7.20

package/dist/index.js

@@ -751,20 +751,75 @@ function createFeatureRoutes(db, _accountManager, config, gatewayManager) {
       next(err);
     }
   });
+  const MAX_DRAFT_ATTACHMENTS_BYTES = 25 * 1024 * 1024;
+  function normaliseDraftAttachments(raw) {
+    if (!Array.isArray(raw) || raw.length === 0) return null;
+    let totalBytes = 0;
+    const cleaned = raw.map((a) => {
+      const content = typeof a?.content === "string" ? a.content : "";
+      totalBytes += Math.ceil(content.length * 0.75);
+      return {
+        filename: typeof a?.filename === "string" ? a.filename : "attachment",
+        contentType: typeof a?.contentType === "string" ? a.contentType : "application/octet-stream",
+        content,
+        encoding: "base64",
+        size: typeof a?.size === "number" ? a.size : Math.ceil(content.length * 0.75)
+      };
+    });
+    if (totalBytes > MAX_DRAFT_ATTACHMENTS_BYTES) {
+      throw Object.assign(new Error("attachments exceed 25 MB total"), { status: 413 });
+    }
+    return JSON.stringify(cleaned);
+  }
   router.get("/drafts", requireAgent, async (req, res, next) => {
     try {
       const rows = db.prepare("SELECT * FROM drafts WHERE agent_id = ? ORDER BY updated_at DESC").all(req.agent.id);
-      res.json({ drafts: rows });
+      const stripped = rows.map((r) => {
+        let metaOnly;
+        if (r.attachments) {
+          try {
+            metaOnly = JSON.parse(r.attachments).map((a) => ({
+              filename: a.filename,
+              contentType: a.contentType,
+              size: a.size
+            }));
+          } catch {
+            metaOnly = void 0;
+          }
+        }
+        return { ...r, attachments: metaOnly };
+      });
+      res.json({ drafts: stripped });
+    } catch (err) {
+      next(err);
+    }
+  });
+  router.get("/drafts/:id", requireAgent, async (req, res, next) => {
+    try {
+      const row = db.prepare("SELECT * FROM drafts WHERE id = ? AND agent_id = ?").get(req.params.id, req.agent.id);
+      if (!row) {
+        res.status(404).json({ error: "Draft not found" });
+        return;
+      }
+      if (row.attachments) {
+        try {
+          row.attachments = JSON.parse(row.attachments);
+        } catch {
+          row.attachments = [];
+        }
+      }
+      res.json(row);
     } catch (err) {
       next(err);
     }
   });
   router.post("/drafts", requireAgent, async (req, res, next) => {
     try {
-      const { to, subject, text, html, cc, bcc, inReplyTo, references } = req.body || {};
+      const { to, subject, text, html, cc, bcc, inReplyTo, references, attachments } = req.body || {};
+      const attachmentsJson = normaliseDraftAttachments(attachments);
       const id = uuidv4();
-      db.prepare(`INSERT INTO drafts (id, agent_id, to_addr, subject, text_body, html_body, cc, bcc, in_reply_to, refs)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`).run(
+      db.prepare(`INSERT INTO drafts (id, agent_id, to_addr, subject, text_body, html_body, cc, bcc, in_reply_to, refs, attachments)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`).run(
         id,
         req.agent.id,
         to || null,
@@ -774,19 +829,30 @@ function createFeatureRoutes(db, _accountManager, config, gatewayManager) {
         cc || null,
         bcc || null,
         inReplyTo || null,
-        references ? JSON.stringify(references) : null
+        references ? JSON.stringify(references) : null,
+        attachmentsJson
       );
       res.json({ ok: true, id });
     } catch (err) {
+      const status = err.status;
+      if (status) {
+        res.status(status).json({ error: err.message });
+        return;
+      }
       next(err);
     }
   });
   router.put("/drafts/:id", requireAgent, async (req, res, next) => {
     try {
-      const { to, subject, text, html, cc, bcc, inReplyTo, references } = req.body || {};
-      const result = db.prepare(`UPDATE drafts SET to_addr=?, subject=?, text_body=?, html_body=?,
-        cc=?, bcc=?, in_reply_to=?, refs=?, updated_at=datetime('now')
-        WHERE id=? AND agent_id=?`).run(
+      const { to, subject, text, html, cc, bcc, inReplyTo, references, attachments } = req.body || {};
+      const includeAttachments = Object.prototype.hasOwnProperty.call(req.body || {}, "attachments");
+      const attachmentsJson = includeAttachments ? normaliseDraftAttachments(attachments) : void 0;
+      const sql = includeAttachments ? `UPDATE drafts SET to_addr=?, subject=?, text_body=?, html_body=?,
+            cc=?, bcc=?, in_reply_to=?, refs=?, attachments=?, updated_at=datetime('now')
+            WHERE id=? AND agent_id=?` : `UPDATE drafts SET to_addr=?, subject=?, text_body=?, html_body=?,
+            cc=?, bcc=?, in_reply_to=?, refs=?, updated_at=datetime('now')
+            WHERE id=? AND agent_id=?`;
+      const params = [
         to || null,
         subject || null,
         text || null,
@@ -794,16 +860,22 @@ function createFeatureRoutes(db, _accountManager, config, gatewayManager) {
         cc || null,
         bcc || null,
         inReplyTo || null,
-        references ? JSON.stringify(references) : null,
-        req.params.id,
-        req.agent.id
-      );
+        references ? JSON.stringify(references) : null
+      ];
+      if (includeAttachments) params.push(attachmentsJson);
+      params.push(req.params.id, req.agent.id);
+      const result = db.prepare(sql).run(...params);
       if (result.changes === 0) {
         res.status(404).json({ error: "Draft not found" });
         return;
       }
       res.json({ ok: true });
     } catch (err) {
+      const status = err.status;
+      if (status) {
+        res.status(status).json({ error: err.message });
+        return;
+      }
       next(err);
     }
   });
@@ -833,6 +905,19 @@ function createFeatureRoutes(db, _accountManager, config, gatewayManager) {
       const agent = req.agent;
       const wakeList = normalizeWakeList(req.body?.wake);
       const customHeaders = wakeHeaders(wakeList);
+      let persistedAttachments;
+      if (draft.attachments) {
+        try {
+          const parsed = JSON.parse(draft.attachments);
+          persistedAttachments = parsed.map((a) => ({
+            filename: a.filename,
+            contentType: a.contentType,
+            content: a.content,
+            encoding: "base64"
+          }));
+        } catch {
+        }
+      }
       const mailOpts = {
         to: draft.to_addr,
         subject: draft.subject || "(no subject)",
@@ -842,6 +927,7 @@ function createFeatureRoutes(db, _accountManager, config, gatewayManager) {
         bcc: draft.bcc || void 0,
         inReplyTo: draft.in_reply_to || void 0,
         references: draft.refs ? JSON.parse(draft.refs) : void 0,
+        ...persistedAttachments && persistedAttachments.length > 0 ? { attachments: persistedAttachments } : {},
         ...Object.keys(customHeaders).length > 0 ? { headers: customHeaders } : {}
       };
       if (gatewayManager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.7.18",
+  "version": "0.7.20",
   "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';
 
@@ -55,9 +55,16 @@ function showAuthErr(msg) {
 }
 function signOut() {
   localStorage.removeItem('agenticmail.masterKey');
+  localStorage.removeItem('agenticmail.selectedAgentId');
   location.reload();
 }
 
+// localStorage key for the inbox the user was last viewing.
+// Persisted on every successful agent switch and consulted on
+// bootstrap so a refresh / reopen lands on the same account
+// instead of bouncing back to the bridge.
+const STORAGE_LAST_AGENT = 'agenticmail.selectedAgentId';
+
 document.getElementById('auth-submit').addEventListener('click', signIn);
 document.getElementById('auth-key').addEventListener('keydown', e => {
   if (e.key === 'Enter') signIn();
@@ -77,7 +84,15 @@ async function bootstrap() {
       return a.name.localeCompare(b.name);
     });
     state.agents = all;
-    const initial = state.agents.find(isBridgeAgent) ?? state.agents[0];
+    // Prefer the inbox the user was last viewing (persisted in
+    // localStorage on every selectAgent call). Falls back to the
+    // bridge if the stored id is gone (agent was deleted) or the
+    // user never switched. Fixes the "refresh always bounces me
+    // back to the host account" bug.
+    const lastId = localStorage.getItem(STORAGE_LAST_AGENT);
+    const initial = (lastId && state.agents.find(a => a.id === lastId))
+      ?? state.agents.find(isBridgeAgent)
+      ?? state.agents[0];
     if (initial) await selectAgent(initial);
     renderProfile();
     populateComposeFrom();
@@ -96,6 +111,11 @@ async function selectAgent(agent) {
   state.selectedAgent = agent;
   state.selectedUid = null;
   state.currentMessage = null;
+  // Persist the selection so a page refresh lands back on this
+  // inbox rather than bouncing to the bridge. Stored under a
+  // separate key from the master key so signing out clears it
+  // cleanly without affecting auth.
+  try { localStorage.setItem(STORAGE_LAST_AGENT, agent.id); } catch { /* private mode etc. */ }
   // 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
@@ -137,6 +157,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 +213,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,59 @@ 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 {
+    // Use the single-draft endpoint, which returns attachment
+    // content in full (the list endpoint only sends metadata to
+    // keep the sidebar payload small).
+    const draft = await apiGet(`/drafts/${encodeURIComponent(draftId)}`, { agentKey: state.selectedAgent.apiKey });
+    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)'}`;
+    // Rehydrate attachment chips with the persisted blobs. Map
+    // the server-side `size` field back into the in-memory
+    // `sizeBytes` alias the rest of the compose code uses for
+    // the UI-side 20 MB cap.
+    pendingAttachments = Array.isArray(draft.attachments)
+      ? draft.attachments.map(a => ({
+          filename: a.filename,
+          contentType: a.contentType,
+          content: a.content,
+          encoding: 'base64',
+          sizeBytes: typeof a.size === 'number' ? a.size : 0,
+        }))
+      : [];
+    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 +147,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';
 }
@@ -108,12 +189,27 @@ function readComposeFields() {
   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;
+  if (!to && !subject && !text.trim() && !cc && pendingAttachments.length === 0) return null;
+  // The API expects `{ filename, contentType, content (base64),
+  // size }` per attachment. Drop the local-only sizeBytes alias
+  // and the redundant encoding field — the server defaults to
+  // base64 anyway.
+  const attachments = pendingAttachments.map(a => ({
+    filename: a.filename,
+    contentType: a.contentType,
+    content: a.content,
+    size: a.sizeBytes,
+  }));
   return {
     to: to || null,
     subject: subject || null,
     text: text || null,
     cc: cc || null,
+    // Always send `attachments` (even empty) so the server clears
+    // the stored blob when the user removes every chip. The PUT
+    // route uses `hasOwnProperty('attachments')` to distinguish
+    // "leave alone" from "set to empty".
+    attachments,
   };
 }
 
@@ -212,6 +308,11 @@ function wireAttachmentPicker() {
       }
     }
     renderAttachmentChips();
+    // Persist the new attachments to the draft so a "close and
+    // reopen" round-trip keeps them. Without this, attachments
+    // only ever lived in memory until the user typed in another
+    // field and triggered autosave organically.
+    scheduleAutosave();
   });
 }
 
@@ -244,6 +345,9 @@ function renderAttachmentChips() {
     el.addEventListener('click', () => {
       pendingAttachments.splice(Number(el.dataset.attRemove), 1);
       renderAttachmentChips();
+      // Same reason as the picker: removing a chip needs to
+      // persist or the draft round-trip will resurrect the file.
+      scheduleAutosave();
     });
   });
 }

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;