@agenticmail/api 0.7.13 → 0.7.15

package/dist/index.js

@@ -2191,6 +2191,24 @@ function createMailRoutes(accountManager2, config, db, gatewayManager) {
       next(err);
     }
   });
+  router.post("/mail/messages/:uid/star", requireAgent, async (req, res, next) => {
+    try {
+      const agent = req.agent;
+      const uid = parseInt(req.params.uid);
+      if (isNaN(uid) || uid < 1) {
+        res.status(400).json({ error: "Invalid UID" });
+        return;
+      }
+      const starred = req.body?.starred !== false;
+      const folder = req.body?.folder || req.query.folder || "INBOX";
+      const password = getAgentPassword(agent);
+      const receiver = await getReceiver(agent.stalwartPrincipal, password, config);
+      await receiver.setStarred(uid, starred, folder);
+      res.json({ ok: true, starred });
+    } catch (err) {
+      next(err);
+    }
+  });
   router.post("/mail/messages/:uid/move", requireAgent, async (req, res, next) => {
     try {
       const agent = req.agent;

package/package.json

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

package/public/index.html

@@ -23,12 +23,14 @@
 
 <!-- ─── App shell ─────────────────────────────────────────────────── -->
 <div class="app" id="app" style="display:none">
-  <!-- Top bar -->
+  <!-- Top bar — three-column grid: left chrome, centered search, right buttons. -->
   <header class="topbar">
-    <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
-    <div class="brand">
-      <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
-      <span class="brand-name">AgenticMail</span>
+    <div class="topbar-left">
+      <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
+      <div class="brand">
+        <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
+        <span class="brand-name">AgenticMail</span>
+      </div>
     </div>
     <div class="search-container">
       <span class="search-icon" data-icon="search"></span>
@@ -36,11 +38,12 @@
       <span id="search-hint" class="search-hint"></span>
       <button id="search-clear" class="search-clear-btn" title="Clear (Esc)" data-icon="close"></button>
     </div>
-    <div class="topbar-spacer"></div>
-    <button class="icon-btn" id="refresh-btn" title="Refresh (r)" data-icon="refresh"></button>
-    <button id="profile-btn" class="profile-trigger" title="Account">
-      <span id="profile-avatar"></span>
-    </button>
+    <div class="topbar-right">
+      <button class="icon-btn" id="refresh-btn" title="Refresh (r)" data-icon="refresh"></button>
+      <button id="profile-btn" class="profile-trigger" title="Account">
+        <span id="profile-avatar"></span>
+      </button>
+    </div>
     <div id="profile-menu" class="profile-menu">
       <div class="profile-menu-section">Inboxes</div>
       <div id="profile-menu-list"></div>

package/public/js/list-view.js

@@ -4,7 +4,7 @@ import { state } from './state.js';
 import { escapeHtml, toast } from './utils.js';
 import { formatDate } from './time.js';
 import { parseSearch, matchesSearch, highlightTerm } from './search.js';
-import { apiGet } from './api.js';
+import { apiGet, apiPost } from './api.js';
 import { FOLDERS } from './sidebar.js';
 import { icon } from './icons.js';
 
@@ -81,13 +81,22 @@ export async function ensureFolderCache(agent) {
 
 export async function loadList(agent, folder) {
   const root = document.getElementById('content');
+  // Gmail-style toolbar above the list: select-all checkbox,
+  // refresh, more-options spacer, count + pagination on the right.
+  // Identical layout for every folder so Sent / Drafts / Spam /
+  // Trash all share the same UX as Inbox.
   root.innerHTML = `
-    <div class="list-header">
-      <span class="folder-title">${escapeHtml(folderTitle(folder))}</span>
+    <div class="list-toolbar">
+      <label class="list-select-all" title="Select all">
+        <input type="checkbox" id="list-select-all-input" />
+      </label>
+      <button class="icon-btn list-refresh" title="Refresh" id="list-refresh-btn">${icon('refresh', { size: 18 })}</button>
+      <div class="list-toolbar-spacer"></div>
       <span class="count-text" id="list-count"></span>
     </div>
     <div class="list-rows" id="list-rows"><div class="empty">Loading…</div></div>
   `;
+  document.getElementById('list-refresh-btn')?.addEventListener('click', () => loadList(agent, folder));
   await ensureFolderCache(agent);
 
   // Resolve the real IMAP folder. Starred reuses INBOX + a client-
@@ -159,6 +168,12 @@ export function renderList() {
     return;
   }
 
+  // Gmail-style single-line row: checkbox · star · sender · subject
+  // — preview · date. Subject and preview sit on the same line
+  // separated by an em-dash; CSS truncates the joint cell with
+  // ellipsis so longer preview lines never wrap. Identical markup
+  // for every folder so Sent / Drafts / Spam etc render the same
+  // way Inbox does.
   root.innerHTML = filtered.map(m => {
     const unread = !flagsHas(m.flags, '\\Seen');
     const starred = flagsHas(m.flags, '\\Flagged');
@@ -166,23 +181,19 @@ export function renderList() {
     const fromName = m.from?.[0]?.name || fromAddr;
     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 starIcon = icon(starred ? 'starFilled' : 'starOutline', { size: 16 });
     const cleanPreview = (m.preview ?? '')
       .replace(/^>+ ?/gm, '')
       .replace(/\s+/g, ' ')
-      .trim()
-      .slice(0, 280);
+      .trim();
     return `
       <div class="list-row ${unread ? 'unread' : ''}" data-uid="${m.uid}">
-        <span class="star ${starred ? 'starred' : ''}" data-action="star">${starIcon}</span>
-        <span class="dot"></span>
-        <span class="from">${highlightTerm(fromName, hlTerm)}</span>
+        <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>
         <span class="subject-cell">
           <span class="subject">${highlightTerm(subject, hlTerm)}</span>
-          <span class="preview">${highlightTerm(cleanPreview, hlTerm)}</span>
+          ${cleanPreview ? `<span class="preview-sep"> — </span><span class="preview">${highlightTerm(cleanPreview, hlTerm)}</span>` : ''}
         </span>
         <span class="date">${escapeHtml(date)}</span>
       </div>
@@ -191,9 +202,17 @@ export function renderList() {
 
   root.querySelectorAll('.list-row').forEach(el => {
     el.addEventListener('click', (e) => {
-      if (e.target.closest('[data-action="star"]')) {
+      // Star click — toggle via API and optimistically update the
+      // local flags so the icon flips without a reload.
+      const starEl = e.target.closest('[data-action="star"]');
+      if (starEl) {
+        e.stopPropagation();
+        toggleStar(Number(el.dataset.uid), starEl);
+        return;
+      }
+      // Checkbox click — swallow so we don't navigate.
+      if (e.target.closest('[data-action="select"]')) {
         e.stopPropagation();
-        toast('Starring not wired through API yet.');
         return;
       }
       const uid = Number(el.dataset.uid);
@@ -202,6 +221,49 @@ export function renderList() {
   });
 }
 
+/**
+ * Toggle the IMAP \Flagged flag on a message via the API. Updates
+ * the in-memory message object on success so renderList reflects
+ * the new state without a full reload — and reverts on failure so
+ * the icon doesn't drift from server truth.
+ */
+async function toggleStar(uid, starEl) {
+  const agent = state.selectedAgent;
+  if (!agent) return;
+  const msg = state.messages.find(m => m.uid === uid);
+  if (!msg) return;
+  const wasStarred = flagsHas(msg.flags, '\\Flagged');
+  const nextStarred = !wasStarred;
+
+  // Optimistic UI flip.
+  starEl.classList.toggle('starred', nextStarred);
+  starEl.innerHTML = icon(nextStarred ? 'starFilled' : 'starOutline', { size: 16 });
+
+  // Local flags mutation so a re-render keeps the new state.
+  const imap = state.folderNames?.[state.selectedFolder] ?? 'INBOX';
+  if (Array.isArray(msg.flags)) {
+    msg.flags = nextStarred
+      ? Array.from(new Set([...msg.flags, '\\Flagged']))
+      : msg.flags.filter(f => f !== '\\Flagged');
+  } else {
+    msg.flags = nextStarred ? ['\\Flagged'] : [];
+  }
+
+  try {
+    await apiPost(`/mail/messages/${uid}/star`, { starred: nextStarred, folder: imap }, { agentKey: agent.apiKey });
+  } catch (err) {
+    // Revert on failure.
+    starEl.classList.toggle('starred', wasStarred);
+    starEl.innerHTML = icon(wasStarred ? 'starFilled' : 'starOutline', { size: 16 });
+    if (Array.isArray(msg.flags)) {
+      msg.flags = wasStarred
+        ? Array.from(new Set([...msg.flags, '\\Flagged']))
+        : msg.flags.filter(f => f !== '\\Flagged');
+    }
+    toast(`Star failed: ${err.message}`, true);
+  }
+}
+
 export function clearSearch() {
   const input = document.getElementById('search-input');
   if (input) {

package/public/styles.css

@@ -65,12 +65,22 @@ a { color: var(--accent-strong); }
 }
 
 /* ─── Top bar ──────────────────────────────────────────────────────── */
+/* Three-column grid: [menu+brand] · [centered search] · [right buttons].
+   A flex topbar with `flex: 1` on both the search and a trailing
+   spacer split the remaining space evenly so the search drifted
+   left of the visual middle. The grid centers the search column
+   in the actual page width regardless of how wide the side groups
+   get. */
 .topbar {
-  display: flex; align-items: center; gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center; gap: 8px;
   padding: 8px 16px;
   background: var(--bg-soft);
   position: relative; z-index: 10;
 }
+.topbar-left  { display: flex; align-items: center; gap: 8px; justify-self: start; }
+.topbar-right { display: flex; align-items: center; gap: 4px; justify-self: end; }
 .menu-btn {
   width: 40px; height: 40px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -101,7 +111,12 @@ a { color: var(--accent-strong); }
 }
 
 .search-container {
-  flex: 1; max-width: 720px;
+  /* Lives in the centered grid column of `.topbar`. Width caps at
+     720px (Gmail's actual cap), but stretches to fill the column
+     when the viewport is narrower. */
+  width: 720px;
+  max-width: 100%;
+  min-width: 280px;
   position: relative;
 }
 .search-input {
@@ -138,7 +153,6 @@ a { color: var(--accent-strong); }
 }
 .search-hint.show { display: block; }
 
-.topbar-spacer { flex: 1; }
 .icon-btn {
   width: 40px; height: 40px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -267,27 +281,43 @@ a { color: var(--accent-strong); }
   .main.sidebar-open .sidebar { transform: translateX(0); }
   .main.sidebar-open .sidebar-backdrop { display: block; }
   .content { border-radius: 0; margin: 0; }
-  .topbar { padding: 8px 8px; gap: 4px; }
+  /* On mobile, drop the centered grid in favour of [chrome | search | account].
+     The search expands to fill whatever space is left. */
+  .topbar {
+    padding: 8px 8px; gap: 4px;
+    grid-template-columns: auto 1fr auto;
+  }
   .brand { min-width: auto; }
-  .brand-name { font-size: 18px; }
-  .search-container { max-width: none; }
+  .brand-name { font-size: 18px; display: none; }
+  .search-container { width: auto; min-width: 0; }
   .search-input { height: 40px; font-size: 14px; }
-  /* List rows lose the from column on narrow screens; the subject
-     gets full width with the sender folded into the preview. */
+  /* On narrow screens, drop the checkbox + From column. Sender goes
+     in a small line above subject+preview to mimic Gmail's mobile
+     two-row stack. */
   .list-row {
-    grid-template-columns: 24px 24px 1fr 70px;
-    height: 56px;
-    padding: 0 12px;
+    grid-template-columns: 32px 1fr 64px;
+    height: auto;
+    min-height: 64px;
+    padding: 8px 12px;
+    align-items: center;
+  }
+  .list-row .row-check { display: none; }
+  .list-row .from {
+    grid-column: 2 / 3;
+    font-size: 13px;
+    padding-right: 0;
   }
-  .list-row .from { display: none; }
   .list-row .subject-cell {
-    flex-direction: column;
-    gap: 2px;
-    align-items: flex-start;
+    grid-column: 2 / 3;
+    grid-row: 2;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
-  .list-row .subject { max-width: none; font-size: 14px; }
-  .list-row .preview { font-size: 13px; }
-  .list-row .preview::before { content: ''; }
+  .list-row .star { grid-row: 1 / span 2; }
+  .list-row .date { grid-row: 1; }
   .message-header { padding: 16px 16px 8px; }
   .message-subject { font-size: 18px; }
   .message-body { padding: 8px 16px 24px; max-width: none; }
@@ -298,7 +328,6 @@ a { color: var(--accent-strong); }
   .compose-modal { width: 100%; max-height: 100vh; border-radius: 0; }
   .compose-body textarea { min-height: 40vh; }
   /* Hide non-essential top-bar buttons on narrow screens. */
-  .topbar-spacer { flex: 0; }
   #refresh-btn { display: none; }
 }
 @media (min-width: 801px) {
@@ -312,8 +341,11 @@ a { color: var(--accent-strong); }
   overflow-y: auto;
 }
 .compose-btn {
+  /* Gmail's Compose button is 48px tall with 16px corner radius —
+     prominent but not pill-shaped. Earlier this was 56px + ~28px
+     radius which read as a giant capsule and dominated the sidebar. */
   display: inline-flex; align-items: center; gap: 12px;
-  height: 56px; padding: 0 24px 0 16px;
+  height: 48px; padding: 0 24px 0 16px;
   margin-bottom: 16px;
   background: var(--pink); color: white;
   border-radius: 16px;
@@ -364,46 +396,49 @@ a { color: var(--accent-strong); }
   display: flex; flex-direction: column;
 }
 
-/* List header (above the list itself) */
-.list-header {
-  display: flex; align-items: center; gap: 8px;
-  padding: 8px 16px; height: 48px;
-  border-bottom: 1px solid transparent;
+/* List toolbar (sticky, matches Gmail's row of buttons above the list).
+   Same markup for every folder so Sent / Drafts / Spam render
+   identically to Inbox — no per-folder UX divergence. */
+.list-toolbar {
+  display: flex; align-items: center; gap: 4px;
+  padding: 4px 16px; height: 48px;
+  border-bottom: 1px solid var(--line);
   position: sticky; top: 0; z-index: 5;
   background: var(--bg);
   flex-shrink: 0;
 }
-.list-header .icon-btn { width: 36px; height: 36px; font-size: 16px; }
-.list-header .count-text {
-  margin-left: auto;
-  font-size: 12px; color: var(--muted);
+.list-select-all {
+  width: 40px; height: 40px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; border-radius: 50%;
 }
-.list-header .folder-title {
-  font: 500 18px/1 'Google Sans', sans-serif;
-  color: var(--ink); margin-left: 8px;
+.list-select-all:hover { background: var(--bg-hover); }
+.list-toolbar .list-refresh { width: 40px; height: 40px; }
+.list-toolbar-spacer { flex: 1; }
+.list-toolbar .count-text {
+  font-size: 12px; color: var(--muted);
 }
 
-/* List rows */
+/* Gmail-style compact rows.
+   Single line per message; subject + preview share one truncated
+   cell so longer previews tail off with ellipsis instead of
+   wrapping. Same row shape for every folder. */
 .list-rows {
   flex: 1; overflow-y: auto;
 }
 .list-row {
   display: grid;
-  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;
+  grid-template-columns: 36px 32px 180px 1fr 90px;
+  align-items: center; gap: 0;
+  padding: 0 16px; height: 36px;
   cursor: pointer;
-  border-bottom: 1px solid var(--bg-soft);
+  border-bottom: 1px solid var(--line);
   position: relative;
 }
-@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; }
+@media (max-width: 1100px) { .list-row { grid-template-columns: 36px 32px 140px 1fr 80px; } }
 .list-row:hover {
-  background: var(--bg-row-hover);
-  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
+  background: var(--bg);
+  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 3px rgba(0,0,0,.08);
   z-index: 1;
 }
 .list-row.unread { background: var(--bg); }
@@ -413,52 +448,39 @@ a { color: var(--accent-strong); }
 .list-row:not(.unread) .from, .list-row:not(.unread) .subject {
   color: var(--read-text);
 }
+.list-row .row-check {
+  width: 36px; height: 36px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+}
+.list-row .row-check input { cursor: pointer; }
 .list-row .star {
-  font-size: 16px; color: #dadce0; cursor: pointer;
-  width: 24px; height: 24px;
+  width: 32px; height: 32px;
   display: flex; align-items: center; justify-content: center;
-  border-radius: 50%;
+  border-radius: 50%; cursor: pointer;
+  color: #dadce0;
 }
-.list-row .star:hover { background: var(--bg-hover); }
+.list-row .star:hover { background: var(--bg-hover); color: var(--muted); }
 .list-row .star.starred { color: #f4b400; }
 .list-row .from {
   font-size: 14px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  padding-right: 8px;
+  padding-right: 12px;
 }
 .list-row .subject-cell {
-  /* 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;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0;
+  display: block;        /* one line, ellipsis at the end */
 }
-.list-row .preview {
-  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 .subject { font-weight: inherit; }
+.list-row .preview-sep { color: var(--muted); }
+.list-row .preview { color: var(--muted); font-weight: 400; }
 .list-row .date {
   font-size: 12px; color: var(--muted); font-weight: 500;
   text-align: right; padding-right: 4px;
 }
 .list-row.unread .date { color: var(--unread-bold); font-weight: 700; }
-.list-row .dot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--pink);
-  display: none;
-  margin: 0 auto;
-}
-.list-row.unread .dot { display: block; }
 
 mark.search-hl {
   background: #fff475; color: inherit;
@@ -486,12 +508,22 @@ mark.search-hl {
   background: var(--bg);
   position: sticky; top: 0; z-index: 5;
   flex-shrink: 0;
+  /* Toolbar spans full width (so the back button sticks to the
+     left edge of the content pane) but its action group could be
+     centered later if needed. Keeping it full-width matches Gmail. */
 }
 .message-toolbar .icon-btn { width: 36px; height: 36px; font-size: 16px; }
 .message-toolbar .toolbar-spacer { flex: 1; }
 
+/* Centered reading column for the open message — Gmail caps body
+   content around ~840px so long-line text doesn't sprawl across
+   ultrawide displays. Header, body, and attachments all share
+   the same centering rule so they line up vertically. */
 .message-header {
   padding: 32px 32px 16px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-subject {
   font: 400 22px/1.3 'Google Sans', sans-serif;
@@ -520,7 +552,9 @@ mark.search-hl {
   font-size: 14px; line-height: 1.65;
   color: var(--ink);
   white-space: pre-wrap; word-wrap: break-word;
-  max-width: 800px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-body h1, .message-body h2, .message-body h3 {
   color: var(--pink); margin: 1.2em 0 .4em;
@@ -558,6 +592,9 @@ mark.search-hl {
 .message-attachments {
   padding: 12px 32px; border-top: 1px solid var(--line);
   display: flex; flex-wrap: wrap; gap: 8px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-attachment {
   display: inline-flex; align-items: center; gap: 8px;