@agenticmail/cli 0.9.7 → 0.9.9

package/dist/public/js/activity-badges.js

@@ -11,7 +11,7 @@
 // arrive at the heartbeat cadence (30 s) so the badge text
 // reflects what the agent is doing right now.
 
-import { state, API_URL } from './state.js';
+import { onSystemEvent } from './system-stream.js';
 
 const BADGE_CONTAINER_ID = 'activity-badges';
 
@@ -21,7 +21,9 @@ const BADGE_CONTAINER_ID = 'activity-badges';
  * the badge container on every event.
  */
 const workers = new Map();
-let sseController = null;
+let unsubWorkerStarted = null;
+let unsubWorkerHeartbeat = null;
+let unsubWorkerFinished = null;
 
 /**
  * Map an SDK tool name (or the truncated head we capture in
@@ -91,36 +93,16 @@ function handleEvent(event) {
 }
 
 /**
- * Subscribe to /system/events with the master key. The web UI
- * already holds the master key in state.masterKey (set on
- * sign-in). Re-subscribes idempotently — safe to call after
- * agent-list refresh.
+ * Subscribe to worker_* events on the shared /system/events stream.
+ * Idempotent — safe to call after agent-list refresh.
  */
 export function subscribeToActivity() {
-  if (sseController) { try { sseController.abort(); } catch {} }
-  sseController = new AbortController();
-  fetch(`${API_URL}/api/agenticmail/system/events`, {
-    headers: { Authorization: `Bearer ${state.masterKey}`, Accept: 'text/event-stream' },
-    signal: sseController.signal,
-  }).then(async res => {
-    if (!res.ok || !res.body) return;
-    const reader = res.body.getReader();
-    const dec = new TextDecoder();
-    let buf = '';
-    while (!sseController.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 { handleEvent(JSON.parse(line.slice(6))); } catch {}
-        }
-      }
-    }
-  }).catch(() => { /* dropped — user can refresh to reconnect */ });
+  if (unsubWorkerStarted) { try { unsubWorkerStarted(); } catch {} }
+  if (unsubWorkerHeartbeat) { try { unsubWorkerHeartbeat(); } catch {} }
+  if (unsubWorkerFinished) { try { unsubWorkerFinished(); } catch {} }
+  unsubWorkerStarted   = onSystemEvent('worker_started',   handleEvent);
+  unsubWorkerHeartbeat = onSystemEvent('worker_heartbeat', handleEvent);
+  unsubWorkerFinished  = onSystemEvent('worker_finished',  handleEvent);
 }
 
 // Tiny HTML escapers (kept local to avoid an import cycle).

package/dist/public/js/app.js

@@ -14,6 +14,7 @@ import { loadList, renderList, clearSearch, ensureFolderCache } from './list-vie
 import { openMessage } from './message-view.js';
 import { populateComposeFrom, openCompose, openDraft, closeCompose, discardCompose, sendCompose } from './compose.js';
 import { subscribeToAllAgents, maybeRequestNotificationPermission } from './sse.js';
+import { connectSystemStream } from './system-stream.js';
 import { subscribeToActivity } from './activity-badges.js';
 import { icon } from './icons.js';
 import { isSoundEnabled, setSoundEnabled, playNotificationSound } from './sound.js';
@@ -95,20 +96,39 @@ async function bootstrap() {
     const initial = (lastId && state.agents.find(a => a.id === lastId))
       ?? state.agents.find(isBridgeAgent)
       ?? state.agents[0];
+    // Seed the URL hash BEFORE selectAgent so selectAgent's loadList
+    // call lands on the right folder. We use history.replaceState
+    // (NOT `location.hash = ...`) so this does NOT fire a hashchange
+    // event — that would trigger a second route() → loadList() in
+    // parallel with selectAgent's, doubling the work on every
+    // bootstrap. Read the hash first so a deep-link refresh
+    // (e.g. /#/folder/sent) still wins.
+    const folderMatch = location.hash.match(/^#\/folder\/([a-z]+)$/);
+    if (folderMatch) {
+      state.selectedFolder = folderMatch[1];
+    } else if (!location.hash) {
+      history.replaceState(null, '', `${location.pathname}${location.search}#/folder/inbox`);
+    }
     if (initial) await selectAgent(initial);
     renderProfile();
     populateComposeFrom();
-    subscribeToAllAgents();
-    // Real-time worker activity badges. Master-key-scoped SSE on
-    // /system/events; the dispatcher's worker_started /
-    // worker_heartbeat / worker_finished events drive the badge
-    // rendering. Idempotent — safe to call after bootstrap reruns.
-    subscribeToActivity();
+    // ONE shared SSE connection on /system/events for the whole UI.
+    // Used to be N+1 (one per agent for new mail + one for activity
+    // badges), which saturated the browser's 6-connections-per-origin
+    // cap with 5 agents and blocked page navigation. Now everything
+    // multiplexes through this single stream — see system-stream.js.
+    connectSystemStream();
+    subscribeToAllAgents();   // new_mail handlers
+    subscribeToActivity();    // worker_* handlers
     maybeRequestNotificationPermission();
-    // 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();
+    // If the URL points at a message (not a folder), open it now —
+    // the folder list selectAgent already loaded stays in the
+    // background. Folder hashes need no extra work; selectAgent's
+    // loadList already handled them above.
+    const hash = location.hash;
+    const msgMatch = hash.match(/^#\/m\/(\d+)$/);
+    const draftMatch = hash.match(/^#\/d\/([a-zA-Z0-9-]+)$/);
+    if (msgMatch || draftMatch) route();
   } catch (err) {
     toast(`Failed to load agents: ${err.message}`, true);
   }
@@ -176,14 +196,18 @@ function route() {
   }
   const folderMatch = hash.match(/^#\/folder\/([a-z]+)$/);
   const folder = folderMatch ? folderMatch[1] : 'inbox';
-  if (state.selectedFolder !== folder) {
-    state.selectedFolder = folder;
-    // Reset pagination on every folder switch — a fresh folder
-    // starts at page 1. Preserved across silent SSE refreshes so
-    // a new arrival doesn't yank the user back from page 3.
-    state.pagination = { offset: 0, limit: 50, total: 0 };
-    renderSidebar(onFolderSelect);
-  }
+  // Only do work if the folder actually changed. Re-firing loadList
+  // for the SAME folder on every hashchange (e.g. closing a message
+  // detail back to the list) makes the UI feel sluggish — the list
+  // is already rendered, and a second digest fetch just churns
+  // through 50 messages on the IMAP server for no visible change.
+  if (state.selectedFolder === folder) return;
+  state.selectedFolder = folder;
+  // Reset pagination on every folder switch — a fresh folder
+  // starts at page 1. Preserved across silent SSE refreshes so
+  // a new arrival doesn't yank the user back from page 3.
+  state.pagination = { offset: 0, limit: 50, total: 0 };
+  renderSidebar(onFolderSelect);
   if (state.selectedAgent) loadList(state.selectedAgent, folder);
 }
 window.addEventListener('hashchange', route);

package/dist/public/js/list-view.js

@@ -359,7 +359,15 @@ export function renderList() {
   const prevBtn = document.getElementById('pager-prev');
   const nextBtn = document.getElementById('pager-next');
   if (prevBtn) prevBtn.disabled = offset <= 0;
-  if (nextBtn) nextBtn.disabled = pageEnd >= total || state.messages.length < limit;
+  // Drive Next purely from the server-reported total. The previous
+  // `state.messages.length < limit` clause was meant as a "we hit the
+  // end" heuristic for the no-total fallback case, but it backfired
+  // on every folder that legitimately had fewer-than-`limit` items on
+  // a page (e.g. trailing partial page after deletions, or a folder
+  // whose IMAP STATUS returned a stale low count) — Next stayed
+  // permanently disabled. The new digest endpoint always returns an
+  // authoritative SEARCH-derived total, so a single check is enough.
+  if (nextBtn) nextBtn.disabled = pageEnd >= total;
 
   if (filtered.length === 0) {
     root.innerHTML = q

package/dist/public/js/sse.js

@@ -1,47 +1,35 @@
-// 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 — silent in-place refresh (no flicker, no scroll
-//      jump, no bulk-selection wipe) if it's the active inbox
-//   2. Profile dropdown — bump the per-agent unread counter
-//   3. Browser notification — system ping when the tab is in the background
-//   4. Soft chime (toggleable) when sound is enabled
-import { state, API_URL } from './state.js';
+// New-mail notifications for the web UI.
+//
+// Listens for `new_mail` events on the shared /system/events stream
+// (one connection for the whole UI; see system-stream.js for why).
+// Fans the event out to:
+//   1. List view — silent in-place refresh (no flicker / scroll jump)
+//      if it's the active inbox.
+//   2. Profile dropdown — bump the per-agent unread counter.
+//   3. Browser notification when tab isn't focused.
+//   4. Soft chime (toggleable) when sound is enabled.
+
+import { state } from './state.js';
 import { toast } from './utils.js';
 import { renderProfile } from './profile.js';
 import { silentRefresh } from './list-view.js';
 import { playNotificationSound } from './sound.js';
+import { onSystemEvent } from './system-stream.js';
+
+let unsubscribe = null;
 
+/**
+ * Wire the new-mail listener onto the shared system stream.
+ * Idempotent — safe to call after agent-list refreshes.
+ */
 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(() => {});
-  }
+  if (unsubscribe) { try { unsubscribe(); } catch {} }
+  unsubscribe = onSystemEvent('new_mail', payload => {
+    // payload shape: { type: 'new_mail', agentId, agentName, event }
+    const agent = state.agents.find(a => a.id === payload.agentId);
+    if (!agent) return;  // unknown agent (account_deleted race)
+    handleSseEvent(agent, payload.event);
+  });
 }
 
 async function handleSseEvent(agent, event) {
@@ -52,23 +40,12 @@ async function handleSseEvent(agent, event) {
 
   const isOpen = state.selectedAgent?.id === agent.id;
   if (isOpen) {
-    // Silent in-place refresh — re-fetches the list digest and
-    // re-renders ONLY the rows div. Toolbar (select-all, refresh,
-    // bulk-actions) is untouched; existing row checkboxes survive;
-    // scroll position is preserved by the browser since we replace
-    // only the inner content. No "Loading…" flicker.
     await silentRefresh(agent, state.selectedFolder);
-    state.unread[agent.id] = 0;   // user is looking — clear badge
+    state.unread[agent.id] = 0;
     renderProfile();
   }
 
-  // Soft chime — respects the user's sound toggle. Plays for every
-  // arrival regardless of whether the tab is focused, because that
-  // is the whole point of the chime (a foregrounded tab still
-  // benefits from the audible ping when the user's attention is
-  // elsewhere on screen).
   playNotificationSound();
-
   fireBrowserNotification(agent, event, isOpen);
 
   if (!isOpen) {
@@ -103,8 +80,6 @@ function fireBrowserNotification(agent, event, isOpen) {
     });
     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();
     };

package/dist/public/js/state.js

@@ -10,7 +10,6 @@ export const state = {
   currentMessage: null,
   composeReplyContext: null,
   searchQuery: '',
-  sseControllers: [],
   unread: {},                  // { [agentId]: count }
   /**
    * Mapping from sidebar folder id ('sent', 'drafts', 'spam', etc.)

package/dist/public/js/system-stream.js

@@ -0,0 +1,109 @@
+// Single shared SSE connection to /system/events.
+//
+// # Why this exists
+//
+// Browsers cap HTTP connections at 6 per origin. The old web UI opened
+// ONE per-agent /events SSE plus ONE /system/events SSE — so with 5
+// agents, that's 6 long-lived connections, exhausting the cap. Every
+// other request (page refresh, message fetch, attachment download)
+// had to wait for an SSE slot to free up, which never happened
+// because they're persistent.
+//
+// Fix: every per-agent new-mail event is now also pushed to
+// /system/events by the API. The UI subscribes ONCE here, and modules
+// register handlers via `onSystemEvent(type, handler)`. Net effect:
+// 6 SSE connections → 1, freeing 5 slots for actual HTTP traffic.
+//
+// # API
+//
+//   import { connectSystemStream, onSystemEvent } from './system-stream.js';
+//   connectSystemStream();                        // wire it up once after sign-in
+//   onSystemEvent('new_mail', (e) => { ... });    // subscribe to event type
+//   onSystemEvent('worker_started', (e) => {});   // ANY type the server emits
+//
+// Multiple subscribers per type are supported. Each handler runs in
+// try/catch so one buggy handler can't kill the others.
+
+import { state, API_URL } from './state.js';
+
+let controller = null;
+let connected = false;
+const handlers = new Map();          // type → Set<handler>
+
+export function onSystemEvent(type, handler) {
+  if (!handlers.has(type)) handlers.set(type, new Set());
+  handlers.get(type).add(handler);
+  return () => handlers.get(type)?.delete(handler);
+}
+
+function dispatch(event) {
+  if (!event || typeof event !== 'object') return;
+  const set = handlers.get(event.type);
+  if (!set) return;
+  for (const h of set) {
+    try { h(event); } catch (err) { console.error('[system-stream] handler error', err); }
+  }
+}
+
+export function connectSystemStream() {
+  if (controller) { try { controller.abort(); } catch {} }
+  controller = new AbortController();
+  connected = false;
+  const sig = controller.signal;
+
+  // Auto-reconnect with exponential backoff. Capped at 30s — keeping
+  // a UI live during a long server outage shouldn't slam the API
+  // every two seconds.
+  let backoff = 1000;
+  const loop = async () => {
+    while (!sig.aborted) {
+      try {
+        const res = await fetch(`${API_URL}/api/agenticmail/system/events`, {
+          headers: { Authorization: `Bearer ${state.masterKey}`, Accept: 'text/event-stream' },
+          signal: sig,
+        });
+        if (!res.ok || !res.body) {
+          // Hard 4xx (auth) → stop trying; user has to refresh / sign in again.
+          if (res.status === 401 || res.status === 403) return;
+          throw new Error(`/system/events HTTP ${res.status}`);
+        }
+        connected = true;
+        backoff = 1000;  // healthy connection — reset
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buf = '';
+        while (!sig.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 { dispatch(JSON.parse(line.slice(6))); } catch {}
+            }
+          }
+        }
+      } catch (err) {
+        if (sig.aborted) return;
+        // Stream dropped — wait + reconnect.
+      }
+      connected = false;
+      if (sig.aborted) return;
+      await new Promise(r => setTimeout(r, backoff));
+      backoff = Math.min(backoff * 2, 30_000);
+    }
+  };
+  loop();
+}
+
+export function isSystemStreamConnected() {
+  return connected;
+}
+
+export function disconnectSystemStream() {
+  if (controller) { try { controller.abort(); } catch {} }
+  controller = null;
+  connected = false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/cli",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Email and SMS infrastructure for AI agents — the first platform to give agents real email addresses and phone numbers",
   "type": "module",
   "main": "dist/index.js",
@@ -29,12 +29,12 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@agenticmail/api": "^0.9.5",
+    "@agenticmail/api": "^0.9.7",
     "@agenticmail/core": "^0.9.2",
     "json5": "^2.2.3"
   },
   "optionalDependencies": {
-    "@agenticmail/claudecode": "^0.2.6"
+    "@agenticmail/claudecode": "^0.2.7"
   },
   "devDependencies": {
     "tsup": "^8.4.0",