@agenticmail/api 0.9.15 → 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.15",
+  "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/branding/claude-color.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

package/public/branding/openai-mark.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"></path></svg>

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/avatar.js

@@ -1,23 +1,84 @@
 // Agent identity + avatar helpers.
 //
-// The bridge agent (default name "claudecode") is the host's identity
-// inside AgenticMail. We render it with the OFFICIAL Claude starburst
-// mark (sourced from the public Wikipedia SVG, served as a static
-// asset under /branding/claude-mark.svg) and a green verified-tick so
-// the host inbox is recognisable at a glance vs. teammate sub-agents.
+// Each host integration (Claude Code, Codex, …) gets its own branded
+// avatar in the web UI so multiple co-installed bridges can be told
+// apart at a glance. The HOST_BRANDING table below registers one entry
+// per known host integration. Adding a new host = add one row + drop
+// the SVG into /branding/.
 import { escapeHtml } from './utils.js';
 import { icon } from './icons.js';
 
-// Official Claude mark, served as a static asset under /branding/.
-// Using <img src=...> rather than inlining the path keeps the SVG
-// out of every avatar render and lets the browser cache the asset.
-const CLAUDE_MARK_URL = '/branding/claude-mark.svg';
+/**
+ * Registry of host integrations → branding.
+ *
+ *   key            metadata.host value (lowercased)
+ *   logoUrl        path under /branding/, served as a static asset
+ *   altText        alt= text on the <img>
+ *   aliases        legacy / alternate names that should map to this host
+ *                  (some bridges historically used the host's product
+ *                  name instead of the host id)
+ *
+ * The lookup picks an entry by, in order:
+ *   1. agent.metadata.host
+ *   2. agent.name (so a bridge with name 'codex' but no metadata.host
+ *      still renders correctly during the upgrade window)
+ *   3. any alias listed under a host
+ */
+const HOST_BRANDING = {
+  claudecode: {
+    logoUrl: '/branding/claude-color.svg',
+    altText: 'Claude',
+    aliases: ['claude'],
+  },
+  codex: {
+    logoUrl: '/branding/openai-mark.svg',
+    altText: 'OpenAI Codex',
+    aliases: ['openai', 'chatgpt'],
+  },
+};
+
+// Fallback when we know an account is a bridge but can't identify which
+// host owns it (legacy account with no host tag, unknown host name).
+// Better than mis-attributing — a generic host badge plus a verified
+// tick still reads as "this is a host, not a teammate".
+const GENERIC_HOST_LOGO = '/branding/agenticmail-logo.png';
 
 export function isBridgeAgent(agent) {
   if (!agent) return false;
   const name = (agent.name ?? '').toLowerCase();
   const role = (agent.role ?? '').toLowerCase();
-  return name === 'claudecode' || name === 'claude' || role === 'bridge';
+  const meta = agent.metadata ?? {};
+  if (role === 'bridge') return true;
+  if (meta && meta.bridge === true) return true;
+  // Name-based fallback for pre-0.9.3 bridges that still use role='assistant'.
+  if (HOST_BRANDING[name]) return true;
+  for (const entry of Object.values(HOST_BRANDING)) {
+    if (entry.aliases?.includes(name)) return true;
+  }
+  return false;
+}
+
+/**
+ * Resolve the host branding entry for an agent. Returns null when the
+ * agent isn't a bridge or can't be matched to a known host.
+ */
+function brandingFor(agent) {
+  if (!agent) return null;
+  const name = (agent.name ?? '').toLowerCase();
+  const metaHost = (agent.metadata?.host ?? '').toString().toLowerCase();
+
+  // 1. Trust the host tag first — it's the canonical source of truth.
+  if (metaHost && HOST_BRANDING[metaHost]) return HOST_BRANDING[metaHost];
+
+  // 2. Fall back to matching the bridge name itself.
+  if (HOST_BRANDING[name]) return HOST_BRANDING[name];
+
+  // 3. Check aliases (e.g. a bridge literally named 'claude').
+  for (const entry of Object.values(HOST_BRANDING)) {
+    if (entry.aliases?.includes(name)) return entry;
+    if (entry.aliases?.includes(metaHost)) return entry;
+  }
+  return null;
 }
 
 // Deterministic colour per agent name — keeps teammate colours stable
@@ -35,7 +96,10 @@ function avatarColorFor(name) {
 export function avatarHtml(agent, size = '') {
   const cls = `avatar ${size}`.trim();
   if (isBridgeAgent(agent)) {
-    return `<span class="${cls} avatar-host"><img src="${CLAUDE_MARK_URL}" alt="Claude" class="avatar-img" /><span class="avatar-check">${icon('check', { size: 10 })}</span></span>`;
+    const brand = brandingFor(agent);
+    const url = brand?.logoUrl ?? GENERIC_HOST_LOGO;
+    const alt = brand?.altText ?? 'Host';
+    return `<span class="${cls} avatar-host"><img src="${url}" alt="${escapeHtml(alt)}" class="avatar-img" /><span class="avatar-check">${icon('check', { size: 10 })}</span></span>`;
   }
   const initial = (agent.name ?? '?').slice(0, 1).toUpperCase();
   const color = avatarColorFor(agent.name ?? '');

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;