@agenticmail/cli 0.9.14 → 0.9.15

package/dist/public/index.html

@@ -42,8 +42,16 @@
       <!-- Real-time worker activity badges. Populated by SSE; one
            badge per active dispatcher worker showing what each
            agent is doing right now (reading, editing, running
-           shell, etc.). Empty when no workers are active. -->
-      <div id="activity-badges" class="activity-badges"></div>
+           shell, etc.). Empty when no workers are active.
+
+           The count pill is always rendered first by activity-badges.js
+           when there's at least one worker — gives users a stable
+           "3 active" affordance independent of how many badges fit
+           in the horizontal-scroll viewport. -->
+      <div id="activity-badges-shell" class="activity-badges-shell" hidden>
+        <span id="activity-badges-count" class="activity-badges-count" title="Active agents"></span>
+        <div id="activity-badges" class="activity-badges"></div>
+      </div>
       <button class="icon-btn" id="sound-toggle-btn" title="Notification sound"></button>
       <button class="icon-btn" id="refresh-btn" title="Refresh (r)" data-icon="refresh"></button>
       <button id="profile-btn" class="profile-trigger" title="Account">

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

@@ -15,6 +15,8 @@ import { onSystemEvent } from './system-stream.js';
 import { state, API_URL } from './state.js';
 
 const BADGE_CONTAINER_ID = 'activity-badges';
+const SHELL_ID = 'activity-badges-shell';
+const COUNT_ID = 'activity-badges-count';
 
 /**
  * Map of workerId → { agentName, kind, lastTool, turnCount,
@@ -59,8 +61,20 @@ function statusFor(lastTool) {
 
 function render() {
   const root = document.getElementById(BADGE_CONTAINER_ID);
+  const shell = document.getElementById(SHELL_ID);
+  const countEl = document.getElementById(COUNT_ID);
   if (!root) return;
   const list = Array.from(workers.values()).sort((a, b) => (a.startedAtMs ?? 0) - (b.startedAtMs ?? 0));
+  // Drive the shell + count pill so users see "3 active" even when only
+  // 2 badges fit in the scroll viewport. Empty state hides the whole
+  // shell so the topbar doesn't carry a dangling "0" pill.
+  if (shell) shell.hidden = list.length === 0;
+  if (countEl) {
+    countEl.textContent = String(list.length);
+    countEl.title = list.length === 1
+      ? '1 agent active'
+      : `${list.length} agents active`;
+  }
   if (list.length === 0) { root.innerHTML = ''; return; }
   root.innerHTML = list.map(w => {
     const initial = (w.agentName ?? '?').slice(0, 1).toUpperCase();

package/dist/public/styles.css

@@ -170,14 +170,49 @@ a { color: var(--accent-strong); }
    events. Each badge shows the agent's initial + name + a short
    verb derived from the worker's `lastTool`. The green dot
    gently pulses so the row reads as "alive" rather than static. */
+/* Shell wraps the always-visible count pill + the scrollable badge
+   row. Two children, side-by-side; the count never scrolls so the
+   user can see how many agents are active even when the scroll viewport
+   is full. */
+.activity-badges-shell {
+  display: flex; align-items: center; gap: 6px;
+  margin-right: 4px;
+  min-width: 0;  /* lets the inner scrollable strip shrink without
+                    pushing siblings off the topbar */
+}
+.activity-badges-count {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 22px; min-width: 22px; padding: 0 7px;
+  background: var(--pink, #ff4d8c);
+  color: #fff;
+  font-size: 11px; font-weight: 700;
+  border-radius: 999px;
+  flex-shrink: 0;
+  user-select: none;
+}
+/* Horizontal-scrolling strip of badges. We deliberately allow
+   `overflow-x: auto` so the user can swipe / trackpad-scroll through
+   more than fit on screen, and use an edge fade mask so it's visually
+   clear there's more content past the right edge. Scrollbar stays
+   hidden (cleaner topbar) but the count pill + edge fade make
+   "there's more" discoverable. */
 .activity-badges {
   display: flex; align-items: center; gap: 6px;
   max-width: 480px;
   overflow-x: auto;
   scrollbar-width: none;
-  margin-right: 4px;
+  -ms-overflow-style: none;
+  /* Mask creates a gentle fade-out on each end so badges visually
+     hint "I'm continuing past the viewport edge". Pure CSS, no JS. */
+  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 16px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 16px), transparent 100%);
+  /* Snap-scroll so swiping never leaves a badge half-clipped. */
+  scroll-snap-type: x proximity;
+  /* Ensure the inner strip can shrink inside its flex parent. */
+  min-width: 0;
 }
 .activity-badges::-webkit-scrollbar { display: none; }
+.activity-badge { scroll-snap-align: start; }
 .activity-badge {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 4px 10px 4px 6px;
@@ -213,10 +248,10 @@ a { color: var(--accent-strong); }
 .activity-badge .badge-status { color: var(--muted); }
 .activity-badge .badge-status::before { content: '· '; opacity: .6; }
 
-/* Mobile — hide badges on narrow viewports; they fold to the
-   topbar's account avatar dropdown anyway. */
+/* Mobile — hide the whole activity-badge shell (count pill + scrolling
+   strip) on narrow viewports; folds into the profile dropdown anyway. */
 @media (max-width: 800px) {
-  .activity-badges { display: none; }
+  .activity-badges-shell { display: none !important; }
 }
 
 /* ─── Profile (top right) ─────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/cli",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "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,7 +29,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@agenticmail/api": "^0.9.11",
+    "@agenticmail/api": "^0.9.12",
     "@agenticmail/core": "^0.9.2",
     "json5": "^2.2.3"
   },