@agenticmail/api 0.7.14 → 0.7.15

package/package.json

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

package/public/index.html

@@ -23,12 +23,14 @@
 
 <!-- ─── App shell ─────────────────────────────────────────────────── -->
 <div class="app" id="app" style="display:none">
-  <!-- Top bar -->
+  <!-- Top bar — three-column grid: left chrome, centered search, right buttons. -->
   <header class="topbar">
-    <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
-    <div class="brand">
-      <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
-      <span class="brand-name">AgenticMail</span>
+    <div class="topbar-left">
+      <button class="menu-btn" id="menu-btn" title="Menu" data-icon="menu"></button>
+      <div class="brand">
+        <img src="/branding/agenticmail-logo.png" alt="AgenticMail" class="brand-logo" />
+        <span class="brand-name">AgenticMail</span>
+      </div>
     </div>
     <div class="search-container">
       <span class="search-icon" data-icon="search"></span>
@@ -36,11 +38,12 @@
       <span id="search-hint" class="search-hint"></span>
       <button id="search-clear" class="search-clear-btn" title="Clear (Esc)" data-icon="close"></button>
     </div>
-    <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>
-    </button>
+    <div class="topbar-right">
+      <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>
+      </button>
+    </div>
     <div id="profile-menu" class="profile-menu">
       <div class="profile-menu-section">Inboxes</div>
       <div id="profile-menu-list"></div>

package/public/styles.css

@@ -65,12 +65,22 @@ a { color: var(--accent-strong); }
 }
 
 /* ─── Top bar ──────────────────────────────────────────────────────── */
+/* Three-column grid: [menu+brand] · [centered search] · [right buttons].
+   A flex topbar with `flex: 1` on both the search and a trailing
+   spacer split the remaining space evenly so the search drifted
+   left of the visual middle. The grid centers the search column
+   in the actual page width regardless of how wide the side groups
+   get. */
 .topbar {
-  display: flex; align-items: center; gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center; gap: 8px;
   padding: 8px 16px;
   background: var(--bg-soft);
   position: relative; z-index: 10;
 }
+.topbar-left  { display: flex; align-items: center; gap: 8px; justify-self: start; }
+.topbar-right { display: flex; align-items: center; gap: 4px; justify-self: end; }
 .menu-btn {
   width: 40px; height: 40px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -101,7 +111,12 @@ a { color: var(--accent-strong); }
 }
 
 .search-container {
-  flex: 1; max-width: 720px;
+  /* Lives in the centered grid column of `.topbar`. Width caps at
+     720px (Gmail's actual cap), but stretches to fill the column
+     when the viewport is narrower. */
+  width: 720px;
+  max-width: 100%;
+  min-width: 280px;
   position: relative;
 }
 .search-input {
@@ -138,7 +153,6 @@ a { color: var(--accent-strong); }
 }
 .search-hint.show { display: block; }
 
-.topbar-spacer { flex: 1; }
 .icon-btn {
   width: 40px; height: 40px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -267,10 +281,15 @@ a { color: var(--accent-strong); }
   .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; }
+  /* On mobile, drop the centered grid in favour of [chrome | search | account].
+     The search expands to fill whatever space is left. */
+  .topbar {
+    padding: 8px 8px; gap: 4px;
+    grid-template-columns: auto 1fr auto;
+  }
   .brand { min-width: auto; }
-  .brand-name { font-size: 18px; }
-  .search-container { max-width: none; }
+  .brand-name { font-size: 18px; display: none; }
+  .search-container { width: auto; min-width: 0; }
   .search-input { height: 40px; font-size: 14px; }
   /* On narrow screens, drop the checkbox + From column. Sender goes
      in a small line above subject+preview to mimic Gmail's mobile
@@ -309,7 +328,6 @@ a { color: var(--accent-strong); }
   .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) {
@@ -490,12 +508,22 @@ mark.search-hl {
   background: var(--bg);
   position: sticky; top: 0; z-index: 5;
   flex-shrink: 0;
+  /* Toolbar spans full width (so the back button sticks to the
+     left edge of the content pane) but its action group could be
+     centered later if needed. Keeping it full-width matches Gmail. */
 }
 .message-toolbar .icon-btn { width: 36px; height: 36px; font-size: 16px; }
 .message-toolbar .toolbar-spacer { flex: 1; }
 
+/* Centered reading column for the open message — Gmail caps body
+   content around ~840px so long-line text doesn't sprawl across
+   ultrawide displays. Header, body, and attachments all share
+   the same centering rule so they line up vertically. */
 .message-header {
   padding: 32px 32px 16px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-subject {
   font: 400 22px/1.3 'Google Sans', sans-serif;
@@ -524,7 +552,9 @@ mark.search-hl {
   font-size: 14px; line-height: 1.65;
   color: var(--ink);
   white-space: pre-wrap; word-wrap: break-word;
-  max-width: 800px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-body h1, .message-body h2, .message-body h3 {
   color: var(--pink); margin: 1.2em 0 .4em;
@@ -562,6 +592,9 @@ mark.search-hl {
 .message-attachments {
   padding: 12px 32px; border-top: 1px solid var(--line);
   display: flex; flex-wrap: wrap; gap: 8px;
+  max-width: 840px;
+  margin: 0 auto;
+  width: 100%;
 }
 .message-attachment {
   display: inline-flex; align-items: center; gap: 8px;