@agenticmail/api 0.9.16 → 0.9.18

package/dist/index.js

@@ -2246,7 +2246,16 @@ function createMailRoutes(accountManager, config, db, gatewayManager) {
       }
       const password = getAgentPassword(agent);
       const receiver = await getReceiver(agent.stalwartPrincipal, password, config);
-      const raw = await receiver.fetchMessage(uid, folder);
+      let raw;
+      try {
+        raw = await receiver.fetchMessage(uid, folder);
+      } catch (err) {
+        if (err && typeof err === "object" && err.code === "MESSAGE_NOT_FOUND") {
+          res.status(404).json({ error: err.message, code: "MESSAGE_NOT_FOUND" });
+          return;
+        }
+        throw err;
+      }
       const parsed = await parseEmail2(raw);
       const attachments = Array.isArray(parsed.attachments) ? parsed.attachments.map((a, index) => ({
         index,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "description": "REST API server for AgenticMail — email and SMS endpoints for AI agents",
   "type": "module",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@agenticmail/core": "^0.9.3",
+    "@agenticmail/core": "^0.9.4",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.21.0",

package/public/index.html

@@ -59,6 +59,7 @@
       </button>
     </div>
     <div id="profile-menu" class="profile-menu">
+      <div id="profile-menu-switcher"></div>
       <div class="profile-menu-section">Inboxes</div>
       <div id="profile-menu-list"></div>
       <div class="profile-menu-divider"></div>

package/public/js/app.js

@@ -8,7 +8,7 @@ import { state, API_URL } from './state.js';
 import { toast } from './utils.js';
 import { apiGet } from './api.js';
 import { isBridgeAgent } from './avatar.js';
-import { renderProfile, toggleProfileMenu, closeProfileMenu } from './profile.js';
+import { renderProfile, toggleProfileMenu, closeProfileMenu, bindHostSwitcher } from './profile.js';
 import { renderSidebar } from './sidebar.js';
 import { loadList, renderList, clearSearch, ensureFolderCache } from './list-view.js';
 import { openMessage } from './message-view.js';
@@ -268,6 +268,10 @@ document.getElementById('refresh-btn').addEventListener('click', async () => {
 });
 document.getElementById('compose-btn').addEventListener('click', openCompose);
 document.getElementById('profile-btn').addEventListener('click', toggleProfileMenu);
+// Host-switcher pills inside the profile menu get their own delegated
+// click handler — we bind once and let it survive every re-render of
+// the switcher slot's innerHTML.
+bindHostSwitcher();
 document.getElementById('profile-menu').addEventListener('click', e => {
   e.stopPropagation();
   const item = e.target.closest('.profile-menu-item');

package/public/js/profile.js

@@ -1,28 +1,148 @@
 // 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.
+//
+// ──────────────────────────────────────────────────────────────────
+// Host-switcher (the Airbnb "switch to hosting" pattern)
+// ──────────────────────────────────────────────────────────────────
+//
+// Above the inbox list we render a segmented pill toggle showing each
+// known host (Claude / Codex / All). Clicking a pill flips the inbox
+// list with a 3D Y-axis rotation, swapping the content at the exact
+// orthogonal midpoint of the rotation so the "front" and "back" of
+// the card appear to carry different rosters — same trick Airbnb's
+// Host Passport uses for its book-flip illusion. (See the Airbnb
+// engineering blog: "Animations: Bringing the Host Passport to Life".)
+//
+// The selected host persists in localStorage so the operator's view
+// preference survives reloads and across browser tabs.
 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);
+/**
+ * Host registry mirrors the one in avatar.js. Kept duplicated rather
+ * than imported because that file's HOST_BRANDING table is concerned
+ * with logo paths; here we care about display labels + filter
+ * semantics. Adding a new host = one row in both places.
+ */
+const HOST_FILTERS = [
+  {
+    id: 'claudecode',
+    label: 'Claude',
+    logoUrl: '/branding/claude-color.svg',
+    aliases: ['claude'],
+  },
+  {
+    id: 'codex',
+    label: 'Codex',
+    logoUrl: '/branding/openai-mark.svg',
+    aliases: ['openai', 'chatgpt'],
+  },
+];
 
-  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>` : '')
-      : '';
+/**
+ * The "All" pill is always present — it's the original behavior of
+ * showing every account regardless of host, useful for operators who
+ * want a global view (the same way Airbnb's host switcher always
+ * lets you fall back to the unified profile).
+ */
+const ALL_FILTER = { id: 'all', label: 'All', logoUrl: null };
+
+/**
+ * Return the host id this agent belongs to, lowercased and normalised
+ * against the host filter table. Returns `null` when the agent has no
+ * host stamp at all (legacy / unclaimed accounts).
+ */
+function hostIdForAgent(agent) {
+  const meta = agent.metadata ?? {};
+  const raw = typeof meta.host === 'string' ? meta.host.toLowerCase().trim() : '';
+  if (!raw) return null;
+  for (const h of HOST_FILTERS) {
+    if (h.id === raw) return h.id;
+    if (h.aliases?.includes(raw)) return h.id;
   }
+  return raw;  // unknown future host — still let the user filter by it
+}
 
-  const list = document.getElementById('profile-menu-list');
-  if (!list) return;
-  list.innerHTML = state.agents.map(agent => {
+/**
+ * Compute the visible inbox list for the current `state.activeHost`.
+ *
+ *   'all'        → every account, no filtering
+ *   '<host id>'  → only the matching bridge + sub-agents owned by it
+ *
+ * The bridge is forced to the top of the list within its host's view
+ * (it's the host's own identity — "you, the operator" — analogous to
+ * Airbnb pinning your own account row above your sub-listings).
+ */
+function visibleAgents() {
+  if (state.activeHost === 'all') return state.agents;
+  const wanted = state.activeHost.toLowerCase();
+  return state.agents.filter(a => hostIdForAgent(a) === wanted);
+}
+
+/**
+ * Build the host-switcher pill bar. Only renders pills for hosts that
+ * have at least one agent (bridge OR sub-agent) so the UI doesn't
+ * show a "Codex" pill if codex isn't installed yet.
+ */
+function renderHostSwitcher() {
+  const presentHosts = new Set(
+    state.agents
+      .map(a => hostIdForAgent(a))
+      .filter(Boolean),
+  );
+  const filters = [
+    ALL_FILTER,
+    ...HOST_FILTERS.filter(h => presentHosts.has(h.id)),
+  ];
+  // Single-host installs don't need a switcher — degrades to nothing.
+  if (filters.length <= 1) return '';
+  return `
+    <div class="host-switcher" role="tablist" aria-label="Filter inboxes by host">
+      ${filters.map(f => {
+        const active = state.activeHost === f.id;
+        const logo = f.logoUrl
+          ? `<img src="${f.logoUrl}" alt="" class="host-switcher-logo" />`
+          : `<span class="host-switcher-dot">${icon('dot', { size: 8 })}</span>`;
+        return `
+          <button
+            type="button"
+            class="host-switcher-pill ${active ? 'is-active' : ''}"
+            data-host="${escapeHtml(f.id)}"
+            role="tab"
+            aria-selected="${active}"
+            title="Show only ${escapeHtml(f.label)} agents"
+          >
+            ${logo}
+            <span>${escapeHtml(f.label)}</span>
+          </button>
+        `;
+      }).join('')}
+    </div>
+  `;
+}
+
+/**
+ * Build the actual inbox-list HTML (a sibling-by-sibling string of
+ * `.profile-menu-item` divs). Factored out so we can pre-render BOTH
+ * the current view and the next view when animating a host switch.
+ */
+function renderInboxListHtml(agents) {
+  if (agents.length === 0) {
+    return `
+      <div class="profile-menu-empty">
+        <div class="empty-icon">${icon('inbox', { size: 28 })}</div>
+        <div class="empty-text">No agents in this view yet.</div>
+        <div class="empty-hint">
+          Switch to <strong>All</strong> above, or use<br/>
+          <code>agenticmail-&lt;host&gt; claim &lt;name&gt;</code><br/>
+          to assign agents to this host.
+        </div>
+      </div>
+    `;
+  }
+  return agents.map(agent => {
     const selected = state.selectedAgent?.id === agent.id;
     const badge = isBridgeAgent(agent)
       ? '<span class="role-badge role-badge-host">Host</span>'
@@ -50,6 +170,41 @@ export function renderProfile() {
   }).join('');
 }
 
+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 switcherSlot = document.getElementById('profile-menu-switcher');
+  if (switcherSlot) switcherSlot.innerHTML = renderHostSwitcher();
+
+  const list = document.getElementById('profile-menu-list');
+  if (!list) return;
+  // Render into the .flip-face-front pane. The .flip-face-back pane
+  // exists for the in-flight animation only and gets populated on
+  // demand by `flipToHost`. After every plain re-render we also
+  // reset the wrapper so a stale rotation can't strand us mid-flip.
+  const front = list.querySelector('.flip-face-front');
+  if (front) {
+    front.innerHTML = renderInboxListHtml(visibleAgents());
+  } else {
+    list.innerHTML = `
+      <div class="flip-card">
+        <div class="flip-face flip-face-front">${renderInboxListHtml(visibleAgents())}</div>
+        <div class="flip-face flip-face-back"></div>
+      </div>
+    `;
+  }
+}
+
 /**
  * Render a host-ownership badge for an agent. The host name comes from
  * `metadata.host` on the account. Three states:
@@ -83,6 +238,107 @@ function hostBadge(agent) {
   return '<span class="role-badge role-badge-unclaimed" title="No host owner — any dispatcher will wake on this account. Run `agenticmail-<host> claim <name>` to settle ownership.">Unclaimed</span>';
 }
 
+/**
+ * Animate a switch from the current `state.activeHost` to `nextHost`.
+ *
+ * Trick borrowed from Airbnb's Host Passport flip and the classic CSS
+ * "flip-card" pattern: the inbox-list wrapper has TWO stacked faces
+ * with `backface-visibility: hidden`. The front face shows the current
+ * roster; we pre-populate the back face with the next roster, then
+ * rotate the wrapper 180deg on the Y axis. CSS handles the rest — the
+ * front face is visible for the first 90deg, fades to edge-on (and
+ * thus invisible) at the midpoint, then the back face takes over for
+ * the second 90deg.
+ *
+ * After the transition completes, we swap the contents (so the
+ * now-visible "back" face becomes the new "front") and reset the
+ * rotation without animation, leaving the card ready for the next
+ * flip. This avoids ever-accumulating rotation values.
+ *
+ * Honors `prefers-reduced-motion`: skips the rotation entirely and
+ * just updates the roster in place.
+ */
+function flipToHost(nextHost) {
+  if (nextHost === state.activeHost) return;
+  state.activeHost = nextHost;
+  try { localStorage.setItem('agenticmail.activeHost', nextHost); } catch { /* private mode */ }
+
+  // Re-render the switcher pill highlights up front so the pressed
+  // pill flips highlighted state immediately. Visual feedback first,
+  // animation second.
+  const switcherSlot = document.getElementById('profile-menu-switcher');
+  if (switcherSlot) switcherSlot.innerHTML = renderHostSwitcher();
+
+  const list = document.getElementById('profile-menu-list');
+  if (!list) return;
+  const card = list.querySelector('.flip-card');
+  const front = list.querySelector('.flip-face-front');
+  const back = list.querySelector('.flip-face-back');
+  if (!card || !front || !back) {
+    // No flip scaffold (first render shouldn't hit this). Plain render.
+    renderProfile();
+    return;
+  }
+
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const nextHtml = renderInboxListHtml(visibleAgents());
+
+  if (reduceMotion) {
+    front.innerHTML = nextHtml;
+    return;
+  }
+
+  // Pre-populate the back face with the destination roster so it's
+  // ready to be revealed past the 90deg midpoint.
+  back.innerHTML = nextHtml;
+
+  // Kick the flip. The transition is defined in CSS; we just toggle
+  // the .flipped class to start the rotation.
+  // requestAnimationFrame ensures the back-face innerHTML update has
+  // committed to the layout before the rotation begins, otherwise
+  // Safari can show the old back-face content briefly.
+  requestAnimationFrame(() => {
+    card.classList.add('flipped');
+  });
+
+  // After the animation completes, swap the faces so the "back" face
+  // becomes the new "front" and reset the rotation. This avoids the
+  // angle drifting to 360deg, 540deg, etc on repeated flips.
+  const onEnd = (event) => {
+    if (event.target !== card) return;  // child transitions can fire too
+    card.removeEventListener('transitionend', onEnd);
+    front.innerHTML = nextHtml;
+    back.innerHTML = '';
+    // Disable transitions for the reset so it's an instant snap.
+    card.style.transition = 'none';
+    card.classList.remove('flipped');
+    // Force layout flush so the next .flipped toggle re-engages the transition.
+    // eslint-disable-next-line no-unused-expressions
+    card.offsetWidth;
+    card.style.transition = '';
+  };
+  card.addEventListener('transitionend', onEnd);
+}
+
+/**
+ * Wire the pill buttons up to `flipToHost`. We use event delegation
+ * on the switcher slot so the listener doesn't need re-binding after
+ * every `renderHostSwitcher()` re-write (the buttons inside the slot
+ * are replaced wholesale on each render).
+ */
+export function bindHostSwitcher() {
+  const slot = document.getElementById('profile-menu-switcher');
+  if (!slot || slot.dataset.bound === '1') return;
+  slot.dataset.bound = '1';
+  slot.addEventListener('click', (e) => {
+    const pill = e.target.closest('.host-switcher-pill');
+    if (!pill) return;
+    e.stopPropagation();
+    const host = pill.dataset.host;
+    if (host) flipToHost(host);
+  });
+}
+
 export function toggleProfileMenu(e) {
   if (e) e.stopPropagation();
   document.getElementById('profile-menu').classList.toggle('open');

package/public/js/state.js

@@ -33,6 +33,21 @@ export const state = {
    * back to page 1.
    */
   pagination: { offset: 0, limit: 50, total: 0 },
+  /**
+   * Which host's inboxes the user wants visible in the account
+   * switcher. Borrowed from Airbnb's "switch to hosting / switch to
+   * traveling" mode toggle — same agent, two distinct contexts. We
+   * stash it in localStorage so the choice survives reloads.
+   *
+   *   'all'        → every account regardless of host (the original view)
+   *   'claudecode' → only the Claude bridge + Claude-owned sub-agents
+   *   'codex'      → only the Codex bridge + Codex-owned sub-agents
+   *
+   * Future hosts (grok-build, hermes) plug in here by matching their
+   * own bridge name. The dropdown self-discovers available hosts from
+   * `state.agents` so no UI work is needed when a new bridge appears.
+   */
+  activeHost: localStorage.getItem('agenticmail.activeHost') || 'all',
 };
 
 export const API_URL = window.location.origin;

package/public/styles.css

@@ -298,6 +298,145 @@ a { color: var(--accent-strong); }
   margin-left: 4px;
 }
 .profile-menu-divider { height: 1px; background: var(--line); margin: 8px 0; }
+
+/* ─── Host switcher (Airbnb-style) ────────────────────────────────────
+ *
+ * Segmented pill bar at the top of the inbox menu. Each pill represents
+ * a host (Claude, Codex, All); clicking flips the inbox list with a 3D
+ * Y-axis rotation. The active pill is filled with the accent colour;
+ * inactive pills are subtle so the visual weight rests on the inbox
+ * roster itself rather than the chrome.
+ */
+.host-switcher {
+  display: flex;
+  gap: 4px;
+  margin: 0 12px 6px;
+  padding: 4px;
+  background: var(--bg-hover);
+  border-radius: 999px;
+  border: 1px solid var(--line);
+}
+.host-switcher-pill {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  /* Match Airbnb's "switch to hosting" feel: brisk, eased, no bounce. */
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  user-select: none;
+}
+.host-switcher-pill:hover { color: var(--ink); }
+.host-switcher-pill:active { transform: scale(0.97); }
+.host-switcher-pill.is-active {
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+.host-switcher-logo {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  display: block;
+}
+.host-switcher-dot {
+  width: 8px;
+  height: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  opacity: 0.7;
+}
+
+/* ─── Flip card (3D rotation on host switch) ──────────────────────────
+ *
+ * The inbox roster lives inside `.flip-card`, which rotates 180deg on
+ * Y when a host is switched. Two stacked `.flip-face` panes carry the
+ * "before" and "after" rosters; `backface-visibility: hidden` ensures
+ * each pane is only visible on its own side of the rotation. Result:
+ * the user sees roster A → edge-on at 90deg → roster B, creating the
+ * illusion that each side of the card carries a distinct view.
+ *
+ * Same trick as Airbnb's Host Passport book-flip on iOS (Tech Blog,
+ * May 2023). The CSS port is straightforward because the swap happens
+ * naturally at the orthogonal midpoint where neither face is visible.
+ */
+#profile-menu-list {
+  perspective: 1200px;
+  /* perspective-origin: top so the flip pivots from the eye line, not
+   * the centre — feels more like turning a page than tumbling a coin. */
+  perspective-origin: 50% 0%;
+}
+.flip-card {
+  position: relative;
+  transform-style: preserve-3d;
+  /* 460ms is the sweet spot from the Airbnb engineering write-up:
+   * fast enough to feel responsive, slow enough to read as deliberate. */
+  transition: transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* min-height so the menu doesn't collapse to 0 during the flip when
+   * the back face is empty for the resetting frame. */
+  min-height: 80px;
+}
+.flip-card.flipped {
+  transform: rotateY(180deg);
+}
+.flip-face {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  width: 100%;
+}
+.flip-face-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: rotateY(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .flip-card { transition: none; }
+}
+
+/* ─── Empty state inside the profile menu (filtered view → 0 rows) ──── */
+.profile-menu-empty {
+  padding: 24px 20px;
+  text-align: center;
+  color: var(--muted);
+}
+.profile-menu-empty .empty-icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+  opacity: 0.4;
+}
+.profile-menu-empty .empty-text {
+  font-size: 13px;
+  margin-bottom: 8px;
+  color: var(--ink);
+}
+.profile-menu-empty .empty-hint {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.profile-menu-empty code {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-hover);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
 .profile-menu-footer {
   padding: 12px 20px; font-size: 13px; color: var(--muted);
   display: flex; gap: 12px;