@agenticmail/api 0.7.7 → 0.7.9

package/public/js/message-view.js

@@ -0,0 +1,87 @@
+// Single-message detail view, opened when the user clicks a list row.
+import { state } from './state.js';
+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 { openReply } from './compose.js';
+import { loadList } from './list-view.js';
+import { icon } from './icons.js';
+
+export async function openMessage(uid) {
+  if (!state.selectedAgent) return;
+  state.selectedUid = uid;
+  const root = document.getElementById('content');
+  root.innerHTML = `
+    <div class="message-toolbar">
+      <button class="icon-btn" id="msg-back" title="Back to list">${icon('back')}</button>
+      <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>
+      <div class="toolbar-spacer"></div>
+    </div>
+    <div class="message-view"><div class="empty">Loading…</div></div>
+  `;
+  document.getElementById('msg-back').addEventListener('click', () => { location.hash = '#/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());
+
+  try {
+    const msg = await apiGet(`/mail/messages/${uid}`, { agentKey: state.selectedAgent.apiKey });
+    state.currentMessage = msg;
+    renderMessage(msg);
+  } catch (err) {
+    root.querySelector('.message-view').innerHTML =
+      `<div class="empty">Failed to load: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function renderMessage(msg) {
+  const view = document.querySelector('.message-view');
+  if (!view) return;
+  const fromAddr = msg.from?.[0]?.address ?? '?';
+  const fromName = msg.from?.[0]?.name || fromAddr;
+  const toStr = (msg.to ?? []).map(a => a.name ? `${a.name} <${a.address}>` : a.address).join(', ') || '?';
+  const ccStr = (msg.cc ?? []).map(a => a.address).join(', ');
+  const senderPseudo = { name: fromName };  // for avatar generation
+  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>`
+      ).join('')}</div>`
+    : '';
+
+  view.innerHTML = `
+    <div class="message-header">
+      <h1 class="message-subject">${escapeHtml(msg.subject ?? '(no subject)')}</h1>
+      <div class="message-sender-row">
+        ${avatarHtml(senderPseudo, 'avatar-md')}
+        <div class="message-meta">
+          <div class="message-from">
+            <span class="name">${escapeHtml(fromName)}</span>
+            <span class="addr">&lt;${escapeHtml(fromAddr)}&gt;</span>
+          </div>
+          <div class="message-to">to ${escapeHtml(toStr)}${ccStr ? `, cc ${escapeHtml(ccStr)}` : ''}</div>
+        </div>
+        <div class="message-date">${escapeHtml(formatDateFull(msg.date))}</div>
+      </div>
+    </div>
+    <div class="message-body">${renderMarkdown(bodyText)}</div>
+    ${attachmentsHtml}
+  `;
+}
+
+async function markUnread() {
+  if (!state.currentMessage || !state.selectedAgent) return;
+  try {
+    await apiPost(`/mail/messages/${state.currentMessage.uid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
+    toast('Marked unread.');
+    location.hash = '#/inbox';
+    await loadList(state.selectedAgent, state.selectedFolder);
+  } catch (err) {
+    toast(`Failed: ${err.message}`, true);
+  }
+}

package/public/js/profile.js

@@ -0,0 +1,54 @@
+// Top-right Gmail-style account switcher. Lists every AgenticMail
+// agent the master key can see; clicking switches the active inbox.
+// The bridge agent (host) gets a green checkmark + "Host" badge so
+// it's distinguishable from sub-agent inboxes.
+import { state } from './state.js';
+import { escapeHtml } from './utils.js';
+import { avatarHtml, isBridgeAgent } from './avatar.js';
+import { icon } from './icons.js';
+
+export function renderProfile() {
+  const a = state.selectedAgent;
+  const totalOtherUnread = Object.entries(state.unread ?? {})
+    .filter(([id]) => id !== a?.id)
+    .reduce((sum, [, n]) => sum + n, 0);
+
+  const avatarEl = document.getElementById('profile-avatar');
+  if (avatarEl) {
+    avatarEl.innerHTML = a
+      ? avatarHtml(a) + (totalOtherUnread > 0 ? `<span class="avatar-check" style="background:#dc2626">${icon('dot', { size: 8 })}</span>` : '')
+      : '';
+  }
+
+  const list = document.getElementById('profile-menu-list');
+  if (!list) return;
+  list.innerHTML = state.agents.map(agent => {
+    const selected = state.selectedAgent?.id === agent.id;
+    const badge = isBridgeAgent(agent)
+      ? '<span class="role-badge role-badge-host">Host</span>'
+      : '<span class="role-badge role-badge-sub">Sub-agent</span>';
+    const check = selected ? `<span class="selected-check">${icon('check', { size: 20 })}</span>` : '';
+    const unread = state.unread?.[agent.id] ?? 0;
+    const unreadDot = unread > 0
+      ? `<span class="role-badge" style="background:var(--pink);color:white;">${unread} new</span>`
+      : '';
+    return `
+      <div class="profile-menu-item" data-id="${agent.id}">
+        ${avatarHtml(agent, 'avatar-md')}
+        <div class="meta">
+          <div class="name">${escapeHtml(agent.name)} ${badge} ${unreadDot}</div>
+          <div class="email">${escapeHtml(agent.email ?? '')}</div>
+        </div>
+        ${check}
+      </div>
+    `;
+  }).join('');
+}
+
+export function toggleProfileMenu(e) {
+  if (e) e.stopPropagation();
+  document.getElementById('profile-menu').classList.toggle('open');
+}
+export function closeProfileMenu() {
+  document.getElementById('profile-menu').classList.remove('open');
+}

package/public/js/search.js

@@ -0,0 +1,45 @@
+// Gmail-style search query parser + match predicate + visual highlighter.
+//
+//   "from:vesper"       → only mail from vesper
+//   "subject:audit"     → only mail with "audit" in the subject
+//   "audit from:vesper" → both must match
+//   "build small game"  → free-text match across from + subject + preview
+import { escapeHtml } from './utils.js';
+
+export function parseSearch(query) {
+  const filters = { from: '', subject: '', text: '' };
+  const remaining = [];
+  const tokenRe = /(\w+):("([^"]*)"|(\S+))|("([^"]*)"|(\S+))/g;
+  let m;
+  while ((m = tokenRe.exec(query)) !== null) {
+    const op = m[1]?.toLowerCase();
+    const opVal = (m[3] ?? m[4] ?? '').toLowerCase();
+    const free = (m[6] ?? m[7] ?? '').toLowerCase();
+    if (op === 'from') filters.from = opVal;
+    else if (op === 'subject') filters.subject = opVal;
+    else if (free) remaining.push(free);
+  }
+  filters.text = remaining.join(' ');
+  return filters;
+}
+
+export function matchesSearch(msg, filters) {
+  const fromAddr = (msg.from?.[0]?.address ?? '').toLowerCase();
+  const fromName = (msg.from?.[0]?.name ?? '').toLowerCase();
+  const subject = (msg.subject ?? '').toLowerCase();
+  const preview = (msg.preview ?? '').toLowerCase();
+  if (filters.from && !fromAddr.includes(filters.from) && !fromName.includes(filters.from)) return false;
+  if (filters.subject && !subject.includes(filters.subject)) return false;
+  if (filters.text) {
+    const hay = `${fromAddr} ${fromName} ${subject} ${preview}`;
+    if (!hay.includes(filters.text)) return false;
+  }
+  return true;
+}
+
+export function highlightTerm(text, term) {
+  const safe = escapeHtml(text ?? '');
+  if (!term) return safe;
+  const escaped = term.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+  return safe.replace(new RegExp(`(${escaped})`, 'ig'), '<mark class="search-hl">$1</mark>');
+}

package/public/js/sidebar.js

@@ -0,0 +1,40 @@
+// Gmail-style folder sidebar.
+//
+// AgenticMail's mail store is IMAP-backed (Stalwart), so "folders"
+// here are IMAP mailbox names. We expose the same shortlist Gmail's
+// sidebar shows. The "All Mail" entry is a convenience that maps to
+// the inbox endpoint until per-mailbox listing is wired through the
+// public API.
+import { state } from './state.js';
+import { icon } from './icons.js';
+
+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: 'spam',    label: 'Spam',     icon: 'spam' },
+  { id: 'trash',   label: 'Trash',    icon: 'trash' },
+];
+
+export function renderSidebar(onSelect) {
+  const root = document.getElementById('folder-list');
+  if (!root) return;
+  const active = state.selectedFolder ?? 'inbox';
+  const unread = state.unread?.[state.selectedAgent?.id] ?? 0;
+  root.innerHTML = FOLDERS.map(f => {
+    const isActive = f.id === active;
+    const showCount = f.id === 'inbox' && unread > 0;
+    return `
+      <div class="folder-row ${isActive ? 'active' : ''}" data-folder="${f.id}">
+        <span class="icon">${icon(f.icon, { size: 20 })}</span>
+        <span class="label">${f.label}</span>
+        <span class="count" ${showCount ? '' : 'data-zero'}>${showCount ? unread : ''}</span>
+      </div>
+    `;
+  }).join('');
+  root.querySelectorAll('.folder-row').forEach(el => {
+    el.addEventListener('click', () => onSelect(el.dataset.folder));
+  });
+}

package/public/js/sse.js

@@ -0,0 +1,97 @@
+// Real-time mail delivery via Server-Sent Events. Every agent gets
+// its own subscription; the dispatcher pushes a `new` event per
+// arrived message. We fan that out to:
+//   1. List view — reload if it's the active inbox (instant ping)
+//   2. Profile dropdown — bump the per-agent unread counter
+//   3. Browser notification — system ping when the tab is in the background
+import { state, API_URL } from './state.js';
+import { toast } from './utils.js';
+import { renderProfile } from './profile.js';
+import { loadList } from './list-view.js';
+
+export function subscribeToAllAgents() {
+  // Tear down previous controllers (called on agent-list refresh).
+  for (const c of state.sseControllers) { try { c.abort(); } catch {} }
+  state.sseControllers = [];
+  for (const agent of state.agents) {
+    const ctrl = new AbortController();
+    state.sseControllers.push(ctrl);
+    fetch(`${API_URL}/api/agenticmail/events`, {
+      headers: { Authorization: `Bearer ${agent.apiKey}`, Accept: 'text/event-stream' },
+      signal: ctrl.signal,
+    }).then(async res => {
+      if (!res.ok || !res.body) return;
+      const reader = res.body.getReader();
+      const dec = new TextDecoder();
+      let buf = '';
+      while (!ctrl.signal.aborted) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, { stream: true });
+        let i;
+        while ((i = buf.indexOf('\n\n')) !== -1) {
+          const frame = buf.slice(0, i); buf = buf.slice(i + 2);
+          for (const line of frame.split('\n')) {
+            if (!line.startsWith('data: ')) continue;
+            try { handleSseEvent(agent, JSON.parse(line.slice(6))); } catch {}
+          }
+        }
+      }
+    }).catch(() => {});
+  }
+}
+
+async function handleSseEvent(agent, event) {
+  if (event.type !== 'new') return;
+  state.unread = state.unread ?? {};
+  state.unread[agent.id] = (state.unread[agent.id] ?? 0) + 1;
+  renderProfile();
+
+  const isOpen = state.selectedAgent?.id === agent.id;
+  if (isOpen) {
+    await loadList(agent, state.selectedFolder);
+    state.unread[agent.id] = 0;   // user is looking — clear badge
+    renderProfile();
+  }
+
+  fireBrowserNotification(agent, event, isOpen);
+
+  if (!isOpen) {
+    const fromAddr = event.from?.address ?? event.from ?? 'someone';
+    const subject = event.subject ?? '(no subject)';
+    toast(`${agent.name}: ${subject} — from ${fromAddr}`);
+  }
+}
+
+export function maybeRequestNotificationPermission() {
+  if (!('Notification' in window)) return;
+  if (Notification.permission === 'granted' || Notification.permission === 'denied') return;
+  if (localStorage.getItem('agenticmail.notif.asked')) return;
+  setTimeout(() => {
+    Notification.requestPermission().finally(() => {
+      localStorage.setItem('agenticmail.notif.asked', '1');
+    });
+  }, 2000);
+}
+
+function fireBrowserNotification(agent, event, isOpen) {
+  if (!('Notification' in window) || Notification.permission !== 'granted') return;
+  if (isOpen && document.visibilityState === 'visible') return;
+  const fromAddr = event.from?.address ?? event.from ?? 'unknown sender';
+  const subject = event.subject ?? '(no subject)';
+  try {
+    const n = new Notification(subject, {
+      body: `${agent.name} — from ${fromAddr}`,
+      icon: '/favicon.ico',
+      tag: `agenticmail-${agent.id}-${event.uid}`,
+      silent: false,
+    });
+    n.onclick = () => {
+      window.focus();
+      // Switching agent here requires the router; let the user click
+      // through manually so we don't tightly couple sse → router.
+      if (event.uid) location.hash = `#/m/${event.uid}`;
+      n.close();
+    };
+  } catch {}
+}

package/public/js/state.js

@@ -0,0 +1,17 @@
+// Shared mutable state for the AgenticMail web UI.
+// One module, imported wherever state is read or written.
+export const state = {
+  masterKey: null,
+  agents: [],
+  selectedAgent: null,
+  selectedFolder: 'inbox',     // 'inbox' | 'sent' | 'drafts' | 'starred' | 'spam' | 'trash' | 'all'
+  messages: [],
+  selectedUid: null,
+  currentMessage: null,
+  composeReplyContext: null,
+  searchQuery: '',
+  sseControllers: [],
+  unread: {},                  // { [agentId]: count }
+};
+
+export const API_URL = window.location.origin;

package/public/js/time.js

@@ -0,0 +1,33 @@
+// Gmail-style relative date formatting.
+//
+// formatDate     → short label for list rows (e.g. "10:42 AM", "Mon", "Mar 4")
+// formatDateFull → verbose label for the open-message header
+
+export function formatDate(iso) {
+  if (!iso) return '';
+  const d = new Date(iso); if (Number.isNaN(d.getTime())) return '';
+  const now = new Date();
+  const sameDay = d.toDateString() === now.toDateString();
+  if (sameDay) return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  const days = Math.round((now - d) / (24 * 3600 * 1000));
+  if (days < 7) return d.toLocaleDateString(undefined, { weekday: 'short' });
+  if (d.getFullYear() === now.getFullYear()) return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function formatDateFull(iso) {
+  if (!iso) return '';
+  const d = new Date(iso); if (Number.isNaN(d.getTime())) return '';
+  const now = new Date();
+  const deltaMs = now - d;
+  let rel = '';
+  if (deltaMs < 45_000) rel = 'just now';
+  else if (deltaMs < 60 * 60 * 1000) rel = `${Math.round(deltaMs / 60_000)} minutes ago`;
+  else if (deltaMs < 24 * 60 * 60 * 1000) rel = `${Math.round(deltaMs / 3_600_000)} hours ago`;
+  const abs = d.toLocaleString(undefined, {
+    weekday: 'short', month: 'short', day: 'numeric',
+    hour: 'numeric', minute: '2-digit',
+    ...(d.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),
+  });
+  return rel ? `${rel} — ${abs}` : abs;
+}

package/public/js/utils.js

@@ -0,0 +1,22 @@
+// Tiny shared utilities: HTML escape, strip HTML, toast.
+// Kept in their own module so view modules don't each redefine them.
+
+export function escapeHtml(s) {
+  return String(s ?? '')
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+export function stripHtml(s) {
+  return (s ?? '').replace(/<[^>]*>/g, '');
+}
+
+export function toast(msg, error = false) {
+  const t = document.getElementById('toast');
+  if (!t) return;
+  t.textContent = msg;
+  t.classList.toggle('error', error);
+  t.classList.add('show');
+  clearTimeout(t._timer);
+  t._timer = setTimeout(() => t.classList.remove('show'), 2500);
+}