@agenticmail/api 0.7.9 → 0.7.12

package/dist/index.js

@@ -7,8 +7,8 @@ import express from "express";
 import cors from "cors";
 import rateLimit from "express-rate-limit";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { dirname as dirname2, join as join2 } from "path";
-import { existsSync } from "fs";
+import { dirname as dirname2, join as join3 } from "path";
+import { existsSync as existsSync2 } from "fs";
 import {
   resolveConfig,
   getDatabase,
@@ -4680,15 +4680,15 @@ function createStorageRoutes(rawDb, accountManager2, config, dialect = "sqlite")
 
 // src/routes/dispatcher-activity.ts
 import { Router as Router13 } from "express";
-var ACTIVE_TTL_MS = 30 * 60 * 1e3;
+import { existsSync, readFileSync as readFileSync2, statSync } from "fs";
+import { homedir } from "os";
+import { join as join2 } from "path";
+var STALE_HEARTBEAT_MS = 90 * 1e3;
 var RECENT_TTL_MS = 2 * 60 * 1e3;
 var HARD_CAP = 256;
 var active = /* @__PURE__ */ new Map();
 var recent = /* @__PURE__ */ new Map();
 function prune(nowMs) {
-  for (const [id, w] of active) {
-    if (nowMs - w.startedAtMs > ACTIVE_TTL_MS) active.delete(id);
-  }
   for (const [id, w] of recent) {
     const t = w.endedAtMs ?? w.startedAtMs;
     if (nowMs - t > RECENT_TTL_MS) recent.delete(id);
@@ -4718,7 +4718,9 @@ function createDispatcherActivityRoutes() {
       agentEmail: typeof body.agentEmail === "string" ? body.agentEmail : void 0,
       kind: typeof body.kind === "string" ? body.kind : "unknown",
       trigger: body.trigger && typeof body.trigger === "object" ? body.trigger : void 0,
-      startedAtMs: Date.now()
+      startedAtMs: Date.now(),
+      lastHeartbeatMs: Date.now(),
+      turnCount: 0
     };
     prune(info.startedAtMs);
     active.set(info.workerId, info);
@@ -4748,7 +4750,8 @@ function createDispatcherActivityRoutes() {
       },
       endedAtMs: nowMs,
       ok: body.ok === false ? false : true,
-      resultPreview: typeof body.resultPreview === "string" ? body.resultPreview.slice(0, 240) : void 0
+      resultPreview: typeof body.resultPreview === "string" ? body.resultPreview.slice(0, 240) : void 0,
+      turnCount: typeof body.turnCount === "number" ? body.turnCount : existing?.turnCount
     };
     active.delete(body.workerId);
     recent.set(body.workerId, info);
@@ -4762,6 +4765,22 @@ function createDispatcherActivityRoutes() {
     }
     res.json({ ok: true });
   });
+  router.post("/dispatcher/worker-heartbeat", requireMaster, (req, res) => {
+    const body = req.body ?? {};
+    if (typeof body.workerId !== "string") {
+      res.status(400).json({ error: "workerId is required" });
+      return;
+    }
+    const existing = active.get(body.workerId);
+    if (!existing) {
+      res.json({ ok: true, ignored: "unknown worker" });
+      return;
+    }
+    existing.lastHeartbeatMs = Date.now();
+    if (typeof body.lastTool === "string") existing.lastTool = body.lastTool;
+    if (typeof body.turnCount === "number") existing.turnCount = body.turnCount;
+    res.json({ ok: true });
+  });
   router.get("/dispatcher/activity", requireMaster, (_req, res) => {
     const nowMs = Date.now();
     prune(nowMs);
@@ -4769,7 +4788,9 @@ function createDispatcherActivityRoutes() {
       now: nowMs,
       active: Array.from(active.values()).map((w) => ({
         ...w,
-        durationMs: nowMs - w.startedAtMs
+        durationMs: nowMs - w.startedAtMs,
+        stale: w.lastHeartbeatMs !== void 0 && nowMs - w.lastHeartbeatMs > STALE_HEARTBEAT_MS,
+        heartbeatAgeMs: w.lastHeartbeatMs !== void 0 ? nowMs - w.lastHeartbeatMs : void 0
       })),
       recent: Array.from(recent.values()).map((w) => ({
         ...w,
@@ -4777,6 +4798,35 @@ function createDispatcherActivityRoutes() {
       }))
     });
   });
+  router.get("/dispatcher/worker-log/:workerId", requireMaster, (req, res) => {
+    const rawId = String(req.params.workerId ?? "");
+    if (!rawId) {
+      res.status(400).json({ error: "workerId is required" });
+      return;
+    }
+    const lines = Math.min(Math.max(Number(req.query.lines ?? 80), 1), 1e3);
+    const safe = rawId.replace(/[^a-zA-Z0-9._-]/g, "_");
+    const path = join2(homedir(), ".agenticmail", "worker-logs", `${safe}.log`);
+    if (!existsSync(path)) {
+      res.status(404).json({ error: "no log file for that workerId" });
+      return;
+    }
+    try {
+      const raw = readFileSync2(path, "utf-8");
+      const stat = statSync(path);
+      const all = raw.split(/\r?\n/);
+      const tail = all.filter(Boolean).slice(-lines);
+      res.json({
+        workerId: rawId,
+        path,
+        bytes: stat.size,
+        lines: tail.length,
+        tail
+      });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
   return router;
 }
 
@@ -4852,15 +4902,15 @@ function createApp(configOverrides) {
   const staticDir = (() => {
     const here = dirname2(fileURLToPath2(import.meta.url));
     const candidates = [
-      join2(here, "..", "public"),
-      join2(here, "public")
+      join3(here, "..", "public"),
+      join3(here, "public")
     ];
-    for (const c of candidates) if (existsSync(c)) return c;
+    for (const c of candidates) if (existsSync2(c)) return c;
     return null;
   })();
   if (staticDir) {
     app2.use("/", express.static(staticDir, { index: "index.html", extensions: ["html"] }));
-    app2.get("/ui", (_req, res) => res.sendFile(join2(staticDir, "index.html")));
+    app2.get("/ui", (_req, res) => res.sendFile(join3(staticDir, "index.html")));
   }
   app2.use("/api/agenticmail", createHealthRoutes(stalwart));
   app2.use("/api/agenticmail", createInboundRoutes(accountManager2, config, gatewayManager));
@@ -4889,9 +4939,9 @@ function createApp(configOverrides) {
 }
 
 // src/index.ts
-import { readFileSync as readFileSync2 } from "fs";
+import { readFileSync as readFileSync3 } from "fs";
 import { fileURLToPath as fileURLToPath3 } from "url";
-import { dirname as dirname3, join as join3 } from "path";
+import { dirname as dirname3, join as join4 } from "path";
 await prepareIntegrations();
 function getLocalIp() {
   const nets = networkInterfaces();
@@ -4906,7 +4956,7 @@ function getLocalIp() {
 var VERSION = (() => {
   try {
     const __dirname = dirname3(fileURLToPath3(import.meta.url));
-    const pkg = JSON.parse(readFileSync2(join3(__dirname, "..", "package.json"), "utf-8"));
+    const pkg = JSON.parse(readFileSync3(join4(__dirname, "..", "package.json"), "utf-8"));
     return pkg.version;
   } catch {
     return "0.5.31";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.7.9",
+  "version": "0.7.12",
   "description": "REST API server for AgenticMail — email and SMS endpoints for AI agents",
   "type": "module",
   "main": "dist/index.js",

package/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/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/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/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/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/public/styles.css

@@ -78,14 +78,27 @@ 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; }
+/* The brand bow PNG ships with transparent background — no rounded
+   crop, no fill. Sits flush against the topbar. */
+.brand-logo {
+  width: 36px; height: 36px;
+  flex-shrink: 0;
+  display: block;
+  object-fit: contain;
+}
 .brand-name {
   font: 500 22px/1 'Google Sans', sans-serif;
   color: var(--pink);
 }
+.auth-card .brand-logo {
+  width: 32px; height: 32px;
+  vertical-align: middle;
+  display: inline-block;
+}
 
 .search-container {
   flex: 1; max-width: 720px;
@@ -196,9 +209,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 +244,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 ──────────────────────────────────────────────────────── */