npm - @agenticmail/api - Versions diffs - 0.7.8 → 0.7.11 - Mend

@agenticmail/api 0.7.8 → 0.7.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +2 -2
package/dist/index.js +66 -16
package/package.json +1 -1
package/public/branding/agenticmail-logo.png +0 -0
package/public/branding/claude-mark.svg +2 -0
package/public/index.html +52 -1237
package/public/js/api.js +25 -0
package/public/js/app.js +228 -0
package/public/js/avatar.js +43 -0
package/public/js/compose.js +81 -0
package/public/js/icons.js +56 -0
package/public/js/list-view.js +160 -0
package/public/js/markdown.js +97 -0
package/public/js/message-view.js +87 -0
package/public/js/profile.js +54 -0
package/public/js/search.js +45 -0
package/public/js/sidebar.js +40 -0
package/public/js/sse.js +97 -0
package/public/js/state.js +17 -0
package/public/js/time.js +33 -0
package/public/js/utils.js +22 -0
package/public/styles.css +668 -0

package/public/index.html CHANGED Viewed

@@ -3,1282 +3,97 @@
 <head>
 <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 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🎀%3C/text%3E%3C/svg%3E" />
-<style>
-  /* ─── Brand & palette ───────────────────────────────────────────── */
-  :root {
-    --pink: #ec4899;
-    --pink-soft: #fdf2f8;
-    --pink-rule: #fbcfe8;
-    --ink: #111827;
-    --ink-soft: #374151;
-    --muted: #6b7280;
-    --line: #e5e7eb;
-    --bg: #ffffff;
-    --bg-soft: #f9fafb;
-    --row-hover: #f3f4f6;
-    --row-selected: var(--pink-soft);
-    --accent-strong: #be185d;
-    --code-bg: #f3f4f6;
-    --code-fg: #b91c1c;
-    --unread-dot: var(--pink);
-  }
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --pink-soft: #2a1726;
-      --pink-rule: #5b1d44;
-      --ink: #f3f4f6;
-      --ink-soft: #d1d5db;
-      --muted: #9ca3af;
-      --line: #2d2d33;
-      --bg: #0e0e10;
-      --bg-soft: #18181b;
-      --row-hover: #1f1f23;
-      --row-selected: #2a1726;
-      --accent-strong: #f9a8d4;
-      --code-bg: #1f1f23;
-      --code-fg: #fb7185;
-    }
-  }
-  * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0; }
-  body {
-    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-    color: var(--ink); background: var(--bg);
-    overflow: hidden;
-  }
-  button { font: inherit; cursor: pointer; }
-  a { color: var(--accent-strong); }
-  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-  /* ─── App shell ─────────────────────────────────────────────────── */
-  .app { display: grid; grid-template-rows: 56px 1fr; height: 100vh; }
-  .topbar {
-    display: flex; align-items: center; gap: 16px;
-    padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg);
-    position: relative;
-  }
-  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
-  .brand-bow { font-size: 22px; }
-  .brand-name { color: var(--pink); }
-  .search {
-    flex: 1; max-width: 720px;
-    position: relative;
-  }
-  /* ─── Profile switcher (Gmail-style top-right) ──────────────────── */
-  .profile {
-    display: flex; align-items: center; gap: 8px;
-    padding: 4px 8px 4px 4px; border-radius: 20px;
-    border: 1px solid var(--line); background: var(--bg);
-    cursor: pointer; font: inherit; color: var(--ink);
-  }
-  .profile:hover { background: var(--row-hover); }
-  .profile-name { font-weight: 500; font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .profile-caret { font-size: 10px; color: var(--muted); }
-  /* Avatar circles */
-  .avatar {
-    width: 32px; height: 32px; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 14px; font-weight: 600; color: white;
-    flex-shrink: 0; position: relative;
-  }
-  .avatar-sm { width: 24px; height: 24px; font-size: 11px; }
-  .avatar-lg { width: 40px; height: 40px; font-size: 16px; }
-  .avatar-host {
-    background: #f1f1f3;       /* light card behind the Claude mark */
-    color: #cc785c;             /* Claude orange */
-  }
-  @media (prefers-color-scheme: dark) { .avatar-host { background: #1f1f23; } }
-  .avatar svg { width: 60%; height: 60%; }
-  /* Verified-host check badge — small green tick overlaid bottom-right */
-  .avatar-check {
-    position: absolute; bottom: -2px; right: -2px;
-    width: 14px; height: 14px; border-radius: 50%;
-    background: #22c55e; color: white;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 9px; font-weight: 700;
-    border: 2px solid var(--bg);
-  }
-  /* Dropdown panel */
-  .profile-menu {
-    position: absolute; top: 56px; right: 8px;
-    width: 320px; max-height: 70vh; overflow-y: auto;
-    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
-    padding: 8px 0; z-index: 25;
-    display: none;
-  }
-  .profile-menu.open { display: block; }
-  .profile-menu-section {
-    padding: 8px 14px 4px; font-size: 10px; font-weight: 700;
-    color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
-  }
-  .profile-menu-item {
-    display: flex; align-items: center; gap: 12px;
-    padding: 10px 14px; cursor: pointer;
-    color: var(--ink);
-  }
-  .profile-menu-item:hover { background: var(--row-hover); }
-  .profile-menu-item .meta { flex: 1; min-width: 0; }
-  .profile-menu-item .name {
-    font-weight: 500; font-size: 14px;
-    display: flex; align-items: center; gap: 6px;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .profile-menu-item .email {
-    font-size: 12px; color: var(--muted);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .profile-menu-item .selected-check {
-    color: var(--pink); font-size: 18px; font-weight: 700;
-    margin-left: 4px;
-  }
-  .role-badge {
-    font-size: 10px; font-weight: 600;
-    padding: 2px 7px; border-radius: 10px;
-    text-transform: uppercase; letter-spacing: .04em;
-    flex-shrink: 0;
-  }
-  .role-badge-host { background: #fef3c7; color: #92400e; }
-  .role-badge-sub { background: var(--pink-soft); color: var(--accent-strong); }
-  @media (prefers-color-scheme: dark) {
-    .role-badge-host { background: #44290c; color: #fcd34d; }
-  }
-  .profile-menu-divider {
-    height: 1px; background: var(--line); margin: 4px 0;
-  }
-  .profile-menu-footer {
-    padding: 10px 14px; font-size: 12px; color: var(--muted);
-  }
-  .profile-menu-footer a {
-    color: var(--accent-strong); cursor: pointer; text-decoration: none;
-  }
-  .profile-menu-footer a:hover { text-decoration: underline; }
-  .search input {
-    width: 100%; height: 38px; padding: 0 38px 0 38px;
-    border: 1px solid var(--line); border-radius: 10px;
-    background: var(--bg-soft); color: var(--ink); outline: none;
-    transition: border-color .15s, background .15s;
-  }
-  .search input:focus { border-color: var(--pink); background: var(--bg); }
-  .search input.has-query { background: var(--bg); border-color: var(--pink-rule); }
-  .search::before {
-    content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
-    font-size: 14px; opacity: .7; pointer-events: none;
-  }
-  .search-clear {
-    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
-    width: 22px; height: 22px; border-radius: 50%; border: none;
-    background: var(--row-hover); color: var(--ink-soft);
-    cursor: pointer; font-size: 14px; line-height: 1;
-    display: none;
-  }
-  .search-clear.show { display: flex; align-items: center; justify-content: center; }
-  .search-clear:hover { background: var(--line); color: var(--ink); }
-  .search-hint {
-    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
-    font-size: 11px; color: var(--muted); pointer-events: none;
-    display: none;
-  }
-  .search-hint.show { display: block; }
-  mark.search-hl {
-    background: var(--pink-soft); color: var(--accent-strong);
-    padding: 0 2px; border-radius: 2px; font-weight: 500;
-  }
-  .btn {
-    height: 36px; padding: 0 14px;
-    border: 1px solid var(--line); border-radius: 8px;
-    background: var(--bg-soft); color: var(--ink);
-    display: inline-flex; align-items: center; gap: 6px;
-  }
-  .btn:hover { background: var(--row-hover); }
-  .btn-primary {
-    background: var(--pink); color: white; border-color: var(--pink);
-  }
-  .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
-  .btn-ghost { background: transparent; border-color: transparent; padding: 0 10px; }
-  .btn-ghost:hover { background: var(--row-hover); }
-  /* ─── Two-pane layout (inbox list | message detail) ─────────────── */
-  .main { display: grid; grid-template-columns: 420px 1fr; overflow: hidden; }
-  @media (max-width: 1100px) { .main { grid-template-columns: 360px 1fr; } }
-  .pane { overflow-y: auto; border-right: 1px solid var(--line); }
-  .pane:last-child { border-right: none; }
-  .pane-header {
-    padding: 12px 14px 6px; font-size: 11px; font-weight: 600;
-    color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
-  }
-  /* ─── Inbox list ────────────────────────────────────────────────── */
-  .pane-inbox { background: var(--bg); }
-  .inbox-row {
-    padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--line);
-    display: grid; grid-template-rows: auto auto auto; gap: 2px;
-  }
-  .inbox-row:hover { background: var(--row-hover); }
-  .inbox-row.selected { background: var(--row-selected); }
-  .inbox-row.unread .subject { font-weight: 600; color: var(--ink); }
-  .inbox-row.unread::before {
-    content: ""; width: 8px; height: 8px; border-radius: 50%;
-    background: var(--unread-dot); position: absolute; margin-left: -12px; margin-top: 8px;
-  }
-  .inbox-row { position: relative; }
-  .inbox-from { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
-  .inbox-from .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
-  .inbox-from .date { font-variant-numeric: tabular-nums; flex-shrink: 0; }
-  .subject {
-    font-size: 14px; color: var(--ink-soft);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .preview {
-    font-size: 12px; color: var(--muted);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }
-  /* ─── Message detail ────────────────────────────────────────────── */
-  .pane-message { background: var(--bg); padding: 0; }
-  .msg-header {
-    padding: 20px 28px 12px;
-    border-bottom: 1px solid var(--pink-rule);
-    background: linear-gradient(to bottom, var(--pink-soft) 0%, transparent 100%);
-  }
-  .msg-subject { font-size: 20px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
-  .msg-meta { font-size: 13px; color: var(--ink-soft); display: grid; grid-template-columns: 60px 1fr; gap: 4px 12px; }
-  .msg-meta .label { color: var(--muted); }
-  .msg-meta .date { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
-  .msg-actions { display: flex; gap: 8px; margin-top: 14px; }
-  .msg-body {
-    padding: 20px 28px;
-    font-size: 14px; line-height: 1.65; color: var(--ink);
-    white-space: pre-wrap; word-wrap: break-word;
-  }
-  .msg-body h1, .msg-body h2, .msg-body h3 {
-    color: var(--pink); margin: 1.2em 0 .4em;
-  }
-  .msg-body h1 { font-size: 1.4em; }
-  .msg-body h2 { font-size: 1.2em; }
-  .msg-body h3 { font-size: 1.05em; }
-  .msg-body code {
-    background: var(--code-bg); color: var(--code-fg);
-    padding: 1px 5px; border-radius: 4px; font-size: 13px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-  .msg-body pre {
-    background: var(--code-bg); padding: 12px 14px; border-radius: 8px;
-    overflow-x: auto; font-size: 13px;
-  }
-  .msg-body pre code { background: transparent; padding: 0; color: var(--ink); }
-  .msg-body strong { color: var(--ink); }
-  .msg-body em { color: var(--ink-soft); }
-  .msg-body blockquote {
-    border-left: 3px solid var(--pink-rule);
-    margin: .8em 0; padding: .2em 0 .2em 12px;
-    color: var(--muted); white-space: pre-wrap;
-  }
-  .msg-body blockquote blockquote { border-left-color: #c084fc; }
-  .msg-body blockquote blockquote blockquote { border-left-color: #f59e0b; }
-  .msg-body table { border-collapse: collapse; margin: .5em 0; }
-  .msg-body th, .msg-body td { border: 1px solid var(--line); padding: 6px 10px; }
-  .msg-body th { background: var(--bg-soft); font-weight: 600; }
-  .msg-body ul, .msg-body ol { padding-left: 24px; }
-  .msg-body hr { border: none; border-top: 1px solid var(--line); margin: 1.2em 0; }
-  .msg-body a { color: var(--accent-strong); }
-  .msg-body input[type=checkbox] { margin-right: 6px; }
-  .msg-attachments {
-    padding: 12px 28px; border-top: 1px solid var(--line);
-    display: flex; flex-wrap: wrap; gap: 8px;
-  }
-  .msg-attachment {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
-    font-size: 12px; color: var(--ink-soft);
-  }
-  .msg-empty { padding: 80px 28px; text-align: center; color: var(--muted); }
-  .msg-empty .big { font-size: 48px; margin-bottom: 12px; opacity: .4; }
-  /* ─── Auth gate ─────────────────────────────────────────────────── */
-  .auth {
-    position: fixed; inset: 0; background: var(--bg);
-    display: flex; align-items: center; justify-content: center;
-    z-index: 10;
-  }
-  .auth-card {
-    width: 380px; padding: 28px;
-    border: 1px solid var(--line); border-radius: 14px;
-    background: var(--bg-soft);
-  }
-  .auth-card h1 { margin: 0 0 6px; font-size: 22px; color: var(--pink); }
-  .auth-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
-  .auth-card input {
-    width: 100%; height: 40px; padding: 0 12px; margin-bottom: 12px;
-    border: 1px solid var(--line); border-radius: 8px;
-    background: var(--bg); color: var(--ink); outline: none;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-  .auth-card input:focus { border-color: var(--pink); }
-  .auth-card .btn-primary { width: 100%; height: 40px; justify-content: center; }
-  .auth-err { color: #dc2626; font-size: 12px; margin-bottom: 12px; }
-  /* ─── Compose modal ─────────────────────────────────────────────── */
-  .modal-bg {
-    position: fixed; inset: 0; background: rgba(0,0,0,.4);
-    display: flex; align-items: center; justify-content: center;
-    z-index: 20;
-  }
-  .modal {
-    width: 640px; max-height: 80vh; overflow: hidden;
-    background: var(--bg); border-radius: 14px;
-    border: 1px solid var(--line);
-    display: grid; grid-template-rows: auto 1fr auto;
-  }
-  .modal-head {
-    padding: 14px 18px; border-bottom: 1px solid var(--line);
-    display: flex; justify-content: space-between; align-items: center;
-    font-weight: 600; color: var(--pink);
-  }
-  .modal-body { padding: 14px 18px; overflow-y: auto; }
-  .modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
-  .field { display: grid; grid-template-columns: 80px 1fr; gap: 8px; margin-bottom: 10px; align-items: center; }
-  .field label { color: var(--muted); font-size: 12px; }
-  .field input, .field textarea {
-    width: 100%; padding: 8px 10px;
-    border: 1px solid var(--line); border-radius: 6px;
-    background: var(--bg); color: var(--ink); outline: none;
-    font: inherit;
-  }
-  .field textarea { resize: vertical; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
-  .field input:focus, .field textarea:focus { border-color: var(--pink); }
-  .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
-  /* ─── Toast / status ────────────────────────────────────────────── */
-  .toast {
-    position: fixed; bottom: 20px; right: 20px; z-index: 30;
-    padding: 10px 16px; border-radius: 8px;
-    background: var(--ink); color: white; font-size: 13px;
-    opacity: 0; transform: translateY(8px); transition: all .2s;
-    pointer-events: none;
-  }
-  .toast.show { opacity: 1; transform: translateY(0); }
-  .toast.error { background: #dc2626; }
-</style>
+<title>AgenticMail</title>
+<link rel="icon" type="image/png" href="/branding/agenticmail-logo.png" />
+<link rel="stylesheet" href="styles.css" />
 </head>
 <body>
 <!-- ─── Auth gate (shown until master key is entered) ────────────── -->
-<div id="auth" class="auth">
+<div id="auth" class="auth-gate">
   <div class="auth-card">
-    <h1>🎀 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 />
-    <button class="btn btn-primary" onclick="signIn()">Sign in</button>
-    <p class="hint" style="margin-top:14px">Don't have the master key? Run <code class="mono">cat ~/.agenticmail/config.json</code> in your terminal.</p>
+    <button class="submit" id="auth-submit">Sign in</button>
+    <p class="mono" style="font-size:12px;color:var(--muted);margin-top:14px">Don't have the master key? Run <code>cat ~/.agenticmail/config.json</code> in your terminal.</p>
   </div>
 </div>
 <!-- ─── App shell ─────────────────────────────────────────────────── -->
 <div class="app" id="app" style="display:none">
+  <!-- Top bar -->
   <header class="topbar">
+    <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
     <div class="brand">
-      <span class="brand-bow">🎀</span>
-      <span>AgenticMail</span>
+      <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
+      <span class="brand-name">AgenticMail</span>
     </div>
-    <div class="search">
-      <input id="search-input" placeholder="Search this inbox — subject, sender, body, or from:name" autocomplete="off" />
+    <div class="search-container">
+      <span class="search-icon" data-icon="search"></span>
+      <input id="search-input" class="search-input" placeholder="Search mail" autocomplete="off" />
       <span id="search-hint" class="search-hint"></span>
-      <button id="search-clear" class="search-clear" onclick="clearSearch()" title="Clear (Esc)">✕</button>
+      <button id="search-clear" class="search-clear-btn" title="Clear (Esc)" data-icon="close"></button>
     </div>
-    <button class="btn btn-ghost" onclick="refresh()" title="Refresh (r)">⟳</button>
-    <button class="btn btn-primary" onclick="openCompose()">Compose</button>
-    <button id="profile-btn" class="profile" onclick="toggleProfileMenu(event)">
+    <div class="topbar-spacer"></div>
+    <button class="icon-btn" id="refresh-btn" title="Refresh (r)" data-icon="refresh"></button>
+    <button id="profile-btn" class="profile-trigger" title="Account">
       <span id="profile-avatar"></span>
-      <span class="profile-name" id="profile-name">Loading…</span>
-      <span class="profile-caret">▾</span>
     </button>
-    <div id="profile-menu" class="profile-menu" onclick="event.stopPropagation()">
-      <div class="profile-menu-section">Inbox</div>
+    <div id="profile-menu" class="profile-menu">
+      <div class="profile-menu-section">Inboxes</div>
       <div id="profile-menu-list"></div>
       <div class="profile-menu-divider"></div>
       <div class="profile-menu-footer">
-        <a onclick="signOut()">Sign out</a>
+        <a id="signout-link">Sign out</a>
       </div>
     </div>
   </header>
-  <div class="main">
-    <section class="pane pane-inbox">
-      <div class="pane-header"><span id="inbox-title">Inbox</span></div>
-      <div id="inbox-list"><div class="empty">Loading…</div></div>
+  <!-- Sidebar + content -->
+  <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>
+      </button>
+      <div class="folder-list" id="folder-list"></div>
+    </aside>
+    <section class="content" id="content">
+      <!-- list-view or message-view is rendered here by the router -->
+      <div class="empty"><div class="big" data-icon="bow" data-icon-size="48"></div>Loading…</div>
     </section>
-    <article class="pane pane-message">
-      <div id="message-view">
-        <div class="msg-empty">
-          <div class="big">🎀</div>
-          <div>Select an email to read it here.</div>
-        </div>
-      </div>
-    </article>
   </div>
 </div>
-<!-- ─── Compose modal ────────────────────────────────────────────── -->
-<div id="compose-bg" class="modal-bg" style="display:none" onclick="if(event.target===this) closeCompose()">
-  <div class="modal">
-    <div class="modal-head">
+<!-- ─── Compose modal (Gmail-style bottom-right popup) ───────────── -->
+<div id="compose-bg" class="compose-bg" style="display:none">
+  <div class="compose-modal">
+    <div class="compose-head">
       <span id="compose-title">New message</span>
-      <button class="btn btn-ghost" onclick="closeCompose()">✕</button>
+      <button id="compose-close" data-icon="close"></button>
     </div>
-    <div class="modal-body">
-      <div class="field"><label>From</label><select id="compose-from"></select></div>
-      <div class="field"><label>To</label><input id="compose-to" placeholder="alice@localhost, bob@localhost" /></div>
-      <div class="field"><label>Cc</label><input id="compose-cc" placeholder="(optional, comma-separated)" /></div>
-      <div class="field"><label>Wake</label><input id="compose-wake" placeholder="(optional) names to actually wake — e.g. alice, bob" /></div>
-      <div class="field"><label>Subject</label><input id="compose-subject" /></div>
-      <div class="field"><label>Body</label><textarea id="compose-body" placeholder="Markdown supported: **bold**, *italic*, `code`, ```fenced```, ## headings, lists, tables…"></textarea></div>
-      <div class="hint">Tip: pass <code class="mono">wake</code> to limit which CC'd agents get a Claude turn from the dispatcher. Leave blank to wake everyone CC'd (default). Add <code class="mono">[FINAL]</code> to the subject to close the thread.</div>
+    <div class="compose-body">
+      <div class="compose-row"><label>From</label><select id="compose-from"></select></div>
+      <div class="compose-row"><label>To</label><input id="compose-to" placeholder="alice@localhost, bob@localhost" /></div>
+      <div class="compose-row"><label>Cc</label><input id="compose-cc" placeholder="(optional)" /></div>
+      <div class="compose-row"><label>Wake</label><input id="compose-wake" placeholder="(optional) names to wake — e.g. alice, bob" /></div>
+      <div class="compose-row"><label>Subject</label><input id="compose-subject" /></div>
+      <textarea id="compose-body" placeholder="Markdown supported: **bold**, *italic*, `code`, ```fenced```, ## headings, lists, tables…"></textarea>
+      <p class="compose-hint">Tip: pass <code class="mono">wake</code> to limit which CC'd agents get a Claude turn. Add <code class="mono">[FINAL]</code> to the subject to close the thread.</p>
     </div>
-    <div class="modal-foot">
-      <button class="btn" onclick="closeCompose()">Cancel</button>
-      <button class="btn btn-primary" onclick="sendCompose()">Send</button>
+    <div class="compose-foot">
+      <button class="btn-send" id="compose-send">Send</button>
+      <button class="btn-discard" id="compose-cancel">Discard</button>
     </div>
   </div>
 </div>
 <div id="toast" class="toast"></div>
-<script>
-/* ─── State ──────────────────────────────────────────────────────── */
-const state = {
-  masterKey: null,
-  agents: [],
-  selectedAgent: null,
-  inboxMessages: [],
-  selectedUid: null,
-  currentMessage: null,
-  composeReplyContext: null,   // { uid, agent } when replying
-  searchQuery: '',
-  sseControllers: [],
-};
-const API_URL = window.location.origin;   // same origin as the API server
-document.getElementById('auth-api-url').textContent = API_URL;
-/* ─── Auth ───────────────────────────────────────────────────────── */
-async function signIn() {
-  const key = document.getElementById('auth-key').value.trim();
-  if (!key) return showAuthErr('Master key is required.');
-  // Verify by hitting /accounts (master-key gated).
-  try {
-    const resp = await fetch(`${API_URL}/api/agenticmail/accounts`, {
-      headers: { Authorization: `Bearer ${key}` },
-    });
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    localStorage.setItem('agenticmail.masterKey', key);
-    state.masterKey = key;
-    document.getElementById('auth').style.display = 'none';
-    document.getElementById('app').style.display = 'grid';
-    await bootstrap();
-  } catch (err) {
-    showAuthErr(`Sign-in failed: ${err.message}. Check the key and that the API is running on ${API_URL}.`);
-  }
-}
-function showAuthErr(msg) {
-  const e = document.getElementById('auth-err');
-  e.textContent = msg; e.style.display = 'block';
-}
-function signOut() {
-  localStorage.removeItem('agenticmail.masterKey');
-  location.reload();
-}
-document.getElementById('auth-key').addEventListener('keydown', e => {
-  if (e.key === 'Enter') signIn();
-});
-/* ─── API helpers ────────────────────────────────────────────────── */
-async function apiGet(path, opts = {}) {
-  const r = await fetch(`${API_URL}/api/agenticmail${path}`, {
-    headers: { Authorization: `Bearer ${opts.agentKey ?? state.masterKey}` },
-  });
-  if (!r.ok) throw new Error(`${r.status} ${path}`);
-  return await r.json();
-}
-async function apiPost(path, body, opts = {}) {
-  const r = await fetch(`${API_URL}/api/agenticmail${path}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${opts.agentKey ?? state.masterKey}`,
-    },
-    body: JSON.stringify(body),
-  });
-  if (!r.ok) throw new Error(`${r.status} ${path}`);
-  return await r.json();
-}
-/* ─── Bootstrap ──────────────────────────────────────────────────── */
-async function bootstrap() {
-  try {
-    const data = await apiGet('/accounts');
-    // Sort: bridge agent first (always pinned to top of the switcher),
-    // everyone else alphabetically.
-    const all = (data.agents ?? data ?? []);
-    all.sort((a, b) => {
-      const aBridge = isBridgeAgent(a) ? 0 : 1;
-      const bBridge = isBridgeAgent(b) ? 0 : 1;
-      if (aBridge !== bBridge) return aBridge - bBridge;
-      return a.name.localeCompare(b.name);
-    });
-    state.agents = all;
-    // Auto-select the bridge agent if present, otherwise the first agent.
-    // The bridge is the host's natural "main" inbox — it's the address
-    // every kickoff email gets CC'd to.
-    const initial = state.agents.find(isBridgeAgent) ?? state.agents[0];
-    if (initial) await selectAgent(initial);
-    renderProfile();
-    populateComposeFrom();
-    subscribeToAllAgents();
-    maybeRequestNotificationPermission();
-  } catch (err) {
-    toast(`Failed to load agents: ${err.message}`, true);
-  }
-}
-/* ─── Identity helpers ───────────────────────────────────────────── */
-//
-// The bridge agent (default name "claudecode") is the host's
-// identity inside AgenticMail — the address every Claude Code
-// session uses to send/receive on its own behalf. We surface it
-// differently in the UI: Claude's orange asterisk icon as the
-// avatar, a "Host" badge, and a verified checkmark badge so users
-// can tell at a glance which inbox is the orchestrator's.
-function isBridgeAgent(agent) {
-  if (!agent) return false;
-  const name = (agent.name ?? '').toLowerCase();
-  const role = (agent.role ?? '').toLowerCase();
-  return name === 'claudecode' || name === 'claude' || role === 'bridge';
-}
-// Deterministic color picker for non-bridge avatars — stable per
-// agent name so each teammate keeps the same color across sessions.
-const AVATAR_PALETTE = [
-  '#ec4899', // pink
-  '#8b5cf6', // violet
-  '#3b82f6', // blue
-  '#06b6d4', // cyan
-  '#10b981', // emerald
-  '#f59e0b', // amber
-  '#ef4444', // red
-  '#84cc16', // lime
-];
-function avatarColorFor(name) {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
-  return AVATAR_PALETTE[hash % AVATAR_PALETTE.length];
-}
-// Inline SVG approximating Claude's orange asterisk mark. We render
-// the bridge agent's avatar with this so the host inbox is visually
-// recognisable at a glance.
-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>`;
-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">✓</span></span>`;
-  }
-  const initial = (agent.name ?? '?').slice(0, 1).toUpperCase();
-  const color = avatarColorFor(agent.name ?? '');
-  return `<span class="${cls}" style="background:${color}">${escapeHtml(initial)}</span>`;
-}
-/* ─── Profile switcher (top-right Gmail-style dropdown) ──────────── */
-function renderProfile() {
-  const a = state.selectedAgent;
-  // Compute total unread across non-selected agents → red dot on
-  // the profile button as a "you have new mail elsewhere" cue.
-  const totalOtherUnread = Object.entries(state.unread ?? {})
-    .filter(([id]) => id !== a?.id)
-    .reduce((sum, [, n]) => sum + n, 0);
-  document.getElementById('profile-avatar').innerHTML = a
-    ? avatarHtml(a) + (totalOtherUnread > 0 ? '<span class="avatar-check" style="background:#dc2626">●</span>' : '')
-    : '';
-  document.getElementById('profile-name').textContent = a ? a.name : '—';
-  const list = document.getElementById('profile-menu-list');
-  list.innerHTML = state.agents.map(agent => {
-    const selected = state.selectedAgent?.id === agent.id;
-    const badge = isBridgeAgent(agent)
-      ? '<span class="role-badge role-badge-host">Host</span>'
-      : '<span class="role-badge role-badge-sub">Sub-agent</span>';
-    const check = selected ? '<span class="selected-check">✓</span>' : '';
-    const unread = state.unread?.[agent.id] ?? 0;
-    const unreadDot = unread > 0
-      ? `<span class="role-badge" style="background:var(--pink);color:white;">${unread} new</span>`
-      : '';
-    return `
-      <div class="profile-menu-item" data-id="${agent.id}">
-        ${avatarHtml(agent, 'avatar-lg')}
-        <div class="meta">
-          <div class="name">${escapeHtml(agent.name)} ${badge} ${unreadDot}</div>
-          <div class="email">${escapeHtml(agent.email ?? '')}</div>
-        </div>
-        ${check}
-      </div>
-    `;
-  }).join('');
-  list.querySelectorAll('.profile-menu-item').forEach(el => {
-    el.addEventListener('click', () => {
-      const id = el.dataset.id;
-      const agent = state.agents.find(a => a.id === id);
-      if (agent && agent.id !== state.selectedAgent?.id) {
-        selectAgent(agent);
-      }
-      closeProfileMenu();
-    });
-  });
-}
-function toggleProfileMenu(e) {
-  if (e) e.stopPropagation();
-  const menu = document.getElementById('profile-menu');
-  menu.classList.toggle('open');
-}
-function closeProfileMenu() {
-  document.getElementById('profile-menu').classList.remove('open');
-}
-// Close on outside click.
-document.addEventListener('click', e => {
-  const menu = document.getElementById('profile-menu');
-  const btn = document.getElementById('profile-btn');
-  if (!menu || !btn) return;
-  if (!menu.contains(e.target) && !btn.contains(e.target)) closeProfileMenu();
-});
-async function selectAgent(agent) {
-  state.selectedAgent = agent;
-  state.selectedUid = null;
-  state.currentMessage = null;
-  document.getElementById('inbox-title').textContent = `Inbox — ${agent.name}`;
-  document.querySelector('.pane-message #message-view').innerHTML = `
-    <div class="msg-empty"><div class="big">🎀</div><div>Select an email to read it here.</div></div>
-  `;
-  renderProfile();
-  await loadInbox(agent);
-}
-/* ─── Inbox list ─────────────────────────────────────────────────── */
-async function loadInbox(agent) {
-  document.getElementById('inbox-list').innerHTML = '<div class="empty">Loading…</div>';
-  try {
-    const data = await apiGet('/mail/inbox?limit=50&offset=0', { agentKey: agent.apiKey });
-    state.inboxMessages = data.messages ?? [];
-    renderInbox();
-  } catch (err) {
-    document.getElementById('inbox-list').innerHTML = `<div class="empty">Failed to load: ${escapeHtml(err.message)}</div>`;
-  }
-}
-// Parse a Gmail-style query into structured filters + free-text.
-// Supports `from:`, `subject:` operators (case-insensitive). Anything
-// outside an operator is free-text matched against subject + body
-// + sender (case-insensitive substring). Quotes group multi-word values.
-//
-//   "from:vesper"           → only mail FROM vesper
-//   "subject:audit"         → only mail with "audit" in the subject
-//   "audit from:vesper"     → both must match
-//   "build small game"      → free-text match anywhere
-function parseSearch(query) {
-  const filters = { from: '', subject: '', text: '' };
-  const remaining = [];
-  const tokenRe = /(\w+):("([^"]*)"|(\S+))|("([^"]*)"|(\S+))/g;
-  let m;
-  while ((m = tokenRe.exec(query)) !== null) {
-    const op = m[1]?.toLowerCase();
-    const opVal = (m[3] ?? m[4] ?? '').toLowerCase();
-    const free = (m[6] ?? m[7] ?? '').toLowerCase();
-    if (op === 'from') filters.from = opVal;
-    else if (op === 'subject') filters.subject = opVal;
-    else if (free) remaining.push(free);
-  }
-  filters.text = remaining.join(' ');
-  return filters;
-}
-function matchesSearch(msg, filters) {
-  const fromAddr = (msg.from?.[0]?.address ?? '').toLowerCase();
-  const fromName = (msg.from?.[0]?.name ?? '').toLowerCase();
-  const subject = (msg.subject ?? '').toLowerCase();
-  const preview = (msg.preview ?? '').toLowerCase();
-  if (filters.from && !fromAddr.includes(filters.from) && !fromName.includes(filters.from)) return false;
-  if (filters.subject && !subject.includes(filters.subject)) return false;
-  if (filters.text) {
-    const hay = `${fromAddr} ${fromName} ${subject} ${preview}`;
-    if (!hay.includes(filters.text)) return false;
-  }
-  return true;
-}
-// Wrap matches in <mark> for visual highlight. Escapes input first.
-function highlightTerm(text, term) {
-  const safe = escapeHtml(text ?? '');
-  if (!term) return safe;
-  // Build a case-insensitive regex but escape the term for safety.
-  const escaped = term.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
-  return safe.replace(new RegExp(`(${escaped})`, 'ig'), '<mark class="search-hl">$1</mark>');
-}
-function renderInbox() {
-  const root = document.getElementById('inbox-list');
-  const q = state.searchQuery.trim();
-  const filters = q ? parseSearch(q) : null;
-  const filtered = filters
-    ? state.inboxMessages.filter(m => matchesSearch(m, filters))
-    : state.inboxMessages;
-  // Pick the term used for visual highlighting — the most "primary"
-  // user intent. `subject:` wins over `from:` wins over free text.
-  const hlTerm = filters?.subject || filters?.from || filters?.text || '';
-  // Hint shows match count when filtering.
-  const hintEl = document.getElementById('search-hint');
-  if (q) {
-    hintEl.textContent = `${filtered.length}/${state.inboxMessages.length}`;
-    hintEl.classList.add('show');
-  } else {
-    hintEl.classList.remove('show');
-  }
-  if (filtered.length === 0) {
-    root.innerHTML = q
-      ? `<div class="empty">No messages match "${escapeHtml(q)}".<br><br><a onclick="clearSearch()" style="cursor:pointer;color:var(--accent-strong)">Clear search</a></div>`
-      : '<div class="empty">Inbox is empty.</div>';
-    return;
-  }
-  root.innerHTML = filtered.map(m => {
-    const unread = !(m.flags ?? []).includes('\\Seen');
-    const fromAddr = m.from?.[0]?.address ?? '?';
-    const fromName = m.from?.[0]?.name || fromAddr;
-    const subject = m.subject ?? '(no subject)';
-    const date = formatDate(m.date);
-    return `
-      <div class="inbox-row ${unread ? 'unread' : ''} ${state.selectedUid === m.uid ? 'selected' : ''}" data-uid="${m.uid}">
-        <div class="inbox-from">
-          <span class="name">${highlightTerm(fromName, hlTerm)}</span>
-          <span class="date">${escapeHtml(date)}</span>
-        </div>
-        <div class="subject">${highlightTerm(subject, hlTerm)}</div>
-        <div class="preview">${highlightTerm((m.preview ?? '').slice(0, 120), hlTerm)}</div>
-      </div>
-    `;
-  }).join('');
-  root.querySelectorAll('.inbox-row').forEach(el => {
-    el.addEventListener('click', () => openMessage(Number(el.dataset.uid)));
-  });
-}
-function clearSearch() {
-  const input = document.getElementById('search-input');
-  input.value = '';
-  state.searchQuery = '';
-  input.classList.remove('has-query');
-  document.getElementById('search-clear').classList.remove('show');
-  document.getElementById('search-hint').classList.remove('show');
-  renderInbox();
-  input.focus();
-}
-/* ─── Message view ───────────────────────────────────────────────── */
-async function openMessage(uid) {
-  if (!state.selectedAgent) return;
-  state.selectedUid = uid;
-  renderInbox();
-  document.querySelector('.pane-message #message-view').innerHTML = '<div class="msg-empty">Loading…</div>';
-  try {
-    const msg = await apiGet(`/mail/messages/${uid}`, { agentKey: state.selectedAgent.apiKey });
-    state.currentMessage = msg;
-    renderMessage(msg);
-  } catch (err) {
-    document.querySelector('.pane-message #message-view').innerHTML =
-      `<div class="msg-empty"><div>Failed to load: ${escapeHtml(err.message)}</div></div>`;
-  }
-}
-function renderMessage(msg) {
-  const view = document.querySelector('.pane-message #message-view');
-  const fromStr = (msg.from ?? []).map(a => a.name ? `${a.name} <${a.address}>` : a.address).join(', ') || '?';
-  const toStr = (msg.to ?? []).map(a => a.name ? `${a.name} <${a.address}>` : a.address).join(', ') || '?';
-  const ccStr = (msg.cc ?? []).map(a => a.address).join(', ');
-  const attachmentsHtml = (msg.attachments ?? []).length > 0
-    ? `<div class="msg-attachments">${msg.attachments.map(a =>
-        `<span class="msg-attachment">📎 ${escapeHtml(a.filename ?? '(unnamed)')} ${a.size ? `(${Math.round(a.size/1024)}KB)` : ''}</span>`
-      ).join('')}</div>`
-    : '';
-  const bodyText = msg.text ?? stripHtml(msg.html ?? '');
-  view.innerHTML = `
-    <div class="msg-header">
-      <h2 class="msg-subject">${escapeHtml(msg.subject ?? '(no subject)')}</h2>
-      <div class="msg-meta">
-        <span class="label">From</span><span>${escapeHtml(fromStr)}</span>
-        <span class="label">To</span><span>${escapeHtml(toStr)}</span>
-        ${ccStr ? `<span class="label">Cc</span><span>${escapeHtml(ccStr)}</span>` : ''}
-        <span class="label">Date</span><span class="date">${escapeHtml(formatDateFull(msg.date))}</span>
-      </div>
-      <div class="msg-actions">
-        <button class="btn" onclick="reply(false)">↩ Reply</button>
-        <button class="btn" onclick="reply(true)">↩↩ Reply all</button>
-        <button class="btn btn-ghost" onclick="markUnread()">Mark unread</button>
-      </div>
-    </div>
-    <div class="msg-body">${renderMarkdown(bodyText)}</div>
-    ${attachmentsHtml}
-  `;
-}
-/* ─── Markdown rendering (small, sufficient for agent emails) ────── */
-function renderMarkdown(src) {
-  if (!src) return '<div class="empty">(no body)</div>';
-  // Convert quoted-reply chains to blockquotes BEFORE escaping so HTML
-  // tagging survives. Each quote level wraps in <blockquote>.
-  const lines = src.split('\n');
-  let out = '';
-  let codeFence = false;
-  let codeBuf = [];
-  let codeLang = '';
-  let listBuf = null;   // { type: 'ul'|'ol', items: [...] }
-  let blockquoteDepth = 0;
-  function flushList() {
-    if (!listBuf) return;
-    out += `<${listBuf.type}>${listBuf.items.map(i => `<li>${i}</li>`).join('')}</${listBuf.type}>`;
-    listBuf = null;
-  }
-  function setBlockquote(depth) {
-    while (blockquoteDepth < depth) { out += '<blockquote>'; blockquoteDepth++; }
-    while (blockquoteDepth > depth) { out += '</blockquote>'; blockquoteDepth--; }
-  }
-  for (const rawLine of lines) {
-    // Fenced code block toggle.
-    const fence = rawLine.match(/^\s*```([\w+-]*)\s*$/);
-    if (fence) {
-      if (codeFence) {
-        out += `<pre><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`;
-        codeBuf = []; codeFence = false; codeLang = '';
-      } else {
-        flushList();
-        codeFence = true; codeLang = fence[1];
-      }
-      continue;
-    }
-    if (codeFence) { codeBuf.push(rawLine); continue; }
-    // Quote depth.
-    let line = rawLine, depth = 0;
-    while (/^>/.test(line)) { depth++; line = line.replace(/^>\s?/, ''); }
-    if (depth !== blockquoteDepth) { flushList(); setBlockquote(depth); }
-    // Headings.
-    const heading = line.match(/^(#{1,6})\s+(.+?)\s*#*\s*$/);
-    if (heading) {
-      flushList();
-      const level = heading[1].length;
-      out += `<h${Math.min(level, 6)}>${inlineMd(heading[2])}</h${Math.min(level, 6)}>`;
-      continue;
-    }
-    // Horizontal rule.
-    if (/^\s*(?:-{3,}|_{3,}|\*{3,})\s*$/.test(line)) { flushList(); out += '<hr>'; continue; }
-    // Task list.
-    const task = line.match(/^(\s*)([-*+])\s+\[([ xX])\]\s+(.*)$/);
-    if (task) {
-      const checked = task[3] !== ' ';
-      const item = `<input type="checkbox" disabled ${checked ? 'checked' : ''}> ${inlineMd(task[4])}`;
-      if (!listBuf || listBuf.type !== 'ul') { flushList(); listBuf = { type: 'ul', items: [] }; }
-      listBuf.items.push(item);
-      continue;
-    }
-    // Bullet list.
-    const bullet = line.match(/^(\s*)([-*+])\s+(.*)$/);
-    if (bullet) {
-      if (!listBuf || listBuf.type !== 'ul') { flushList(); listBuf = { type: 'ul', items: [] }; }
-      listBuf.items.push(inlineMd(bullet[3]));
-      continue;
-    }
-    // Numbered list.
-    const numbered = line.match(/^(\s*)(\d+)[.)]\s+(.*)$/);
-    if (numbered) {
-      if (!listBuf || listBuf.type !== 'ol') { flushList(); listBuf = { type: 'ol', items: [] }; }
-      listBuf.items.push(inlineMd(numbered[3]));
-      continue;
-    }
-    // Table (light support: pipe-bounded rows + separator).
-    if (/^\s*\|.*\|\s*$/.test(line)) {
-      flushList();
-      const cells = line.trim().slice(1, -1).split('|').map(c => inlineMd(c.trim()));
-      // Heuristic: separator row marks header → use <th>.
-      if (/^\s*\|?(\s*:?-{3,}:?\s*\|)+/.test(line)) {
-        // Skip the separator line.
-        continue;
-      }
-      out += `<table><tr>${cells.map(c => `<td>${c}</td>`).join('')}</tr></table>`;
-      continue;
-    }
-    // Blank line.
-    if (line.trim() === '') { flushList(); out += '<br>'; continue; }
-    // Paragraph (with inline markdown).
-    flushList();
-    out += `<div>${inlineMd(line)}</div>`;
-  }
-  flushList();
-  setBlockquote(0);
-  return out;
-}
-function inlineMd(text) {
-  // Escape first, then re-introduce safe HTML for markdown shapes.
-  let s = escapeHtml(text);
-  // Inline code.
-  s = s.replace(/`([^`\n]+)`/g, (_, c) => `<code>${c}</code>`);
-  // Bold+italic, bold, italic.
-  s = s.replace(/\*\*\*([^*\n]+)\*\*\*/g, '<strong><em>$1</em></strong>');
-  s = s.replace(/___([^_\n]+)___/g, '<strong><em>$1</em></strong>');
-  s = s.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
-  s = s.replace(/__([^_\n]+)__/g, '<strong>$1</strong>');
-  s = s.replace(/(^|[^\w*])\*([^*\n]+)\*(?!\w)/g, '$1<em>$2</em>');
-  s = s.replace(/(^|[^\w_])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
-  // Strikethrough.
-  s = s.replace(/~~([^~\n]+)~~/g, '<del>$1</del>');
-  // Links + auto-links.
-  s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
-  s = s.replace(/&lt;(https?:\/\/[^&\s]+)&gt;/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
-  return s;
-}
-function stripHtml(s) { return (s ?? '').replace(/<[^>]*>/g, ''); }
-/* ─── Date formatting ────────────────────────────────────────────── */
-function formatDate(iso) {
-  if (!iso) return '';
-  const d = new Date(iso); if (Number.isNaN(d.getTime())) return '';
-  const now = new Date();
-  const sameDay = d.toDateString() === now.toDateString();
-  if (sameDay) return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
-  const days = Math.round((now - d) / (24 * 3600 * 1000));
-  if (days < 7) return d.toLocaleDateString(undefined, { weekday: 'short' });
-  if (d.getFullYear() === now.getFullYear()) return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
-}
-function formatDateFull(iso) {
-  if (!iso) return '';
-  const d = new Date(iso); if (Number.isNaN(d.getTime())) return '';
-  const now = new Date();
-  const deltaMs = now - d;
-  let rel = '';
-  if (deltaMs < 45_000) rel = 'just now';
-  else if (deltaMs < 60 * 60 * 1000) rel = `${Math.round(deltaMs / 60_000)} minutes ago`;
-  else if (deltaMs < 24 * 60 * 60 * 1000) rel = `${Math.round(deltaMs / 3_600_000)} hours ago`;
-  const abs = d.toLocaleString(undefined, {
-    weekday: 'short', month: 'short', day: 'numeric',
-    hour: 'numeric', minute: '2-digit',
-    ...(d.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),
-  });
-  return rel ? `${rel} — ${abs}` : abs;
-}
-/* ─── Compose ────────────────────────────────────────────────────── */
-function populateComposeFrom() {
-  const sel = document.getElementById('compose-from');
-  sel.innerHTML = state.agents.map(a => `<option value="${a.id}">${escapeHtml(a.name)} &lt;${escapeHtml(a.email)}&gt;</option>`).join('');
-}
-function openCompose() {
-  state.composeReplyContext = null;
-  document.getElementById('compose-title').textContent = 'New message';
-  if (state.selectedAgent) document.getElementById('compose-from').value = state.selectedAgent.id;
-  ['compose-to', 'compose-cc', 'compose-wake', 'compose-subject', 'compose-body'].forEach(id => document.getElementById(id).value = '');
-  document.getElementById('compose-bg').style.display = 'flex';
-  setTimeout(() => document.getElementById('compose-to').focus(), 50);
-}
-function closeCompose() { document.getElementById('compose-bg').style.display = 'none'; }
-function reply(replyAll) {
-  if (!state.currentMessage) return;
-  const msg = state.currentMessage;
-  state.composeReplyContext = { uid: msg.uid, agent: state.selectedAgent, replyAll };
-  document.getElementById('compose-title').textContent = `Reply${replyAll ? ' all' : ''} to: ${msg.subject ?? '(no subject)'}`;
-  document.getElementById('compose-from').value = state.selectedAgent.id;
-  const fromAddr = msg.from?.[0]?.address ?? '';
-  let toAddr = fromAddr;
-  if (replyAll) {
-    const all = [fromAddr, ...(msg.to ?? []).map(a => a.address), ...(msg.cc ?? []).map(a => a.address)]
-      .filter(Boolean).filter((v, i, a) => a.indexOf(v) === i)
-      .filter(addr => addr !== state.selectedAgent.email);
-    toAddr = all.join(', ');
-  }
-  document.getElementById('compose-to').value = toAddr;
-  document.getElementById('compose-cc').value = '';
-  document.getElementById('compose-wake').value = '';
-  document.getElementById('compose-subject').value =
-    (msg.subject ?? '').startsWith('Re:') ? msg.subject : `Re: ${msg.subject ?? ''}`;
-  const quoted = (msg.text ?? '').split('\n').map(l => `> ${l}`).join('\n');
-  const stub = `\n\nOn ${msg.date}, ${fromAddr} wrote:\n${quoted}`;
-  document.getElementById('compose-body').value = stub;
-  document.getElementById('compose-bg').style.display = 'flex';
-  setTimeout(() => document.getElementById('compose-body').focus(), 50);
-}
-async function sendCompose() {
-  const agentId = document.getElementById('compose-from').value;
-  const agent = state.agents.find(a => a.id === agentId);
-  if (!agent) return toast('Pick an agent to send from.', true);
-  const to = document.getElementById('compose-to').value.trim();
-  const subject = document.getElementById('compose-subject').value.trim();
-  const text = document.getElementById('compose-body').value;
-  const cc = document.getElementById('compose-cc').value.trim();
-  const wakeRaw = document.getElementById('compose-wake').value.trim();
-  if (!to || !subject) return toast('To and Subject are required.', true);
-  const body = { to, subject, text };
-  if (cc) body.cc = cc;
-  if (wakeRaw) body.wake = wakeRaw.split(',').map(s => s.trim()).filter(Boolean);
-  try {
-    await apiPost('/mail/send', body, { agentKey: agent.apiKey });
-    closeCompose();
-    toast('Sent.');
-    if (state.selectedAgent?.id === agent.id) await loadInbox(agent);
-  } catch (err) {
-    toast(`Send failed: ${err.message}`, true);
-  }
-}
-/* ─── Mark unread ────────────────────────────────────────────────── */
-async function markUnread() {
-  if (!state.currentMessage || !state.selectedAgent) return;
-  try {
-    await apiPost(`/mail/messages/${state.currentMessage.uid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
-    toast('Marked unread.');
-    await loadInbox(state.selectedAgent);
-  } catch (err) { toast(`Failed: ${err.message}`, true); }
-}
-/* ─── Refresh ────────────────────────────────────────────────────── */
-async function refresh() {
-  if (state.selectedAgent) {
-    await loadInbox(state.selectedAgent);
-    toast('Refreshed.');
-  }
-}
-/* ─── Search ─────────────────────────────────────────────────────── */
-//
-// Gmail-style operators (from:, subject:) + free-text. Debounced so
-// typing fast doesn't re-render on every keystroke. Esc clears.
-let searchDebounce = null;
-document.getElementById('search-input').addEventListener('input', e => {
-  const v = e.target.value;
-  e.target.classList.toggle('has-query', v.length > 0);
-  document.getElementById('search-clear').classList.toggle('show', v.length > 0);
-  if (searchDebounce) clearTimeout(searchDebounce);
-  searchDebounce = setTimeout(() => {
-    state.searchQuery = v;
-    renderInbox();
-  }, 80);
-});
-document.getElementById('search-input').addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    e.preventDefault();
-    clearSearch();
-  }
-});
-/* ─── Real-time SSE — Gmail-style live updates ──────────────────── */
-//
-// Every agent gets its own SSE subscription. New-mail events are
-// fanned out to three places:
-//
-//   1. Inbox list — if the agent is the one currently open, prepend
-//      the new message without a full reload (instant "ping" feel).
-//   2. Profile dropdown — bump the per-agent unread badge so the user
-//      sees other inboxes activity at a glance.
-//   3. Browser notification — fires a system notification (with
-//      permission) so you get pinged even when the tab is in the
-//      background. Click the notification to jump to the message.
-function subscribeToAllAgents() {
-  // Tear down any previous controllers.
-  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(() => { /* connection dropped — browser will retry on user action */ });
-  }
-}
-async function handleSseEvent(agent, event) {
-  if (event.type !== 'new') return;
-  // 1. Bump the unread counter for this agent. Stored on state so
-  //    the profile dropdown picks it up next render.
-  state.unread = state.unread ?? {};
-  state.unread[agent.id] = (state.unread[agent.id] ?? 0) + 1;
-  renderProfile();
-  // 2. If this agent's inbox is currently open → reload inbox in
-  //    place. We use loadInbox rather than a manual prepend because
-  //    the API normalises message ordering, pagination, and IMAP UID
-  //    resolution; replicating that client-side would drift.
-  const isOpen = state.selectedAgent?.id === agent.id;
-  if (isOpen) {
-    await loadInbox(agent);
-    flashInboxArrival();
-    state.unread[agent.id] = 0;   // user is looking — clear the badge
-    renderProfile();
-  }
-  // 3. Browser notification (only if the user granted permission).
-  fireBrowserNotification(agent, event, isOpen);
-  // 4. Sound a soft toast for in-app awareness regardless of permission.
-  if (!isOpen) {
-    const fromAddr = event.from?.address ?? event.from ?? 'someone';
-    const subject = event.subject ?? '(no subject)';
-    toast(`${agent.name}: ${subject} — from ${fromAddr}`);
-  }
-}
-// Small green flash animation at the top of the inbox list to draw
-// the eye when a new message arrives in the currently-open inbox.
-function flashInboxArrival() {
-  const el = document.getElementById('inbox-list');
-  if (!el) return;
-  el.style.transition = 'background-color .15s';
-  el.style.backgroundColor = 'rgba(34, 197, 94, 0.08)';
-  setTimeout(() => { el.style.backgroundColor = ''; }, 600);
-}
-// ─── Browser notifications ───────────────────────────────────────
-// Ask once on first load; remember the answer in localStorage so we
-// don't pester the user on every refresh. If the user denied, we
-// silently fall back to the in-app toast only.
-function maybeRequestNotificationPermission() {
-  if (!('Notification' in window)) return;
-  if (Notification.permission === 'granted' || Notification.permission === 'denied') return;
-  const asked = localStorage.getItem('agenticmail.notif.asked');
-  if (asked) return;
-  // Defer the ask by a couple of seconds so it doesn't pop on load.
-  setTimeout(() => {
-    Notification.requestPermission().finally(() => {
-      localStorage.setItem('agenticmail.notif.asked', '1');
-    });
-  }, 2000);
-}
-function fireBrowserNotification(agent, event, isOpen) {
-  if (!('Notification' in window) || Notification.permission !== 'granted') return;
-  // Don't ping if the user is already looking at this inbox AND the
-  // tab is visible — they can see the flash themselves.
-  if (isOpen && document.visibilityState === 'visible') return;
-  const fromAddr = event.from?.address ?? event.from ?? 'unknown sender';
-  const subject = event.subject ?? '(no subject)';
-  const body = `${agent.name} — from ${fromAddr}`;
-  try {
-    const n = new Notification(subject, {
-      body,
-      icon: '/favicon.ico',
-      tag: `agenticmail-${agent.id}-${event.uid}`,
-      silent: false,
-    });
-    n.onclick = () => {
-      window.focus();
-      // Switch to that agent's inbox and open the message.
-      if (state.selectedAgent?.id !== agent.id) selectAgent(agent);
-      if (event.uid) openMessage(event.uid);
-      n.close();
-    };
-  } catch { /* notification failed — user still gets the in-app toast */ }
-}
-/* ─── Toast ──────────────────────────────────────────────────────── */
-function toast(msg, error = false) {
-  const t = document.getElementById('toast');
-  t.textContent = msg;
-  t.classList.toggle('error', error);
-  t.classList.add('show');
-  clearTimeout(t._timer);
-  t._timer = setTimeout(() => t.classList.remove('show'), 2500);
-}
-/* ─── Utils ──────────────────────────────────────────────────────── */
-function escapeHtml(s) {
-  return String(s ?? '')
-    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-/* ─── Keyboard shortcuts (Gmail-style) ───────────────────────────── */
-//   r  refresh current inbox
-//   c  compose new
-//   /  focus the search box
-//   ?  show help (not implemented yet — reserved)
-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.key === 'r') refresh();
-  if (e.key === 'c') openCompose();
-  if (e.key === '/') {
-    e.preventDefault();
-    document.getElementById('search-input').focus();
-  }
-});
-/* ─── Boot ───────────────────────────────────────────────────────── */
-(() => {
-  // 1. Auto-sign-in via `?key=...` URL parameter. The CLI's
-  //    `agenticmail web` command passes the master key on the URL so
-  //    the user lands signed in without a paste step. We accept it
-  //    once, persist to localStorage, then strip the param out of the
-  //    address bar via history.replaceState so it doesn't end up in
-  //    browser history, Referer headers, or accidental screen shares.
-  //    Safe because the URL is loopback-only and the key belongs to
-  //    the same user who's looking at the screen.
-  try {
-    const params = new URL(location.href).searchParams;
-    const urlKey = params.get('key');
-    if (urlKey) {
-      localStorage.setItem('agenticmail.masterKey', urlKey);
-      // Clean the URL without reloading.
-      const clean = location.pathname + location.hash;
-      history.replaceState({}, '', clean);
-    }
-  } catch { /* malformed URL — fall through to localStorage / auth gate */ }
-  // 2. Use whatever's now in localStorage (just-stored URL key, or
-  //    previous session's stored key). If neither, the auth gate
-  //    stays up and asks for manual entry.
-  const saved = localStorage.getItem('agenticmail.masterKey');
-  if (saved) {
-    state.masterKey = saved;
-    document.getElementById('auth').style.display = 'none';
-    document.getElementById('app').style.display = 'grid';
-    bootstrap();
-  }
-})();
-</script>
+<script type="module" src="js/app.js"></script>
 </body>
 </html>