@agenticmail/cli 0.8.24 → 0.8.25

package/README.md

@@ -23,9 +23,14 @@ It bundles a setup wizard, API server launcher, and a full interactive shell wit
 >
 > Zero prompts, ~2 minutes, fully autonomous. Then tell the user to restart Claude Code. Full agent-facing runbook — including verification, common failures, and "what if Node < 22" — is at [`AGENTS.md`](https://github.com/agenticmail/agenticmail/blob/main/AGENTS.md) in the repo (the [agents.md](https://agents.md) convention).
 
-## ✨ What's new in 0.8.24
-
-- **🌐 Gmail-style web UI, fully redesigned** — `agenticmail web` opens a proper two-column Gmail layout: left sidebar with Compose + folders (Inbox / Starred / Sent / Drafts / All Mail / Spam / Trash), content pane that swaps between list view (40 px Gmail-style rows) and message view via a hash router (`#/inbox`, `#/m/<uid>`). Every emoji replaced with an inline 24×24 vector icon library. Modular ES module JS under `public/js/` (14 files). Search supports `from:` / `subject:` operators, real-time SSE updates, browser notifications, full markdown rendering, compose + reply with `wake` as a first-class field.
+## ✨ What's new in 0.8.25
+
+- **⏱ Workers can run for hours** — no aggressive timeout. Per-worker logs at `~/.agenticmail/worker-logs/`, heartbeats every 30 s, isolated cwd per worker. New MCP tool `tail_worker` reads the running log; `check_activity` shows last tool, turn count, and a `stale` flag instead of evicting long-running workers.
+- **🤖 Autonomous-mode awareness via Stop hook** — long headless Claude Code runs now see teammate replies at every turn boundary. Closes the follow-up from 0.8.23.
+- **🩹 Hook bin resolution fixed** — `agenticmail-mail-hook: command not found` errors gone; the hook is registered with an absolute path resolved at install time. Old installs auto-heal on the next `agenticmail claudecode`.
+- **🐛 Web UI bug sweep** — flags-`.includes`-not-a-function crash, sidebar folders all hitting `/mail/inbox`, Cmd+C opening compose: all fixed.
+- **📱 Mobile-responsive web UI** — off-canvas sidebar with hamburger toggle, full-screen compose, list rows that fold sender into the preview, message view that drops the desktop content cap.
+- **🎀 Official logos** — Claude starburst (Wikipedia) + AgenticMail `@` mark replace the placeholder glyphs everywhere.
 - **`wake: ["alice", "bob"]`** on `send_email` / `reply_email` / `forward_email` / `template_send` / `manage_drafts(send)` tells the dispatcher to give a Claude turn only to named agents — the biggest token saver on large threads.
 - **`[FINAL]` / `[DONE]` / `[CLOSED]` / `[WRAP]` in a subject** closes a thread — the dispatcher stops waking workers on any further reply to it.
 - **`check_activity` MCP tool** — see which agents the dispatcher has woken right now and how long they've been running.

package/dist/public/branding/claude-mark.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="73 220 158 165" fill="currentColor" aria-hidden="true"><path d="m 105.01,322.07 29.14,-16.35 0.49,-1.42 -0.49,-0.79 h -1.42 l -4.87,-0.3 -16.65,-0.45 -14.44,-0.6 -13.99,-0.75 -3.52,-0.75 -3.3,-4.35 0.34,-2.17 2.96,-1.99 4.24,0.37 9.37,0.64 14.06,0.97 10.2,0.6 15.11,1.57 h 2.4 l 0.34,-0.97 -0.82,-0.6 -0.64,-0.6 -14.55,-9.86 -15.75,-10.42 -8.25,-6 -4.46,-3.04 -2.25,-2.85 -0.97,-6.22 4.05,-4.46 5.44,0.37 1.39,0.37 5.51,4.24 11.77,9.11 15.37,11.32 2.25,1.87 0.9,-0.64 0.11,-0.45 -1.01,-1.69 -8.36,-15.11 -8.92,-15.37 -3.97,-6.37 -1.05,-3.82 c -0.37,-1.57 -0.64,-2.89 -0.64,-4.5 l 4.61,-6.26 2.55,-0.82 6.15,0.82 2.59,2.25 3.82,8.74 6.19,13.76 9.6,18.71 2.81,5.55 1.5,5.14 0.56,1.57 h 0.97 v -0.9 l 0.79,-10.54 1.46,-12.94 1.42,-16.65 0.49,-4.69 2.32,-5.62 4.61,-3.04 3.6,1.72 2.96,4.24 -0.41,2.74 -1.76,11.44 -3.45,17.92 -2.25,12 h 1.31 l 1.5,-1.5 6.07,-8.06 10.2,-12.75 4.5,-5.06 5.25,-5.59 3.37,-2.66 h 6.37 l 4.69,6.97 -2.1,7.2 -6.56,8.32 -5.44,7.05 -7.8,10.5 -4.87,8.4 0.45,0.67 1.16,-0.11 17.62,-3.75 9.52,-1.72 11.36,-1.95 5.14,2.4 0.56,2.44 -2.02,4.99 -12.15,3 -14.25,2.85 -21.22,5.02 -0.26,0.19 0.3,0.37 9.56,0.9 4.09,0.22 h 10.01 l 18.64,1.39 4.87,3.22 2.92,3.94 -0.49,3 -7.5,3.82 -10.12,-2.4 -23.62,-5.62 -8.1,-2.02 h -1.12 v 0.67 l 6.75,6.6 12.37,11.17 15.49,14.4 0.79,3.56 -1.99,2.81 -2.1,-0.3 -13.61,-10.24 -5.25,-4.61 -11.89,-10.01 h -0.79 v 1.05 l 2.74,4.01 14.47,21.75 0.75,6.67 -1.05,2.17 -3.75,1.31 -4.12,-0.75 -8.47,-11.89 -8.74,-13.39 -7.05,-12 -0.86,0.49 -4.16,44.81 -1.95,2.29 -4.5,1.72 -3.75,-2.85 -1.99,-4.61 1.99,-9.11 2.4,-11.89 1.95,-9.45 1.76,-11.74 1.05,-3.9 -0.07,-0.26 -0.86,0.11 -8.85,12.15 -13.46,18.19 -10.65,11.4 -2.55,1.01 -4.42,-2.29 0.41,-4.09 2.47,-3.64 14.74,-18.75 8.89,-11.62 5.74,-6.71 -0.04,-0.97 h -0.34 l -39.15,25.42 -6.97,0.9 -3,-2.81 0.37,-4.61 1.42,-1.5 11.77,-8.1 -0.04,0.04 z"
+       shape-rendering="optimizeQuality"/></svg>

package/dist/public/index.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AgenticMail</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4899'%3E%3Cpath d='M12 12c-2-3-5-5-8-5-1 0-2 1-2 2s1 2 2 2c2 0 4 1 5 2-1 1-3 2-5 2-1 0-2 1-2 2s1 2 2 2c3 0 6-2 8-5 2 3 5 5 8 5 1 0 2-1 2-2s-1-2-2-2c-2 0-4-1-5-2 1-1 3-2 5-2 1 0 2-1 2-2s-1-2-2-2c-3 0-6 2-8 5zm0 2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E" />
+<link rel="icon" type="image/png" href="/branding/agenticmail-logo.png" />
 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
@@ -12,7 +12,7 @@
 <!-- ─── Auth gate (shown until master key is entered) ────────────── -->
 <div id="auth" class="auth-gate">
   <div class="auth-card">
-    <h1><span data-icon="bow" data-icon-size="28"></span> AgenticMail</h1>
+    <h1><img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" /> AgenticMail</h1>
     <p>Enter your master key to sign in. The key is stored locally in your browser; we never send it anywhere except to <span class="mono" id="auth-api-url"></span>.</p>
     <div id="auth-err" class="auth-err" style="display:none"></div>
     <input id="auth-key" type="password" placeholder="mk_…" autocomplete="off" autofocus />
@@ -27,7 +27,7 @@
   <header class="topbar">
     <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
     <div class="brand">
-      <span class="brand-bow" data-icon="bow" data-icon-size="28"></span>
+      <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
       <span class="brand-name">AgenticMail</span>
     </div>
     <div class="search-container">
@@ -52,8 +52,9 @@
   </header>
 
   <!-- Sidebar + content -->
-  <div class="main">
-    <aside class="sidebar">
+  <div class="main" id="main">
+    <div class="sidebar-backdrop" id="sidebar-backdrop"></div>
+    <aside class="sidebar" id="sidebar">
       <button class="compose-btn" id="compose-btn">
         <span class="compose-icon" data-icon="compose" data-icon-size="22"></span>
         <span class="compose-text">Compose</span>

package/dist/public/js/app.js

@@ -104,6 +104,9 @@ function onFolderSelect(folder) {
   renderSidebar(onFolderSelect);
   location.hash = '#/inbox';   // any folder uses the list route
   if (state.selectedAgent) loadList(state.selectedAgent, folder);
+  // On mobile (the only viewport where the sidebar is over-canvas),
+  // close it after a folder pick so the user sees the list.
+  document.getElementById('main')?.classList.remove('sidebar-open');
 }
 
 // ─── Hash router ─────────────────────────────────────────────────────
@@ -119,6 +122,18 @@ function route() {
 window.addEventListener('hashchange', route);
 
 // ─── Top bar wiring ──────────────────────────────────────────────────
+// Hamburger toggles the sidebar on mobile. On desktop the sidebar
+// is always visible; the class only changes anything below 800 px,
+// where the CSS slides it off-canvas by default.
+function toggleSidebar() {
+  const main = document.getElementById('main');
+  main?.classList.toggle('sidebar-open');
+}
+document.getElementById('menu-btn').addEventListener('click', toggleSidebar);
+document.getElementById('sidebar-backdrop').addEventListener('click', () => {
+  document.getElementById('main')?.classList.remove('sidebar-open');
+});
+
 document.getElementById('refresh-btn').addEventListener('click', async () => {
   if (state.selectedAgent) {
     await loadList(state.selectedAgent, state.selectedFolder);
@@ -172,12 +187,18 @@ document.getElementById('search-clear').addEventListener('click', clearSearch);
 //   r  refresh current inbox
 //   c  compose new
 //   /  focus the search box
+//
+// IMPORTANT: every shortcut bails when ANY modifier key is held
+// (Cmd / Ctrl / Alt / Meta) — otherwise Cmd+C "copy" was opening
+// the compose modal, Cmd+R was overriding browser refresh, etc.
+// Plain unmodified single-key shortcuts only.
 document.addEventListener('keydown', e => {
   if (document.getElementById('compose-bg').style.display !== 'none') return;
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  if (e.metaKey || e.ctrlKey || e.altKey) return;  // never hijack OS shortcuts
   if (e.key === 'r') document.getElementById('refresh-btn').click();
-  if (e.key === 'c') openCompose();
-  if (e.key === '/') {
+  else if (e.key === 'c') openCompose();
+  else if (e.key === '/') {
     e.preventDefault();
     searchInput.focus();
   }

package/dist/public/js/avatar.js

@@ -1,17 +1,18 @@
 // Agent identity + avatar helpers.
 //
 // The bridge agent (default name "claudecode") is the host's identity
-// inside AgenticMail. We render it with a stylised Claude-asterisk
-// mark and a green verified-tick so the host inbox is recognisable at
-// a glance vs. teammate sub-agents.
-//
-// We deliberately do NOT embed Anthropic's actual trademarked Claude
-// logo here — reproducing it pixel-for-pixel in third-party software
-// has licensing implications. The stylised approximation conveys
-// the same identity cue without the trademark concern.
+// 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.
 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';
+
 export function isBridgeAgent(agent) {
   if (!agent) return false;
   const name = (agent.name ?? '').toLowerCase();
@@ -31,14 +32,10 @@ function avatarColorFor(name) {
   return AVATAR_PALETTE[hash % AVATAR_PALETTE.length];
 }
 
-const CLAUDE_MARK_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-  <path d="M12 1.5 L13.2 8.6 L19.5 6.6 L15 12 L19.5 17.4 L13.2 15.4 L12 22.5 L10.8 15.4 L4.5 17.4 L9 12 L4.5 6.6 L10.8 8.6 Z"/>
-</svg>`;
-
 export function avatarHtml(agent, size = '') {
   const cls = `avatar ${size}`.trim();
   if (isBridgeAgent(agent)) {
-    return `<span class="${cls} avatar-host">${CLAUDE_MARK_SVG}<span class="avatar-check">${icon('check', { size: 10 })}</span></span>`;
+    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 initial = (agent.name ?? '?').slice(0, 1).toUpperCase();
   const color = avatarColorFor(agent.name ?? '');

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

@@ -8,6 +8,44 @@ import { apiGet } from './api.js';
 import { FOLDERS } from './sidebar.js';
 import { icon } from './icons.js';
 
+/**
+ * Defensive flag check. The API's IMAP layer returns `flags` as an
+ * array of strings most of the time (`['\\Seen', '\\Flagged']`) but
+ * some envelopes come back with a Set-like serialisation or even an
+ * object map. Without this guard, calling `.includes()` on a non-
+ * array crashed the list with "(m.flags ?? []).includes is not a
+ * function". Coerce everything we don't recognise to an empty list.
+ */
+function flagsHas(flags, name) {
+  if (Array.isArray(flags)) return flags.includes(name);
+  if (flags && typeof flags === 'object') {
+    // `{Seen: true, Flagged: false}` shape — try both with and
+    // without the leading backslash since callers can mean either.
+    const key = name.replace(/^\\/, '');
+    return flags[name] === true || flags[key] === true;
+  }
+  return false;
+}
+
+// Map sidebar folder ids to the actual IMAP folder names the API
+// expects on `/mail/folders/:folder`. `inbox` is special — the API
+// has a dedicated `/mail/inbox` endpoint with extra enrichment, so
+// we use that. Other folders go through the generic listing.
+//
+// Stalwart uses the standard IMAP names: INBOX, Sent, Drafts, Junk
+// Mail (a.k.a. "Spam"), Trash. We use the canonical IMAP capitalisation.
+const FOLDER_TO_IMAP = {
+  inbox:   { endpoint: '/mail/inbox' },
+  sent:    { endpoint: '/mail/folders/Sent' },
+  drafts:  { endpoint: '/mail/folders/Drafts' },
+  spam:    { endpoint: '/mail/folders/Junk%20Mail' },
+  trash:   { endpoint: '/mail/folders/Trash' },
+  all:     { endpoint: '/mail/folders/All%20Mail' },
+  // Starred is not a folder — it's the IMAP \Flagged flag, surfaced
+  // by client-side filtering over the inbox listing (Gmail-style).
+  starred: { endpoint: '/mail/inbox', clientFilter: 'flagged' },
+};
+
 export async function loadList(agent, folder) {
   const root = document.getElementById('content');
   root.innerHTML = `
@@ -17,17 +55,19 @@ export async function loadList(agent, folder) {
     </div>
     <div class="list-rows" id="list-rows"><div class="empty">Loading…</div></div>
   `;
+  const route = FOLDER_TO_IMAP[folder] ?? FOLDER_TO_IMAP.inbox;
   try {
-    // Public API today only exposes the inbox listing. Other folders
-    // fall through to the inbox endpoint and apply a client-side
-    // shape (e.g. starred = flag filter). When the API grows
-    // per-mailbox listing we'll route based on `folder` here.
-    const data = await apiGet('/mail/inbox?limit=50&offset=0', { agentKey: agent.apiKey });
+    const sep = route.endpoint.includes('?') ? '&' : '?';
+    const data = await apiGet(`${route.endpoint}${sep}limit=50&offset=0`, { agentKey: agent.apiKey });
     state.messages = data.messages ?? [];
     renderList();
   } catch (err) {
-    document.getElementById('list-rows').innerHTML =
-      `<div class="empty">Failed to load: ${escapeHtml(err.message)}</div>`;
+    // Empty folder is a normal state; "no such folder" lands here
+    // too. Show a friendly empty message rather than a raw HTTP error.
+    const msg = String(err.message ?? err);
+    document.getElementById('list-rows').innerHTML = msg.includes('404')
+      ? `<div class="empty">${escapeHtml(folderTitle(folder))} is empty.</div>`
+      : `<div class="empty">Failed to load: ${escapeHtml(msg)}</div>`;
   }
 }
 
@@ -45,8 +85,10 @@ export function renderList() {
 
   // Client-side folder filtering for the folders the API doesn't
   // distinguish for us yet. Starred uses the IMAP \Flagged flag.
+  // Flags may come back as an array OR an object map ({Seen: true})
+  // depending on the IMAP path — always coerce before .includes().
   if (state.selectedFolder === 'starred') {
-    filtered = filtered.filter(m => (m.flags ?? []).includes('\\Flagged'));
+    filtered = filtered.filter(m => flagsHas(m.flags, '\\Flagged'));
   }
 
   const hlTerm = filters?.subject || filters?.from || filters?.text || '';
@@ -70,8 +112,8 @@ export function renderList() {
   }
 
   root.innerHTML = filtered.map(m => {
-    const unread = !(m.flags ?? []).includes('\\Seen');
-    const starred = (m.flags ?? []).includes('\\Flagged');
+    const unread = !flagsHas(m.flags, '\\Seen');
+    const starred = flagsHas(m.flags, '\\Flagged');
     const fromAddr = m.from?.[0]?.address ?? '?';
     const fromName = m.from?.[0]?.name || fromAddr;
     const subject = m.subject ?? '(no subject)';

package/dist/public/styles.css

@@ -78,14 +78,26 @@ a { color: var(--accent-strong); }
 }
 .menu-btn:hover { background: var(--bg-hover); }
 .brand {
-  display: flex; align-items: center; gap: 8px;
+  display: flex; align-items: center; gap: 10px;
   padding: 0 8px; min-width: 200px;
 }
 .brand-bow { font-size: 28px; line-height: 1; }
+.brand-logo {
+  width: 32px; height: 32px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  display: block;
+}
 .brand-name {
   font: 500 22px/1 'Google Sans', sans-serif;
   color: var(--pink);
 }
+/* Slightly bigger logo in the auth card. */
+.auth-card .brand-logo {
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  vertical-align: middle;
+}
 
 .search-container {
   flex: 1; max-width: 720px;
@@ -196,9 +208,14 @@ a { color: var(--accent-strong); }
 .avatar-sm { width: 24px; height: 24px; font-size: 11px; }
 .avatar-md { width: 40px; height: 40px; font-size: 16px; }
 .avatar-lg { width: 48px; height: 48px; font-size: 20px; }
-.avatar-host { background: #fce8e0; color: #cc785c; }
+.avatar-host { background: #fce8e0; color: #d97757; }
 @media (prefers-color-scheme: dark) { .avatar-host { background: #2a1810; } }
 .avatar svg { width: 60%; height: 60%; }
+.avatar-img {
+  width: 70%; height: 70%;
+  object-fit: contain;
+  display: block;
+}
 .avatar-check {
   position: absolute; bottom: -2px; right: -2px;
   width: 14px; height: 14px; border-radius: 50%;
@@ -226,12 +243,66 @@ a { color: var(--accent-strong); }
   grid-template-columns: 256px 1fr;
   overflow: hidden;
   background: var(--bg-soft);
+  position: relative;
 }
+.sidebar-backdrop {
+  display: none;
+  position: fixed; inset: 64px 0 0 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 14;
+}
+/* ─── Mobile / narrow viewport ──────────────────────────────────── */
 @media (max-width: 800px) {
-  .main { grid-template-columns: 72px 1fr; }
-  .sidebar-label { display: none; }
-  .compose-text { display: none; }
-  .compose-btn { justify-content: center; padding: 0; width: 56px; }
+  .main { grid-template-columns: 1fr; }
+  .sidebar {
+    position: fixed; top: 64px; bottom: 0; left: 0;
+    width: 280px; max-width: 85vw;
+    background: var(--bg-soft);
+    z-index: 15;
+    transform: translateX(-100%);
+    transition: transform .22s ease;
+    box-shadow: 2px 0 16px rgba(0,0,0,0.1);
+  }
+  .main.sidebar-open .sidebar { transform: translateX(0); }
+  .main.sidebar-open .sidebar-backdrop { display: block; }
+  .content { border-radius: 0; margin: 0; }
+  .topbar { padding: 8px 8px; gap: 4px; }
+  .brand { min-width: auto; }
+  .brand-name { font-size: 18px; }
+  .search-container { max-width: none; }
+  .search-input { height: 40px; font-size: 14px; }
+  /* List rows lose the from column on narrow screens; the subject
+     gets full width with the sender folded into the preview. */
+  .list-row {
+    grid-template-columns: 24px 24px 1fr 70px;
+    height: 56px;
+    padding: 0 12px;
+  }
+  .list-row .from { display: none; }
+  .list-row .subject-cell {
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-start;
+  }
+  .list-row .subject { max-width: none; font-size: 14px; }
+  .list-row .preview { font-size: 13px; }
+  .list-row .preview::before { content: ''; }
+  .message-header { padding: 16px 16px 8px; }
+  .message-subject { font-size: 18px; }
+  .message-body { padding: 8px 16px 24px; max-width: none; }
+  .message-attachments { padding: 12px 16px; }
+  /* Compose modal goes full-screen on mobile rather than a tiny
+     bottom-right popup that nobody can type into. */
+  .compose-bg { padding: 0; align-items: stretch; justify-content: stretch; }
+  .compose-modal { width: 100%; max-height: 100vh; border-radius: 0; }
+  .compose-body textarea { min-height: 40vh; }
+  /* Hide non-essential top-bar buttons on narrow screens. */
+  .topbar-spacer { flex: 0; }
+  #refresh-btn { display: none; }
+}
+@media (min-width: 801px) {
+  /* Hamburger menu only matters on mobile; hide on desktop. */
+  .menu-btn { display: none; }
 }
 
 /* ─── Sidebar ──────────────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/cli",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "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.7.9",
+    "@agenticmail/api": "^0.7.11",
     "@agenticmail/core": "^0.7.0",
     "json5": "^2.2.3"
   },