@agenticmail/api 0.7.11 → 0.7.13

package/package.json

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

package/public/js/app.js

@@ -83,7 +83,9 @@ async function bootstrap() {
     populateComposeFrom();
     subscribeToAllAgents();
     maybeRequestNotificationPermission();
-    if (!location.hash) location.hash = '#/inbox';
+    // Initial route: if the URL already has a hash (e.g. a refresh
+    // on /#/folder/sent), respect it; otherwise default to inbox.
+    if (!location.hash) location.hash = '#/folder/inbox';
     else route();
   } catch (err) {
     toast(`Failed to load agents: ${err.message}`, true);
@@ -100,24 +102,39 @@ async function selectAgent(agent) {
 }
 
 function onFolderSelect(folder) {
-  state.selectedFolder = folder;
-  renderSidebar(onFolderSelect);
-  location.hash = '#/inbox';   // any folder uses the list route
-  if (state.selectedAgent) loadList(state.selectedAgent, folder);
+  // URL drives state — set the hash and let the router do the work.
+  // This is what makes browser back / forward / shareable URLs work,
+  // and it stops the previous bug where every folder click stayed on
+  // #/inbox in the address bar.
+  location.hash = `#/folder/${folder}`;
   // On mobile (the only viewport where the sidebar is over-canvas),
   // close it after a folder pick so the user sees the list.
   document.getElementById('main')?.classList.remove('sidebar-open');
 }
 
 // ─── Hash router ─────────────────────────────────────────────────────
+// Routes:
+//   #/inbox            → inbox (back-compat shortcut for #/folder/inbox)
+//   #/folder/<id>      → folder list view (sent, drafts, starred, …)
+//   #/m/<uid>          → single-message detail
+//
+// Folder switches go through here too so the URL is the source of truth
+// for "what's on screen". If you bookmark or copy-paste a URL like
+// http://127.0.0.1:3829/#/folder/sent, opening it lands you on Sent.
 function route() {
   const hash = location.hash || '#/inbox';
   const msgMatch = hash.match(/^#\/m\/(\d+)$/);
   if (msgMatch) {
     openMessage(Number(msgMatch[1]));
-  } else if (state.selectedAgent) {
-    loadList(state.selectedAgent, state.selectedFolder);
+    return;
+  }
+  const folderMatch = hash.match(/^#\/folder\/([a-z]+)$/);
+  const folder = folderMatch ? folderMatch[1] : 'inbox';
+  if (state.selectedFolder !== folder) {
+    state.selectedFolder = folder;
+    renderSidebar(onFolderSelect);
   }
+  if (state.selectedAgent) loadList(state.selectedAgent, folder);
 }
 window.addEventListener('hashchange', route);
 

package/public/js/list-view.js

@@ -27,25 +27,58 @@ function flagsHas(flags, name) {
   return false;
 }
 
-// Map sidebar folder ids to the actual IMAP folder names the API
-// expects on `/mail/folders/:folder`. `inbox` is special — the API
-// has a dedicated `/mail/inbox` endpoint with extra enrichment, so
-// we use that. Other folders go through the generic listing.
-//
-// Stalwart uses the standard IMAP names: INBOX, Sent, Drafts, Junk
-// Mail (a.k.a. "Spam"), Trash. We use the canonical IMAP capitalisation.
-const FOLDER_TO_IMAP = {
-  inbox:   { endpoint: '/mail/inbox' },
-  sent:    { endpoint: '/mail/folders/Sent' },
-  drafts:  { endpoint: '/mail/folders/Drafts' },
-  spam:    { endpoint: '/mail/folders/Junk%20Mail' },
-  trash:   { endpoint: '/mail/folders/Trash' },
-  all:     { endpoint: '/mail/folders/All%20Mail' },
-  // Starred is not a folder — it's the IMAP \Flagged flag, surfaced
-  // by client-side filtering over the inbox listing (Gmail-style).
-  starred: { endpoint: '/mail/inbox', clientFilter: 'flagged' },
+// Patterns we look for when matching a real IMAP folder name to one
+// of our sidebar folder ids. Different mail servers use different
+// names: Stalwart's defaults are "Sent Items", "Drafts", "Junk Mail",
+// "Trash"; Gmail uses "[Gmail]/Sent Mail"; Outlook uses "Sent Items"
+// + "Deleted Items"; macOS Mail uses "Sent Messages". Auto-discovery
+// makes the sidebar work on all of them.
+const FOLDER_MATCHERS = {
+  sent:    /^sent\b|sent items|sent mail|sent messages|\[gmail\]\/sent/i,
+  drafts:  /^drafts?\b|\[gmail\]\/drafts/i,
+  spam:    /^junk\b|junk mail|^spam\b|\[gmail\]\/spam/i,
+  trash:   /^trash\b|deleted items|deleted messages|\[gmail\]\/trash|\[gmail\]\/bin/i,
+  all:     /^all mail\b|\[gmail\]\/all/i,
 };
 
+/**
+ * Look up the real IMAP folder name for a sidebar id, using the
+ * per-agent folder cache populated by ensureFolderCache().
+ * Returns undefined if no match — callers should treat that as
+ * "folder doesn't exist on this server" and render an empty state.
+ */
+function imapNameFor(folderId) {
+  return state.folderNames?.[folderId];
+}
+
+/**
+ * Discover real IMAP folder names for the active agent and cache
+ * them in state. Called once on agent switch / first folder click.
+ * Falls back to canonical names if the discovery endpoint fails so
+ * the UI keeps working in degraded mode.
+ */
+export async function ensureFolderCache(agent) {
+  if (state.folderNames && Object.keys(state.folderNames).length > 0) return;
+  state.folderNames = { inbox: 'INBOX' };  // INBOX is universal
+  try {
+    const data = await apiGet('/mail/folders', { agentKey: agent.apiKey });
+    const folders = (data.folders ?? []).map(f =>
+      typeof f === 'string' ? f : (f.name ?? f.path ?? ''),
+    ).filter(Boolean);
+    for (const [id, pattern] of Object.entries(FOLDER_MATCHERS)) {
+      const match = folders.find(f => pattern.test(f));
+      if (match) state.folderNames[id] = match;
+    }
+  } catch {
+    // Discovery failed — fall back to the most common defaults so
+    // at least Inbox + Sent work for vanilla Stalwart.
+    state.folderNames.sent   = 'Sent Items';
+    state.folderNames.drafts = 'Drafts';
+    state.folderNames.spam   = 'Junk Mail';
+    state.folderNames.trash  = 'Trash';
+  }
+}
+
 export async function loadList(agent, folder) {
   const root = document.getElementById('content');
   root.innerHTML = `
@@ -55,15 +88,30 @@ export async function loadList(agent, folder) {
     </div>
     <div class="list-rows" id="list-rows"><div class="empty">Loading…</div></div>
   `;
-  const route = FOLDER_TO_IMAP[folder] ?? FOLDER_TO_IMAP.inbox;
+  await ensureFolderCache(agent);
+
+  // Resolve the real IMAP folder. Starred reuses INBOX + a client-
+  // side flag filter (Gmail convention); other folders need a real
+  // mailbox name from the discovery cache.
+  const isStarred = folder === 'starred';
+  const imap = isStarred ? 'INBOX' : imapNameFor(folder);
+  if (!imap) {
+    document.getElementById('list-rows').innerHTML =
+      `<div class="empty"><div class="big">📭</div>No ${escapeHtml(folderTitle(folder))} folder on this server.</div>`;
+    return;
+  }
+
   try {
-    const sep = route.endpoint.includes('?') ? '&' : '?';
-    const data = await apiGet(`${route.endpoint}${sep}limit=50&offset=0`, { agentKey: agent.apiKey });
+    // `/mail/digest` returns envelopes WITH body preview in one call —
+    // exactly what the list row needs to render a 2-line preview.
+    // Previously we used `/mail/inbox` (no preview) and `/mail/
+    // folders/:folder` (no preview, wrong folder names), which left
+    // every row stuck on subject + sender alone.
+    const url = `/mail/digest?folder=${encodeURIComponent(imap)}&limit=50&offset=0&previewLength=240`;
+    const data = await apiGet(url, { agentKey: agent.apiKey });
     state.messages = data.messages ?? [];
     renderList();
   } catch (err) {
-    // Empty folder is a normal state; "no such folder" lands here
-    // too. Show a friendly empty message rather than a raw HTTP error.
     const msg = String(err.message ?? err);
     document.getElementById('list-rows').innerHTML = msg.includes('404')
       ? `<div class="empty">${escapeHtml(folderTitle(folder))} is empty.</div>`
@@ -119,6 +167,14 @@ export function renderList() {
     const subject = m.subject ?? '(no subject)';
     const date = formatDate(m.date);
     const starIcon = icon(starred ? 'starFilled' : 'starOutline', { size: 18 });
+    // Compact the preview body for the row: collapse whitespace,
+    // strip quoted-reply chevrons, cap at a comfortable two-line
+    // length. CSS handles the actual line clamp.
+    const cleanPreview = (m.preview ?? '')
+      .replace(/^>+ ?/gm, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, 280);
     return `
       <div class="list-row ${unread ? 'unread' : ''}" data-uid="${m.uid}">
         <span class="star ${starred ? 'starred' : ''}" data-action="star">${starIcon}</span>
@@ -126,7 +182,7 @@ export function renderList() {
         <span class="from">${highlightTerm(fromName, hlTerm)}</span>
         <span class="subject-cell">
           <span class="subject">${highlightTerm(subject, hlTerm)}</span>
-          <span class="preview">${highlightTerm((m.preview ?? '').slice(0, 160), hlTerm)}</span>
+          <span class="preview">${highlightTerm(cleanPreview, hlTerm)}</span>
         </span>
         <span class="date">${escapeHtml(date)}</span>
       </div>

package/public/js/message-view.js

@@ -23,7 +23,7 @@ export async function openMessage(uid) {
     </div>
     <div class="message-view"><div class="empty">Loading…</div></div>
   `;
-  document.getElementById('msg-back').addEventListener('click', () => { location.hash = '#/inbox'; });
+  document.getElementById('msg-back').addEventListener('click', () => { location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`; });
   document.getElementById('msg-reply').addEventListener('click', () => openReply(false));
   document.getElementById('msg-reply-all').addEventListener('click', () => openReply(true));
   document.getElementById('msg-unread').addEventListener('click', () => markUnread());
@@ -79,7 +79,7 @@ async function markUnread() {
   try {
     await apiPost(`/mail/messages/${state.currentMessage.uid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
     toast('Marked unread.');
-    location.hash = '#/inbox';
+    location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
     await loadList(state.selectedAgent, state.selectedFolder);
   } catch (err) {
     toast(`Failed: ${err.message}`, true);

package/public/js/state.js

@@ -12,6 +12,18 @@ export const state = {
   searchQuery: '',
   sseControllers: [],
   unread: {},                  // { [agentId]: count }
+  /**
+   * Mapping from sidebar folder id ('sent', 'drafts', 'spam', etc.)
+   * to the real IMAP folder name on the server.
+   *
+   * Auto-discovered per agent via `GET /mail/folders` because
+   * Stalwart's default folder names differ from server to server
+   * (`Sent Items` vs `Sent`, `Junk Mail` vs `Spam`, etc.). Without
+   * this, hard-coded names like `Sent` returned empty for Stalwart
+   * installs that use `Sent Items` — exactly what the bug report
+   * showed.
+   */
+  folderNames: {},             // { [sidebarId]: imapFolderName }
 };
 
 export const API_URL = window.location.origin;

package/public/styles.css

@@ -82,21 +82,22 @@ a { color: var(--accent-strong); }
   padding: 0 8px; min-width: 200px;
 }
 .brand-bow { font-size: 28px; line-height: 1; }
+/* The brand bow PNG ships with transparent background — no rounded
+   crop, no fill. Sits flush against the topbar. */
 .brand-logo {
-  width: 32px; height: 32px;
-  border-radius: 8px;
+  width: 36px; height: 36px;
   flex-shrink: 0;
   display: block;
+  object-fit: contain;
 }
 .brand-name {
   font: 500 22px/1 'Google Sans', sans-serif;
   color: var(--pink);
 }
-/* Slightly bigger logo in the auth card. */
 .auth-card .brand-logo {
-  width: 28px; height: 28px;
-  border-radius: 6px;
+  width: 32px; height: 32px;
   vertical-align: middle;
+  display: inline-block;
 }
 
 .search-container {
@@ -388,14 +389,18 @@ a { color: var(--accent-strong); }
 }
 .list-row {
   display: grid;
-  grid-template-columns: 24px 24px 240px 1fr 100px;
-  align-items: center; gap: 0;
-  padding: 0 16px; height: 40px;
+  grid-template-columns: 24px 24px 200px 1fr 100px;
+  /* Top-align so a two-line preview can grow downward without
+     pushing the star + date out of alignment with the subject. */
+  align-items: flex-start; gap: 0;
+  padding: 10px 16px; min-height: 64px;
   cursor: pointer;
   border-bottom: 1px solid var(--bg-soft);
   position: relative;
 }
-@media (max-width: 1000px) { .list-row { grid-template-columns: 24px 24px 180px 1fr 80px; } }
+@media (max-width: 1000px) { .list-row { grid-template-columns: 24px 24px 160px 1fr 80px; } }
+/* Pull star + dot + date back into the visual midline of the subject. */
+.list-row .star, .list-row .dot, .list-row .date { padding-top: 2px; }
 .list-row:hover {
   background: var(--bg-row-hover);
   box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
@@ -422,21 +427,26 @@ a { color: var(--accent-strong); }
   padding-right: 8px;
 }
 .list-row .subject-cell {
-  display: flex; gap: 8px; align-items: baseline;
+  /* Stacked: subject on top, two-line preview underneath. */
+  display: flex; flex-direction: column; gap: 2px;
   overflow: hidden;
   min-width: 0;
 }
 .list-row .subject {
-  font-size: 14px; flex-shrink: 0;
-  max-width: 50%;
+  font-size: 14px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .list-row .preview {
-  font-size: 14px; color: var(--muted);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  flex: 1; min-width: 0;
+  font-size: 13px; color: var(--muted); line-height: 1.35;
+  /* 2-line clamp via -webkit-box (works in every shipping browser
+     including Firefox/Safari). The break-word stops one long URL
+     from blowing out the layout. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
 }
-.list-row .preview::before { content: '— '; opacity: .5; }
 .list-row .date {
   font-size: 12px; color: var(--muted); font-weight: 500;
   text-align: right; padding-right: 4px;