From 99f5a854dbb956a54a56f852f56532ddcdf7590a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 15:55:15 -0300
Subject: [PATCH 01/24] Give status tiles a tooltip label, add the mail glyphs,
 and leave text fields without a focus ring

Text fields and editors now mark focus with the caret alone; buttons, links
and other controls keep the keyboard-only ring.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/icons/mail-icons.tsx  | 260 +++++++++++++++++-
 apps/web/src/components/icons/nav-icons.tsx   |   2 +-
 .../components/maily-editor/maily-theme.css   |  22 +-
 apps/web/src/components/status-tile.tsx       |  21 +-
 apps/web/src/styles/components.css            |  56 +---
 apps/web/src/styles/tokens/motion.css         |   1 -
 6 files changed, 281 insertions(+), 81 deletions(-)

diff --git a/apps/web/src/components/icons/mail-icons.tsx b/apps/web/src/components/icons/mail-icons.tsx
index e6c7ba669..068682efe 100644
--- a/apps/web/src/components/icons/mail-icons.tsx
+++ b/apps/web/src/components/icons/mail-icons.tsx
@@ -1,13 +1,17 @@
 /**
- * Thread-action glyphs (move, label) — path data from Lucide 1.31.0
- * (© Lucide contributors, ISC license: https://lucide.dev/license), drawn on
- * the nav glyphs' frame and stroke. 14px: they sit in buttons and menu rows.
+ * Mail glyphs — thread actions, row kinds, screening verdicts and received
+ * events. Path data from Lucide 1.31.0 (© Lucide contributors, ISC license:
+ * https://lucide.dev/license), drawn on the nav glyphs' 24-unit frame. 14px by
+ * default; a tile passes a heavier stroke so the glyph keeps the weight of the
+ * 16-unit envelope and event glyphs beside it.
  */
 import { Svg } from "./nav-icons";
 
-export function FolderInputIcon({ size = 14 }: { size?: number }) {
+type IconProps = { size?: number; strokeWidth?: number | undefined };
+
+export function FolderInputIcon({ size = 14, strokeWidth }: IconProps) {
   return (
-    <Svg size={size}>
+    <Svg size={size} strokeWidth={strokeWidth}>
       <path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1" />
       <path d="M2 13h10" />
       <path d="m9 16 3-3-3-3" />
@@ -15,9 +19,9 @@ export function FolderInputIcon({ size = 14 }: { size?: number }) {
   );
 }
 
-export function ArchiveIcon({ size = 14 }: { size?: number }) {
+export function ArchiveIcon({ size = 14, strokeWidth }: IconProps) {
   return (
-    <Svg size={size}>
+    <Svg size={size} strokeWidth={strokeWidth}>
       <rect x="2" y="3" width="20" height="5" rx="1" />
       <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
       <path d="M10 12h4" />
@@ -26,9 +30,9 @@ export function ArchiveIcon({ size = 14 }: { size?: number }) {
 }
 
 /** lucide octagon-alert. */
-export function SpamIcon({ size = 14 }: { size?: number }) {
+export function SpamIcon({ size = 14, strokeWidth }: IconProps) {
   return (
-    <Svg size={size}>
+    <Svg size={size} strokeWidth={strokeWidth}>
       <path d="M12 16h.01" />
       <path d="M12 8v4" />
       <path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z" />
@@ -37,9 +41,9 @@ export function SpamIcon({ size = 14 }: { size?: number }) {
 }
 
 /** lucide trash-2. */
-export function TrashIcon({ size = 14 }: { size?: number }) {
+export function TrashIcon({ size = 14, strokeWidth }: IconProps) {
   return (
-    <Svg size={size}>
+    <Svg size={size} strokeWidth={strokeWidth}>
       <path d="M3 6h18" />
       <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
       <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
@@ -49,11 +53,241 @@ export function TrashIcon({ size = 14 }: { size?: number }) {
   );
 }
 
-export function TagIcon({ size = 14 }: { size?: number }) {
+export function TagIcon({ size = 14, strokeWidth }: IconProps) {
   return (
-    <Svg size={size}>
+    <Svg size={size} strokeWidth={strokeWidth}>
       <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" />
       <circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
     </Svg>
   );
 }
+
+/** A static lucide inbox; the nav's InboxesGlyph animates. */
+export function InboxIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </Svg>
+  );
+}
+
+export function MailsIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M17 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 1-1.732" />
+      <path d="m22 5.5-6.419 4.179a2 2 0 0 1-2.162 0L7 5.5" />
+      <rect x="7" y="3" width="15" height="12" rx="2" />
+    </Svg>
+  );
+}
+
+export function AsteriskIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M12 6v12" />
+      <path d="M17.196 9 6.804 15" />
+      <path d="m6.804 9 10.392 6" />
+    </Svg>
+  );
+}
+
+export function BotIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M12 8V4H8" />
+      <rect x="4" y="8" width="16" height="12" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </Svg>
+  );
+}
+
+/** A static lucide users; the nav's audience glyph animates. */
+export function UsersIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <path d="M16 3.128a4 4 0 0 1 0 7.744" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+      <circle cx="9" cy="7" r="4" />
+    </Svg>
+  );
+}
+
+export function BugIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M12 20v-9" />
+      <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M21 21a4 4 0 0 0-3.81-4" />
+      <path d="M21 5a4 4 0 0 1-3.55 3.97" />
+      <path d="M22 13h-4" />
+      <path d="M3 21a4 4 0 0 1 3.81-4" />
+      <path d="M3 5a4 4 0 0 0 3.55 3.97" />
+      <path d="M6 13H2" />
+      <path d="m8 2 1.88 1.88" />
+      <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
+    </Svg>
+  );
+}
+
+export function LockIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <rect x="3" y="11" width="18" height="11" rx="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </Svg>
+  );
+}
+
+export function LockOpenIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <rect x="3" y="11" width="18" height="11" rx="2" />
+      <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+    </Svg>
+  );
+}
+
+export function ClockIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </Svg>
+  );
+}
+
+const SHIELD =
+  "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z";
+
+export function ShieldCheckIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d={SHIELD} />
+      <path d="m9 12 2 2 4-4" />
+    </Svg>
+  );
+}
+
+export function ShieldAlertIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d={SHIELD} />
+      <path d="M12 8v4" />
+      <path d="M12 16h.01" />
+    </Svg>
+  );
+}
+
+export function ShieldHalfIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d={SHIELD} />
+      <path d="M12 22V2" />
+    </Svg>
+  );
+}
+
+export function ScanEyeIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+      <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+      <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+      <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+      <circle cx="12" cy="12" r="1" />
+      <path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0" />
+    </Svg>
+  );
+}
+
+export function PaperclipIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" />
+    </Svg>
+  );
+}
+
+export function ReplyIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M20 18v-2a4 4 0 0 0-4-4H4" />
+      <path d="m9 17-5-5 5-5" />
+    </Svg>
+  );
+}
+
+export function ForwardIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="m15 17 5-5-5-5" />
+      <path d="M4 18v-2a4 4 0 0 1 4-4h12" />
+    </Svg>
+  );
+}
+
+/** A static lucide webhook; the nav's webhooks glyph animates. */
+export function WebhookIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" />
+      <path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" />
+      <path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" />
+    </Svg>
+  );
+}
+
+/** lucide undo-2 — Restore, out of Trash. */
+export function RestoreIcon({ size = 14, strokeWidth }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M9 14 4 9l5-5" />
+      <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" />
+    </Svg>
+  );
+}
+
+export function XIcon({ size = 14, strokeWidth = 1.8 }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </Svg>
+  );
+}
+
+export function PencilIcon({ size = 13, strokeWidth = 1.6 }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+      <path d="m15 5 4 4" />
+    </Svg>
+  );
+}
+
+export function ChevronLeftIcon({ size = 14, strokeWidth = 1.8 }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <path d="m15 18-6-6 6-6" />
+    </Svg>
+  );
+}
+
+export function ImageOffIcon({ size = 14, strokeWidth = 1.6 }: IconProps) {
+  return (
+    <Svg size={size} strokeWidth={strokeWidth}>
+      <line x1="2" x2="22" y1="2" y2="22" />
+      <path d="M10.41 10.41a2 2 0 1 1-2.83-2.83" />
+      <line x1="13.5" x2="6" y1="13.5" y2="21" />
+      <line x1="18" x2="21" y1="12" y2="15" />
+      <path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59" />
+      <path d="M21 15V5a2 2 0 0 0-2-2H9" />
+    </Svg>
+  );
+}
diff --git a/apps/web/src/components/icons/nav-icons.tsx b/apps/web/src/components/icons/nav-icons.tsx
index 2406b16de..b74a8e2a2 100644
--- a/apps/web/src/components/icons/nav-icons.tsx
+++ b/apps/web/src/components/icons/nav-icons.tsx
@@ -25,7 +25,7 @@ export function Svg({
   children,
 }: {
   size: number;
-  strokeWidth?: number;
+  strokeWidth?: number | undefined;
   children: React.ReactNode;
 }) {
   return (
diff --git a/apps/web/src/components/maily-editor/maily-theme.css b/apps/web/src/components/maily-editor/maily-theme.css
index 918dfc666..d20d1aab2 100644
--- a/apps/web/src/components/maily-editor/maily-theme.css
+++ b/apps/web/src/components/maily-editor/maily-theme.css
@@ -148,13 +148,8 @@ body:has(.ms-modal-overlay):not(:has(.ms-modal-overlay .ms-maily))
 .ms-maily-compact .ms-maily-surface {
   min-height: 120px;
 }
-/* The body's frame takes the ring a textarea would. Tiptap gives the body
-   tabindex="0", so the global [tabindex="0"] ring would draw a second, square
-   ring inside the frame's, its corners past the frame's rounded ones. */
-.ms-maily .ms-maily-surface:focus-within {
-  border-color: var(--ms-focus-border);
-  box-shadow: var(--ms-focus-ring);
-}
+/* A text field marks focus with its caret alone. Tiptap gives the body
+   tabindex="0", which the global [tabindex="0"] ring would otherwise box. */
 .ms-maily .ProseMirror:focus-visible {
   box-shadow: none;
 }
@@ -266,9 +261,6 @@ body:has(.ms-modal-overlay):not(:has(.ms-modal-overlay .ms-maily))
   padding: 5px 8px;
   outline: none;
 }
-.ms-varpop-input:focus {
-  border-color: var(--ms-line-strong);
-}
 .ms-varpop-input::placeholder {
   color: var(--ms-faint);
 }
@@ -415,10 +407,6 @@ body:has(.ms-modal-overlay):not(:has(.ms-modal-overlay .ms-maily))
 .ms-maily-picker-search input::placeholder {
   color: var(--ms-faint);
 }
-/* The popover is the focus surface; the global input ring would draw a box inside it. */
-.ms-maily-picker-search input:focus-visible {
-  box-shadow: none;
-}
 .ms-maily-picker-list {
   max-height: 320px;
   overflow-y: auto;
@@ -488,9 +476,6 @@ body:has(.ms-modal-overlay):not(:has(.ms-modal-overlay .ms-maily))
   font-size: 12px;
   outline: none;
 }
-.ms-maily-picker-fallback:focus {
-  border-color: var(--ms-line-strong);
-}
 .ms-maily-picker-fallback::placeholder {
   color: var(--ms-faint);
 }
@@ -522,9 +507,6 @@ body:has(.ms-modal-overlay):not(:has(.ms-modal-overlay .ms-maily))
   font-size: 12.5px;
   outline: none;
 }
-.ms-maily-linkbox input:focus {
-  border-color: var(--ms-line-strong);
-}
 
 /* ---- Maily's tippy popups (slash + variable suggestions) --------------- */
 /* Maily scopes its Tailwind preflight to #mly-editor, but these popups mount
diff --git a/apps/web/src/components/status-tile.tsx b/apps/web/src/components/status-tile.tsx
index 71020241d..61e784ac4 100644
--- a/apps/web/src/components/status-tile.tsx
+++ b/apps/web/src/components/status-tile.tsx
@@ -1,5 +1,6 @@
 import type { NavIconName } from "./icons/nav-icons";
 import { NavGlyph } from "./icons/nav-icons";
+import { Tooltip } from "./tooltip";
 
 /** Tile tint per badge tone, so a row's tile and its status pill read as one. */
 export const TONE_COLOR = {
@@ -14,19 +15,24 @@ export const TONE_COLOR = {
  * Rounded-square tile tinted by a status color, framing a small glyph: the
  * envelope on email rows, a section's nav glyph on the other lists. One frame
  * and one tint rule, so every list leads with the same mark.
+ *
+ * A `label` names what the tile means ("Quarantined", "Agent inbox") in a
+ * hover tooltip and to screen readers; without one the tile is decoration.
  */
 export function StatusTile({
   color,
   size = 28,
+  label,
   children,
 }: {
   color: string;
   size?: number;
+  label?: string | undefined;
   children: React.ReactNode;
 }) {
-  return (
+  const tile = (
     <span
-      aria-hidden="true"
+      {...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true })}
       style={{
         width: size,
         height: size,
@@ -43,6 +49,13 @@ export function StatusTile({
       {children}
     </span>
   );
+  return label ? (
+    <Tooltip inline text={label}>
+      {tile}
+    </Tooltip>
+  ) : (
+    tile
+  );
 }
 
 /** A section's nav glyph in a status tile — the row mark for lists other than emails. */
@@ -50,13 +63,15 @@ export function NavTile({
   name,
   color,
   size = 28,
+  label,
 }: {
   name: NavIconName;
   color: string;
   size?: number;
+  label?: string | undefined;
 }) {
   return (
-    <StatusTile color={color} size={size}>
+    <StatusTile color={color} size={size} label={label}>
       <NavGlyph name={name} size={Math.round(size * 0.5)} />
     </StatusTile>
   );
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index afe74c713..6c1fc3455 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -618,10 +618,6 @@ table.ms-table {
   box-sizing: border-box;
   transition: box-shadow var(--ms-dur-fast) var(--ms-ease);
 }
-.ms-input:focus {
-  border-color: var(--ms-focus-border);
-  box-shadow: var(--ms-focus-ring);
-}
 .ms-input.error {
   background: var(--ms-danger-bg);
   border-color: var(--ms-danger-border);
@@ -1770,14 +1766,24 @@ svg:focus {
 /* The same policy, globally: nothing ever shows the browser's default ring,
    and every interactive control without a rule of its own (nav links, tabs,
    table links, focusable spans) draws the steel ring on :focus-visible.
-   Component rules above and below win on specificity where they differ. */
+   Component rules above and below win on specificity where they differ.
+   Text fields and editors are left out on purpose: their caret is the only
+   focus mark, so a click into a field never draws a ring around it. */
 :focus {
   outline: none;
 }
 a:focus-visible,
 button:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
+input:is(
+  [type="checkbox"],
+  [type="radio"],
+  [type="color"],
+  [type="range"],
+  [type="file"],
+  [type="button"],
+  [type="submit"],
+  [type="reset"]
+):focus-visible,
 select:focus-visible,
 summary:focus-visible,
 [tabindex="0"]:focus-visible {
@@ -1897,11 +1903,6 @@ summary:focus-visible,
 .ms-menu-search::placeholder {
   color: var(--ms-faint);
 }
-/* The panel is the focus surface; the global input ring, clipped by the
-   panel, would show as a band under the hairline. */
-.ms-menu-search:focus-visible {
-  box-shadow: none;
-}
 /* Non-interactive menu row (e.g. the Appearance row): keeps the item metrics,
    drops the hover affordance. */
 .ms-menu-item.static {
@@ -3336,11 +3337,6 @@ input[type="number"]::-webkit-inner-spin-button {
   border-radius: 7px;
   background: var(--ms-inset);
   color: var(--ms-muted);
-  transition: box-shadow var(--ms-dur-fast) var(--ms-ease);
-}
-.ms-code-find:focus-within {
-  border-color: var(--ms-focus-border);
-  box-shadow: var(--ms-focus-ring);
 }
 .ms-code-find input {
   flex: 1 1 auto;
@@ -3360,19 +3356,6 @@ input[type="number"]::-webkit-inner-spin-button {
 .ms-code-find input::placeholder {
   color: var(--ms-faint);
 }
-/* The frame shows the focus ring (:focus-within); the bare input must not add its own. */
-.ms-code-find input:focus-visible {
-  box-shadow: none;
-}
-/* The token input (chip-multi-select.tsx) works the same way: the rounded
-   frame takes the ring, never a square around the bare input inside. */
-.ms-chip-input:focus-within {
-  border-color: var(--ms-focus-border);
-  box-shadow: var(--ms-focus-ring);
-}
-.ms-chip-input input:focus-visible {
-  box-shadow: none;
-}
 .ms-code-find-count {
   flex: none;
   padding: 0 6px;
@@ -3416,21 +3399,12 @@ input[type="number"]::-webkit-inner-spin-button {
   border-radius: var(--ms-r-input);
   background: var(--ms-inset);
   overflow: hidden;
-  transition: box-shadow var(--ms-dur-fast) var(--ms-ease);
 }
 /* Under its toolbar row the frame joins the head: line-tone at rest, no top rounding. */
 .ms-tpl-code-source .ms-code-editor {
   border-color: var(--ms-line);
   border-radius: 0 0 var(--ms-r-input) var(--ms-r-input);
 }
-.ms-code-editor:focus-within {
-  border-color: var(--ms-focus-border);
-  box-shadow: var(--ms-focus-ring);
-}
-.ms-tpl-code-source .ms-code-editor:focus-within {
-  /* The head above would sit outside a ring; the border colour alone marks focus. */
-  box-shadow: none;
-}
 /* Mirror and textarea share every metric that moves a glyph. */
 .ms-code-editor-hl,
 .ms-code-editor-input {
@@ -3459,10 +3433,6 @@ input[type="number"]::-webkit-inner-spin-button {
   -webkit-text-fill-color: transparent;
   caret-color: var(--ms-bone);
 }
-.ms-code-editor-input:focus-visible {
-  /* The ring sits on the frame (focus-within), where overflow: hidden cannot clip it. */
-  box-shadow: none;
-}
 .ms-code-editor-input::selection {
   background: color-mix(in srgb, var(--ms-info) 32%, transparent);
 }
diff --git a/apps/web/src/styles/tokens/motion.css b/apps/web/src/styles/tokens/motion.css
index e5955d149..f91a00b78 100644
--- a/apps/web/src/styles/tokens/motion.css
+++ b/apps/web/src/styles/tokens/motion.css
@@ -5,6 +5,5 @@
   --ms-dur-drawer: 240ms; /* drawers, modals */
   --ms-dur-digit: 400ms; /* odometer roll per digit-cascade step (300–500ms) */
   --ms-ease: cubic-bezier(0.25, 0, 0.15, 1);
-  --ms-focus-border: var(--ms-line-strong);
   --ms-focus-ring: 0 0 0 2px rgba(127, 135, 145, 0.35); /* steel-tinted — the only glow */
 }

From f37aa267ac4c000ae6e0333789fc2bc45324ad38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:36:21 -0300
Subject: [PATCH 02/24] Share the email events strip's node, connector and
 placeholder

The sent email page drew its events strip inline, with its own copy of the
event tones. The received email page needs the same nodes, so the node (tile,
pulse, pill, time, detail), the connector with its duration label and the
loading placeholder now live beside the event glyphs, and the sent page's
duplicate tone map folds into emailStatusColor.

The sent strip renders as before. A connector with no time to tell keeps a
blank label so its line stays at the tiles' height, and a wrapping detail
breaks a long word instead of clipping it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/app/(dashboard)/emails/[id]/page.tsx  | 189 ++++--------------
 apps/web/src/components/email-status-icon.tsx | 179 ++++++++++++++++-
 2 files changed, 210 insertions(+), 158 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/emails/[id]/page.tsx b/apps/web/src/app/(dashboard)/emails/[id]/page.tsx
index 775f0c079..c323652ae 100644
--- a/apps/web/src/app/(dashboard)/emails/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/emails/[id]/page.tsx
@@ -12,10 +12,16 @@ import { Breakable } from "@/components/breakable";
 import { CopyBlock, CopyChip } from "@/components/copy-chip";
 import { Drawer } from "@/components/drawer";
 import { EmailContentPanel } from "@/components/email-content-panel";
-import { EmailStatusIcon, EventIconTile } from "@/components/email-status-icon";
+import {
+  EmailStatusIcon,
+  EventGap,
+  EventIconTile,
+  EventNode,
+  EventStripSkeleton,
+} from "@/components/email-status-icon";
 import { GuidanceBlock } from "@/components/guidance-block";
 import { Crumb, CrumbEnd, PageHeader } from "@/components/page-header";
-import { Skeleton, SkeletonBadge, SkeletonChip } from "@/components/skeleton";
+import { Skeleton, SkeletonChip } from "@/components/skeleton";
 import { BtnSpinner } from "@/components/spinner";
 import { Tooltip } from "@/components/tooltip";
 import { suppressedAtAccept } from "@/lib/email-events";
@@ -47,30 +53,6 @@ type EventType =
   | "prefetched"
   | "unsubscribed";
 
-/**
- * Ledger word color per the canvas: sent stays muted (it's the baseline,
- * not an outcome), delivered succeeds, opens/clicks inform, bounce and
- * suppression are dangers, complaints warn.
- */
-const EVENT_COLOR: Record<EventType, string> = {
-  queued: "var(--ms-muted)",
-  queued_quota: "var(--ms-muted)",
-  sent: "var(--ms-muted)",
-  delivery_delayed: "var(--ms-neutral)",
-  delivered: "var(--ms-success)",
-  opened: "var(--ms-info)",
-  clicked: "var(--ms-info)",
-  bounced: "var(--ms-danger)",
-  complained: "var(--ms-warn)",
-  suppressed: "var(--ms-danger)",
-  rendering_failure: "var(--ms-danger)",
-  failed: "var(--ms-danger)",
-  // A machine's fetch, not an outcome: the same muted tone as sent.
-  prefetched: "var(--ms-muted)",
-  // An opt-out through this email's link: a warning-tone outcome, like a complaint.
-  unsubscribed: "var(--ms-warn)",
-};
-
 function isPrefetchReason(value: unknown): value is PrefetchReason {
   return typeof value === "string" && (PREFETCH_REASONS as readonly string[]).includes(value);
 }
@@ -314,29 +296,7 @@ function EmailDetailSkeleton() {
 
       <div style={{ marginTop: 26 }}>
         <div className="ms-microlabel">{t("detail.events")}</div>
-        <div className="ms-events">
-          {[0, 1, 2].map((index) => (
-            <div key={index} style={{ display: "contents" }}>
-              {index > 0 ? (
-                <div className="ms-events-gap">
-                  <span className="ms-mono" style={{ fontSize: 10.5, display: "flex" }}>
-                    <Skeleton width={32} height="1lh" />
-                  </span>
-                  <span className="ms-events-line" />
-                </div>
-              ) : null}
-              <div className="ms-events-node">
-                <Skeleton width={34} height={34} radius={10} />
-                <span style={{ marginTop: 10, display: "flex" }}>
-                  <SkeletonBadge width={74} />
-                </span>
-                <span style={{ fontSize: 12, marginTop: 7, display: "flex" }}>
-                  <Skeleton width={96} height="1lh" />
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
+        <EventStripSkeleton />
       </div>
 
       <div
@@ -881,7 +841,6 @@ export default function EmailDetailPage() {
             {groups.map((group, index) => {
               const { type, first } = group;
               const count = group.occurrences.length;
-              const latest = index === groups.length - 1;
               const previous = index > 0 ? groups[index - 1] : undefined;
               // Connector deltas run between first occurrences — the group's
               // anchor — so the strip stays chronological even when a later
@@ -912,116 +871,40 @@ export default function EmailDetailPage() {
                       : count > 1
                         ? ("group" as const)
                         : null;
-              // Icon-tile node: glyph tile, status pill, timestamp, detail —
-              // the connector line meets the tiles at their vertical center.
-              const card = (
-                <>
-                  <span style={{ position: "relative", display: "inline-flex" }}>
-                    <EventIconTile type={type} />
-                    {latest && type !== "prefetched" ? (
-                      <span
-                        style={{
-                          position: "absolute",
-                          top: -3,
-                          right: -3,
-                          width: 7,
-                          height: 7,
-                          borderRadius: "50%",
-                          background: EVENT_COLOR[type],
-                          animation: "ms-pulse 2s infinite",
-                        }}
-                      />
-                    ) : null}
-                  </span>
-                  <span
-                    title={type === "prefetched" ? t("detail.prefetchedHint") : undefined}
-                    style={{
-                      marginTop: 10,
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: 5,
-                      padding: "3px 9px",
-                      borderRadius: "var(--ms-r-chip)",
-                      // Dashed: it happened, and it does not count.
-                      border: `1px ${type === "prefetched" ? "dashed" : "solid"} color-mix(in srgb, ${EVENT_COLOR[type]} 35%, var(--ms-line))`,
-                      background: `color-mix(in srgb, ${EVENT_COLOR[type]} ${type === "prefetched" ? 4 : 10}%, var(--ms-panel))`,
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: EVENT_COLOR[type],
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    {eventLabel(type)}
-                    {count > 1 ? (
-                      <span className="ms-mono" style={{ fontSize: 10, fontWeight: 500 }}>
-                        ×{count}
-                      </span>
-                    ) : null}
-                    {opens ? <span aria-hidden="true">›</span> : null}
-                  </span>
-                  <span
-                    title={formatUtcTimestampMs(stamped.occurredAt)}
-                    style={{ fontSize: 12, color: "var(--ms-muted)", marginTop: 7 }}
-                  >
-                    {formatDayTime(stamped.occurredAt, locale)}
-                  </span>
-                  {detail ? (
-                    <span
-                      className="ms-mono"
-                      style={{
-                        fontSize: 11,
-                        color: "var(--ms-muted)",
-                        marginTop: 3,
-                        maxWidth: 220,
-                        // Wraps instead of clipping: its last part is when SES stops retrying.
-                        whiteSpace: type === "delivery_delayed" ? "normal" : "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                    >
-                      {detail}
-                    </span>
-                  ) : null}
-                </>
-              );
               return (
                 <div key={first.id} style={{ display: "contents" }}>
-                  {delta != null ? (
-                    <div className="ms-events-gap">
-                      <span
-                        className="ms-mono"
-                        style={{ fontSize: 10.5, color: "var(--ms-muted)" }}
-                      >
-                        +{formatDurationShort(delta)}
-                      </span>
-                      <span className="ms-events-line" />
-                    </div>
-                  ) : null}
-                  {opens ? (
-                    <button
-                      type="button"
-                      className="ms-events-node"
-                      style={{ color: "inherit", font: "inherit", cursor: "pointer" }}
-                      onClick={() =>
-                        opens === "group" ? setGroupDrawer(first.id) : setDrawer(opens)
-                      }
-                    >
-                      {card}
-                    </button>
-                  ) : (
-                    <div className="ms-events-node">{card}</div>
-                  )}
+                  {delta != null ? <EventGap ms={delta} /> : null}
+                  <EventNode
+                    type={type}
+                    label={
+                      <>
+                        {eventLabel(type)}
+                        {count > 1 ? (
+                          <span className="ms-mono" style={{ fontSize: 10, fontWeight: 500 }}>
+                            ×{count}
+                          </span>
+                        ) : null}
+                        {opens ? <span aria-hidden="true">›</span> : null}
+                      </>
+                    }
+                    hint={type === "prefetched" ? t("detail.prefetchedHint") : undefined}
+                    at={stamped.occurredAt}
+                    detail={detail}
+                    // Wraps instead of clipping: its last part is when SES stops retrying.
+                    wrapDetail={type === "delivery_delayed"}
+                    latest={index === groups.length - 1}
+                    onClick={
+                      opens
+                        ? () => (opens === "group" ? setGroupDrawer(first.id) : setDrawer(opens))
+                        : undefined
+                    }
+                  />
                 </div>
               );
             })}
             {eventsStalled ? (
               <>
-                <div className="ms-events-gap">
-                  <span className="ms-mono" style={{ fontSize: 10.5 }}>
-                    &nbsp;
-                  </span>
-                  <span className="ms-events-line dashed" />
-                </div>
+                <EventGap ms={null} dashed />
                 <div className="ms-events-node">
                   <Tooltip text={t("detail.eventsStalled")}>
                     <span
diff --git a/apps/web/src/components/email-status-icon.tsx b/apps/web/src/components/email-status-icon.tsx
index 5d5729a5e..453000746 100644
--- a/apps/web/src/components/email-status-icon.tsx
+++ b/apps/web/src/components/email-status-icon.tsx
@@ -1,8 +1,12 @@
 /**
  * Status-tinted email visuals: the envelope tile that marks email rows and the
- * detail header (color follows the email's latest status), and the per-event
- * glyphs the delivery timeline uses. All pure SVG on design tokens.
+ * detail header (color follows the email's latest status), and the "Email
+ * events" strip the sent and received email pages share: per-event glyphs and
+ * tones, the node, the connector and the loading placeholder.
  */
+import { useLocale } from "next-intl";
+import { formatDayTime, formatDurationShort, formatUtcTimestampMs } from "@/lib/format";
+import { Skeleton, SkeletonBadge } from "./skeleton";
 import { StatusTile } from "./status-tile";
 
 /** Tone per email/event status — mirrors the ledger colors used elsewhere. */
@@ -150,18 +154,24 @@ export function EventGlyph({ type, size = 15 }: { type: string; size?: number })
   }
 }
 
-/** Timeline node tile: rounded square carrying the event glyph in its tone. */
+/**
+ * Timeline node tile: rounded square carrying the event glyph in its tone.
+ * The tone and glyph default to the sent event type's.
+ */
 export function EventIconTile({
   type,
   size = 34,
   dashed = false,
+  color = emailStatusColor(type),
+  children = <EventGlyph type={type} />,
 }: {
   type: string;
   size?: number;
   /** An estimate rather than a recorded event. */
   dashed?: boolean;
+  color?: string | undefined;
+  children?: React.ReactNode;
 }) {
-  const color = emailStatusColor(type);
   return (
     <span
       aria-hidden="true"
@@ -179,7 +189,166 @@ export function EventIconTile({
         color,
       }}
     >
-      <EventGlyph type={type} />
+      {children}
     </span>
   );
 }
+
+/**
+ * A node on the events strip: its tile (pulsing on the newest node), the
+ * label pill, the time with the UTC stamp on hover, and a mono detail line.
+ * A node that opens a drawer is a button.
+ */
+export function EventNode({
+  type,
+  color = emailStatusColor(type),
+  glyph,
+  label,
+  hint,
+  at,
+  detail,
+  wrapDetail = false,
+  latest = false,
+  onClick,
+}: {
+  type: string;
+  color?: string | undefined;
+  glyph?: React.ReactNode;
+  label: React.ReactNode;
+  /** The pill's hover text. */
+  hint?: string | undefined;
+  at?: Date | string | undefined;
+  detail?: React.ReactNode;
+  /** Wraps the detail within its 220px instead of clipping it. */
+  wrapDetail?: boolean;
+  latest?: boolean;
+  onClick?: (() => void) | undefined;
+}) {
+  const locale = useLocale();
+  // Dashed for a prefetch: it happened, and it does not count.
+  const prefetch = type === "prefetched";
+  const body = (
+    <>
+      <span style={{ position: "relative", display: "inline-flex" }}>
+        <EventIconTile type={type} color={color}>
+          {glyph}
+        </EventIconTile>
+        {latest && !prefetch ? (
+          <span
+            style={{
+              position: "absolute",
+              top: -3,
+              right: -3,
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: color,
+              animation: "ms-pulse 2s infinite",
+            }}
+          />
+        ) : null}
+      </span>
+      <span
+        title={hint}
+        style={{
+          marginTop: 10,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 5,
+          padding: "3px 9px",
+          borderRadius: "var(--ms-r-chip)",
+          border: `1px ${prefetch ? "dashed" : "solid"} color-mix(in srgb, ${color} 35%, var(--ms-line))`,
+          background: `color-mix(in srgb, ${color} ${prefetch ? 4 : 10}%, var(--ms-panel))`,
+          fontSize: 12,
+          fontWeight: 600,
+          color,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {label}
+      </span>
+      {at ? (
+        <span
+          title={formatUtcTimestampMs(at)}
+          style={{ fontSize: 12, color: "var(--ms-muted)", marginTop: 7 }}
+        >
+          {formatDayTime(at, locale)}
+        </span>
+      ) : null}
+      {detail ? (
+        <span
+          className="ms-mono"
+          style={{
+            fontSize: 11,
+            color: "var(--ms-muted)",
+            marginTop: 3,
+            maxWidth: 220,
+            whiteSpace: wrapDetail ? "normal" : "nowrap",
+            ...(wrapDetail ? { overflowWrap: "anywhere" as const } : {}),
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {detail}
+        </span>
+      ) : null}
+    </>
+  );
+  return onClick ? (
+    <button
+      type="button"
+      className="ms-events-node"
+      style={{ color: "inherit", font: "inherit", cursor: "pointer" }}
+      onClick={onClick}
+    >
+      {body}
+    </button>
+  ) : (
+    <div className="ms-events-node">{body}</div>
+  );
+}
+
+/**
+ * The connector into a node: the time since the last timed node, over a line.
+ * With no time to tell (an untimed node, or one listed after a later step)
+ * the label stays blank, so the line keeps its height.
+ */
+export function EventGap({ ms, dashed = false }: { ms: number | null; dashed?: boolean }) {
+  return (
+    <div className="ms-events-gap">
+      <span className="ms-mono" style={{ fontSize: 10.5, color: "var(--ms-muted)" }}>
+        {ms !== null && ms >= 0 ? `+${formatDurationShort(ms)}` : "\u00a0"}
+      </span>
+      <span className={dashed ? "ms-events-line dashed" : "ms-events-line"} />
+    </div>
+  );
+}
+
+/** The strip while its email loads: three nodes of tile, pill and time. */
+export function EventStripSkeleton() {
+  return (
+    <div className="ms-events">
+      {[0, 1, 2].map((index) => (
+        <div key={index} style={{ display: "contents" }}>
+          {index > 0 ? (
+            <div className="ms-events-gap">
+              <span className="ms-mono" style={{ fontSize: 10.5, display: "flex" }}>
+                <Skeleton width={32} height="1lh" />
+              </span>
+              <span className="ms-events-line" />
+            </div>
+          ) : null}
+          <div className="ms-events-node">
+            <Skeleton width={34} height={34} radius={10} />
+            <span style={{ marginTop: 10, display: "flex" }}>
+              <SkeletonBadge width={74} />
+            </span>
+            <span style={{ fontSize: 12, marginTop: 7, display: "flex" }}>
+              <Skeleton width={96} height="1lh" />
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

From c9a34082ca5a14f88a6ca4926252a0142e19239a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:36:45 -0300
Subject: [PATCH 03/24] Draw received email events on the sent strip's nodes

The received page wrote its own text-only strip: no tiles, no time between
steps, a long "Delivered to <address>" label that could overflow its node,
and on phones the label squeezed into the tile column while the connectors
vanished. Each step is now a sent-strip node: a tile toned and drawn by what
the step found, a short pill, the time with its UTC stamp, and a detail line
that wraps an inbox address. Each connector carries the time since the last
timed step, blank into a scan or screening, which keep no time, or into a
step listed after a later one. The newest step pulses.

Spam is amber as in the list, not red: it is filed away, not held. The
webhook step takes its tone from the delivery status the webhooks page uses.
Released and Delivered become short pills with who released it and the inbox
as details, and the screening scores reuse the review table's wording.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |   5 +-
 apps/web/messages/pt-BR/inboxes.json          |   5 +-
 .../inboxes/received/[id]/received-email.tsx  | 266 ++++++++++--------
 .../webhooks/webhook-status-badge.tsx         |   4 +-
 apps/web/src/components/email-status-icon.tsx |  98 ++++++-
 apps/web/test/receiving-screens.test.ts       | 157 +++++++++++
 6 files changed, 413 insertions(+), 122 deletions(-)

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index 49f1d9b05..36336c097 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -296,7 +296,6 @@
     "code": "Code",
     "link": "Sign-in link",
     "linkElsewhere": "The link points to a domain other than the sender's.",
-    "scores": "Risk (0–100): injection {injection} · phishing {phishing}",
     "receivedFor": "Received for",
     "messageId": "Message-ID",
     "envelopeFrom": "Envelope from",
@@ -315,9 +314,9 @@
     "received": "Received",
     "scanned": "Scanned",
     "screened": "Screened",
-    "delivered": "Delivered to {inbox}",
     "quarantined": "Quarantined",
-    "released": "Released by {who}",
+    "released": "Released",
+    "releasedBy": "by {who}",
     "replied": "Replied",
     "forwarded": "Forwarded",
     "webhook": "Webhook"
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 4158bf2ce..cd75454df 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -296,7 +296,6 @@
     "code": "Código",
     "link": "Link de acesso",
     "linkElsewhere": "O link aponta para um domínio diferente do remetente.",
-    "scores": "Risco (0–100): injeção {injection} · phishing {phishing}",
     "receivedFor": "Recebido por",
     "messageId": "Message-ID",
     "envelopeFrom": "Remetente do envelope",
@@ -315,9 +314,9 @@
     "received": "Recebido",
     "scanned": "Verificado",
     "screened": "Analisado",
-    "delivered": "Entregue em {inbox}",
     "quarantined": "Em quarentena",
-    "released": "Liberado por {who}",
+    "released": "Liberado",
+    "releasedBy": "por {who}",
     "replied": "Respondido",
     "forwarded": "Encaminhado",
     "webhook": "Webhook"
diff --git a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
index 6cbf741e9..f253e141a 100644
--- a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { inferRouterOutputs } from "@trpc/server";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
@@ -9,6 +10,12 @@ import { Breakable } from "@/components/breakable";
 import { confirmDialog } from "@/components/confirm-dialog";
 import { CopyChip } from "@/components/copy-chip";
 import { EmailContentPanel } from "@/components/email-content-panel";
+import {
+  EventGap,
+  EventNode,
+  type ReceivedEventStep,
+  receivedEventLook,
+} from "@/components/email-status-icon";
 import { LoadError } from "@/components/load-error";
 import { MetaItem } from "@/components/meta-item";
 import { Modal } from "@/components/modal";
@@ -21,9 +28,10 @@ import { BtnSpinner } from "@/components/spinner";
 import { Table } from "@/components/table";
 import { toast } from "@/components/toast";
 import { AUTH_CHECKS, dkimSignerDomains, grayExplanation } from "@/lib/auth-result";
-import { formatBytes, formatDayTime, formatRelative, mailDomain } from "@/lib/format";
+import { formatBytes, formatRelative, mailDomain } from "@/lib/format";
 import { useTRPC } from "@/lib/trpc";
 import { useTeamRole } from "@/lib/use-team-role";
+import type { AppRouter } from "@/server/routers";
 import { QuarantinedBadge, TrustBadge } from "../../parts";
 import { AuthBadge } from "../received-list";
 
@@ -117,6 +125,149 @@ function ReceivedEmailSkeleton() {
   );
 }
 
+type ReceivedEmail = inferRouterOutputs<AppRouter>["receiving"]["get"];
+
+/**
+ * received → scanned → screened → delivered / quarantined / released →
+ * replied / forwarded → webhook, each with what is known of it, on the sent
+ * strip's nodes. A scan or a screening has no time of its own.
+ */
+export function ReceivedEvents({
+  email,
+}: {
+  email: Pick<
+    ReceivedEmail,
+    "createdAt" | "spam" | "virus" | "memberships" | "activity" | "webhook"
+  >;
+}) {
+  const t = useTranslations("inboxes");
+  const te = useTranslations("emails");
+  const common = useTranslations("common");
+  const timeline: {
+    key: string;
+    step: ReceivedEventStep;
+    label: string;
+    detail?: React.ReactNode;
+    at?: Date | string;
+  }[] = [
+    {
+      key: "received",
+      step: { type: "received" },
+      label: t("timeline.received"),
+      at: email.createdAt,
+    },
+  ];
+  if (email.virus.verdict || email.spam.verdict) {
+    timeline.push({
+      key: "scanned",
+      step: { type: "scanned", spam: email.spam.verdict, virus: email.virus.verdict },
+      label: t("timeline.scanned"),
+      detail: [
+        ...(email.spam.verdict ? [t(`spam.${email.spam.verdict}`)] : []),
+        email.virus.verdict === "fail"
+          ? t("virus.fail", { signature: email.virus.signature ?? "" })
+          : t(`virus.${email.virus.verdict ?? "none"}`),
+      ].join(" · "),
+    });
+  }
+  for (const m of email.memberships) {
+    if (m.injectionScore !== null || m.phishingScore !== null) {
+      timeline.push({
+        key: `screened-${m.inboxId}`,
+        step: { type: "screened", verdict: m.verdict, quarantineReason: m.quarantineReason },
+        label: t("timeline.screened"),
+        detail: t("review.scoreLine", {
+          injection: m.injectionScore ?? "–",
+          phishing: m.phishingScore ?? "–",
+        }),
+      });
+    }
+    if (m.quarantinedAt) {
+      timeline.push({
+        key: `quarantined-${m.inboxId}`,
+        step: { type: "quarantined" },
+        label: t("timeline.quarantined"),
+        detail: m.quarantineReason ? t(`qr.${m.quarantineReason}`) : m.address,
+        at: m.quarantinedAt,
+      });
+    }
+    if (m.releasedAt) {
+      timeline.push({
+        key: `released-${m.inboxId}`,
+        step: { type: "released" },
+        label: t("timeline.released"),
+        detail: m.releasedByName ? t("timeline.releasedBy", { who: m.releasedByName }) : null,
+        at: m.releasedAt,
+      });
+    }
+    if (m.deliveredAt) {
+      timeline.push({
+        key: `delivered-${m.inboxId}`,
+        step: { type: "delivered" },
+        label: common("status.delivered"),
+        detail: <Breakable text={m.address} />,
+        at: m.deliveredAt,
+      });
+    }
+  }
+  for (const [index, a] of email.activity.filter((x) => x.action !== "email.released").entries()) {
+    const type = a.action === "email.forwarded" ? "forwarded" : "replied";
+    timeline.push({
+      key: `activity-${index}`,
+      step: { type },
+      label: t(`timeline.${type}`),
+      detail: a.by,
+      at: a.at,
+    });
+  }
+  if (email.webhook) {
+    timeline.push({
+      key: "webhook",
+      step: { type: "webhook", status: email.webhook.status },
+      label: t("timeline.webhook"),
+      detail: `email.received · ${email.webhook.responseCode ?? email.webhook.status}`,
+      at: email.webhook.at,
+    });
+  }
+  const times = timeline.map((entry) => (entry.at ? new Date(entry.at).getTime() : null));
+  // The strip keeps the pipeline's order, so the newest step is the latest in
+  // time (a webhook listed after a later reply is not), or the last one while
+  // the strip ends on a scan or screening with nothing after it yet.
+  const newest =
+    times.at(-1) === null
+      ? times.length - 1
+      : times.lastIndexOf(Math.max(...times.map((time) => time ?? Number.NEGATIVE_INFINITY)));
+  return (
+    <section style={{ marginTop: 26 }}>
+      <div className="ms-microlabel">{te("detail.events")}</div>
+      <div className="ms-events">
+        {timeline.map((entry, index) => {
+          const { color, glyph } = receivedEventLook(entry.step);
+          const at = times[index] ?? null;
+          const since = times.slice(0, index).findLast((time) => time !== null) ?? null;
+          return (
+            <div key={entry.key} style={{ display: "contents" }}>
+              {index > 0 ? (
+                <EventGap ms={at !== null && since !== null ? at - since : null} />
+              ) : null}
+              <EventNode
+                type={entry.step.type}
+                color={color}
+                glyph={glyph}
+                label={entry.label}
+                at={entry.at}
+                detail={entry.detail}
+                wrapDetail
+                latest={index === newest}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
 export function ReceivedEmailView() {
   const { id } = useParams<{ id: string }>();
   const t = useTranslations("inboxes");
@@ -196,86 +347,6 @@ export function ReceivedEmailView() {
   };
   const releasing = releaseInbox.isPending || releaseRow.isPending;
 
-  // received → scanned → screened → delivered / quarantined / released →
-  // replied / forwarded → webhook, each with what is known of it.
-  const timeline: { key: string; label: string; detail?: string; at?: Date | string }[] = [
-    { key: "received", label: t("timeline.received"), at: email.createdAt },
-    ...(email.virus.verdict || email.spam.verdict
-      ? [
-          {
-            key: "scanned",
-            label: t("timeline.scanned"),
-            detail: [
-              ...(email.spam.verdict ? [t(`spam.${email.spam.verdict}`)] : []),
-              email.virus.verdict === "fail"
-                ? t("virus.fail", { signature: email.virus.signature ?? "" })
-                : t(`virus.${email.virus.verdict ?? "none"}`),
-            ].join(" · "),
-          },
-        ]
-      : []),
-    ...email.memberships.flatMap((m) => [
-      ...(m.injectionScore !== null || m.phishingScore !== null
-        ? [
-            {
-              key: `screened-${m.inboxId}`,
-              label: t("timeline.screened"),
-              detail: t("detail.scores", {
-                injection: m.injectionScore ?? "–",
-                phishing: m.phishingScore ?? "–",
-              }),
-            },
-          ]
-        : []),
-      ...(m.quarantinedAt
-        ? [
-            {
-              key: `quarantined-${m.inboxId}`,
-              label: t("timeline.quarantined"),
-              detail: m.quarantineReason ? t(`qr.${m.quarantineReason}`) : m.address,
-              at: m.quarantinedAt,
-            },
-          ]
-        : []),
-      ...(m.releasedAt
-        ? [
-            {
-              key: `released-${m.inboxId}`,
-              label: t("timeline.released", { who: m.releasedByName ?? "—" }),
-              at: m.releasedAt,
-            },
-          ]
-        : []),
-      ...(m.deliveredAt
-        ? [
-            {
-              key: `delivered-${m.inboxId}`,
-              label: t("timeline.delivered", { inbox: m.address }),
-              at: m.deliveredAt,
-            },
-          ]
-        : []),
-    ]),
-    ...email.activity
-      .filter((a) => a.action !== "email.released")
-      .map((a, index) => ({
-        key: `activity-${index}`,
-        label: a.action === "email.forwarded" ? t("timeline.forwarded") : t("timeline.replied"),
-        ...(a.by ? { detail: a.by } : {}),
-        at: a.at,
-      })),
-    ...(email.webhook
-      ? [
-          {
-            key: "webhook",
-            label: t("timeline.webhook"),
-            detail: `email.received · ${email.webhook.responseCode ?? email.webhook.status}`,
-            at: email.webhook.at,
-          },
-        ]
-      : []),
-  ];
-
   return (
     <>
       <PageHeader
@@ -510,38 +581,7 @@ export function ReceivedEmailView() {
         </MetaItem>
       </div>
 
-      <section style={{ marginTop: 26 }}>
-        <div className="ms-microlabel">{te("detail.events")}</div>
-        <div className="ms-events" style={{ marginTop: 12 }}>
-          {timeline.map((step, index) => (
-            <div key={step.key} style={{ display: "contents" }}>
-              {index > 0 ? (
-                <div className="ms-events-gap">
-                  <span className="ms-events-line" />
-                </div>
-              ) : null}
-              <div className="ms-events-node">
-                <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ms-bone)" }}>
-                  {step.label}
-                </span>
-                {step.at ? (
-                  <span style={{ fontSize: 12, color: "var(--ms-muted)", marginTop: 5 }}>
-                    {formatDayTime(step.at, locale)}
-                  </span>
-                ) : null}
-                {step.detail ? (
-                  <span
-                    className="ms-mono"
-                    style={{ fontSize: 11, color: "var(--ms-muted)", marginTop: 3, maxWidth: 220 }}
-                  >
-                    {step.detail}
-                  </span>
-                ) : null}
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
+      <ReceivedEvents email={email} />
 
       {email.attachments.length > 0 ? (
         <section style={{ marginTop: 26 }}>
diff --git a/apps/web/src/app/(dashboard)/webhooks/webhook-status-badge.tsx b/apps/web/src/app/(dashboard)/webhooks/webhook-status-badge.tsx
index 7f1cf2283..3467b8d15 100644
--- a/apps/web/src/app/(dashboard)/webhooks/webhook-status-badge.tsx
+++ b/apps/web/src/app/(dashboard)/webhooks/webhook-status-badge.tsx
@@ -50,9 +50,9 @@ export function WebhookStatusBadge({ status }: { status: EndpointStatus }) {
   );
 }
 
-type DeliveryStatus = "pending" | "success" | "failed" | "exhausted";
+export type DeliveryStatus = "pending" | "success" | "failed" | "exhausted";
 
-const DELIVERY_VARIANTS: Record<DeliveryStatus, string> = {
+export const DELIVERY_VARIANTS: Record<DeliveryStatus, keyof typeof TONE_COLOR> = {
   pending: "neutral",
   success: "success",
   failed: "danger",
diff --git a/apps/web/src/components/email-status-icon.tsx b/apps/web/src/components/email-status-icon.tsx
index 453000746..b998b2f1e 100644
--- a/apps/web/src/components/email-status-icon.tsx
+++ b/apps/web/src/components/email-status-icon.tsx
@@ -4,10 +4,34 @@
  * events" strip the sent and received email pages share: per-event glyphs and
  * tones, the node, the connector and the loading placeholder.
  */
+import type {
+  QuarantineReason,
+  ScreeningVerdict,
+  SpamVerdict,
+  VirusVerdict,
+} from "@millionsend/core";
 import { useLocale } from "next-intl";
+import {
+  DELIVERY_VARIANTS,
+  type DeliveryStatus,
+} from "@/app/(dashboard)/webhooks/webhook-status-badge";
 import { formatDayTime, formatDurationShort, formatUtcTimestampMs } from "@/lib/format";
+import {
+  BugIcon,
+  ForwardIcon,
+  InboxIcon,
+  LockIcon,
+  LockOpenIcon,
+  ReplyIcon,
+  ScanEyeIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldHalfIcon,
+  SpamIcon,
+  WebhookIcon,
+} from "./icons/mail-icons";
 import { Skeleton, SkeletonBadge } from "./skeleton";
-import { StatusTile } from "./status-tile";
+import { StatusTile, TONE_COLOR } from "./status-tile";
 
 /** Tone per email/event status — mirrors the ledger colors used elsewhere. */
 export function emailStatusColor(status: string): string {
@@ -34,6 +58,78 @@ export function emailStatusColor(status: string): string {
   }
 }
 
+/** A lucide glyph at 14px on its 24-unit frame, as heavy as the 16-unit event glyphs. */
+const EVENT_ICON_STROKE = 2.4;
+
+/** A received message's step on its events strip, with the facts its tone reads. */
+export type ReceivedEventStep =
+  | { type: "received" | "quarantined" | "released" | "delivered" | "replied" | "forwarded" }
+  | { type: "scanned"; spam: SpamVerdict | null; virus: VirusVerdict | null }
+  | { type: "screened"; verdict: ScreeningVerdict; quarantineReason: QuarantineReason | null }
+  | { type: "webhook"; status: DeliveryStatus };
+
+/**
+ * Tone and glyph per received step, in the sent tones: the pipeline's own
+ * steps stay muted, a person acting informs, delivery succeeds, doubt warns,
+ * and malware or a hold is a danger. A scan reads top-down, first match wins.
+ */
+export function receivedEventLook(step: ReceivedEventStep): {
+  color: string;
+  glyph: React.ReactNode;
+} {
+  const stroke = EVENT_ICON_STROKE;
+  switch (step.type) {
+    case "received":
+      return { color: TONE_COLOR.neutral, glyph: <InboxIcon strokeWidth={stroke} /> };
+    case "scanned":
+      if (step.virus === "fail") {
+        return { color: TONE_COLOR.danger, glyph: <BugIcon strokeWidth={stroke} /> };
+      }
+      // Amber like the list's Spam badge: spam is filed away, not held.
+      if (step.spam === "fail") {
+        return { color: TONE_COLOR.warn, glyph: <SpamIcon strokeWidth={stroke} /> };
+      }
+      if (step.spam === "gray" || step.virus === "processing_failed") {
+        return { color: TONE_COLOR.warn, glyph: <ShieldAlertIcon strokeWidth={stroke} /> };
+      }
+      return {
+        color: TONE_COLOR.neutral,
+        // Half a shield when a scanner gave no verdict: no ClamAV leaves the virus verdict null.
+        glyph:
+          step.spam === "pass" && step.virus === "pass" ? (
+            <ShieldCheckIcon strokeWidth={stroke} />
+          ) : (
+            <ShieldHalfIcon strokeWidth={stroke} />
+          ),
+      };
+    case "screened":
+      return {
+        color:
+          step.quarantineReason === "injection" || step.quarantineReason === "phishing"
+            ? TONE_COLOR.danger
+            : step.verdict === "suspicious"
+              ? TONE_COLOR.warn
+              : TONE_COLOR.neutral,
+        glyph: <ScanEyeIcon strokeWidth={stroke} />,
+      };
+    case "quarantined":
+      return { color: TONE_COLOR.danger, glyph: <LockIcon strokeWidth={stroke} /> };
+    case "released":
+      return { color: TONE_COLOR.info, glyph: <LockOpenIcon strokeWidth={stroke} /> };
+    case "delivered":
+      return { color: emailStatusColor("delivered"), glyph: <EventGlyph type="delivered" /> };
+    case "replied":
+      return { color: TONE_COLOR.info, glyph: <ReplyIcon strokeWidth={stroke} /> };
+    case "forwarded":
+      return { color: TONE_COLOR.info, glyph: <ForwardIcon strokeWidth={stroke} /> };
+    case "webhook":
+      return {
+        color: TONE_COLOR[DELIVERY_VARIANTS[step.status]],
+        glyph: <WebhookIcon strokeWidth={stroke} />,
+      };
+  }
+}
+
 /** Rounded-square envelope tile tinted by status. */
 export function EmailStatusIcon({ status, size = 28 }: { status: string; size?: number }) {
   const glyph = Math.round(size * 0.5);
diff --git a/apps/web/test/receiving-screens.test.ts b/apps/web/test/receiving-screens.test.ts
index c0f7b4fab..07e4bbd0c 100644
--- a/apps/web/test/receiving-screens.test.ts
+++ b/apps/web/test/receiving-screens.test.ts
@@ -21,6 +21,8 @@ vi.mock("next-intl", async (importOriginal) => {
 vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
 
 const { EmailContentPanel } = await import("@/components/email-content-panel");
+const { ReceivedEvents } = await import("@/app/(dashboard)/inboxes/received/[id]/received-email");
+const { receivedEventLook } = await import("@/components/email-status-icon");
 const { ReceivedEmailsTable } = await import("@/app/(dashboard)/inboxes/received/received-list");
 
 describe("a received email's content panel", () => {
@@ -52,6 +54,161 @@ describe("a received email's content panel", () => {
   });
 });
 
+describe("a received email's events strip", () => {
+  type StripEmail = Parameters<typeof ReceivedEvents>[0]["email"];
+  const at = (ms: number) => new Date(Date.UTC(2026, 9, 16, 14, 32) + ms);
+  const inbox: StripEmail["memberships"][number] = {
+    inboxId: "i1",
+    address: "support-desk@inbound.acme.test",
+    kind: "agent",
+    threadId: "t1",
+    verdict: "clean",
+    senderTrust: "external",
+    quarantineReason: null,
+    reasons: [],
+    injectionScore: null,
+    phishingScore: null,
+    deliveredAt: at(1200),
+    quarantinedAt: null,
+    releasedAt: null,
+    releasedByName: null,
+  };
+  const email: StripEmail = {
+    createdAt: at(0),
+    spam: { verdict: "pass", score: 1, reasons: [] },
+    virus: { verdict: null, signature: null },
+    memberships: [inbox],
+    activity: [],
+    webhook: null,
+  };
+  const render = (overrides: Partial<StripEmail> = {}) =>
+    renderToStaticMarkup(createElement(ReceivedEvents, { email: { ...email, ...overrides } }));
+  /** Each node's own markup, in strip order. */
+  const nodes = (html: string) =>
+    html
+      .split('class="ms-events-node"')
+      .slice(1)
+      .map((node) => node.split('class="ms-events-gap"')[0] ?? "");
+  /** Each connector's label, in strip order. */
+  const gaps = (html: string) =>
+    [...html.matchAll(/class="ms-events-gap"><span[^>]*>([^<]*)</g)].map((match) => match[1]);
+
+  it("draws every step as the sent strip does: tile first, then pill, time and detail", () => {
+    const [received, scanned, delivered] = nodes(render());
+    for (const node of [received, scanned, delivered]) {
+      // The tile leads, so phones keep the label column beside it.
+      expect(node).toMatch(
+        /^><span style="position:relative;display:inline-flex"><span[^>]*width:34px/,
+      );
+    }
+    expect(received).toContain(">Received<");
+    expect(received).toContain('title="2026-10-16 14:32:00.000 UTC"');
+    // A scan keeps no time: a pill and its verdicts only.
+    expect(scanned).toContain(">Scanned<");
+    expect(scanned).not.toContain(" UTC");
+    expect(scanned).toContain(">Not spam · Not scanned<");
+  });
+
+  it("names the inbox under a short Delivered pill, wrapping the address", () => {
+    const delivered = nodes(render())[2] ?? "";
+    expect(delivered).toContain("color:var(--ms-success)");
+    expect(delivered).toMatch(/white-space:nowrap">Delivered</);
+    const detail = /<span class="ms-mono"[^>]*>(.*?)<\/span>/.exec(delivered);
+    expect(detail?.[0]).toContain("white-space:normal;overflow-wrap:anywhere");
+    expect(detail?.[1]?.replaceAll("<wbr/>", "")).toBe("support-desk@inbound.acme.test");
+  });
+
+  it("tones spam amber, as the list's Spam badge, and malware red", () => {
+    const spam = nodes(render({ spam: { verdict: "fail", score: 15, reasons: [] } }))[1] ?? "";
+    expect(spam).toContain("color:var(--ms-warn)");
+    expect(spam).not.toContain("var(--ms-danger)");
+    const virus = nodes(
+      render({ virus: { verdict: "fail", signature: "Eicar-Test-Signature" } }),
+    )[1];
+    expect(virus).toContain("color:var(--ms-danger)");
+    expect(virus).toContain(">Not spam · Virus: Eicar-Test-Signature<");
+  });
+
+  it("times each gap from the last timed step, blank into an untimed or earlier one", () => {
+    expect(gaps(render())).toEqual(["\u00a0", "+1.2 s"]);
+    const html = render({
+      activity: [{ action: "email.sent", at: at(301_200), by: "Ana" }],
+      webhook: { status: "success", responseCode: 200, at: at(1210) },
+    });
+    // The webhook went out with the delivery, before the reply listed ahead of it.
+    expect(gaps(html)).toEqual(["\u00a0", "+1.2 s", "+5 m", "\u00a0"]);
+    // The pulse marks the newest step, the reply, not the last one listed.
+    const pulsing = nodes(html).map((node) => node.includes("ms-pulse"));
+    expect(pulsing).toEqual([false, false, false, true, false]);
+  });
+
+  it("names who released a held message under a short Released pill", () => {
+    const html = render({
+      memberships: [
+        {
+          ...inbox,
+          verdict: "released",
+          quarantineReason: "injection",
+          injectionScore: 91,
+          phishingScore: 4,
+          quarantinedAt: at(2400),
+          releasedAt: at(902_400),
+          releasedByName: "Ana Souza",
+          deliveredAt: at(902_580),
+        },
+      ],
+    });
+    const [, , screened, quarantined, released] = nodes(html);
+    expect(screened).toContain(">injection 91 · phishing 4<");
+    expect(quarantined).toContain(">prompt injection<");
+    expect(released).toContain('white-space:nowrap">Released<');
+    expect(released).toContain(">by Ana Souza<");
+    expect(gaps(html)).toEqual(["\u00a0", "\u00a0", "+2.4 s", "+15 m", "+180 ms"]);
+  });
+
+  it("picks each step's tone and glyph by its verdict, a scan's first match first", () => {
+    // shield-alert's mark; the spam octagon draws the same two strokes the other way round.
+    const alert = 'd="M12 8v4"></path><path d="M12 16h.01"';
+    const cases: [Parameters<typeof receivedEventLook>[0], string, string][] = [
+      [{ type: "received" }, "muted", 'points="22 12 16 12 14 15 10 15 8 12 2 12"'],
+      [{ type: "scanned", spam: "fail", virus: "fail" }, "danger", 'd="M14.12 3.88 16 2"'],
+      [{ type: "scanned", spam: "fail", virus: "pass" }, "warn", 'd="M15.312 2'],
+      [{ type: "scanned", spam: "gray", virus: "pass" }, "warn", alert],
+      [{ type: "scanned", spam: "pass", virus: "processing_failed" }, "warn", alert],
+      [{ type: "scanned", spam: "pass", virus: "pass" }, "muted", 'd="m9 12 2 2 4-4"'],
+      [{ type: "scanned", spam: "pass", virus: null }, "muted", 'd="M12 22V2"'],
+      [
+        { type: "screened", verdict: "released", quarantineReason: "phishing" },
+        "danger",
+        'd="M18.944',
+      ],
+      [{ type: "screened", verdict: "suspicious", quarantineReason: null }, "warn", 'd="M18.944'],
+      [{ type: "screened", verdict: "clean", quarantineReason: null }, "muted", 'd="M18.944'],
+      [{ type: "quarantined" }, "danger", 'd="M7 11V7a5 5 0 0 1 10 0v4"'],
+      [{ type: "released" }, "info", 'd="M7 11V7a5 5 0 0 1 9.9-1"'],
+      [{ type: "delivered" }, "success", 'd="m5.2 8.2 2 2 3.6-4"'],
+      [{ type: "replied" }, "info", 'd="m9 17-5-5 5-5"'],
+      [{ type: "forwarded" }, "info", 'd="m15 17 5-5-5-5"'],
+      [{ type: "webhook", status: "success" }, "success", 'd="M18 16.98'],
+      [{ type: "webhook", status: "pending" }, "muted", 'd="M18 16.98'],
+      [{ type: "webhook", status: "exhausted" }, "danger", 'd="M18 16.98'],
+    ];
+    for (const [step, tone, path] of cases) {
+      const look = receivedEventLook(step);
+      const svg = renderToStaticMarkup(createElement("span", null, look.glyph));
+      const name = JSON.stringify(step);
+      expect(look.color, name).toBe(`var(--ms-${tone})`);
+      expect(svg, name).toContain(path);
+      // Lucide's 24-unit glyphs sit at the weight of the 16-unit delivered check.
+      expect(svg, name).toContain(
+        step.type === "delivered"
+          ? 'stroke-width="1.5"'
+          : 'width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"',
+      );
+    }
+  });
+});
+
 describe("the All received list", () => {
   const row: ReceivedRow = {
     id: "r1",

From 185fdae9faa60cad7a61c7b97d88b5555a97cc16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:37:01 -0300
Subject: [PATCH 04/24] Hold the received email's events strip and every auth
 badge while it loads

The received page's skeleton had no events strip, so the strip appeared from
nothing once the email loaded, and it drew three authentication badges side by
side where the page stacks four. It now holds the strip with the sent page's
placeholder and stacks a badge per authentication check.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inboxes/received/[id]/received-email.tsx    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
index f253e141a..85847d35b 100644
--- a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
@@ -13,6 +13,7 @@ import { EmailContentPanel } from "@/components/email-content-panel";
 import {
   EventGap,
   EventNode,
+  EventStripSkeleton,
   type ReceivedEventStep,
   receivedEventLook,
 } from "@/components/email-status-icon";
@@ -79,7 +80,7 @@ function Banner({ tone, children }: { tone: "danger" | "warn"; children: React.R
   );
 }
 
-/** Mirrors the loaded page's boxes (header, meta grid, content panel). */
+/** Mirrors the loaded page's boxes (header, meta grid, events strip, content panel). */
 function ReceivedEmailSkeleton() {
   const t = useTranslations("emails");
   const ti = useTranslations("inboxes");
@@ -107,11 +108,19 @@ function ReceivedEmailSkeleton() {
           <SkeletonChip width={190} />
         </MetaItem>
         <MetaItem label={ti("detail.auth")}>
-          <SkeletonBadge width={70} />
-          <SkeletonBadge width={76} />
-          <SkeletonBadge width={84} />
+          <span style={{ display: "grid", gap: 6 }}>
+            {AUTH_CHECKS.map((check) => (
+              <span key={check}>
+                <SkeletonBadge width={{ spf: 70, dkim: 76, dmarc: 84, arc: 72 }[check]} />
+              </span>
+            ))}
+          </span>
         </MetaItem>
       </div>
+      <section style={{ marginTop: 26 }}>
+        <div className="ms-microlabel">{t("detail.events")}</div>
+        <EventStripSkeleton />
+      </section>
       <div
         style={{
           marginTop: 26,

From 2652c8ed0b742f09f72ed5ba321c17f162f1467e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:37:16 -0300
Subject: [PATCH 05/24] Lay Emails list rows on one line through a shared lead
 cell

A long first recipient wrapped onto a second line and pushed "+N" under
the status tile, so rows ran 43 to 60px. The To cell is now one line: the
address ends in an ellipsis with the whole address in a tooltip, and "+N"
sits right after it, listing the other recipients in its tooltip. The
envelope tile names the status in the badge's own words.

The lead cell (tile, value, "+N", muted tail) is one component, so the
Inboxes and All received lists can share it. To and Status move to
35/14% so a long address and its "+N" still fit at 1440px; the loading
skeleton follows, tile included, so rows keep their 43px when data
arrives.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/app/(dashboard)/emails/list-parts.tsx |  10 +-
 apps/web/src/components/email-status-icon.tsx |  48 +++++---
 apps/web/src/components/emails-table.tsx      | 115 +++++++++---------
 apps/web/src/components/lead-cell.tsx         |  72 +++++++++++
 apps/web/src/styles/components.css            |  26 ++++
 apps/web/test/emails-table.test.ts            |  56 +++++++++
 apps/web/test/held-status.test.ts             |   3 +
 7 files changed, 249 insertions(+), 81 deletions(-)
 create mode 100644 apps/web/src/components/lead-cell.tsx
 create mode 100644 apps/web/test/emails-table.test.ts

diff --git a/apps/web/src/app/(dashboard)/emails/list-parts.tsx b/apps/web/src/app/(dashboard)/emails/list-parts.tsx
index 18ca59722..162c8c928 100644
--- a/apps/web/src/app/(dashboard)/emails/list-parts.tsx
+++ b/apps/web/src/app/(dashboard)/emails/list-parts.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { SkeletonLead } from "@/components/lead-cell";
 import { Skeleton, SkeletonBadge } from "@/components/skeleton";
 import { Table } from "@/components/table";
 import { shortcutBlocked } from "@/lib/keyboard";
@@ -59,7 +60,8 @@ export function ListSkeleton({
    * Last column holds the 28px bare overflow trigger instead of a relative
    * time (suppressions); the trigger is the row's tallest content, so its
    * stand-in must keep that height. Also switches the header widths to the
-   * suppressions table's (40/18% vs the emails table's 34/15%).
+   * suppressions table's (40/18% vs the emails table's 35/14%), and drops
+   * the emails table's status tile.
    */
   action?: boolean;
 }) {
@@ -68,8 +70,8 @@ export function ListSkeleton({
     <Table>
       <thead>
         <tr>
-          <th style={{ width: action ? "40%" : "34%" }}>{headers[0]}</th>
-          <th style={{ width: action ? "18%" : "15%" }}>{headers[1]}</th>
+          <th style={{ width: action ? "40%" : "35%" }}>{headers[0]}</th>
+          <th style={{ width: action ? "18%" : "14%" }}>{headers[1]}</th>
           <th>{headers[2]}</th>
           {action ? (
             <th className="right" />
@@ -85,7 +87,7 @@ export function ListSkeleton({
           // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows, position is identity
           <tr key={row}>
             <td>
-              <Skeleton width={width} height={13} />
+              {action ? <Skeleton width={width} height={13} /> : <SkeletonLead width={width} />}
             </td>
             <td>
               <SkeletonBadge />
diff --git a/apps/web/src/components/email-status-icon.tsx b/apps/web/src/components/email-status-icon.tsx
index 5d5729a5e..488be1555 100644
--- a/apps/web/src/components/email-status-icon.tsx
+++ b/apps/web/src/components/email-status-icon.tsx
@@ -31,28 +31,42 @@ export function emailStatusColor(status: string): string {
 }
 
 /** Rounded-square envelope tile tinted by status. */
-export function EmailStatusIcon({ status, size = 28 }: { status: string; size?: number }) {
-  const glyph = Math.round(size * 0.5);
+export function EmailStatusIcon({
+  status,
+  size = 28,
+  label,
+}: {
+  status: string;
+  size?: number;
+  label?: string | undefined;
+}) {
   return (
-    <StatusTile color={emailStatusColor(status)} size={size}>
-      <svg
-        width={glyph}
-        height={glyph}
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-      >
-        <rect x="1.5" y="3.2" width="13" height="9.6" rx="1.8" />
-        <path d="m2.2 4.4 5.8 4.4 5.8-4.4" />
-      </svg>
+    <StatusTile color={emailStatusColor(status)} size={size} label={label}>
+      <EnvelopeGlyph size={Math.round(size * 0.5)} />
     </StatusTile>
   );
 }
 
+/** The envelope on its 16-unit grid: the mark of an email row, sent or received. */
+export function EnvelopeGlyph({ size = 14 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1.5" y="3.2" width="13" height="9.6" rx="1.8" />
+      <path d="m2.2 4.4 5.8 4.4 5.8-4.4" />
+    </svg>
+  );
+}
+
 /** Per-event glyph for the delivery timeline (16px grid, stroke currentColor). */
 export function EventGlyph({ type, size = 15 }: { type: string; size?: number }) {
   const common = {
diff --git a/apps/web/src/components/emails-table.tsx b/apps/web/src/components/emails-table.tsx
index 23f528848..66912736f 100644
--- a/apps/web/src/components/emails-table.tsx
+++ b/apps/web/src/components/emails-table.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import { Breakable } from "@/components/breakable";
 import { EmailStatusIcon } from "@/components/email-status-icon";
+import { LeadCell } from "@/components/lead-cell";
 import { RelativeTime } from "@/components/relative-time";
 import { type BadgeStatus, StatusBadge } from "@/components/status-badge";
 import { Table } from "@/components/table";
@@ -64,14 +63,15 @@ export function EmailsTable({
   broadcastChip?: boolean;
 }) {
   const t = useTranslations("emails");
+  const tc = useTranslations("common");
   const router = useRouter();
   const items = rows;
   return (
     <Table>
       <thead>
         <tr>
-          <th style={{ width: "34%" }}>{t("list.to")}</th>
-          <th style={{ width: "15%" }}>{t("list.status")}</th>
+          <th style={{ width: "35%" }}>{t("list.to")}</th>
+          <th style={{ width: "14%" }}>{t("list.status")}</th>
           <th>{t("list.subject")}</th>
           <th className="right" style={{ width: "13%" }}>
             {t("list.when")}
@@ -79,66 +79,61 @@ export function EmailsTable({
         </tr>
       </thead>
       <tbody>
-        {items.map((row) => (
-          <tr key={row.id} className="hoverable" onClick={() => router.push(`/emails/${row.id}`)}>
-            <td className="ms-mono ms-cell-wrap">
-              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
-                <EmailStatusIcon status={row.latestStatus} />
-                <Link href={`/emails/${row.id}`} onClick={(event) => event.stopPropagation()}>
-                  <Breakable text={row.to[0] ?? row.subject} />
-                </Link>
-              </span>
-              {row.to.length > 1 ? (
-                <span style={{ color: "var(--ms-muted)", marginLeft: 8 }}>
-                  +{row.to.length - 1}
-                </span>
-              ) : null}
-            </td>
-            <td>
-              {row.held ? (
-                <Tooltip inline text={t("held.body")}>
-                  <StatusBadge status={row.latestStatus} label={t("held.label")} />
-                </Tooltip>
-              ) : (
-                <StatusBadge
-                  status={row.latestStatus}
-                  label={
-                    row.broadcastId && row.latestStatus === "queued_quota"
-                      ? t("list.queuedBroadcast")
-                      : undefined
-                  }
-                />
-              )}
-            </td>
-            <td className="ms-cell-fill">
-              <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
-                {broadcastChip && row.broadcastId ? (
+        {items.map((row) => {
+          // The tile names the status in the badge's own words.
+          const status = row.held
+            ? t("held.label")
+            : row.broadcastId && row.latestStatus === "queued_quota"
+              ? t("list.queuedBroadcast")
+              : tc(`status.${row.latestStatus}`);
+          return (
+            <tr key={row.id} className="hoverable" onClick={() => router.push(`/emails/${row.id}`)}>
+              <LeadCell
+                tile={<EmailStatusIcon status={row.latestStatus} label={status} />}
+                value={row.to[0] ?? row.subject}
+                href={`/emails/${row.id}`}
+                more={row.to.slice(1)}
+                mono
+              />
+              <td>
+                {row.held ? (
+                  <Tooltip inline text={t("held.body")}>
+                    <StatusBadge status={row.latestStatus} label={status} />
+                  </Tooltip>
+                ) : (
+                  <StatusBadge status={row.latestStatus} label={status} />
+                )}
+              </td>
+              <td className="ms-cell-fill">
+                <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+                  {broadcastChip && row.broadcastId ? (
+                    <span
+                      className="ms-chip"
+                      style={{ fontSize: 10.5, padding: "1px 7px", flex: "none" }}
+                    >
+                      {t("list.broadcastChip")}
+                    </span>
+                  ) : null}
                   <span
-                    className="ms-chip"
-                    style={{ fontSize: 10.5, padding: "1px 7px", flex: "none" }}
+                    style={{
+                      display: "block",
+                      minWidth: 0,
+                      maxWidth: 480,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
                   >
-                    {t("list.broadcastChip")}
+                    {row.subject}
                   </span>
-                ) : null}
-                <span
-                  style={{
-                    display: "block",
-                    minWidth: 0,
-                    maxWidth: 480,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {row.subject}
                 </span>
-              </span>
-            </td>
-            <td className="right" style={{ whiteSpace: "nowrap" }}>
-              <WhenCell row={row} />
-            </td>
-          </tr>
-        ))}
+              </td>
+              <td className="right" style={{ whiteSpace: "nowrap" }}>
+                <WhenCell row={row} />
+              </td>
+            </tr>
+          );
+        })}
       </tbody>
     </Table>
   );
diff --git a/apps/web/src/components/lead-cell.tsx b/apps/web/src/components/lead-cell.tsx
new file mode 100644
index 000000000..2434a080c
--- /dev/null
+++ b/apps/web/src/components/lead-cell.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Link from "next/link";
+import { Skeleton } from "@/components/skeleton";
+import { Tooltip } from "@/components/tooltip";
+import { Truncated } from "@/components/truncated";
+
+/** A lucide glyph in a list's 28px tile: about 1.2px of stroke, the envelope glyph's weight. */
+export const LEAD_GLYPH = { size: 14, strokeWidth: 2 } as const;
+
+/**
+ * A list row's first cell, on one line: an optional status tile, the row's
+ * value (an address or a title) ending in an ellipsis where the column runs
+ * out and whole in a tooltip, "+N" for the addresses behind the first, and
+ * an optional muted tail that gives way before the value does. Phones keep
+ * the whole line and scroll the list sideways.
+ */
+export function LeadCell({
+  tile,
+  value,
+  href,
+  mono = false,
+  more = [],
+  tail,
+}: {
+  tile?: React.ReactNode;
+  value: string;
+  /** Where the value links; the row's own click goes there too. */
+  href?: string;
+  /** Mono type, for addresses. */
+  mono?: boolean;
+  /** The addresses behind the first: counted as "+N" and listed in its tooltip. */
+  more?: readonly string[];
+  /** A string tail shows whole in a tooltip once cut. */
+  tail?: React.ReactNode;
+}) {
+  const line = <Truncated text={value} />;
+  return (
+    <td className={mono ? "ms-cell-fill ms-mono" : "ms-cell-fill"}>
+      <span className="ms-lead">
+        {tile}
+        {href ? (
+          <Link href={href} className="ms-lead-value" onClick={(event) => event.stopPropagation()}>
+            {line}
+          </Link>
+        ) : (
+          <span className="ms-lead-value">{line}</span>
+        )}
+        {more.length > 0 ? (
+          <Tooltip inline text={more.join(", ")}>
+            <span className="ms-lead-more">+{more.length}</span>
+          </Tooltip>
+        ) : null}
+        {tail ? (
+          <span className="ms-lead-tail">
+            {typeof tail === "string" ? <Truncated text={tail} /> : tail}
+          </span>
+        ) : null}
+      </span>
+    </td>
+  );
+}
+
+/** A lead cell's loading stand-in, tile and value, so a loaded row keeps its height. */
+export function SkeletonLead({ width }: { width: number | string }) {
+  return (
+    <span className="ms-lead">
+      <Skeleton width={30} height={30} radius={8} />
+      <Skeleton width={width} height={13} />
+    </span>
+  );
+}
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 6c1fc3455..d3966c35d 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -1939,6 +1939,32 @@ summary:focus-visible,
   display: block;
   min-width: 0;
 }
+/* A list row's lead cell (lead-cell.tsx): tile, value, "+N" and a muted
+   tail on one line. The tail's basis is 0, so it gets only the width the
+   others leave: it gives way first, and only then does the value shrink. */
+.ms-lead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.ms-lead-value {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.ms-lead-more {
+  color: var(--ms-muted);
+}
+.ms-lead-tail {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--ms-font-sans);
+  font-size: 12.5px;
+  color: var(--ms-muted);
+}
 
 .ms-theme-toggle {
   display: inline-flex;
diff --git a/apps/web/test/emails-table.test.ts b/apps/web/test/emails-table.test.ts
new file mode 100644
index 000000000..b191de3af
--- /dev/null
+++ b/apps/web/test/emails-table.test.ts
@@ -0,0 +1,56 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+// The real English catalogs, so the test reads what a customer reads.
+vi.mock("next-intl", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("next-intl")>();
+  const messages = {
+    emails: (await import("../messages/en/emails.json")).default,
+    common: (await import("../messages/en/common.json")).default,
+  };
+  return {
+    ...actual,
+    useLocale: () => "en",
+    useTranslations: (namespace: keyof typeof messages) =>
+      actual.createTranslator({ locale: "en", messages, namespace }),
+  };
+});
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
+
+const { EmailsTable } = await import("@/components/emails-table");
+
+describe("the Emails list", () => {
+  const html = renderToStaticMarkup(
+    createElement(EmailsTable, {
+      rows: [
+        {
+          id: "e1",
+          to: ["inbox-k3v9x2rq@fabrikam.example.com", "ops@example.com", "cto@example.com"],
+          subject: "Welcome aboard",
+          latestStatus: "delivered",
+          createdAt: new Date(),
+          sentAt: new Date(),
+        },
+      ],
+    }),
+  );
+
+  it("keeps the first address and its +N on one line, the address cut before the +N", () => {
+    expect(html).not.toContain("ms-cell-wrap");
+    expect(html).not.toContain("<wbr");
+    const to = html.match(/<td class="ms-cell-fill ms-mono">(.*?)<\/td>/)?.[1] ?? "";
+    expect(to).toMatch(
+      /^<span class="ms-lead"><span class="ms-tooltip-trigger inline"[^>]*><span role="img"[^>]*>.*?<\/span><\/span><a class="ms-lead-value" href="\/emails\/e1"><span class="ms-truncate">inbox-k3v9x2rq@fabrikam\.example\.com<\/span><\/a><span class="ms-tooltip-trigger inline"[^>]*><span class="ms-lead-more">\+2<\/span><\/span><\/span>$/,
+    );
+    expect(html).toContain('<th style="width:35%">To</th>');
+    expect(html).toContain('<th style="width:14%">Status</th>');
+  });
+
+  it("names the status on the envelope tile in the badge's own words", () => {
+    expect(html).toMatch(
+      /role="img" aria-label="Delivered" style="[^"]*color:var\(--ms-success\)"/,
+    );
+    expect(html).toContain('class="ms-badge ms-badge-success">Delivered<');
+  });
+});
diff --git a/apps/web/test/held-status.test.ts b/apps/web/test/held-status.test.ts
index 08b736ea0..4860c595a 100644
--- a/apps/web/test/held-status.test.ts
+++ b/apps/web/test/held-status.test.ts
@@ -58,5 +58,8 @@ describe("a send waiting out a region hold", () => {
     );
     expect(html.match(/>Delayed</g)).toHaveLength(1);
     expect(html).toContain(">Queued in broadcast<");
+    // The row's tile names it in the same words.
+    expect(html).toContain('aria-label="Delayed"');
+    expect(html).toContain('aria-label="Queued in broadcast"');
   });
 });

From 83a8624373482e689797e5e8a215e8164f481971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:37:37 -0300
Subject: [PATCH 06/24] Put every Inboxes row on one line behind a tile naming
 its kind

Lead cells took two lines (the address, then a muted line with the name,
expiry or forwarding) and addresses wrapped, so rows ran 32 to 66px.
Each row now leads with a muted tile (All received, catch-all, agent or
people inbox, named in its tooltip) and keeps the name, expiry and
forwarding after the address; when the column runs out that tail gives
way first, then the address ends in an ellipsis. The tiles stay muted:
Needs attention already says when a row wants a look, and it keeps to
one line too, taking width from the inbox column instead of wrapping.

All received keeps the first clause of its description, and the
catch-all row shortens its link to "turn off", with the domain in its
tooltip, so both fit beside their values at 1440px. Type and Needs
attention narrow to 90px and 22% to leave the addresses room.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |  8 +-
 apps/web/messages/pt-BR/inboxes.json          |  8 +-
 .../app/(dashboard)/inboxes/inboxes-view.tsx  | 94 +++++++++++--------
 apps/web/test/inboxes-screens.test.ts         | 60 ++++++++++++
 4 files changed, 129 insertions(+), 41 deletions(-)

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index 49f1d9b05..c4881deba 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -59,7 +59,9 @@
     "activity": "Activity"
   },
   "type": {
-    "catchAll": "Catch-all"
+    "catchAll": "Catch-all",
+    "agent": "Agent inbox",
+    "human": "People inbox"
   },
   "col": {
     "inbox": "Inbox",
@@ -87,7 +89,8 @@
     "full": "You've reached the inbox limit of your plan. Upgrade to create more."
   },
   "catchAll": {
-    "row": "Addresses without an inbox · <link>turn off on the domain</link>"
+    "row": "Addresses with no inbox · <link>turn off</link>",
+    "turnOff": "Turn off on the domain"
   },
   "create": {
     "title": "Create inbox",
@@ -238,6 +241,7 @@
   "received": {
     "title": "All received",
     "hint": "Every email your domains received, including addresses without an inbox.",
+    "hintShort": "Every email your domains received",
     "search": "Search sender, inbox or subject…",
     "loadError": "Couldn't load received emails.",
     "empty": "No received emails yet.",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 4158bf2ce..f9d121c8e 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -59,7 +59,9 @@
     "activity": "Atividade"
   },
   "type": {
-    "catchAll": "Pega-tudo"
+    "catchAll": "Pega-tudo",
+    "agent": "Caixa de agente",
+    "human": "Caixa de pessoas"
   },
   "col": {
     "inbox": "Caixa",
@@ -87,7 +89,8 @@
     "full": "Você chegou ao limite de caixas do seu plano. Faça upgrade para criar mais."
   },
   "catchAll": {
-    "row": "Endereços sem caixa de entrada · <link>desligar no domínio</link>"
+    "row": "Endereços sem caixa · <link>desligar</link>",
+    "turnOff": "Desligar no domínio"
   },
   "create": {
     "title": "Criar caixa de entrada",
@@ -238,6 +241,7 @@
   "received": {
     "title": "Todos os recebidos",
     "hint": "Todos os e-mails que seus domínios receberam, inclusive em endereços sem caixa de entrada.",
+    "hintShort": "Tudo o que chegou nos seus domínios",
     "search": "Buscar remetente, caixa ou assunto…",
     "loadError": "Não foi possível carregar os e-mails recebidos.",
     "empty": "Nenhum e-mail recebido ainda.",
diff --git a/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx b/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
index ce580034a..b8bde02c5 100644
--- a/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
@@ -6,13 +6,15 @@ import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useCallback, useMemo, useState } from "react";
 import { BetaPill } from "@/components/beta-pill";
-import { Breakable } from "@/components/breakable";
 import { EmptyState } from "@/components/empty-state";
+import { AsteriskIcon, BotIcon, MailsIcon, UsersIcon } from "@/components/icons/mail-icons";
 import { PlusGlyph } from "@/components/icons/nav-icons";
+import { LEAD_GLYPH, LeadCell, SkeletonLead } from "@/components/lead-cell";
 import { ListFooter } from "@/components/list-footer";
 import { PageHeader } from "@/components/page-header";
 import { RelativeTime } from "@/components/relative-time";
 import { Skeleton } from "@/components/skeleton";
+import { StatusTile, TONE_COLOR } from "@/components/status-tile";
 import { Table } from "@/components/table";
 import { Tooltip } from "@/components/tooltip";
 import { formatTimeLeft } from "@/lib/format";
@@ -26,7 +28,6 @@ const TABS = ["all", "agent", "human"] as const;
 // The overview rows count 30 days, so they open the list on the same range.
 const RECEIVED_30D = "/inboxes/received?range=d30";
 
-const muted: React.CSSProperties = { color: "var(--ms-muted)", fontSize: 12.5 };
 const none = <span style={{ color: "var(--ms-faint)" }}>—</span>;
 
 function InboxesHead() {
@@ -35,8 +36,8 @@ function InboxesHead() {
     <thead>
       <tr>
         <th>{t("col.inbox")}</th>
-        <th style={{ width: 110 }}>{t("col.type")}</th>
-        <th style={{ width: "26%" }}>{t("col.attention")}</th>
+        <th style={{ width: 90 }}>{t("col.type")}</th>
+        <th style={{ width: "22%" }}>{t("col.attention")}</th>
         <th className="right" style={{ width: 130 }}>
           {t("col.received30d")}
         </th>
@@ -56,7 +57,7 @@ function InboxesSkeleton() {
         {["62%", "48%", "56%", "40%"].map((width) => (
           <tr key={width}>
             <td>
-              <Skeleton width={width} height={13} />
+              <SkeletonLead width={width} />
             </td>
             <td>
               <Skeleton width={48} />
@@ -208,12 +209,16 @@ export function InboxesView() {
             <tbody>
               {overview ? (
                 <tr className="hoverable" onClick={() => router.push(RECEIVED_30D)}>
-                  <td>
-                    <Link href={RECEIVED_30D} onClick={(event) => event.stopPropagation()}>
-                      {t("received.title")}
-                    </Link>
-                    <div style={muted}>{t("received.hint")}</div>
-                  </td>
+                  <LeadCell
+                    tile={
+                      <StatusTile color={TONE_COLOR.neutral} label={t("received.title")}>
+                        <MailsIcon {...LEAD_GLYPH} />
+                      </StatusTile>
+                    }
+                    value={t("received.title")}
+                    href={RECEIVED_30D}
+                    tail={t("received.hintShort")}
+                  />
                   <td>{none}</td>
                   <td>{none}</td>
                   <td className="right ms-digits">{nf.format(overview.allReceived.received30d)}</td>
@@ -230,27 +235,28 @@ export function InboxesView() {
                 const href = `${RECEIVED_30D}&inbox=catch_all`;
                 return (
                   <tr key={domain.domainId} className="hoverable" onClick={() => router.push(href)}>
-                    <td className="ms-cell-wrap">
-                      <Link
-                        href={href}
-                        className="ms-mono"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <Breakable text={`*@${domain.name}`} />
-                      </Link>
-                      <div style={muted}>
-                        {t.rich("catchAll.row", {
-                          link: (chunks) => (
+                    <LeadCell
+                      tile={
+                        <StatusTile color={TONE_COLOR.neutral} label={t("type.catchAll")}>
+                          <AsteriskIcon {...LEAD_GLYPH} />
+                        </StatusTile>
+                      }
+                      value={`*@${domain.name}`}
+                      href={href}
+                      mono
+                      tail={t.rich("catchAll.row", {
+                        link: (chunks) => (
+                          <Tooltip inline focusableChild text={t("catchAll.turnOff")}>
                             <Link
                               href={`/domains/${domain.domainId}`}
                               onClick={(event) => event.stopPropagation()}
                             >
                               {chunks}
                             </Link>
-                          ),
-                        })}
-                      </div>
-                    </td>
+                          </Tooltip>
+                        ),
+                      })}
+                    />
                     <td>{t("type.catchAll")}</td>
                     <td>{none}</td>
                     <td className="right ms-digits">{nf.format(domain.received30d)}</td>
@@ -289,18 +295,32 @@ export function InboxesView() {
                 ];
                 return (
                   <tr key={inbox.id} className="hoverable" onClick={() => router.push(href)}>
-                    <td className="ms-cell-wrap">
-                      <Link
-                        href={href}
-                        className="ms-mono"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <Breakable text={inbox.email_address} />
-                      </Link>
-                      {detail.length > 0 ? <div style={muted}>{detail.join(" · ")}</div> : null}
-                    </td>
+                    <LeadCell
+                      tile={
+                        <StatusTile
+                          color={TONE_COLOR.neutral}
+                          label={t(inbox.kind === "human" ? "type.human" : "type.agent")}
+                        >
+                          {inbox.kind === "human" ? (
+                            <UsersIcon {...LEAD_GLYPH} />
+                          ) : (
+                            <BotIcon {...LEAD_GLYPH} />
+                          )}
+                        </StatusTile>
+                      }
+                      value={inbox.email_address}
+                      href={href}
+                      mono
+                      tail={detail.join(" · ")}
+                    />
                     <td>{kindWord(t, inbox.kind)}</td>
-                    <td style={{ color: attention.length > 0 ? "var(--ms-bone)" : undefined }}>
+                    {/* One line: the inbox column gives up the width instead. */}
+                    <td
+                      style={{
+                        whiteSpace: "nowrap",
+                        color: attention.length > 0 ? "var(--ms-bone)" : undefined,
+                      }}
+                    >
                       {attention.length > 0 ? attention.join(" · ") : none}
                     </td>
                     <td className="right ms-digits">{nf.format(inbox.received_30d)}</td>
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index f1c0a04c7..530db29da 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -393,6 +393,66 @@ describe("inbox screens", () => {
     expect(html).not.toContain("5 unread");
   });
 
+  it("lays every inboxes row on one line, behind a muted tile naming the row's kind", () => {
+    const inbox = (kind: string, address: string, extra: object) => ({
+      id: address,
+      email_address: address,
+      name: "",
+      kind,
+      unread: 0,
+      pending_approval: 0,
+      quarantined: 0,
+      received_30d: 0,
+      last_received: null,
+      expires_at: null,
+      forward_to: [],
+      ...extra,
+    });
+    rq.data = { domains: [], sharedDomain: "inboxes.example", plan: { used: 2, limit: 3 } };
+    rq.pages = {
+      pages: [
+        {
+          items: [
+            inbox("agent", "orders@acme.example", { name: "Orders agent", quarantined: 1 }),
+            inbox("human", "support@acme.example", {
+              name: "Support",
+              forward_to: ["ops@example.com"],
+            }),
+          ],
+          counts: { agent: 1, human: 1 },
+          overview: {
+            allReceived: { received30d: 12, lastReceived: null },
+            catchAll: [
+              { domainId: "d1", name: "acme.example", received30d: 3, lastReceived: null },
+            ],
+          },
+        },
+      ],
+    };
+    const html = renderToStaticMarkup(createElement(InboxesView));
+    rq.data = rq.pages = undefined;
+    expect(html).not.toContain("ms-cell-wrap");
+    expect(html).not.toContain("<wbr");
+    // Muted even where the row needs attention: that column says so.
+    for (const label of ["All received", "Catch-all", "Agent inbox", "People inbox"]) {
+      expect(html, label).toMatch(
+        new RegExp(`role="img" aria-label="${label}" style="[^"]*color:var\\(--ms-muted\\)"`),
+      );
+    }
+    // What took a second line rides after the value, muted, cut first.
+    const tail = (text: string) => `class="ms-lead-tail"><span class="ms-truncate">${text}<`;
+    expect(html).toContain(tail("Every email your domains received"));
+    expect(html).toContain(tail("Orders agent"));
+    expect(html).toContain(tail("Support · forwards to ops@example.com"));
+    // The catch-all's turn-off link stays in its tail, the where in its tooltip.
+    expect(html).toMatch(
+      /class="ms-lead-tail">Addresses with no inbox · <span class="ms-tooltip-trigger inline"><a href="\/domains\/d1">turn off<\/a><\/span><\/span>/,
+    );
+    expect(t("catchAll.turnOff")).toBe("Turn off on the domain");
+    expect(html).toContain('<th style="width:90px">Type</th>');
+    expect(html).toContain('<th style="width:22%">Needs attention</th>');
+  });
+
   it("lays a thread out on one line whose button wraps no other stop", () => {
     const row = {
       id: "t1",

From 45f1090ec87799af0f03fd5817860305fc6ba36b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 16:37:56 -0300
Subject: [PATCH 07/24] Show each received email's screening state in All
 received

The list folded mail still being screened into "held" and labelled it
Quarantined, and never showed suspicious mail. receiving.list now
returns pending, quarantined and suspicious, each true when any inbox
the message reached has that verdict, from one aggregate per row (a
lateral join on the membership's primary key) in place of a subquery
per flag.

The From cell leads with a tile whose glyph and tone follow the most
urgent state (virus, quarantined, being screened, spam, suspicious,
scanner failed, else clean), and the subject keeps a badge for every
state but clean. No virus verdict means no scanner is configured, which
reads as clean; the Clean filter now leaves out mail whose scanner
failed, so it lists exactly the rows whose tile reads clean. From and
Inbox stay on one line each, the attachment count gets a paperclip,
and the code and link chips say what was found.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |   8 +-
 apps/web/messages/pt-BR/inboxes.json          |   8 +-
 .../inboxes/received/received-list.tsx        | 136 +++++++++++++-----
 apps/web/src/lib/received-state.test.ts       |  54 +++++++
 apps/web/src/lib/received-state.ts            |  46 ++++++
 apps/web/src/server/routers/receiving.ts      |  27 +++-
 apps/web/test/receiving-router.test.ts        | 124 +++++++++++++++-
 apps/web/test/receiving-screens.test.ts       |  74 +++++++++-
 8 files changed, 422 insertions(+), 55 deletions(-)
 create mode 100644 apps/web/src/lib/received-state.test.ts
 create mode 100644 apps/web/src/lib/received-state.ts

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index c4881deba..d64d68857 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -225,7 +225,9 @@
   "downloadsBlocked": "Downloads are blocked: this email carries malware.",
   "chip": {
     "code": "code",
-    "link": "link"
+    "link": "link",
+    "codeTip": "Contains a verification code",
+    "linkTip": "Contains a sign-in link"
   },
   "gray": {
     "dmarcPassNone": "DMARC gray: the message passed DMARC, but the sender's domain publishes p=none, so receivers aren't asked to block mail that fails.",
@@ -256,6 +258,7 @@
     },
     "badge": {
       "quarantined": "Quarantined",
+      "screening": "Screening",
       "spam": "Spam",
       "virus": "Virus"
     },
@@ -269,7 +272,8 @@
       "suspicious": "Suspicious",
       "quarantined": "Quarantined",
       "spam": "Spam",
-      "virus": "Virus"
+      "virus": "Virus",
+      "screening": "Being screened"
     },
     "range": {
       "h24": "Last 24 hours",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index f9d121c8e..cca9d6825 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -225,7 +225,9 @@
   "downloadsBlocked": "Downloads bloqueados: este e-mail tem malware.",
   "chip": {
     "code": "código",
-    "link": "link"
+    "link": "link",
+    "codeTip": "Contém um código de verificação",
+    "linkTip": "Contém um link de acesso"
   },
   "gray": {
     "dmarcPassNone": "DMARC cinza: a mensagem passou no DMARC, mas o domínio do remetente usa p=none, então os servidores não são orientados a bloquear e-mails que falham.",
@@ -256,6 +258,7 @@
     },
     "badge": {
       "quarantined": "Em quarentena",
+      "screening": "Em análise",
       "spam": "Spam",
       "virus": "Vírus"
     },
@@ -269,7 +272,8 @@
       "suspicious": "Suspeito",
       "quarantined": "Em quarentena",
       "spam": "Spam",
-      "virus": "Vírus"
+      "virus": "Vírus",
+      "screening": "Em análise"
     },
     "range": {
       "h24": "Últimas 24 horas",
diff --git a/apps/web/src/app/(dashboard)/inboxes/received/received-list.tsx b/apps/web/src/app/(dashboard)/inboxes/received/received-list.tsx
index 968e51458..1b5ca6b1a 100644
--- a/apps/web/src/app/(dashboard)/inboxes/received/received-list.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/received/received-list.tsx
@@ -5,16 +5,33 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useDeferredValue, useMemo, useState } from "react";
-import { Breakable } from "@/components/breakable";
+import { EnvelopeGlyph } from "@/components/email-status-icon";
 import { EmptyState } from "@/components/empty-state";
+import {
+  BugIcon,
+  ClockIcon,
+  LockIcon,
+  PaperclipIcon,
+  ShieldAlertIcon,
+  ShieldHalfIcon,
+  SpamIcon,
+} from "@/components/icons/mail-icons";
+import { LEAD_GLYPH, LeadCell, SkeletonLead } from "@/components/lead-cell";
 import { RelativeTime } from "@/components/relative-time";
 import { Select } from "@/components/select";
 import { Skeleton } from "@/components/skeleton";
+import { StatusTile, TONE_COLOR } from "@/components/status-tile";
 import { Table } from "@/components/table";
 import { Tooltip } from "@/components/tooltip";
 import { type AuthCheck, authResultTone } from "@/lib/auth-result";
 import { type RangeKey, rangeSince } from "@/lib/list-range";
 import { isUuid } from "@/lib/log-body-links";
+import {
+  RECEIVED_STATE_TONE,
+  type ReceivedState,
+  type ReceivedVerdicts,
+  receivedState,
+} from "@/lib/received-state";
 import { useTRPC } from "@/lib/trpc";
 import { oneOf, useUrlState } from "@/lib/url-state";
 import { ListFooter, SearchBox, StateCard } from "../../emails/list-parts";
@@ -52,6 +69,44 @@ export function AuthBadge({
 const RANGE_KEYS: RangeKey[] = ["h24", "d7", "d15", "d30", "all"];
 const VERDICTS = ["clean", "suspicious", "quarantined", "spam", "virus"] as const;
 
+/** Per row state: the From tile's glyph and tooltip, and the subject's badge; clean mail carries none. */
+const STATE_VIEW: Record<
+  ReceivedState,
+  { glyph: React.ReactNode; tip: string; badge: string | null }
+> = {
+  virus: {
+    glyph: <BugIcon {...LEAD_GLYPH} />,
+    tip: "received.verdict.virus",
+    badge: "received.badge.virus",
+  },
+  quarantined: {
+    glyph: <LockIcon {...LEAD_GLYPH} />,
+    tip: "received.verdict.quarantined",
+    badge: "received.badge.quarantined",
+  },
+  screening: {
+    glyph: <ClockIcon {...LEAD_GLYPH} />,
+    tip: "received.verdict.screening",
+    badge: "received.badge.screening",
+  },
+  spam: {
+    glyph: <SpamIcon {...LEAD_GLYPH} />,
+    tip: "received.verdict.spam",
+    badge: "received.badge.spam",
+  },
+  suspicious: {
+    glyph: <ShieldAlertIcon {...LEAD_GLYPH} />,
+    tip: "received.verdict.suspicious",
+    badge: "received.verdict.suspicious",
+  },
+  unscanned: {
+    glyph: <ShieldHalfIcon {...LEAD_GLYPH} />,
+    tip: "virus.processing_failed",
+    badge: "virus.none",
+  },
+  clean: { glyph: <EnvelopeGlyph />, tip: "received.verdict.clean", badge: null },
+};
+
 function ReceivedHead() {
   const t = useTranslations("inboxes");
   return (
@@ -79,7 +134,7 @@ function ReceivedSkeleton() {
           // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows, position is identity
           <tr key={row}>
             <td>
-              <Skeleton width={width} height={13} />
+              <SkeletonLead width={width} />
             </td>
             <td>
               <Skeleton width={widths[widths.length - 1 - row] ?? "50%"} height={13} />
@@ -97,7 +152,7 @@ function ReceivedSkeleton() {
   );
 }
 
-export interface ReceivedRow {
+export interface ReceivedRow extends ReceivedVerdicts {
   id: string;
   from: string;
   fromName: string;
@@ -105,9 +160,6 @@ export interface ReceivedRow {
   subject: string;
   attachmentCount: number;
   extractedKinds: ("code" | "link")[];
-  spamVerdict: "pass" | "gray" | "fail" | null;
-  virusVerdict: "pass" | "fail" | "processing_failed" | null;
-  held: boolean;
   createdAt: Date | string;
 }
 
@@ -123,22 +175,24 @@ export function ReceivedEmailsTable({ rows }: { rows: ReceivedRow[] }) {
       <tbody>
         {rows.map((row) => {
           const href = `/inboxes/received/${row.id}`;
+          const state = receivedState(row);
+          const view = STATE_VIEW[state];
+          const tone = RECEIVED_STATE_TONE[state];
+          const attachments = t("detail.attachmentCount", { count: row.attachmentCount });
           return (
             <tr key={row.id} className="hoverable" onClick={() => router.push(href)}>
-              <td className="ms-mono ms-cell-wrap">
-                <Link href={href} onClick={(event) => event.stopPropagation()}>
-                  {/* The null sender <> leaves no From address to show. */}
-                  <Breakable text={row.from || "<>"} />
-                </Link>
-              </td>
-              <td className="ms-mono ms-cell-wrap">
-                <Breakable text={row.receivedFor[0] ?? ""} />
-                {row.receivedFor.length > 1 ? (
-                  <span style={{ color: "var(--ms-muted)", marginLeft: 8 }}>
-                    +{row.receivedFor.length - 1}
-                  </span>
-                ) : null}
-              </td>
+              <LeadCell
+                tile={
+                  <StatusTile color={TONE_COLOR[tone]} label={t(view.tip)}>
+                    {view.glyph}
+                  </StatusTile>
+                }
+                // The null sender <> leaves no From address to show.
+                value={row.from || "<>"}
+                href={href}
+                mono
+              />
+              <LeadCell value={row.receivedFor[0] ?? ""} more={row.receivedFor.slice(1)} mono />
               <td className="ms-cell-fill">
                 <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                   <span
@@ -154,28 +208,34 @@ export function ReceivedEmailsTable({ rows }: { rows: ReceivedRow[] }) {
                     {row.subject || t("noSubject")}
                   </span>
                   {row.attachmentCount > 0 ? (
-                    <span className="ms-mono" style={{ color: "var(--ms-muted)", fontSize: 12 }}>
-                      {nf.format(row.attachmentCount)}
-                    </span>
+                    <Tooltip inline text={attachments}>
+                      <span
+                        role="img"
+                        aria-label={attachments}
+                        className="ms-mono"
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 3,
+                          color: "var(--ms-muted)",
+                          fontSize: 12,
+                        }}
+                      >
+                        <PaperclipIcon size={12} strokeWidth={2} />
+                        {nf.format(row.attachmentCount)}
+                      </span>
+                    </Tooltip>
                   ) : null}
                   {/* Kinds only: a code's value shows on the email's own page, never in a list. */}
                   {row.extractedKinds.map((kind) => (
-                    <span
-                      key={kind}
-                      className="ms-chip"
-                      style={{ fontSize: 10.5, padding: "1px 7px" }}
-                    >
-                      {t(`chip.${kind}`)}
-                    </span>
+                    <Tooltip key={kind} inline text={t(`chip.${kind}Tip`)}>
+                      <span className="ms-chip" style={{ fontSize: 10.5, padding: "1px 7px" }}>
+                        {t(`chip.${kind}`)}
+                      </span>
+                    </Tooltip>
                   ))}
-                  {row.virusVerdict === "fail" ? (
-                    <span className="ms-badge ms-badge-danger">{t("received.badge.virus")}</span>
-                  ) : row.held ? (
-                    <span className="ms-badge ms-badge-danger">
-                      {t("received.badge.quarantined")}
-                    </span>
-                  ) : row.spamVerdict === "fail" ? (
-                    <span className="ms-badge ms-badge-warn">{t("received.badge.spam")}</span>
+                  {view.badge ? (
+                    <span className={`ms-badge ms-badge-${tone}`}>{t(view.badge)}</span>
                   ) : null}
                 </span>
               </td>
diff --git a/apps/web/src/lib/received-state.test.ts b/apps/web/src/lib/received-state.test.ts
new file mode 100644
index 000000000..cb10d115e
--- /dev/null
+++ b/apps/web/src/lib/received-state.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { RECEIVED_STATE_TONE, type ReceivedVerdicts, receivedState } from "./received-state";
+
+const clean: ReceivedVerdicts = {
+  spamVerdict: "pass",
+  virusVerdict: "pass",
+  pending: false,
+  quarantined: false,
+  suspicious: false,
+};
+
+describe("receivedState", () => {
+  it("leads with the most urgent state, first match wins", () => {
+    const everything: ReceivedVerdicts = {
+      spamVerdict: "fail",
+      virusVerdict: "fail",
+      pending: true,
+      quarantined: true,
+      suspicious: true,
+    };
+    expect(receivedState(everything)).toBe("virus");
+    expect(receivedState({ ...everything, virusVerdict: "pass" })).toBe("quarantined");
+    expect(receivedState({ ...everything, virusVerdict: "pass", quarantined: false })).toBe(
+      "screening",
+    );
+    expect(receivedState({ ...clean, spamVerdict: "fail", suspicious: true })).toBe("spam");
+    expect(receivedState({ ...clean, suspicious: true, virusVerdict: "processing_failed" })).toBe(
+      "suspicious",
+    );
+    expect(receivedState({ ...clean, virusVerdict: "processing_failed" })).toBe("unscanned");
+    expect(receivedState(clean)).toBe("clean");
+  });
+
+  it("never calls mail still being screened quarantined", () => {
+    expect(receivedState({ ...clean, pending: true })).toBe("screening");
+  });
+
+  it("reads no scanner at all as clean, and a gray spam verdict as no verdict against it", () => {
+    expect(receivedState({ ...clean, virusVerdict: null, spamVerdict: null })).toBe("clean");
+    expect(receivedState({ ...clean, spamVerdict: "gray" })).toBe("clean");
+  });
+
+  it("warns on spam and suspicious mail, alarms on what is held or harmful", () => {
+    expect(RECEIVED_STATE_TONE).toEqual({
+      virus: "danger",
+      quarantined: "danger",
+      screening: "neutral",
+      spam: "warn",
+      suspicious: "warn",
+      unscanned: "neutral",
+      clean: "neutral",
+    });
+  });
+});
diff --git a/apps/web/src/lib/received-state.ts b/apps/web/src/lib/received-state.ts
new file mode 100644
index 000000000..54c661790
--- /dev/null
+++ b/apps/web/src/lib/received-state.ts
@@ -0,0 +1,46 @@
+/** What the All received list knows about a message's verdicts. */
+export interface ReceivedVerdicts {
+  spamVerdict: "pass" | "gray" | "fail" | null;
+  virusVerdict: "pass" | "fail" | "processing_failed" | null;
+  /** Some inbox it reached is still screening it. */
+  pending: boolean;
+  /** Some inbox holds it in quarantine. */
+  quarantined: boolean;
+  /** Some inbox let it in as suspicious. */
+  suspicious: boolean;
+}
+
+export type ReceivedState =
+  | "virus"
+  | "quarantined"
+  | "screening"
+  | "spam"
+  | "suspicious"
+  | "unscanned"
+  | "clean";
+
+/**
+ * The one state a received email's row leads with, the most urgent first.
+ * No virus verdict means no scanner is configured, which reads as clean;
+ * unscanned is a configured scanner that failed on this message.
+ */
+export function receivedState(row: ReceivedVerdicts): ReceivedState {
+  if (row.virusVerdict === "fail") return "virus";
+  if (row.quarantined) return "quarantined";
+  if (row.pending) return "screening";
+  if (row.spamVerdict === "fail") return "spam";
+  if (row.suspicious) return "suspicious";
+  if (row.virusVerdict === "processing_failed") return "unscanned";
+  return "clean";
+}
+
+/** Tile and badge tone per state: danger for what is held or harmful, warn for what to doubt. */
+export const RECEIVED_STATE_TONE: Record<ReceivedState, "danger" | "warn" | "neutral"> = {
+  virus: "danger",
+  quarantined: "danger",
+  screening: "neutral",
+  spam: "warn",
+  suspicious: "warn",
+  unscanned: "neutral",
+  clean: "neutral",
+};
diff --git a/apps/web/src/server/routers/receiving.ts b/apps/web/src/server/routers/receiving.ts
index c6b873d85..1fa4ff7ad 100644
--- a/apps/web/src/server/routers/receiving.ts
+++ b/apps/web/src/server/routers/receiving.ts
@@ -60,12 +60,11 @@ const verdictFilter: Record<(typeof VERDICT_FILTERS)[number], SQL> = {
   spam: sql`${r.spamVerdict} = 'fail'`,
   quarantined: membershipWhere(sql`m.verdict = 'quarantined'`),
   suspicious: membershipWhere(sql`m.verdict = 'suspicious'`),
-  clean: sql`${r.virusVerdict} is distinct from 'fail' and ${r.spamVerdict} is distinct from 'fail' and not ${membershipWhere(sql`m.verdict in ('pending', 'suspicious', 'quarantined')`)}`,
+  // Clean as the row's tile reads it (lib/received-state.ts): a scanner that
+  // failed is not clean, and no scanner at all is.
+  clean: sql`(${r.virusVerdict} is null or ${r.virusVerdict} = 'pass') and ${r.spamVerdict} is distinct from 'fail' and not ${membershipWhere(sql`m.verdict in ('pending', 'suspicious', 'quarantined')`)}`,
 };
 
-/** Held from every agent: screening still running, or quarantined and not released. */
-const heldSql = membershipWhere(sql`m.verdict in ('pending', 'quarantined')`);
-
 const recipients = z.array(z.email()).max(50);
 
 export const receivingRouter = router({
@@ -103,6 +102,21 @@ export const receivingRouter = router({
       );
       // Counted on the first page only; later pages keep reading pages[0].total.
       const [total] = input.cursor ? [] : await ctx.db.select({ n: count() }).from(r).where(where);
+      // Each row's screening across the inboxes it reached, one aggregate per
+      // row: still running, quarantined, or let in as suspicious by any of them.
+      const screening = ctx.db
+        .select({
+          pending: sql<boolean>`coalesce(bool_or(${m.verdict} = 'pending'), false)`.as("pending"),
+          quarantined: sql<boolean>`coalesce(bool_or(${m.verdict} = 'quarantined'), false)`.as(
+            "quarantined",
+          ),
+          suspicious: sql<boolean>`coalesce(bool_or(${m.verdict} = 'suspicious'), false)`.as(
+            "suspicious",
+          ),
+        })
+        .from(m)
+        .where(eq(m.receivedEmailId, r.id))
+        .as("screening");
       // Metadata columns only: a row's sealed raw message runs to 40 MiB.
       const rows = await ctx.db
         .select({
@@ -116,11 +130,14 @@ export const receivingRouter = router({
           extractedKinds: r.extractedKinds,
           spamVerdict: r.spamVerdict,
           virusVerdict: r.virusVerdict,
-          held: sql<boolean>`${heldSql}`,
+          pending: screening.pending,
+          quarantined: screening.quarantined,
+          suspicious: screening.suspicious,
           createdAt: r.createdAt,
           cursorCreatedAt: createdAtCursorField(r),
         })
         .from(r)
+        .crossJoinLateral(screening)
         .where(input.cursor ? and(where, beforeCursor(r, input.cursor)) : where)
         .orderBy(desc(r.createdAt), desc(r.id))
         .limit(input.limit + 1);
diff --git a/apps/web/test/receiving-router.test.ts b/apps/web/test/receiving-router.test.ts
index 3fd5ee9be..6b850bd58 100644
--- a/apps/web/test/receiving-router.test.ts
+++ b/apps/web/test/receiving-router.test.ts
@@ -205,7 +205,9 @@ describe("receiving", () => {
       extractedKinds: [],
       spamVerdict: "pass",
       virusVerdict: null,
-      held: false,
+      pending: false,
+      quarantined: false,
+      suspicious: false,
       createdAt: expect.any(Date),
     });
     expect((await caller(beta).receiving.list({})).items.map((row) => row.id)).toEqual([betaOnly]);
@@ -410,9 +412,13 @@ describe("received mail as Inboxes reads it", () => {
     expect((await caller(acme).receiving.list({ inbox: inboxId })).total).toBe(2);
   });
 
-  it("marks held rows and names a found code's kind, never its value", async () => {
+  it("marks quarantined rows and names a found code's kind, never its value", async () => {
     const rows = (await caller(acme).receiving.list({})).items;
-    expect(rows.find((row) => row.id === held)?.held).toBe(true);
+    expect(rows.find((row) => row.id === held)).toMatchObject({
+      pending: false,
+      quarantined: true,
+      suspicious: false,
+    });
     const coded = rows.find((row) => row.id === withCode);
     expect(coded?.extractedKinds).toEqual(["code"]);
     expect(JSON.stringify(coded)).not.toContain("482913");
@@ -547,3 +553,115 @@ describe("received mail as Inboxes reads it", () => {
     await expect(caller(acme).receiving.health()).rejects.toMatchObject({ code: "NOT_FOUND" });
   });
 });
+
+describe("each received row's screening across the inboxes it reached", () => {
+  let screening: string;
+  let doubted: string;
+  let heldAndScreening: string;
+  let unscanned: string;
+
+  beforeAll(async () => {
+    // Received while no inbox has the address; the memberships are set by hand below.
+    const to = ["lists@inbound.acme.test"];
+    screening = await receive(message("Still being screened"), to);
+    doubted = await receive(message("Doubted by one inbox"), to);
+    heldAndScreening = await receive(message("Held by one, screened by another"), to);
+    unscanned = await receive(message("The scanner failed"), to);
+    const [domain] = await db
+      .select({ id: schema.domains.id })
+      .from(schema.domains)
+      .where(eq(schema.domains.name, "inbound.acme.test"));
+    if (!domain) throw new Error("no domain");
+    const inboxes = await db
+      .insert(schema.inboxes)
+      .values(
+        ["first", "second"].map((localPart) => ({
+          teamId: acme,
+          kind: "agent" as const,
+          emailAddress: `${localPart}@inbound.acme.test`,
+          localPart,
+          domainId: domain.id,
+          name: localPart,
+          safety: defaultSafety("agent", false),
+        })),
+      )
+      .returning({ id: schema.inboxes.id });
+    const threads = await db
+      .insert(schema.inboxThreads)
+      .values(inboxes.map((inbox) => ({ teamId: acme, inboxId: inbox.id })))
+      .returning({ id: schema.inboxThreads.id, inboxId: schema.inboxThreads.inboxId });
+    const [first, second] = threads;
+    if (!first || !second) throw new Error("no threads");
+    const membership = (thread: typeof first) => ({
+      inboxId: thread.inboxId,
+      teamId: acme,
+      threadId: thread.id,
+      address: "lists@inbound.acme.test",
+      senderTrust: "external" as const,
+    });
+    await db.insert(schema.receivedEmailInboxes).values([
+      { ...membership(first), receivedEmailId: screening, verdict: "pending" },
+      {
+        ...membership(first),
+        receivedEmailId: doubted,
+        verdict: "clean",
+        deliveredAt: new Date(),
+      },
+      {
+        ...membership(second),
+        receivedEmailId: doubted,
+        verdict: "suspicious",
+        deliveredAt: new Date(),
+      },
+      {
+        ...membership(first),
+        receivedEmailId: heldAndScreening,
+        verdict: "quarantined",
+        quarantineReason: "phishing",
+        quarantinedAt: new Date(),
+      },
+      { ...membership(second), receivedEmailId: heldAndScreening, verdict: "pending" },
+    ]);
+    await db
+      .update(schema.receivedEmails)
+      .set({ virusVerdict: "processing_failed" })
+      .where(eq(schema.receivedEmails.id, unscanned));
+  });
+
+  const list = async (verdict?: "clean" | "suspicious" | "quarantined") =>
+    (await caller(acme).receiving.list({ limit: 50, ...(verdict ? { verdict } : {}) })).items;
+
+  it("flags a row pending, quarantined or suspicious when any of its inboxes has it so", async () => {
+    const rows = await list();
+    const flags = (id: string) => {
+      const row = rows.find((x) => x.id === id);
+      return (
+        row && { pending: row.pending, quarantined: row.quarantined, suspicious: row.suspicious }
+      );
+    };
+    // Still being screened is not quarantined.
+    expect(flags(screening)).toEqual({ pending: true, quarantined: false, suspicious: false });
+    expect(flags(doubted)).toEqual({ pending: false, quarantined: false, suspicious: true });
+    expect(flags(heldAndScreening)).toEqual({
+      pending: true,
+      quarantined: true,
+      suspicious: false,
+    });
+    expect(flags(unscanned)).toEqual({ pending: false, quarantined: false, suspicious: false });
+  });
+
+  it("filters each verdict apart, and counts as clean only what the list shows as clean", async () => {
+    const ids = async (verdict: "clean" | "suspicious" | "quarantined") =>
+      (await list(verdict)).map((row) => row.id);
+    const quarantined = await ids("quarantined");
+    expect(quarantined).toContain(heldAndScreening);
+    expect(quarantined).not.toContain(screening);
+    const suspicious = await ids("suspicious");
+    expect(suspicious).toContain(doubted);
+    expect(suspicious).not.toContain(screening);
+    const clean = await ids("clean");
+    for (const id of [screening, doubted, heldAndScreening, unscanned]) {
+      expect(clean).not.toContain(id);
+    }
+  });
+});
diff --git a/apps/web/test/receiving-screens.test.ts b/apps/web/test/receiving-screens.test.ts
index c0f7b4fab..bde31acc5 100644
--- a/apps/web/test/receiving-screens.test.ts
+++ b/apps/web/test/receiving-screens.test.ts
@@ -63,11 +63,16 @@ describe("the All received list", () => {
     extractedKinds: [],
     spamVerdict: null,
     virusVerdict: null,
-    held: false,
+    pending: false,
+    quarantined: false,
+    suspicious: false,
     createdAt: new Date(),
   };
   const render = (rows: ReceivedRow[]) =>
     renderToStaticMarkup(createElement(ReceivedEmailsTable, { rows }));
+  /** A row's tile: the tooltip trigger holding the labelled tile, and its glyph. */
+  const tile = (html: string, label: string) =>
+    html.match(new RegExp(`<span role="img" aria-label="${label}"[^>]*>(.*?)</span>`))?.[1];
 
   it("shows who wrote, which address got it and what it is about, from its new home", () => {
     const html = render([row]);
@@ -77,18 +82,77 @@ describe("the All received list", () => {
     expect(html).not.toContain("/emails/receiving/");
   });
 
+  it("keeps From and Inbox to one line each, the +N beside its address", () => {
+    const html = render([row]);
+    expect(html).not.toContain("ms-cell-wrap");
+    expect(html).not.toContain("<wbr");
+    const [from, inbox] = [...html.matchAll(/<td class="ms-cell-fill ms-mono">(.*?)<\/td>/g)].map(
+      (match) => match[1] ?? "",
+    );
+    expect(from).toContain('class="ms-truncate">ana@sender.example<');
+    // No tile and no link in the Inbox column: the address, then +N with the rest in its tooltip.
+    expect(inbox).toMatch(
+      /^<span class="ms-lead"><span class="ms-lead-value"><span class="ms-truncate">agent@inbound\.acme\.test<\/span><\/span><span class="ms-tooltip-trigger inline"[^>]*><span class="ms-lead-more">\+1<\/span><\/span><\/span>$/,
+    );
+  });
+
   it("names a found code or link without its value, and flags held, spam and virus mail", () => {
     const html = render([
       { ...row, id: "a", extractedKinds: ["code", "link"] },
-      { ...row, id: "b", held: true },
+      { ...row, id: "b", quarantined: true },
       { ...row, id: "c", spamVerdict: "fail" },
-      { ...row, id: "d", virusVerdict: "fail", held: true },
+      { ...row, id: "d", virusVerdict: "fail", quarantined: true },
     ]);
-    expect(html).toContain(">code<");
-    expect(html).toContain(">link<");
+    // Each chip in a tooltip saying what was found.
+    expect(html).toMatch(/class="ms-tooltip-trigger inline"[^>]*><span class="ms-chip"[^>]*>code</);
+    expect(html).toMatch(/class="ms-tooltip-trigger inline"[^>]*><span class="ms-chip"[^>]*>link</);
     expect(html).toContain('class="ms-badge ms-badge-danger">Quarantined<');
     expect(html).toContain('class="ms-badge ms-badge-warn">Spam<');
     // Malware outranks the hold it caused.
     expect(html).toContain('class="ms-badge ms-badge-danger">Virus<');
   });
+
+  it("leads each row with a tile naming its state, the badge only where the mail is not clean", () => {
+    const html = render([
+      { ...row, id: "v", virusVerdict: "fail" },
+      { ...row, id: "q", quarantined: true, pending: true },
+      { ...row, id: "p", pending: true },
+      { ...row, id: "s", spamVerdict: "fail", suspicious: true },
+      { ...row, id: "x", suspicious: true },
+      { ...row, id: "u", virusVerdict: "processing_failed" },
+      { ...row, id: "c" },
+    ]);
+    for (const label of [
+      "Virus",
+      "Quarantined",
+      "Being screened",
+      "Spam",
+      "Suspicious",
+      "Not scanned (scanner unavailable)",
+      "Clean",
+    ]) {
+      expect(
+        html.match(new RegExp(`role="img" aria-label="${label.replace(/[()]/g, "\\$&")}"`, "g")),
+        label,
+      ).toHaveLength(1);
+    }
+    // Still being screened is not quarantined: a muted clock and its own word.
+    expect(html).toContain('class="ms-badge ms-badge-neutral">Screening<');
+    expect(html.match(/>Quarantined</g)).toHaveLength(1);
+    expect(html).toContain('class="ms-badge ms-badge-warn">Suspicious<');
+    expect(html).toContain('class="ms-badge ms-badge-neutral">Not scanned<');
+    // Spam is a warning, not an alarm, on the tile as on the badge.
+    expect(html).toMatch(/aria-label="Spam" style="[^"]*color:var\(--ms-warn\)/);
+    expect(html).toMatch(/aria-label="Virus" style="[^"]*color:var\(--ms-danger\)/);
+    // No virus verdict at all is no scanner, which reads as clean: no badge.
+    expect(html.match(/class="ms-badge /g)).toHaveLength(6);
+    expect(tile(html, "Clean")).toContain('viewBox="0 0 16 16"');
+  });
+
+  it("puts a paperclip before the attachment count, and says the count in words", () => {
+    const html = render([row]);
+    expect(html).toMatch(
+      /<span role="img" aria-label="2 attachments" class="ms-mono"[^>]*><svg width="12" height="12"[^>]*stroke-width="2"[^>]*>.*?<\/svg>2<\/span>/,
+    );
+  });
 });

From 8f48f3cfb0706263d649de9abeb6550df8cd456f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:01:17 -0300
Subject: [PATCH 08/24] Share the mail clients' quote markers from core's
 quotes module

The dashboard is about to fold a reply's quoted history in received HTML,
using the same markers the agents' read already cuts: the quote classes
Gmail, Thunderbird, Yahoo and Proton write, and the ids Outlook puts where
the original starts. They now live once, as exported constants in the
import-free quotes module, which a new receiving-quotes subpath makes safe
to import from client code. The read pipeline builds its matchers from
them; the stopSpelling marker counts on any element rather than only on
<hr>, the only element Outlook puts it on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/core/package.json            |  4 ++++
 packages/core/src/receiving/quotes.ts | 19 +++++++++++++++++--
 packages/core/src/receiving/read.ts   | 14 ++++----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index d6e168b43..a43ea274a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -76,6 +76,10 @@
       "types": "./src/receiving/protocol.ts",
       "default": "./src/receiving/protocol.ts"
     },
+    "./receiving-quotes": {
+      "types": "./src/receiving/quotes.ts",
+      "default": "./src/receiving/quotes.ts"
+    },
     "./inbox-username": {
       "types": "./src/inboxes/username.ts",
       "default": "./src/inboxes/username.ts"
diff --git a/packages/core/src/receiving/quotes.ts b/packages/core/src/receiving/quotes.ts
index 7d6101ff1..87b9cb485 100644
--- a/packages/core/src/receiving/quotes.ts
+++ b/packages/core/src/receiving/quotes.ts
@@ -1,10 +1,25 @@
 /**
  * Quoted history and signatures in a reply's text, in the languages the
  * product serves (en, pt-BR, es) plus fr and de attributions. Mail clients
- * mark quotes in HTML too (gmail_quote, blockquote type=cite, Outlook's
- * divRplyFwdMsg); the read pipeline cuts those before this runs.
+ * mark quotes in HTML too (the markers below, and blockquote type=cite); the
+ * read pipeline cuts those before this runs. No imports: the dashboard reads
+ * received mail with the same rules.
  */
 
+/** Classes mail clients give the element that holds a reply's quoted history. */
+export const QUOTE_CLASSES = [
+  "gmail_quote",
+  "gmail_quote_container",
+  "moz-cite-prefix",
+  "yahoo_quoted",
+  "protonmail_quote",
+] as const;
+/**
+ * Ids, lowercased, Outlook gives the element where a reply's quoted original
+ * starts: it and everything after it are history.
+ */
+export const OUTLOOK_QUOTE_IDS = ["divrplyfwdmsg", "appendonsend", "stopspelling"] as const;
+
 const ATTRIBUTION = [
   /^On\b.{4,300}\bwrote:\s*$/i,
   /^Em\b.{4,300}\bescreveu:\s*$/i,
diff --git a/packages/core/src/receiving/read.ts b/packages/core/src/receiving/read.ts
index 174c6e14b..0dc93661e 100644
--- a/packages/core/src/receiving/read.ts
+++ b/packages/core/src/receiving/read.ts
@@ -11,7 +11,7 @@ import { decodeEntities } from "../html.js";
 import { type BodyLink, extractLinks, type HtmlTag, scanHtml } from "../links.js";
 import { extractCode, extractLink, receivedSecretValues, type SecretKind } from "./codes.js";
 import type { ReceivedExtracted } from "./message.js";
-import { splitTextQuotes } from "./quotes.js";
+import { OUTLOOK_QUOTE_IDS, QUOTE_CLASSES, splitTextQuotes } from "./quotes.js";
 
 /**
  * The read path agents and the dashboard's extracted view get: what a person
@@ -39,8 +39,8 @@ const BLOCK = new Set(
   ),
 );
 const PARAGRAPH = new Set("p h1 h2 h3 h4 h5 h6 blockquote pre table ul ol".split(" "));
-const QUOTE_CLASS =
-  /(?:^|\s)(?:gmail_quote(?:_container)?|moz-cite-prefix|yahoo_quoted|protonmail_quote)(?:\s|$)/i;
+const QUOTE_CLASS = new RegExp(`(?:^|\\s)(?:${QUOTE_CLASSES.join("|")})(?:\\s|$)`, "i");
+const OUTLOOK_QUOTE_ID: ReadonlySet<string> = new Set(OUTLOOK_QUOTE_IDS);
 
 export interface ModelAnchor {
   href: string;
@@ -149,13 +149,7 @@ export function htmlToModelText(html: string): {
       }
       const id = attr(t, "id")?.toLowerCase();
       // Outlook marks where the quoted original starts: it and everything after is history.
-      if (
-        id === "divrplyfwdmsg" ||
-        id === "appendonsend" ||
-        (t.name === "hr" && id === "stopspelling")
-      ) {
-        cut = true;
-      }
+      if (id !== undefined && OUTLOOK_QUOTE_ID.has(id)) cut = true;
       if (t.name === "br") {
         sink().push("\n");
         return;

From 438202c75257152e657bb48e662b76c7f10f31a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:01:17 -0300
Subject: [PATCH 09/24] Prepare received HTML for a frame that measures it and
 shows its links

The received preview gets a DOM pass before it is framed: the message's
<base>, <link> and http-equiv or referrer metas go, since they would
override the frame's own policy or, like a preconnect, leak a read receipt;
it learns whether the message would load remote images; and a reply also
comes without its quoted history, unless the quote is all there is or it
holds a forward. Plain-text bodies fold their trailing quote with core's
splitTextQuotes, the rules the agents' read uses.

The lockdown can now let images in over https once the reader asks, and a
remembered "always for this domain" choice lives in localStorage under one
key prefix, every access guarded. Only a sender whose authentication ties
the message to its From domain may have images load unasked, so a spoofed
From never gets them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/lib/auth-result.ts        |   9 ++
 apps/web/src/lib/email-preview.test.ts | 133 ++++++++++++++++-
 apps/web/src/lib/email-preview.ts      | 188 +++++++++++++++++++++++--
 3 files changed, 319 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/lib/auth-result.ts b/apps/web/src/lib/auth-result.ts
index 07514011a..035d43853 100644
--- a/apps/web/src/lib/auth-result.ts
+++ b/apps/web/src/lib/auth-result.ts
@@ -55,6 +55,15 @@ export function grayExplanation(
   return "dmarcGeneric";
 }
 
+// The tiers core's senderTrust grants only on alignment with the From domain;
+// a known thread's proof is the thread, not the domain.
+const AUTHENTICATED_TRUST: ReadonlySet<string> = new Set(["owner", "allowlisted", "external"]);
+
+/** Whether authentication (DMARC, or aligned DKIM or SPF) ties received mail to its From domain. */
+export function authenticatedSender(trust: string | null | undefined): boolean {
+  return trust != null && AUTHENTICATED_TRUST.has(trust);
+}
+
 /** The d= domains of DKIM-Signature header values (one per line), minus the From domain. */
 export function dkimSignerDomains(signatures: string, fromDomain: string): string[] {
   const domains = [...signatures.matchAll(/(?:^|;)\s*d=([^;\s]+)/gim)].map((match) =>
diff --git a/apps/web/src/lib/email-preview.test.ts b/apps/web/src/lib/email-preview.test.ts
index a4ed1275b..43bc95d0f 100644
--- a/apps/web/src/lib/email-preview.test.ts
+++ b/apps/web/src/lib/email-preview.test.ts
@@ -1,5 +1,13 @@
+// @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { DARK_CLIENT_SIM, emulateEmailScheme, lockDownReceivedHtml } from "./email-preview";
+import {
+  DARK_CLIENT_SIM,
+  emulateEmailScheme,
+  linkDestination,
+  lockDownReceivedHtml,
+  prepareReceivedHtml,
+  withoutTrailingQuote,
+} from "./email-preview";
 
 describe("emulateEmailScheme", () => {
   const html =
@@ -45,6 +53,14 @@ describe("lockDownReceivedHtml", () => {
     expect(doc).toContain('<meta name="referrer" content="no-referrer">');
   });
 
+  it("lets images, and only images, come from the network once the reader asks", () => {
+    const doc = lockDownReceivedHtml("<p>hi</p>", { remoteImages: true });
+    expect(doc.startsWith(POLICY)).toBe(true);
+    expect(doc).toContain(
+      "default-src 'none'; img-src data: https:; style-src 'unsafe-inline'; font-src data:",
+    );
+  });
+
   it("keeps the message's doctype first, so its rendering mode stays as sent", () => {
     expect(
       lockDownReceivedHtml("<!DOCTYPE html>\n<html><body>hi</body></html>").startsWith(
@@ -53,3 +69,118 @@ describe("lockDownReceivedHtml", () => {
     ).toBe(true);
   });
 });
+
+describe("prepareReceivedHtml", () => {
+  it("drops what would override the frame's own policy, keeping the message's color schemes", () => {
+    const { full } = prepareReceivedHtml(
+      '<html><head><meta http-equiv="refresh" content="0;url=https://x.example/"><base href="https://x.example/">' +
+        '<meta name="referrer" content="unsafe-url"><link rel="preconnect" href="https://tracker.example">' +
+        '<meta name="color-scheme" content="light dark"></head><body><a href="/a">a</a></body></html>',
+    );
+    expect(full.html).not.toMatch(/refresh|<base|unsafe-url|<link/);
+    expect(full.html).toContain('<meta name="color-scheme" content="light dark">');
+    expect(full.html).toContain('<a href="/a">a</a>');
+  });
+
+  it("tells a message that would load remote images from one that carries its own", () => {
+    const remote = (html: string) => prepareReceivedHtml(html).full.remoteImages;
+    expect(remote('<img src="https://cdn.example.com/a.png">')).toBe(true);
+    expect(remote('<img src="//cdn.example.com/a.png">')).toBe(true);
+    expect(
+      remote('<img srcset="data:image/png;base64,AA== 1x, https://cdn.example.com/b.png 2x">'),
+    ).toBe(true);
+    expect(remote('<table background="https://cdn.example.com/bg.png"></table>')).toBe(true);
+    expect(
+      remote('<div style="background:url(&quot;https://cdn.example.com/bg.png&quot;)"></div>'),
+    ).toBe(true);
+    expect(
+      remote("<style>.hero{background-image:url(https://cdn.example.com/h.png)}</style>"),
+    ).toBe(true);
+    expect(remote('<img src="data:image/png;base64,AA=="><img src="cid:logo@example.com">')).toBe(
+      false,
+    );
+    // Written as text, a URL is no image.
+    expect(remote("<p>see https://cdn.example.com/a.png</p>")).toBe(false);
+  });
+
+  it("folds the quoted history mail clients mark, and keeps it when it is all there is", () => {
+    const trimmed = (html: string) => prepareReceivedHtml(html).trimmed?.html ?? null;
+    const gmail =
+      '<div dir="ltr">Sounds good.</div><div class="gmail_quote"><div class="gmail_attr">On Thu, Oct 16, 2026 at 10:00 AM Ana &lt;ana@example.com&gt; wrote:<br></div><blockquote class="gmail_quote">Old text</blockquote></div>';
+    expect(trimmed(gmail)).toContain("Sounds good.");
+    expect(trimmed(gmail)).not.toMatch(/wrote|Old text/);
+    expect(prepareReceivedHtml(gmail).full.html).toContain("Old text");
+    const apple =
+      '<div>Yes.<br><blockquote type="cite"><div>On Oct 16, 2026, at 10:00, Ana wrote:</div>Old text</blockquote></div>';
+    expect(trimmed(apple)).not.toContain("Old text");
+    const thunderbird =
+      '<p>Yes.</p><div class="moz-cite-prefix">On 10/16/26 10:00, Ana wrote:<br></div><blockquote type="cite">Old text</blockquote>';
+    expect(trimmed(thunderbird)).not.toMatch(/wrote|Old text/);
+    // Outlook: its marker, the rule above it and everything after are history.
+    const outlook =
+      '<div>Yes.</div><hr><div id="divRplyFwdMsg"><b>From:</b> Ana<br><b>Sent:</b> Thursday</div><div>Old text</div>';
+    expect(trimmed(outlook)).toContain("Yes.");
+    expect(trimmed(outlook)).not.toMatch(/<hr|From:|Old text/);
+    expect(trimmed('<div class="yahoo_quoted">On Thursday Ana wrote: old</div>')).toBeNull();
+    expect(trimmed('<p>Yes.</p><div class="protonmail_quote">Old text</div>')).not.toContain(
+      "Old text",
+    );
+    expect(trimmed("<p>No quote here.</p>")).toBeNull();
+  });
+
+  it("never folds a forward, whose original is what the sender wants read", () => {
+    expect(
+      prepareReceivedHtml(
+        '<div>FYI</div><div class="gmail_quote"><div class="gmail_attr">---------- Forwarded message ---------<br>From: Ana</div>Original</div>',
+      ).trimmed,
+    ).toBeNull();
+    // A reply quoting an older forward still folds.
+    expect(
+      prepareReceivedHtml(
+        '<div>Thanks</div><div class="gmail_quote">On Thu, Ana wrote:<br><blockquote class="gmail_quote"><div class="gmail_quote">---------- Forwarded message ---------<br>x</div></blockquote></div>',
+      ).trimmed?.html,
+    ).not.toContain("Forwarded");
+  });
+
+  it("says whether the folded body still asks for remote images", () => {
+    const { full, trimmed } = prepareReceivedHtml(
+      '<p>Thanks!</p><blockquote type="cite"><img src="https://cdn.example.com/logo.png"></blockquote>',
+    );
+    expect(full.remoteImages).toBe(true);
+    expect(trimmed?.remoteImages).toBe(false);
+  });
+});
+
+describe("withoutTrailingQuote", () => {
+  it("cuts a reply's quoted tail, attribution included", () => {
+    expect(
+      withoutTrailingQuote(
+        "Thanks, that worked!\n\n-- \nBruno\n\nOn Thu, Oct 16, 2026 at 10:00 AM Ana Souza <ana@example.com>\nwrote:\n> Try again?\n> Ana",
+      ),
+    ).toBe("Thanks, that worked!\n\n-- \nBruno");
+    expect(withoutTrailingQuote("Done.\r\n\r\n> Can you check?\r\n> Ana\r\n")).toBe("Done.");
+  });
+
+  it("folds nothing when the quote is all there is, answers sit between quotes, or it is a forward", () => {
+    expect(withoutTrailingQuote("No quote here.")).toBeNull();
+    expect(withoutTrailingQuote("On Thu, Oct 16, 2026, Ana wrote:\n> Hi")).toBeNull();
+    expect(
+      withoutTrailingQuote("> Question one?\nAnswer one.\n> Question two?\nAnswer two."),
+    ).toBeNull();
+    expect(
+      withoutTrailingQuote("FYI\n\n---------- Forwarded message ---------\nFrom: Ana\n\n> quoted"),
+    ).toBeNull();
+  });
+});
+
+it("names where a link leads: a mailto's address, any other link whole", () => {
+  expect(linkDestination("mailto:ana%40example.com?subject=Hi")).toEqual({
+    text: "ana@example.com",
+    mail: true,
+  });
+  expect(linkDestination("https://example.com/a?utm_source=x")).toEqual({
+    text: "https://example.com/a?utm_source=x",
+    mail: false,
+  });
+  expect(linkDestination("mailto:%E0%A4%A")).toEqual({ text: "%E0%A4%A", mail: true });
+});
diff --git a/apps/web/src/lib/email-preview.ts b/apps/web/src/lib/email-preview.ts
index a0ba3e8fe..b510db8a5 100644
--- a/apps/web/src/lib/email-preview.ts
+++ b/apps/web/src/lib/email-preview.ts
@@ -1,5 +1,15 @@
+import {
+  hasForwardMarker,
+  OUTLOOK_QUOTE_IDS,
+  QUOTE_CLASSES,
+  splitTextQuotes,
+} from "@millionsend/core/receiving-quotes";
+
 export type EmailScheme = "light" | "dark";
 
+/** A preview frame's own color, under the message: a dark client's canvas, or paper white. */
+export const PREVIEW_CANVAS: Record<EmailScheme, string> = { light: "#ffffff", dark: "#111113" };
+
 /*
  * Approximation of how dark-mode mail clients (Gmail's auto-darkening, Apple
  * Mail with supported-color-schemes) transform a light email: invert + rotate
@@ -60,15 +70,20 @@ function openLinksOutside(html: string): string {
 }
 
 /*
- * Mail from a stranger loads nothing from the network: a remote image is a
- * read receipt, and remote CSS, fonts and DNS prefetches leak the same way.
- * Inline styles and data: images stay, which is how cid: parts arrive. The
- * frame's sandbox already stops scripts, forms and meta refresh.
+ * Mail from a stranger loads nothing from the network until the reader asks:
+ * a remote image is a read receipt, and remote CSS, fonts and DNS prefetches
+ * leak the same way. Inline styles and data: images stay, which is how cid:
+ * parts arrive. Asked, images come straight from the sender over https; the
+ * rest stays blocked. The frame's sandbox already stops scripts, forms and
+ * meta refresh.
  */
-const RECEIVED_LOCKDOWN =
-  `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:; base-uri 'none'; form-action 'none'">` +
-  '<meta http-equiv="x-dns-prefetch-control" content="off">' +
-  '<meta name="referrer" content="no-referrer">';
+function receivedLockdown(imageSources: string): string {
+  return (
+    `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${imageSources}; style-src 'unsafe-inline'; font-src data:; base-uri 'none'; form-action 'none'">` +
+    '<meta http-equiv="x-dns-prefetch-control" content="off">' +
+    '<meta name="referrer" content="no-referrer">'
+  );
+}
 
 /**
  * A received message's preview document. The policy goes first, after the
@@ -76,7 +91,160 @@ const RECEIVED_LOCKDOWN =
  * of <html> the parser puts it in an implied head, and the doctype it kept
  * leaves the message's rendering mode as sent.
  */
-export function lockDownReceivedHtml(html: string): string {
+export function lockDownReceivedHtml(
+  html: string,
+  { remoteImages = false }: { remoteImages?: boolean } = {},
+): string {
   const doctype = /^\s*<!doctype[^>]*>/i.exec(html)?.[0] ?? "";
-  return doctype + RECEIVED_LOCKDOWN + html.slice(doctype.length);
+  return (
+    doctype + receivedLockdown(remoteImages ? "data: https:" : "data:") + html.slice(doctype.length)
+  );
+}
+
+/** A received message's HTML as its frame shows it, and whether it asks for remote images. */
+export interface MailBody {
+  html: string;
+  remoteImages: boolean;
+}
+
+const REMOTE_URL = /^\s*(?:https?:)?\/\//i;
+const REMOTE_CSS_URL = /url\(\s*['"]?\s*(?:https?:)?\/\//i;
+const QUOTE_SELECTOR = [...QUOTE_CLASSES.map((name) => `.${name}`), 'blockquote[type="cite"]'].join(
+  ", ",
+);
+const OUTLOOK_QUOTE_ID: ReadonlySet<string> = new Set(OUTLOOK_QUOTE_IDS);
+const LINE_BLOCKS = "div, p, blockquote, li, tr, h1, h2, h3, h4, h5, h6";
+
+/** Whether anything in the document would load an image from the network. */
+function hasRemoteImages(doc: Document): boolean {
+  const some = (selector: string, remote: (el: Element) => boolean) =>
+    Array.from(doc.querySelectorAll(selector)).some(remote);
+  const url = (name: string) => (el: Element) => REMOTE_URL.test(el.getAttribute(name) ?? "");
+  return (
+    some("img[src]", url("src")) ||
+    some("[background]", url("background")) ||
+    some("img[srcset], source[srcset]", (el) =>
+      (el.getAttribute("srcset") ?? "").split(",").some((candidate) => REMOTE_URL.test(candidate)),
+    ) ||
+    some("[style]", (el) => REMOTE_CSS_URL.test(el.getAttribute("style") ?? "")) ||
+    some("style", (el) => REMOTE_CSS_URL.test(el.textContent ?? ""))
+  );
+}
+
+/** A quote container opening with a forward marker: its original is what the sender wants read. */
+function isForward(el: Element): boolean {
+  const copy = el.cloneNode(true) as Element;
+  for (const br of copy.querySelectorAll("br")) br.replaceWith("\n");
+  for (const block of copy.querySelectorAll(LINE_BLOCKS)) block.append("\n");
+  const first = (copy.textContent ?? "").split("\n").find((line) => line.trim() !== "");
+  return hasForwardMarker(first ?? "");
+}
+
+/** Whether a reader would see anything in the body: text, or an image. */
+function showsAnything(body: HTMLElement): boolean {
+  const copy = body.cloneNode(true) as HTMLElement;
+  for (const el of copy.querySelectorAll("style, script, template, title")) el.remove();
+  return (copy.textContent ?? "").trim() !== "" || copy.querySelector("img") !== null;
+}
+
+/** Removes `el`, the rule Outlook draws right above it, and everything after it up to the body. */
+function cutFrom(el: Element, body: HTMLElement): void {
+  if (el.previousElementSibling?.localName === "hr") el.previousElementSibling.remove();
+  for (let node: Element | null = el; node && node !== body; node = node.parentElement) {
+    while (node.nextSibling) node.nextSibling.remove();
+  }
+  el.remove();
+}
+
+/**
+ * A received message's HTML, parsed once for its frame. What would override
+ * the frame's own policy goes: <base>, <link> (a preconnect is a read
+ * receipt), and http-equiv and referrer metas, which win over ours because
+ * they come later. A reply also comes without its quoted history, unless
+ * that is all there is or it holds a forward.
+ */
+export function prepareReceivedHtml(html: string): { full: MailBody; trimmed: MailBody | null } {
+  // A server render has no DOM, and no message reaches a frame before the
+  // client holds it; the frame's sandbox and policy guard it either way.
+  if (typeof DOMParser === "undefined") {
+    return { full: { html, remoteImages: false }, trimmed: null };
+  }
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  for (const el of doc.querySelectorAll("base, link, meta")) {
+    if (
+      el.localName !== "meta" ||
+      el.hasAttribute("http-equiv") ||
+      el.getAttribute("name")?.trim().toLowerCase() === "referrer"
+    ) {
+      el.remove();
+    }
+  }
+  const root = doc.documentElement;
+  const full = { html: root.outerHTML, remoteImages: hasRemoteImages(doc) };
+  const quotes = Array.from(doc.querySelectorAll(QUOTE_SELECTOR)).filter(
+    (el) => !el.parentElement?.closest(QUOTE_SELECTOR),
+  );
+  const outlook = Array.from(doc.querySelectorAll("[id]")).find((el) =>
+    OUTLOOK_QUOTE_ID.has(el.id.toLowerCase()),
+  );
+  if ((quotes.length === 0 && !outlook) || quotes.some(isForward)) return { full, trimmed: null };
+  for (const el of quotes) el.remove();
+  if (outlook) cutFrom(outlook, doc.body);
+  if (!showsAnything(doc.body)) return { full, trimmed: null };
+  return { full, trimmed: { html: root.outerHTML, remoteImages: hasRemoteImages(doc) } };
+}
+
+/**
+ * A plain-text body without the quoted history that ends it, read by the
+ * same rules as the agents' read; null when there is none, when the quote is
+ * all there is, or when answers sit between quoted lines.
+ */
+export function withoutTrailingQuote(text: string): string | null {
+  const body = text.replace(/\r\n?/g, "\n").trimEnd();
+  const { quoted } = splitTextQuotes(body);
+  if (!quoted || !body.endsWith(quoted)) return null;
+  return body.slice(0, body.length - quoted.length).trimEnd() || null;
+}
+
+/** Where a link in a message leads, as its tooltip names it: a mailto's address, else the URL. */
+export function linkDestination(href: string): { text: string; mail: boolean } {
+  if (!/^mailto:/i.test(href)) return { text: href, mail: false };
+  const address = href.slice("mailto:".length).split("?")[0] ?? "";
+  try {
+    return { text: decodeURIComponent(address), mail: true };
+  } catch {
+    return { text: address, mail: true };
+  }
+}
+
+/** localStorage key prefix: one key per sender domain whose remote images always load. */
+export const MAIL_IMAGES_KEY_PREFIX = "ms-mail-images:";
+// Tells every message on screen, not only the one clicked; "storage" covers other tabs.
+const MAIL_IMAGES_EVENT = "ms-mail-images";
+
+export function imagesAlwaysShown(domain: string): boolean {
+  try {
+    return localStorage.getItem(MAIL_IMAGES_KEY_PREFIX + domain) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export function alwaysShowImages(domain: string): void {
+  try {
+    localStorage.setItem(MAIL_IMAGES_KEY_PREFIX + domain, "1");
+  } catch {
+    // Storage unavailable (private mode): the message on screen still shows them.
+  }
+  window.dispatchEvent(new Event(MAIL_IMAGES_EVENT));
+}
+
+/** Subscribes to changes of the domains whose images always load; returns the unsubscribe. */
+export function onImagesAlwaysShown(callback: () => void): () => void {
+  window.addEventListener(MAIL_IMAGES_EVENT, callback);
+  window.addEventListener("storage", callback);
+  return () => {
+    window.removeEventListener(MAIL_IMAGES_EVENT, callback);
+    window.removeEventListener("storage", callback);
+  };
 }

From d63bcb1ae8ec6aa1a01804001097beef49293e44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:01:17 -0300
Subject: [PATCH 10/24] Render received HTML in the thread pane, in a frame
 sized to its content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The thread pane showed only a message's text part, and nothing at all for
HTML-only mail. MailFrame now renders the HTML in the card, and the
Received email page's preview uses the same frame instead of a fixed
640px box:

- the sandbox never allows scripts, forms or top navigation;
  allow-same-origin only lets the dashboard measure the document and read
  its links;
- the frame takes its content's height, measured on load, on each image
  load or error and on width changes, with no inner scrollbar; wide mail
  scrolls sideways inside its own box;
- remote images stay blocked behind a bar offering "Show images" and, for
  an authenticated sender, "Always for" its domain;
- hovering or focusing a link shows where it goes in the app's tooltip;
- a reply's quoted history folds under a "•••" toggle, in HTML and text;
- unstyled mail gets a mail client's sans default instead of the browser's
  serif.

Held mail keeps its whole text and no HTML, as it is read to decide on a
release; draft cards are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |   9 +
 apps/web/messages/pt-BR/inboxes.json          |   9 +
 .../(dashboard)/inboxes/[id]/threads-tab.tsx  |  28 +-
 .../inboxes/received/[id]/received-email.tsx  |  13 +-
 .../src/components/email-content-panel.tsx    |  34 +-
 apps/web/src/components/mail-frame.tsx        | 322 ++++++++++++++++++
 apps/web/src/styles/components.css            |  89 +++++
 apps/web/test/inboxes-screens.test.ts         |  75 +++-
 apps/web/test/receiving-screens.test.ts       |  16 +-
 9 files changed, 564 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/src/components/mail-frame.tsx

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index 49f1d9b05..6dc9f6769 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -153,6 +153,15 @@
     "quarantined": "Held in quarantine: your agent can't see it until someone releases it.",
     "hiddenText": "Hidden text removed"
   },
+  "mail": {
+    "title": "Message from {name}",
+    "imagesHidden": "Remote images are hidden to protect your privacy.",
+    "showImages": "Show images",
+    "alwaysFor": "Always for {domain}",
+    "opensInNewTab": "Opens in a new tab",
+    "showQuoted": "Show quoted text",
+    "hideQuoted": "Hide quoted text"
+  },
   "draft": {
     "title": "Draft · waiting for approval",
     "created": "created {time}",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 4158bf2ce..d4964bb2a 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -153,6 +153,15 @@
     "quarantined": "Retido em quarentena: o agente só vê depois que alguém liberar.",
     "hiddenText": "Texto oculto removido"
   },
+  "mail": {
+    "title": "Mensagem de {name}",
+    "imagesHidden": "Imagens externas ficam ocultas para proteger sua privacidade.",
+    "showImages": "Mostrar imagens",
+    "alwaysFor": "Sempre mostrar de {domain}",
+    "opensInNewTab": "Abre em uma nova aba",
+    "showQuoted": "Mostrar texto citado",
+    "hideQuoted": "Ocultar texto citado"
+  },
   "draft": {
     "title": "Rascunho · aguardando aprovação",
     "created": "criado {time}",
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
index 190208673..75e62b7f9 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
@@ -15,6 +15,7 @@ import {
   TrashIcon,
 } from "@/components/icons/mail-icons";
 import { NavGlyph, RefreshGlyph } from "@/components/icons/nav-icons";
+import { MailFrame, MailText } from "@/components/mail-frame";
 import { MessageEditor } from "@/components/maily-editor/lazy";
 import { ConfirmKeycap } from "@/components/modal-footer";
 import { PopoverMenu } from "@/components/popover-menu";
@@ -24,7 +25,8 @@ import { BtnSpinner, Spinner } from "@/components/spinner";
 import { StatusBadge, StatusDot } from "@/components/status-badge";
 import { toast } from "@/components/toast";
 import { Tooltip } from "@/components/tooltip";
-import { addrSpec, formatBytes, formatRelative, senderName } from "@/lib/format";
+import { authenticatedSender } from "@/lib/auth-result";
+import { addrSpec, formatBytes, formatRelative, mailDomain, senderName } from "@/lib/format";
 import { htmlToText } from "@/lib/html";
 import { isReadOnly } from "@/lib/read-only";
 import { useTRPC } from "@/lib/trpc";
@@ -535,7 +537,7 @@ function ThreadPane({
   );
 }
 
-function MessageCard({
+export function MessageCard({
   message,
   inbox,
   onChange,
@@ -617,18 +619,16 @@ function MessageCard({
           {t("message.screening")}
         </p>
       ) : null}
-      {message.text ? (
-        <p
-          style={{
-            margin: "10px 0 0",
-            fontSize: 13.5,
-            lineHeight: 1.55,
-            whiteSpace: "pre-wrap",
-            overflowWrap: "anywhere",
-          }}
-        >
-          {message.text}
-        </p>
+      {/* Held mail keeps its text, whole: it is read to decide on a release. */}
+      {message.html && !held ? (
+        <MailFrame
+          html={message.html}
+          title={t("mail.title", { name: senderName(message.from) })}
+          domain={mailDomain(addrSpec(message.from))}
+          authenticated={inbound && authenticatedSender(message.screening.sender_trust)}
+        />
+      ) : message.text ? (
+        <MailText text={message.text} foldQuote={!held} />
       ) : null}
       {message.attachments.length > 0 ? (
         <ul style={{ margin: "10px 0 0", padding: 0, listStyle: "none", ...muted }}>
diff --git a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
index 6cbf741e9..63cffb20d 100644
--- a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
@@ -20,7 +20,12 @@ import { Skeleton, SkeletonBadge, SkeletonChip } from "@/components/skeleton";
 import { BtnSpinner } from "@/components/spinner";
 import { Table } from "@/components/table";
 import { toast } from "@/components/toast";
-import { AUTH_CHECKS, dkimSignerDomains, grayExplanation } from "@/lib/auth-result";
+import {
+  AUTH_CHECKS,
+  authenticatedSender,
+  dkimSignerDomains,
+  grayExplanation,
+} from "@/lib/auth-result";
 import { formatBytes, formatDayTime, formatRelative, mailDomain } from "@/lib/format";
 import { useTRPC } from "@/lib/trpc";
 import { useTeamRole } from "@/lib/use-team-role";
@@ -604,7 +609,11 @@ export function ReceivedEmailView() {
             bodyPurgedAt: email.contentPurgedAt,
             hiddenBySupportView: email.hiddenBySupportView,
           }}
-          received={{ headers: email.headers }}
+          received={{
+            headers: email.headers,
+            domain: mailDomain(email.from),
+            authenticated: authenticatedSender(email.senderTrust),
+          }}
         />
       </div>
 
diff --git a/apps/web/src/components/email-content-panel.tsx b/apps/web/src/components/email-content-panel.tsx
index f90bc0339..cf2c3c40e 100644
--- a/apps/web/src/components/email-content-panel.tsx
+++ b/apps/web/src/components/email-content-panel.tsx
@@ -6,9 +6,10 @@ import { useMemo, useState } from "react";
 import { CodeHighlight } from "@/components/code-highlight";
 import { CopyButton, CopyGlyph } from "@/components/copy-chip";
 import { Drawer } from "@/components/drawer";
+import { MailFrame } from "@/components/mail-frame";
 import { PreviewSchemePills } from "@/components/preview-scheme-pills";
 import { Switch } from "@/components/switch";
-import { emulateEmailScheme, lockDownReceivedHtml } from "@/lib/email-preview";
+import { emulateEmailScheme, PREVIEW_CANVAS } from "@/lib/email-preview";
 import { formatDayTime } from "@/lib/format";
 import { formatHtml } from "@/lib/html";
 import { BAND_TONE, checkGlyph, formatScoreTenths } from "@/lib/score-band";
@@ -305,8 +306,16 @@ export function EmailContentPanel({
     /** Refused at accept with every recipient suppressed: there never was a body. */
     suppressedAtAccept?: boolean | undefined;
   };
-  /** A received message: written by a stranger, so its preview loads nothing from the network. */
-  received?: { headers: Record<string, string> | null };
+  /**
+   * A received message: written by a stranger, so its preview loads nothing
+   * from the network unasked.
+   */
+  received?: {
+    headers: Record<string, string> | null;
+    /** The From address's domain, and whether authentication ties the message to it. */
+    domain: string;
+    authenticated: boolean;
+  };
 }) {
   const t = useTranslations("emails");
   const [tab, setTab] = useState<Tab>("preview");
@@ -458,24 +467,29 @@ export function EmailContentPanel({
       ) : (
         <>
           {tab === "preview" &&
-            (email.html ? (
+            (email.html && received ? (
+              <MailFrame
+                panel
+                html={email.html}
+                title={t("detail.preview")}
+                scheme={scheme}
+                domain={received.domain}
+                authenticated={received.authenticated}
+              />
+            ) : email.html ? (
               // Edge to edge: the message lays itself out inside the frame,
               // as it would in a mail client.
               <iframe
                 title={t("detail.preview")}
                 sandbox="allow-popups allow-popups-to-escape-sandbox"
-                srcDoc={
-                  received
-                    ? lockDownReceivedHtml(emulateEmailScheme(email.html, scheme))
-                    : emulateEmailScheme(email.html, scheme)
-                }
+                srcDoc={emulateEmailScheme(email.html, scheme)}
                 style={{
                   display: "block",
                   width: "100%",
                   height: 640,
                   border: 0,
                   borderRadius: "0 0 12px 12px",
-                  background: scheme === "dark" ? "#111113" : "#ffffff",
+                  background: PREVIEW_CANVAS[scheme],
                 }}
               />
             ) : (
diff --git a/apps/web/src/components/mail-frame.tsx b/apps/web/src/components/mail-frame.tsx
new file mode 100644
index 000000000..70db8f667
--- /dev/null
+++ b/apps/web/src/components/mail-frame.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { ImageOffIcon } from "@/components/icons/mail-icons";
+import { Tooltip } from "@/components/tooltip";
+import {
+  alwaysShowImages,
+  type EmailScheme,
+  emulateEmailScheme,
+  imagesAlwaysShown,
+  linkDestination,
+  lockDownReceivedHtml,
+  onImagesAlwaysShown,
+  PREVIEW_CANVAS,
+  prepareReceivedHtml,
+  withoutTrailingQuote,
+} from "@/lib/email-preview";
+import { type Box, placePanel, viewportSize } from "@/lib/panel-placement";
+import { usePreviewScheme } from "@/lib/use-preview-scheme";
+
+/** The frame's height until its document is measured. */
+const MIN_HEIGHT = 120;
+const TIP_GAP = 8;
+/*
+ * The document sizes the frame, never the other way round: a root as tall as
+ * the viewport (height:100% is common in mail) could only ever grow. Vertical
+ * overflow stays hidden, so no inner scrollbar shows while a measurement
+ * settles; a wide message still scrolls sideways inside its own box.
+ */
+const FIT_TO_CONTENT =
+  "<style>html{height:auto!important;min-height:0!important;overflow-y:hidden!important}</style>";
+// A mail client's own default, under whatever the message sets: replies from
+// Gmail or Apple Mail carry no font, and the browser's would be a serif.
+const CLIENT_FONT = "<style>body{font-family:sans-serif;font-size:13.5px}</style>";
+
+interface LinkTip {
+  text: string;
+  mail: boolean;
+  /** The link's box in the dashboard's viewport. */
+  anchor: Box;
+}
+
+/** The "•••" under a message whose quoted history is folded. */
+function QuoteToggle({ shown, onToggle }: { shown: boolean; onToggle: () => void }) {
+  const t = useTranslations("inboxes");
+  const label = t(shown ? "mail.hideQuoted" : "mail.showQuoted");
+  return (
+    // A line of its own: the tooltip's trigger is inline.
+    <div>
+      <Tooltip inline focusableChild text={label}>
+        <button
+          type="button"
+          className="ms-mail-quote"
+          aria-label={label}
+          aria-expanded={shown}
+          onClick={onToggle}
+        >
+          •••
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
+
+/** A plain-text body, its trailing quoted history folded under the same toggle. */
+export function MailText({ text, foldQuote = true }: { text: string; foldQuote?: boolean }) {
+  const folded = useMemo(() => (foldQuote ? withoutTrailingQuote(text) : null), [text, foldQuote]);
+  const [quoteShown, setQuoteShown] = useState(false);
+  return (
+    <>
+      <p
+        style={{
+          margin: "10px 0 0",
+          fontSize: 13.5,
+          lineHeight: 1.55,
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere",
+        }}
+      >
+        {folded === null || quoteShown ? text : folded}
+      </p>
+      {folded === null ? null : (
+        <QuoteToggle shown={quoteShown} onToggle={() => setQuoteShown((shown) => !shown)} />
+      )}
+    </>
+  );
+}
+
+/**
+ * A received message's HTML in a sandboxed frame sized to its content. No
+ * script ever runs in it: allow-same-origin is there only so the dashboard
+ * can measure the document and read its links, and without allow-scripts the
+ * message still cannot use it. Remote images wait for the reader, or load on
+ * their own for a domain the reader chose once authentication proves it.
+ */
+export function MailFrame({
+  html,
+  title,
+  domain,
+  authenticated,
+  scheme,
+  panel = false,
+}: {
+  html: string;
+  title: string;
+  /** The From address's domain: what "Always for" remembers. */
+  domain: string;
+  /** Authentication ties the message to `domain`; only then may its images load unasked. */
+  authenticated: boolean;
+  /** The mail client imitated; the dashboard's theme by default. */
+  scheme?: EmailScheme | undefined;
+  /** Edge to edge in a panel, rather than boxed inside a card. */
+  panel?: boolean;
+}) {
+  const t = useTranslations("inboxes");
+  const [themeScheme] = usePreviewScheme();
+  const shownScheme = scheme ?? themeScheme;
+  const prepared = useMemo(() => prepareReceivedHtml(html), [html]);
+  const [quoteShown, setQuoteShown] = useState(false);
+  const body = quoteShown || !prepared.trimmed ? prepared.full : prepared.trimmed;
+  // A spoofed From proves no domain, so it never gets images loaded unasked.
+  const trusted = authenticated && domain !== "";
+  const always = useSyncExternalStore(
+    onImagesAlwaysShown,
+    () => trusted && imagesAlwaysShown(domain),
+    () => false,
+  );
+  const [imagesShown, setImagesShown] = useState(false);
+  const images = imagesShown || always;
+  const srcDoc =
+    lockDownReceivedHtml(emulateEmailScheme(CLIENT_FONT + body.html, shownScheme), {
+      remoteImages: images,
+    }) + FIT_TO_CONTENT;
+
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const tipRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(MIN_HEIGHT);
+  const [tip, setTip] = useState<LinkTip | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies(srcDoc): each new document is attached to once it replaces the one before
+  useLayoutEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+    // A new srcdoc loads asynchronously: until then the frame still holds the
+    // document before it (the initial blank one, or the last rendering).
+    const before = frame.contentDocument;
+    let doc: Document | null = null;
+    let link: Element | null = null;
+    let width = frame.clientWidth;
+    let raf = 0;
+    const measure = () => {
+      const root = doc?.documentElement;
+      const view = frame.contentWindow;
+      if (!root || !view) return;
+      // A sideways scrollbar takes its height out of the viewport.
+      setHeight(
+        Math.ceil(root.getBoundingClientRect().height) + view.innerHeight - root.clientHeight,
+      );
+    };
+    const follow = (target: EventTarget | null) => {
+      const found =
+        target && "closest" in target ? (target as Element).closest("a[href], area[href]") : null;
+      // An SVG link's href is no string: it gets no tip.
+      const href = (found as HTMLAnchorElement | null)?.href;
+      const next = typeof href === "string" ? found : null;
+      if (next === link) return;
+      link = next;
+      if (!next || typeof href !== "string") {
+        setTip(null);
+        return;
+      }
+      const inner = next.getBoundingClientRect();
+      const outer = frame.getBoundingClientRect();
+      const left = outer.left + frame.clientLeft;
+      const top = outer.top + frame.clientTop;
+      setTip({
+        ...linkDestination(href),
+        anchor: {
+          left: left + inner.left,
+          right: left + inner.right,
+          top: top + inner.top,
+          bottom: top + inner.bottom,
+        },
+      });
+    };
+    const hide = () => follow(null);
+    // Esc dismisses an open tip, and only that: the pane's own Esc sees it handled.
+    const dismiss = (event: Event) => {
+      if ((event as KeyboardEvent).key !== "Escape" || !link) return;
+      event.preventDefault();
+      hide();
+    };
+    const listeners: [string, (event: Event) => void][] = [
+      ["load", measure],
+      ["error", measure],
+      ["mouseover", (event) => follow(event.target)],
+      // A scroll hides the tip it would misplace; the pointer's next move brings it back.
+      ["mousemove", (event) => follow(event.target)],
+      ["focusin", (event) => follow(event.target)],
+      [
+        "mouseout",
+        (event) => {
+          // Leaving the frame; a move between its elements is the next mouseover's call.
+          if (!(event as MouseEvent).relatedTarget) hide();
+        },
+      ],
+      ["focusout", (event) => follow((event as FocusEvent).relatedTarget)],
+      ["keydown", dismiss],
+      ["scroll", hide],
+    ];
+    const attach = () => {
+      const current = frame.contentDocument;
+      // Gone cross-origin: a link with its own target navigated the frame.
+      if (!current) return;
+      if (current === before || current.readyState === "loading") {
+        raf = requestAnimationFrame(attach);
+        return;
+      }
+      doc = current;
+      for (const [type, listener] of listeners) doc.addEventListener(type, listener, true);
+      measure();
+    };
+    attach();
+    frame.addEventListener("load", measure);
+    window.addEventListener("scroll", hide, { capture: true, passive: true });
+    document.addEventListener("keydown", dismiss, true);
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(() => {
+            if (frame.clientWidth === width) return;
+            width = frame.clientWidth;
+            measure();
+          });
+    observer?.observe(frame);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer?.disconnect();
+      frame.removeEventListener("load", measure);
+      window.removeEventListener("scroll", hide, { capture: true });
+      document.removeEventListener("keydown", dismiss, true);
+      for (const [type, listener] of listeners) doc?.removeEventListener(type, listener, true);
+      if (link) setTip(null);
+    };
+  }, [srcDoc]);
+
+  // Placed after measuring, like the app's other tooltips: under the link,
+  // from its start, kept inside the viewport.
+  useLayoutEffect(() => {
+    const el = tipRef.current;
+    if (!el || !tip) return;
+    const placed = placePanel(
+      tip.anchor,
+      { width: el.offsetWidth, height: el.offsetHeight },
+      viewportSize(),
+      { align: "start", prefer: "below", gap: TIP_GAP },
+    );
+    el.style.left = `${placed.left}px`;
+    el.style.top = `${placed.top}px`;
+  }, [tip]);
+
+  return (
+    <div className={panel ? "ms-mail-panel" : undefined}>
+      {body.remoteImages && !images ? (
+        <div className="ms-mail-bar">
+          <ImageOffIcon />
+          <span className="ms-mail-bar-text">{t("mail.imagesHidden")}</span>
+          <button
+            type="button"
+            className="ms-btn ms-btn-secondary"
+            onClick={() => setImagesShown(true)}
+          >
+            {t("mail.showImages")}
+          </button>
+          {trusted ? (
+            <button
+              type="button"
+              className="ms-link"
+              onClick={() => {
+                alwaysShowImages(domain);
+                setImagesShown(true);
+              }}
+            >
+              {t("mail.alwaysFor", { domain })}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      <iframe
+        ref={frameRef}
+        title={title}
+        // Never allow-scripts, allow-forms or allow-top-navigation.
+        sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
+        srcDoc={srcDoc}
+        className="ms-mail-frame"
+        style={{ height, background: PREVIEW_CANVAS[shownScheme] }}
+      />
+      {prepared.trimmed ? (
+        <QuoteToggle shown={quoteShown} onToggle={() => setQuoteShown((shown) => !shown)} />
+      ) : null}
+      {tip
+        ? createPortal(
+            <div
+              ref={tipRef}
+              role="tooltip"
+              className="ms-tooltip"
+              // First-paint guess; the layout effect places it before paint.
+              style={{ left: tip.anchor.left, top: tip.anchor.bottom + TIP_GAP }}
+            >
+              <span className="ms-mono ms-mail-href">{tip.text}</span>
+              {tip.mail ? null : (
+                <span className="ms-mail-href-note">{t("mail.opensInNewTab")}</span>
+              )}
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 6c1fc3455..304d52e09 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -2232,6 +2232,95 @@ summary:focus-visible,
   height: 12px;
 }
 
+/* Received mail (mail-frame.tsx): the message's frame, boxed inside a thread
+   card; the remote-images bar above it; the "•••" quoted-text toggle under
+   it; and a link's destination in the tooltip panel. In a panel
+   (.ms-mail-panel) the frame runs edge to edge and the bar is a strip. */
+.ms-mail-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 7px 8px 7px 12px;
+  border: 1px solid var(--ms-line);
+  border-radius: 10px;
+  background: var(--ms-ground);
+  font-size: 12.5px;
+  color: var(--ms-muted);
+}
+/* Narrow, the actions wrap under the words rather than the words under the icon. */
+.ms-mail-bar-text {
+  flex: 1 1 240px;
+}
+.ms-mail-bar > .ms-btn {
+  height: 26px;
+  padding: 3px 9px;
+  font-size: 12.5px;
+}
+.ms-mail-bar > .ms-link {
+  margin-right: 6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+}
+.ms-mail-frame {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  border: 1px solid var(--ms-line);
+  border-radius: 10px;
+}
+.ms-mail-panel > .ms-mail-bar {
+  margin: 0;
+  padding-left: 18px;
+  border-width: 0 0 1px;
+  border-radius: 0;
+}
+.ms-mail-panel > .ms-mail-frame {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+.ms-mail-quote {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  margin-top: 8px;
+  padding: 0 7px;
+  border: 1px solid var(--ms-line-strong);
+  border-radius: var(--ms-r-chip);
+  background: var(--ms-panel-raised);
+  color: var(--ms-muted);
+  font: 700 10px / 1 var(--ms-font-sans);
+  letter-spacing: 1px;
+  cursor: pointer;
+  transition: color var(--ms-dur-fast) var(--ms-ease);
+}
+.ms-mail-quote:hover,
+.ms-mail-quote[aria-expanded="true"] {
+  color: var(--ms-bone);
+}
+.ms-mail-panel .ms-mail-quote {
+  margin: 10px 18px 12px;
+}
+/* Tracking links run to hundreds of characters: the start, which names the
+   host, is what the reader needs. */
+.ms-mail-href {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+.ms-mail-href-note {
+  display: block;
+  color: var(--ms-muted);
+}
+
 /* Busy spinner (spinner.tsx) — currentColor stroke ring, composed inside
    buttons left of the label. Distinct from .ms-spinner (the warn-tinted
    DNS-check ring). Reduced motion: a static muted ring, no rotation. */
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index f1c0a04c7..4457a6806 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -4,7 +4,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 import type { InboxDetail, ThreadMessage, ThreadRow } from "@/app/(dashboard)/inboxes/parts";
-import { dkimSignerDomains, grayExplanation } from "@/lib/auth-result";
+import { authenticatedSender, dkimSignerDomains, grayExplanation } from "@/lib/auth-result";
 import { typedAllowlistEntry } from "@/lib/email-input";
 import { WEBHOOK_EVENT_META, WEBHOOK_EVENT_TYPES } from "@/lib/webhook-events";
 
@@ -698,3 +698,76 @@ describe("addresses on the shared domain", () => {
     expect(header({ shared: false, sharedSending: null })).not.toMatch(SHOWN);
   });
 });
+
+const { MessageCard } = await import("@/app/(dashboard)/inboxes/[id]/threads-tab");
+
+describe("a message in the thread pane", () => {
+  const screening = {
+    verdict: "clean",
+    sender_trust: "external",
+    quarantine_reason: null,
+    reasons: [],
+    injection_score: null,
+    phishing_score: null,
+    hidden_text_removed: false,
+  };
+  const message = {
+    id: "m1",
+    direction: "inbound",
+    from: "Ana Souza <ana@sender.example>",
+    to: ["help@inbound.acme.test"],
+    cc: [],
+    bcc: [],
+    reply_to: [],
+    subject: "Re: Order #8841",
+    message_id: "<m1@sender.example>",
+    html: "<p>Found it, thanks!</p>",
+    text: "Found it, thanks!\n\nOn Thu, Oct 16, 2026 at 10:00 AM Rita <rita@acme.test> wrote:\n> Did it arrive?",
+    attachments: [],
+    read: true,
+    received_at: new Date().toISOString(),
+    extracted_text: null,
+    screening,
+    spam_verdict: null,
+    virus_verdict: null,
+  };
+  const render = (fields: Record<string, unknown>) =>
+    renderToStaticMarkup(
+      createElement(MessageCard, {
+        message: { ...message, ...fields } as ThreadMessage,
+        inbox: { id: "i1", kind: "human", expired: false } as InboxDetail,
+        onChange: () => {},
+      }),
+    );
+
+  it("shows the HTML in a frame that never runs the sender's code", () => {
+    const frame = /<iframe[^>]*>/.exec(render({}))?.[0] ?? "";
+    expect(frame).toContain(
+      'sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"',
+    );
+    expect(frame).not.toMatch(/allow-scripts|allow-forms|allow-top-navigation/);
+    expect(frame).toContain('title="Message from Ana Souza"');
+    expect(frame).toContain("img-src data:;");
+  });
+
+  it("falls back to the text with its quoted tail folded, and leaves held mail whole", () => {
+    const text = render({ html: null });
+    expect(text).not.toContain("<iframe");
+    expect(text).toContain("Found it, thanks!");
+    expect(text).not.toContain("Did it arrive?");
+    expect(text).toContain('aria-label="Show quoted text"');
+    // Held mail is read to decide on a release: its text, whole, never its HTML.
+    const held = render({ screening: { ...screening, verdict: "quarantined" } });
+    expect(held).not.toContain("<iframe");
+    expect(held).toContain("Did it arrive?");
+    expect(held).not.toContain("Show quoted text");
+  });
+
+  it("loads images unasked only for a sender authentication proved", () => {
+    expect(["owner", "allowlisted", "external"].every(authenticatedSender)).toBe(true);
+    // A known thread proves the thread, not the From domain.
+    expect(["known_thread", "unauthenticated", "failed", null].some(authenticatedSender)).toBe(
+      false,
+    );
+  });
+});
diff --git a/apps/web/test/receiving-screens.test.ts b/apps/web/test/receiving-screens.test.ts
index c0f7b4fab..00fb83304 100644
--- a/apps/web/test/receiving-screens.test.ts
+++ b/apps/web/test/receiving-screens.test.ts
@@ -33,14 +33,22 @@ describe("a received email's content panel", () => {
         text: "Hi",
         insights: null,
       },
-      received: { headers: { from: "Ana <ana@sender.example>", received: "from a\nfrom b" } },
+      received: {
+        headers: { from: "Ana <ana@sender.example>", received: "from a\nfrom b" },
+        domain: "sender.example",
+        authenticated: true,
+      },
     }),
   );
 
-  it("renders the stranger's HTML in a frame that runs nothing and loads nothing", () => {
+  it("renders the stranger's HTML in a frame that runs nothing and loads nothing unasked", () => {
     const frame = /<iframe[^>]*>/.exec(html)?.[0] ?? "";
-    // No allow-scripts, no allow-same-origin, no allow-forms: an opaque, inert origin.
-    expect(frame).toContain('sandbox="allow-popups allow-popups-to-escape-sandbox"');
+    // Same origin only so the dashboard can size the frame and read its links:
+    // without allow-scripts the message runs nothing, and it never submits or navigates the page.
+    expect(frame).toContain(
+      'sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"',
+    );
+    expect(frame).not.toMatch(/allow-scripts|allow-forms|allow-top-navigation/);
     expect(frame).toMatch(
       /srcdoc="&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src &#x27;none&#x27;; img-src data:;/i,
     );

From 6fb6852e0d68c406047f86cc258dc73960cf8331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:01:45 -0300
Subject: [PATCH 11/24] Keep the label palette, label cap and Trash retention
 in a client-safe core module

The dashboard is about to offer the same 11 label colors core picks from,
say how many labels an inbox can hold, and say how long Trash keeps a
thread. Those values lived in modules that import node:crypto and the
database, which a client component cannot load. They now live in
inboxes/organize.ts, which imports nothing and ships as
@millionsend/core/inbox-organize; labels.ts and limits.ts read them from
there, so each value still has one copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/core/package.json                 |  4 ++++
 packages/core/src/inboxes/labels.ts        | 16 ++-----------
 packages/core/src/inboxes/limits.ts        |  6 +++--
 packages/core/src/inboxes/organize.ts      | 27 ++++++++++++++++++++++
 packages/core/test/inboxes-threads.test.ts |  4 +++-
 5 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 packages/core/src/inboxes/organize.ts

diff --git a/packages/core/package.json b/packages/core/package.json
index d6e168b43..467c1afd0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -79,6 +79,10 @@
     "./inbox-username": {
       "types": "./src/inboxes/username.ts",
       "default": "./src/inboxes/username.ts"
+    },
+    "./inbox-organize": {
+      "types": "./src/inboxes/organize.ts",
+      "default": "./src/inboxes/organize.ts"
     }
   },
   "scripts": {
diff --git a/packages/core/src/inboxes/labels.ts b/packages/core/src/inboxes/labels.ts
index 6bf840229..07aa71b88 100644
--- a/packages/core/src/inboxes/labels.ts
+++ b/packages/core/src/inboxes/labels.ts
@@ -13,24 +13,12 @@ import {
 } from "./inbox-common.js";
 import type { InboxDeps } from "./inboxes.js";
 import { findLiveInbox, INBOX_LABELS_MAX } from "./limits.js";
+import { LABEL_COLORS } from "./organize.js";
 import type { InboxError, LabelWire } from "./types.js";
 import { labelWire } from "./wire.js";
 
 const HEX_COLOR = /^#[0-9a-f]{6}$/i;
-/** Picked from when a label is created without a color: legible on light and dark. */
-const PALETTE = [
-  "#00A2C7",
-  "#12A594",
-  "#46A758",
-  "#BDEE63",
-  "#FFE629",
-  "#F76B15",
-  "#5B5BD6",
-  "#AB4ABA",
-  "#E93D82",
-  "#A18072",
-  "#8E8C99",
-];
+const PALETTE = Object.values(LABEL_COLORS);
 
 type LabelResult = { ok: true; label: LabelWire } | { ok: false; error: InboxError };
 
diff --git a/packages/core/src/inboxes/limits.ts b/packages/core/src/inboxes/limits.ts
index c763c58ff..ca00dd5d6 100644
--- a/packages/core/src/inboxes/limits.ts
+++ b/packages/core/src/inboxes/limits.ts
@@ -5,8 +5,11 @@ import type { ApiKeyAuth } from "../api-key-auth.js";
 import type { Plan } from "../plans.js";
 import { MAX_RECEIVED_MESSAGE_BYTES } from "../receiving/protocol.js";
 import { DAY_MS } from "../utc-day.js";
+import { TRASH_RETENTION_DAYS } from "./organize.js";
 import type { InboxKind } from "./types.js";
 
+export { INBOX_LABELS_MAX } from "./organize.js";
+
 const HOUR_MS = 3_600_000;
 
 /** Live inboxes per team per plan; null = unlimited. Self-host ignores plans entirely. */
@@ -33,7 +36,6 @@ export const INBOX_CREATES_PER_HOUR: Record<Plan, number | null> = {
 /** Accepted messages per inbox per rolling hour before RCPT answers 452. */
 export const INBOX_FLOOD_PER_HOUR: Record<InboxKind, number> = { agent: 200, human: 2000 };
 
-export const INBOX_LABELS_MAX = 100;
 export const INBOX_ALLOWLIST_MAX = 500;
 export const INBOX_OWNER_ADDRESSES_MAX = 50;
 export const INBOX_FORWARD_TO_MAX = 5;
@@ -62,7 +64,7 @@ export const SHARED_SUBDOMAIN_FALLBACK_MS = DAY_MS;
 /** Milliseconds a pending_approval draft waits before it expires. */
 export const DRAFT_APPROVAL_TTL = 7 * DAY_MS;
 /** Milliseconds a trashed thread is kept. */
-export const TRASH_RETENTION = 30 * DAY_MS;
+export const TRASH_RETENTION = TRASH_RETENTION_DAYS * DAY_MS;
 /** Milliseconds a received code or link counts as private for outgoing mail. */
 export const RECEIVED_SECRET_WINDOW = 24 * HOUR_MS;
 /** Milliseconds between two looks at the shared-domain switch by mail it holds. */
diff --git a/packages/core/src/inboxes/organize.ts b/packages/core/src/inboxes/organize.ts
new file mode 100644
index 000000000..d27e76746
--- /dev/null
+++ b/packages/core/src/inboxes/organize.ts
@@ -0,0 +1,27 @@
+/**
+ * Labels and folders, in the values the dashboard shows as well. Imports
+ * nothing, so a client component reads the same numbers core enforces.
+ */
+
+/**
+ * The colors a label made without one is given, at random: each legible on
+ * light and dark. Keyed by the color's name, which the dashboard reads out.
+ */
+export const LABEL_COLORS = {
+  cyan: "#00A2C7",
+  teal: "#12A594",
+  green: "#46A758",
+  lime: "#BDEE63",
+  yellow: "#FFE629",
+  orange: "#F76B15",
+  indigo: "#5B5BD6",
+  purple: "#AB4ABA",
+  pink: "#E93D82",
+  brown: "#A18072",
+  gray: "#8E8C99",
+} as const;
+
+export const INBOX_LABELS_MAX = 100;
+
+/** Days a thread stays in Trash before it is deleted. */
+export const TRASH_RETENTION_DAYS = 30;
diff --git a/packages/core/test/inboxes-threads.test.ts b/packages/core/test/inboxes-threads.test.ts
index 219b41b89..9bee7b084 100644
--- a/packages/core/test/inboxes-threads.test.ts
+++ b/packages/core/test/inboxes-threads.test.ts
@@ -10,6 +10,7 @@ import { EnvKeyring } from "../src/crypto/keyring.js";
 import type { InboxActor } from "../src/inboxes/activity.js";
 import type { InboxDeps } from "../src/inboxes/inboxes.js";
 import { createLabel, deleteLabel, listLabels, updateLabel } from "../src/inboxes/labels.js";
+import { LABEL_COLORS } from "../src/inboxes/organize.js";
 import { listQuarantined } from "../src/inboxes/quarantine.js";
 import { defaultSafety } from "../src/inboxes/safety.js";
 import {
@@ -673,7 +674,8 @@ describe("labels", () => {
     });
     expect(red).toMatchObject({ ok: true, label: { name: "Billing", color: "#E93D82" } });
     const picked = await label(s, "Support");
-    expect(picked.color).toMatch(/^#[0-9A-F]{6}$/);
+    // Without a color, one of the palette the dashboard offers.
+    expect(Object.values(LABEL_COLORS)).toContain(picked.color);
     const duplicate = await createLabel(db, deps, {
       teamId: s.teamId,
       inboxId: s.inboxId,

From 25a4eee56fd26325894b37f0134ac6da78b6a0b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:01:51 -0300
Subject: [PATCH 12/24] Let the dashboard's labels.create take a color

Creating a label from the thread pane will let the person pick its color,
as the REST API already allows; without one, core still picks from its
palette. The color is checked with the shared HEX_COLOR_RE, which
labels.update now uses too instead of its own copy of the pattern.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/server/routers/inboxes.ts | 15 +++++++++-----
 apps/web/test/inboxes-router.test.ts   | 28 ++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/server/routers/inboxes.ts b/apps/web/src/server/routers/inboxes.ts
index ab2cdf533..5acb844ec 100644
--- a/apps/web/src/server/routers/inboxes.ts
+++ b/apps/web/src/server/routers/inboxes.ts
@@ -52,6 +52,7 @@ import { type Db, schema } from "@millionsend/db";
 import { TRPCError } from "@trpc/server";
 import { and, count, desc, eq, gt, inArray, max, sql } from "drizzle-orm";
 import { z } from "zod";
+import { HEX_COLOR_RE } from "@/lib/hex-color";
 import { fetchQuotaRow } from "../billing";
 import {
   actorNames,
@@ -594,13 +595,20 @@ export const inboxesRouter = router({
       ),
 
     create: receivingProcedure
-      .input(z.object({ ...inboxRef, name: z.string().trim().min(1).max(64) }))
+      .input(
+        z.object({
+          ...inboxRef,
+          name: z.string().trim().min(1).max(64),
+          color: z.string().regex(HEX_COLOR_RE).optional(),
+        }),
+      )
       .mutation(async ({ ctx, input }) => {
         const result = await createLabel(ctx.db, inboxDeps(ctx), {
           teamId: ctx.teamId,
           inboxId: input.inboxId,
           actor: userActor(ctx),
           name: input.name,
+          color: input.color,
         });
         if (!result.ok) throw inboxFailure(result.error);
         return result.label;
@@ -612,10 +620,7 @@ export const inboxesRouter = router({
           ...inboxRef,
           labelId: z.uuid(),
           name: z.string().trim().min(1).max(64).optional(),
-          color: z
-            .string()
-            .regex(/^#[0-9A-Fa-f]{6}$/)
-            .optional(),
+          color: z.string().regex(HEX_COLOR_RE).optional(),
         }),
       )
       .mutation(async ({ ctx, input }) => {
diff --git a/apps/web/test/inboxes-router.test.ts b/apps/web/test/inboxes-router.test.ts
index 3fed321cd..46b6cef71 100644
--- a/apps/web/test/inboxes-router.test.ts
+++ b/apps/web/test/inboxes-router.test.ts
@@ -9,6 +9,7 @@ import {
   safetyProblem,
   sealReceivedExtracted,
 } from "@millionsend/core";
+import { LABEL_COLORS } from "@millionsend/core/inbox-organize";
 import type { Db } from "@millionsend/db";
 import { schema } from "@millionsend/db";
 import { createTeam, createTestDb } from "@millionsend/test-utils";
@@ -1254,3 +1255,30 @@ describe("Settings → Receiving", () => {
     expect(health.receivedToday).toBeGreaterThanOrEqual(1);
   });
 });
+
+describe("labels", () => {
+  it("are made in the color picked, else one of the palette's, and never in another form", async () => {
+    const member = caller(acme, "member");
+    expect(
+      await member.inboxes.labels.create({ inboxId, name: "Refund", color: "#ab4aba" }),
+    ).toMatchObject({ name: "Refund", color: "#AB4ABA" });
+    const picked = await member.inboxes.labels.create({ inboxId, name: "Billing" });
+    expect(Object.values(LABEL_COLORS)).toContain(picked.color);
+    for (const color of ["red", "#abc", "AB4ABA"]) {
+      await expect(
+        member.inboxes.labels.create({ inboxId, name: `Not ${color}`, color }),
+      ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    }
+    // Another team's inbox reads as missing.
+    await expect(
+      caller(beta).inboxes.labels.create({ inboxId, name: "Theirs", color: "#AB4ABA" }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    // A recolor takes the same check.
+    await expect(
+      member.inboxes.labels.update({ inboxId, labelId: picked.id, color: "blue" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(
+      await member.inboxes.labels.update({ inboxId, labelId: picked.id, color: "#00a2c7" }),
+    ).toMatchObject({ name: "Billing", color: "#00A2C7" });
+  });
+});

From 2b8ea4e4c69c2067a52fad6f6e64a29a4e805cea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:03:35 -0300
Subject: [PATCH 13/24] Ring read threads, close the open one with an X or Esc,
 and add Not spam, Restore and the Trash note

Read rows rendered nothing in the dot column, so they looked indented next
to unread ones; they now show the hollow ring, and both marks say "Read" or
"Unread" on hover and to screen readers (an agent inbox keeps its longer
note on the dot).

"Close" was the only text button among the pane's boxed controls. It is now
an icon button with a tooltip, as Refresh is, and Esc closes the pane too,
unless the key was already handled, was typed into a field or the reply
editor, or belongs to an open menu, dialog, drawer or tooltip. Those layers
are read as the key goes down, since one that closes on it may be gone by
the time it reaches window. Focus left in the closing pane goes back to the
thread's row instead of falling to the page.

Spam gets a one-click "Not spam" and Trash a "Restore", both moving the
thread to Inbox as Move does, and Trash says how long it keeps a thread,
with the number read from core.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |   4 +
 apps/web/messages/pt-BR/inboxes.json          |   4 +
 .../(dashboard)/inboxes/[id]/threads-tab.tsx  |  98 ++++++---
 apps/web/src/lib/keyboard.ts                  |  11 +
 apps/web/src/lib/use-escape.ts                |  30 +++
 apps/web/test/inboxes-screens.test.ts         | 136 +++++++++++-
 apps/web/test/threads-keyboard.test.ts        | 202 ++++++++++++++++++
 7 files changed, 448 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/src/lib/use-escape.ts
 create mode 100644 apps/web/test/threads-keyboard.test.ts

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index 49f1d9b05..a0de2f949 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -23,6 +23,10 @@
   "labelSearch": "Search or create a label…",
   "createLabel": "Create label “{name}”",
   "removeLabel": "Remove {label}",
+  "read": "Read",
+  "notSpam": "Not spam",
+  "restore": "Restore",
+  "trashRetention": "Threads in Trash are deleted {days, plural, one {# day} other {# days}} after they're moved here.",
   "unread": "Unread",
   "unreadAgent": "Your agent hasn't marked it read yet",
   "markRead": "Mark as read",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 4158bf2ce..9776d73ad 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -23,6 +23,10 @@
   "labelSearch": "Buscar ou criar etiqueta…",
   "createLabel": "Criar etiqueta “{name}”",
   "removeLabel": "Remover {label}",
+  "read": "Lida",
+  "notSpam": "Não é spam",
+  "restore": "Restaurar",
+  "trashRetention": "As conversas na Lixeira são excluídas {days, plural, one {# dia} other {# dias}} depois de chegarem aqui.",
   "unread": "Não lida",
   "unreadAgent": "O agente ainda não marcou como lida",
   "markRead": "Marcar como lida",
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
index 190208673..d319e6d9d 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { TRASH_RETENTION_DAYS } from "@millionsend/core/inbox-organize";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -10,11 +11,14 @@ import { GroupedMultiSelect } from "@/components/grouped-multi-select";
 import {
   ArchiveIcon,
   FolderInputIcon,
+  InboxIcon,
+  RestoreIcon,
   SpamIcon,
   TagIcon,
   TrashIcon,
+  XIcon,
 } from "@/components/icons/mail-icons";
-import { NavGlyph, RefreshGlyph } from "@/components/icons/nav-icons";
+import { RefreshGlyph } from "@/components/icons/nav-icons";
 import { MessageEditor } from "@/components/maily-editor/lazy";
 import { ConfirmKeycap } from "@/components/modal-footer";
 import { PopoverMenu } from "@/components/popover-menu";
@@ -29,6 +33,7 @@ import { htmlToText } from "@/lib/html";
 import { isReadOnly } from "@/lib/read-only";
 import { useTRPC } from "@/lib/trpc";
 import { oneOf, useUrlState } from "@/lib/url-state";
+import { useEscape } from "@/lib/use-escape";
 import { useLocalDraft } from "@/lib/use-local-draft";
 import { SearchBox, StateCard } from "../../emails/list-parts";
 import {
@@ -47,7 +52,7 @@ import {
 const FOLDERS = ["inbox", "archive", "spam", "sent", "trash"] as const;
 const MOVE_TO = ["inbox", "archive", "spam", "trash"] as const;
 const FOLDER_ICONS: Record<(typeof MOVE_TO)[number], React.ReactNode> = {
-  inbox: <NavGlyph name="inboxes" size={14} />,
+  inbox: <InboxIcon />,
   archive: <ArchiveIcon />,
   spam: <SpamIcon />,
   trash: <TrashIcon />,
@@ -138,6 +143,11 @@ export function ThreadsTab({ inbox }: { inbox: InboxDetail }) {
           </button>
         </Tooltip>
       </div>
+      {folder === "trash" ? (
+        <p style={{ margin: "-4px 0 12px", fontSize: 12.5, color: "var(--ms-muted)" }}>
+          {t("trashRetention", { days: TRASH_RETENTION_DAYS })}
+        </p>
+      ) : null}
       <div className={threadId ? "ms-thread-split" : undefined}>
         <div>
           {active.isPending ? (
@@ -225,21 +235,19 @@ export function ThreadListRow({
 }) {
   const t = useTranslations("inboxes");
   const id = useId();
-  const unreadLabel = t(agent ? "unreadAgent" : "unread");
-  const dot = row.read ? null : (
-    <StatusDot id={`${id}-dot`} color="var(--ms-bone)" label={unreadLabel} />
-  );
+  // An agent's unread is its queue, not the person's: its dot says so.
+  const readLabel = t(row.read ? "read" : agent ? "unreadAgent" : "unread");
   return (
     // biome-ignore lint/a11y/useKeyWithClickEvents: the row only widens its button's click; keyboard users reach the button
     <li className={row.read ? "ms-thread-row" : "ms-thread-row unread"} onClick={onOpen}>
-      {/* An agent's unread is its queue, not the person's: the dot says so on hover. */}
-      {dot && agent ? (
-        <Tooltip inline text={unreadLabel}>
-          {dot}
-        </Tooltip>
-      ) : (
-        dot
-      )}
+      {/* A hollow ring when read, so every row keeps a mark in the dot column. */}
+      <Tooltip inline text={readLabel}>
+        <StatusDot
+          id={`${id}-dot`}
+          {...(row.read ? {} : { color: "var(--ms-bone)" })}
+          label={readLabel}
+        />
+      </Tooltip>
       <span className="ms-thread-from">
         <span id={`${id}-from`} className="ms-thread-name">
           {sent
@@ -272,7 +280,7 @@ export function ThreadListRow({
           className="ms-thread-open"
           aria-current={selected || undefined}
           aria-labelledby={`${id}-from ${id}-title`}
-          aria-describedby={dot ? `${id}-dot ${id}-pills` : `${id}-pills`}
+          aria-describedby={`${id}-dot ${id}-pills`}
         >
           <span className="ms-thread-text">
             <span id={`${id}-title`} className="ms-thread-title">
@@ -353,6 +361,26 @@ function ThreadPane({
       pane.scrollIntoView({ block: "start", behavior: "auto" });
     }
   }, []);
+  // Focus inside the pane would fall to the page as it goes: it moves to the thread's row.
+  const close = () => {
+    const pane = paneRef.current;
+    if (pane?.contains(document.activeElement)) {
+      pane.previousElementSibling?.querySelector<HTMLElement>('[aria-current="true"]')?.focus();
+    }
+    onClose();
+  };
+  useEscape(close);
+  const moveTo = (folder: (typeof MOVE_TO)[number]) =>
+    update.mutate(
+      { ...ref, folder },
+      {
+        // The thread has left the list beside it, so the pane goes too.
+        onSuccess: () => {
+          toast(t("movedTo", { folder }));
+          onClose();
+        },
+      },
+    );
 
   if (thread.isError) {
     return (
@@ -360,7 +388,7 @@ function ThreadPane({
         tone="error"
         headline={t("threadError")}
         actionLabel={t("close")}
-        onAction={onClose}
+        onAction={close}
       />
     );
   }
@@ -393,6 +421,17 @@ function ThreadPane({
             {/* An expired inbox is read-only; each message keeps its own link. */}
             {inbox.expired ? null : (
               <>
+                {summary.folder === "spam" || summary.folder === "trash" ? (
+                  <button
+                    type="button"
+                    className="ms-btn ms-btn-secondary"
+                    disabled={update.isPending}
+                    onClick={() => moveTo("inbox")}
+                  >
+                    {summary.folder === "spam" ? <InboxIcon /> : <RestoreIcon />}
+                    {t(summary.folder === "spam" ? "notSpam" : "restore")}
+                  </button>
+                ) : null}
                 <PopoverMenu
                   label={t("moveTo")}
                   ariaLabel={t("moveTo")}
@@ -401,17 +440,7 @@ function ThreadPane({
                   items={MOVE_TO.filter((folder) => folder !== summary.folder).map((folder) => ({
                     label: t(`folder.${folder}`),
                     icon: FOLDER_ICONS[folder],
-                    onSelect: () =>
-                      update.mutate(
-                        { ...ref, folder },
-                        {
-                          // The thread has left the list beside it, so the pane goes too.
-                          onSuccess: () => {
-                            toast(t("movedTo", { folder }));
-                            onClose();
-                          },
-                        },
-                      ),
+                    onSelect: () => moveTo(folder),
                   }))}
                 />
                 {/* ponytail: the ✓ follows the refetch, so a second toggle of one label
@@ -458,7 +487,7 @@ function ThreadPane({
                           { ...ref, read: !summary.read },
                           // Back to the list, as a mail client does; left open, a
                           // people inbox would read the thread again at once.
-                          summary.read ? { onSuccess: onClose } : undefined,
+                          summary.read ? { onSuccess: close } : undefined,
                         ),
                     },
                     ...(newest
@@ -473,11 +502,18 @@ function ThreadPane({
                 />
               </>
             )}
-            <button type="button" className="ms-btn ms-btn-ghost" onClick={onClose}>
-              {t("close")}
-            </button>
           </>
         ) : null}
+        <Tooltip inline focusableChild text={t("close")}>
+          <button
+            type="button"
+            className="ms-btn ms-btn-icon"
+            aria-label={t("close")}
+            onClick={close}
+          >
+            <XIcon />
+          </button>
+        </Tooltip>
       </div>
       {summary && summary.labels.length > 0 ? (
         <span style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
diff --git a/apps/web/src/lib/keyboard.ts b/apps/web/src/lib/keyboard.ts
index d6dd856f1..519812afe 100644
--- a/apps/web/src/lib/keyboard.ts
+++ b/apps/web/src/lib/keyboard.ts
@@ -18,3 +18,14 @@ export function shortcutBlocked(target: EventTarget | null): boolean {
   }
   return target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
 }
+
+/** Open layers that close on Esc themselves: menus and listboxes, tooltips, dialogs, the phone nav drawer. */
+const ESC_LAYERS = '.ms-menu, .ms-tooltip, [role="dialog"], .ms-drawer-scrim';
+
+/**
+ * Whether an Esc belongs to something before the page: a field, where it must
+ * never throw away what was typed, or an open layer that closes on it.
+ */
+export function escapeTaken(target: EventTarget | null): boolean {
+  return shortcutBlocked(target) || document.querySelector(ESC_LAYERS) !== null;
+}
diff --git a/apps/web/src/lib/use-escape.ts b/apps/web/src/lib/use-escape.ts
new file mode 100644
index 000000000..5b278d3e8
--- /dev/null
+++ b/apps/web/src/lib/use-escape.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useEffectEvent } from "react";
+import { escapeTaken } from "./keyboard";
+
+/**
+ * Runs `onEscape` on an Esc nothing else takes: not one typed in a field or
+ * meant for an open layer (escapeTaken), and not one a handler already used
+ * (preventDefault, or stopPropagation before it reached window). Layers are
+ * read as the key goes down: by the time it bubbles to window, a tooltip or
+ * menu that closed on it may already be gone from the page.
+ */
+export function useEscape(onEscape: () => void) {
+  const fire = useEffectEvent(onEscape);
+  useEffect(() => {
+    let taken = false;
+    const onCapture = (event: KeyboardEvent) => {
+      taken = event.key === "Escape" && escapeTaken(event.target);
+    };
+    const onBubble = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !taken && !event.defaultPrevented) fire();
+    };
+    window.addEventListener("keydown", onCapture, true);
+    window.addEventListener("keydown", onBubble);
+    return () => {
+      window.removeEventListener("keydown", onCapture, true);
+      window.removeEventListener("keydown", onBubble);
+    };
+  }, []);
+}
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index f1c0a04c7..f2cef4608 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -26,18 +26,21 @@ vi.mock("next-intl", async (importOriginal) => {
       actual.createTranslator({ locale: "en", messages: en, namespace }),
   };
 });
+// The page's query string, which a test may set.
+const nav = vi.hoisted(() => ({ search: "" }));
 vi.mock("next/navigation", () => ({
   useRouter: () => ({ push: vi.fn() }),
   usePathname: () => "/inboxes",
   useParams: () => ({ id: "i1" }),
-  useSearchParams: () => new URLSearchParams(),
+  useSearchParams: () => new URLSearchParams(nav.search),
 }));
-// What the query hooks answer (nothing unless a test sets it), the error
-// a mutation came back with, the options and calls mutations got, and the
-// queries invalidated.
+// What the query hooks answer (nothing unless a test sets it, by procedure
+// path where a screen asks for several), the error a mutation came back with,
+// the options and calls mutations got, and the queries invalidated.
 const rq = vi.hoisted(() => ({
   data: undefined as unknown,
   pages: undefined as unknown,
+  byPath: {} as Record<string, unknown>,
   error: null as unknown,
   mutate: vi.fn(),
   mutations: [] as { path?: string; onSuccess?: () => unknown }[],
@@ -62,8 +65,13 @@ vi.mock("@tanstack/react-query", () => ({
     return { mutate: rq.mutate, isPending: false, error: rq.error };
   },
   useQueryClient: () => ({ invalidateQueries: rq.invalidate }),
-  useQuery: () => ({ data: rq.data }),
-  useInfiniteQuery: () => ({ data: rq.pages, isPending: false }),
+  useQuery: (options?: { path?: string }) => ({
+    data: options?.path && options.path in rq.byPath ? rq.byPath[options.path] : rq.data,
+  }),
+  useInfiniteQuery: (options?: { path?: string }) => ({
+    data: options?.path && options.path in rq.byPath ? rq.byPath[options.path] : rq.pages,
+    isPending: false,
+  }),
 }));
 // A native select lists every option a picker offers, which a closed one never renders.
 vi.mock("@/components/select", () => ({
@@ -105,6 +113,10 @@ const { InboxView } = await import("@/app/(dashboard)/inboxes/[id]/inbox-view");
 const { EditDialog } = await import("@/app/(dashboard)/inboxes/[id]/edit-dialog");
 const { CreateInboxDialog } = await import("@/app/(dashboard)/inboxes/create-inbox-dialog");
 const { ThreadListRow } = await import("@/app/(dashboard)/inboxes/[id]/threads-tab");
+// The real tab, past the mock above that keeps it off the inbox page.
+const { ThreadsTab } = await vi.importActual<
+  typeof import("@/app/(dashboard)/inboxes/[id]/threads-tab")
+>("@/app/(dashboard)/inboxes/[id]/threads-tab");
 const { InboxesView } = await import("@/app/(dashboard)/inboxes/inboxes-view");
 const { approvalReasonWords, QuarantinedBadge, replyAllAdds, replyTarget, TrustBadge } =
   await import("@/app/(dashboard)/inboxes/parts");
@@ -268,6 +280,118 @@ describe("webhook picker", () => {
   });
 });
 
+describe("threads", () => {
+  const billing = { id: "l1", name: "Billing", color: "#46A758" };
+  const row = {
+    id: "t1",
+    subject: "Verify your mailbox now",
+    from: "Account Security <security@mailbox-verify.example>",
+    to: ["orders@acme.example"],
+    cc: [],
+    bcc: [],
+    labels: [billing],
+    message_count: 1,
+    has_attachment: false,
+    has_draft: false,
+    read: true,
+    received_at: new Date().toISOString(),
+    folder: "inbox",
+    quarantined: 0,
+    quarantine_reason: null,
+    injection_score: null,
+    phishing_score: null,
+    suspicious: false,
+    pending_approval: false,
+    snippet: "Your mailbox will be suspended",
+  } as ThreadRow;
+  /** The threads tab in a folder, the thread above open beside the list. */
+  const tab = (folder: string, inbox: Partial<InboxDetail> = {}) => {
+    nav.search = `folder=${folder}&thread=t1`;
+    rq.byPath = {
+      "inboxes.threads.list.infiniteQueryOptions": { pages: [{ items: [{ ...row, folder }] }] },
+      "inboxes.threads.get.queryOptions": { ...row, folder },
+      "inboxes.threads.emails.infiniteQueryOptions": { pages: [{ items: [] }] },
+      "inboxes.drafts.list.queryOptions": { items: [] },
+      "inboxes.labels.list.queryOptions": [billing],
+    };
+    try {
+      return renderToStaticMarkup(
+        createElement(ThreadsTab, {
+          inbox: { id: "i1", kind: "human", expired: false, ...inbox } as InboxDetail,
+        }),
+      ).replaceAll("&#x27;", "'");
+    } finally {
+      nav.search = "";
+      rq.byPath = {};
+    }
+  };
+  /** The open thread's header row, title to its last control. */
+  const header = (html: string) => html.match(/<section[^>]*>(<div.*?)<\/div><span/s)?.[1] ?? "";
+
+  it("marks a read thread with a hollow ring where an unread one has its dot, each named", () => {
+    const render = (read: boolean, agent = false) =>
+      renderToStaticMarkup(
+        createElement(ThreadListRow, {
+          row: { ...row, read },
+          agent,
+          sent: false,
+          selected: false,
+          onOpen: () => {},
+        }),
+      );
+    const read = render(true);
+    expect(read).toMatch(
+      /<span class="ms-tooltip-trigger inline" tabindex="0"><span id="[^"]+-dot" class="ms-dot ring" role="img" aria-label="Read"><\/span><\/span>/,
+    );
+    // Every row's button reads its mark out, read or not.
+    expect(read).toMatch(/aria-describedby="(\S+)-dot \1-pills"/);
+    expect(render(true, true)).toContain('class="ms-dot ring" role="img" aria-label="Read"');
+    expect(render(false)).toMatch(
+      /class="ms-tooltip-trigger inline" tabindex="0"><span id="[^"]+-dot" class="ms-dot" style="background:var\(--ms-bone\)" role="img" aria-label="Unread">/,
+    );
+    expect(render(false, true)).toContain('aria-label="Your agent hasn&#x27;t marked it read yet"');
+  });
+
+  it("closes the open thread with an icon button named Close, the last control in its header", () => {
+    const html = header(tab("inbox"));
+    expect(html).toMatch(
+      /<span class="ms-tooltip-trigger inline"><button type="button" class="ms-btn ms-btn-icon" aria-label="Close"><svg[^>]*>(<path[^>]*><\/path>){2}<\/svg><\/button><\/span>$/,
+    );
+    expect(html).not.toContain("ms-btn-ghost");
+  });
+
+  it("puts Not spam before Move in Spam, Restore in Trash, and neither elsewhere", () => {
+    const button = (label: string) =>
+      new RegExp(
+        `<button type="button" class="ms-btn ms-btn-secondary"><svg[^>]*>.*?</svg>${label}</button>`,
+      );
+    const spam = header(tab("spam"));
+    expect(spam).toMatch(button("Not spam"));
+    expect(spam.indexOf("Not spam")).toBeLessThan(spam.indexOf('aria-label="Move"'));
+    expect(spam).not.toContain("Restore");
+    const trash = header(tab("trash"));
+    expect(trash).toMatch(button("Restore"));
+    expect(trash).not.toContain("Not spam");
+    for (const folder of ["inbox", "archive", "sent"]) {
+      expect(header(tab(folder))).not.toMatch(/Not spam|Restore/);
+    }
+  });
+
+  it("leaves an expired inbox's open thread only its Close", () => {
+    const html = tab("spam", { expired: true });
+    expect(header(html)).toContain('aria-label="Close"');
+    expect(header(html)).not.toMatch(/Not spam|aria-label="Move"|aria-label="Labels"|More actions/);
+  });
+
+  it("says over Trash how long it keeps a thread, from core's own number", () => {
+    const line = "Threads in Trash are deleted 30 days after they're moved here.";
+    expect(tab("trash")).toContain(
+      `<p style="margin:-4px 0 12px;font-size:12.5px;color:var(--ms-muted)">${line}</p>`,
+    );
+    expect(tab("spam")).not.toContain(line);
+  });
+});
+
 describe("inbox screens", () => {
   it("says who a sender is and why mail is held, in words", () => {
     const html = renderToStaticMarkup(
diff --git a/apps/web/test/threads-keyboard.test.ts b/apps/web/test/threads-keyboard.test.ts
new file mode 100644
index 000000000..c42d3fb7c
--- /dev/null
+++ b/apps/web/test/threads-keyboard.test.ts
@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const en = {
+  inboxes: (await import("../messages/en/inboxes.json")).default,
+  common: (await import("../messages/en/common.json")).default,
+};
+
+// The real English catalogs, so the test reads what a customer reads.
+vi.mock("next-intl", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("next-intl")>();
+  return {
+    ...actual,
+    useLocale: () => "en",
+    useTranslations: (namespace: keyof typeof en) =>
+      actual.createTranslator({ locale: "en", messages: en, namespace }),
+  };
+});
+// The page's query string, and what each query answers by procedure path.
+const page = vi.hoisted(() => ({ search: "", answers: {} as Record<string, unknown> }));
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: () => {} }),
+  useSearchParams: () => new URLSearchParams(page.search),
+}));
+// Each label mutation records what it was sent; a create answers with the label it made.
+const sent = vi.hoisted(() => ({
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+}));
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: (options: { path: string }) => ({ data: page.answers[options.path] }),
+  useInfiniteQuery: (options: { path: string }) => ({
+    data: page.answers[options.path],
+    isPending: false,
+  }),
+  useMutation: (options: { path: string; onSuccess?: (label: unknown) => void }) => {
+    const procedure = options.path.split(".")[2] as keyof typeof sent;
+    return {
+      mutate: sent[procedure],
+      mutateAsync: async (variables: { name: string; color: string }) => {
+        sent[procedure](variables);
+        const label = { id: "l9", name: variables.name, color: variables.color };
+        options.onSuccess?.(label);
+        return label;
+      },
+      isPending: false,
+      error: null,
+    };
+  },
+  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
+}));
+// Each procedure helper answers with its path and the options it was given.
+vi.mock("@/lib/trpc", () => {
+  const at = (path: string): unknown =>
+    new Proxy(() => {}, {
+      get: (_, key) => at(path ? `${path}.${String(key)}` : String(key)),
+      apply: (_, __, [options]) => ({ ...options, path }),
+    });
+  const root = at("");
+  return { useTRPC: () => root };
+});
+
+const { ThreadsTab } = await import("@/app/(dashboard)/inboxes/[id]/threads-tab");
+const { useEscape } = await import("@/lib/use-escape");
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  // jsdom lays nothing out, so it has no scrolling to do.
+  Element.prototype.scrollIntoView = () => {};
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+  for (const fn of Object.values(sent)) fn.mockReset();
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+const $ = <T extends Element = HTMLElement>(selector: string) =>
+  document.querySelector<T & Element>(selector);
+async function press(target: Element, key: string) {
+  await act(async () => {
+    target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  });
+}
+async function click(target: Element | null) {
+  await act(async () => (target as HTMLElement).click());
+}
+
+describe("Esc on the page", () => {
+  function Probe({ onEscape }: { onEscape: () => void }) {
+    useEscape(onEscape);
+    return createElement(
+      "div",
+      null,
+      createElement("button", { id: "probe-button", type: "button" }),
+      createElement("input", { id: "probe-field" }),
+    );
+  }
+
+  it("runs on an Esc that no field, layer or handler took", async () => {
+    const onEscape = vi.fn();
+    await act(async () => root.render(createElement(Probe, { onEscape })));
+    const button = $("#probe-button") as HTMLElement;
+    const esc = (target: Element) => press(target, "Escape");
+
+    await esc(button);
+    expect(onEscape).toHaveBeenCalledTimes(1);
+    // Typed in a field: never.
+    await esc($("#probe-field") as HTMLElement);
+    expect(onEscape).toHaveBeenCalledTimes(1);
+    // A tooltip that closes on the same Esc, gone before the key reaches window.
+    const tip = document.createElement("div");
+    tip.className = "ms-tooltip";
+    document.body.append(tip);
+    const closeTip = () => tip.remove();
+    document.addEventListener("keydown", closeTip, { once: true });
+    await esc(button);
+    expect(tip.isConnected).toBe(false);
+    expect(onEscape).toHaveBeenCalledTimes(1);
+    // Handled already: prevented, or stopped before window.
+    button.addEventListener("keydown", (event) => event.preventDefault(), { once: true });
+    await esc(button);
+    button.addEventListener("keydown", (event) => event.stopPropagation(), { once: true });
+    await esc(button);
+    expect(onEscape).toHaveBeenCalledTimes(1);
+    // An open menu or dialog takes it too.
+    const menu = document.createElement("div");
+    menu.setAttribute("role", "dialog");
+    document.body.append(menu);
+    await esc(button);
+    menu.remove();
+    expect(onEscape).toHaveBeenCalledTimes(1);
+
+    await esc(button);
+    expect(onEscape).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("the open thread", () => {
+  const row = {
+    id: "t1",
+    subject: "Can't log in after the update",
+    from: "Ana Souza <ana@example.com>",
+    to: ["support@acme.example"],
+    labels: [],
+    message_count: 1,
+    read: true,
+    received_at: new Date().toISOString(),
+    folder: "inbox",
+    quarantined: 0,
+    snippet: "",
+  };
+  async function openThread() {
+    page.search = "thread=t1";
+    page.answers = {
+      "inboxes.threads.list.infiniteQueryOptions": { pages: [{ items: [row] }] },
+      "inboxes.threads.get.queryOptions": row,
+      "inboxes.threads.emails.infiniteQueryOptions": { pages: [{ items: [] }] },
+      "inboxes.drafts.list.queryOptions": { items: [] },
+      "inboxes.labels.list.queryOptions": [],
+    };
+    await act(async () =>
+      root.render(
+        createElement(ThreadsTab, {
+          inbox: { id: "i1", kind: "human", expired: false } as never,
+        }),
+      ),
+    );
+    expect($("section h2")?.textContent).toBe(row.subject);
+  }
+
+  it("closes on Esc, focus left in it going back to the thread's row", async () => {
+    await openThread();
+    const move = $('section button[aria-label="Move"]') as HTMLElement;
+    await act(async () => move.focus());
+    await press(move, "Escape");
+    expect($("section")).toBeNull();
+    expect(document.activeElement?.className).toBe("ms-thread-open");
+    expect(document.activeElement?.textContent).toContain(row.subject);
+  });
+
+  it("stays open for an Esc typed in a field", async () => {
+    await openThread();
+    const search = $('input[placeholder="Search threads…"]') as HTMLInputElement;
+    await act(async () => search.focus());
+    await press(search, "Escape");
+    expect($("section h2")).not.toBeNull();
+    await click($('section button[aria-label="Close"]'));
+    expect($("section")).toBeNull();
+  });
+});

From bba1c24b475ada0cc4f85d180fd8fe78d51b3eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:04:07 -0300
Subject: [PATCH 14/24] Pick a label's color when creating it, and rename,
 recolor or delete it from the Labels menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashboard could only make labels in a random color and had no way to
rename, recolor or delete one. Typing a new name in the Labels menu now
shows the palette under the create row, with a random pick preselected so
Enter alone still creates, and a dashed swatch that opens the native color
picker for any other color. A pencil on the hovered or arrowed-to row, or
→, swaps the menu to that label's edit view: name, the same swatches, and
Delete with a confirm in place. A name another label has is refused as it
is typed; the server's own refusals show inline too.

The swatches are radios, so the palette is one Tab stop walked with the
arrow keys; while the menu holds controls besides its search, Tab cycles
through them (loopTab, shared with dialogs through the FOCUSABLE list now in
lib/keyboard). GroupedMultiSelect gains these as optional hooks; the Emails
filter and the webhook event picker render pixel for pixel as before.

Thread rows and the pane header now show labels as one LabelBadge, the sans
neutral pill with the label's dot; the header's keeps its ✕, except in an
expired inbox, which is read-only.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |  24 ++
 apps/web/messages/pt-BR/inboxes.json          |  24 ++
 .../audience/segments/filter-builder.tsx      |   2 +-
 .../app/(dashboard)/inboxes/[id]/labels.tsx   | 354 ++++++++++++++++++
 .../(dashboard)/inboxes/[id]/threads-tab.tsx  |  65 +---
 .../src/components/grouped-multi-select.tsx   | 299 ++++++++++-----
 apps/web/src/components/modal.tsx             |   5 +-
 apps/web/src/lib/keyboard.ts                  |  30 ++
 apps/web/src/lib/label-colors.ts              |  13 +
 apps/web/src/styles/components.css            |  92 ++++-
 apps/web/test/inboxes-screens.test.ts         |  61 +++
 apps/web/test/threads-keyboard.test.ts        | 149 ++++++++
 12 files changed, 962 insertions(+), 156 deletions(-)
 create mode 100644 apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
 create mode 100644 apps/web/src/lib/label-colors.ts

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index a0de2f949..199dbf398 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -27,6 +27,30 @@
   "notSpam": "Not spam",
   "restore": "Restore",
   "trashRetention": "Threads in Trash are deleted {days, plural, one {# day} other {# days}} after they're moved here.",
+  "labels": {
+    "edit": "Edit label",
+    "back": "Back",
+    "name": "Name",
+    "color": "Color",
+    "custom": "Custom color",
+    "delete": "Delete label",
+    "deleteConfirm": "Delete “{name}”? It's removed from every thread.",
+    "taken": "A label with this name already exists.",
+    "limit": "An inbox can have up to {max} labels. Delete one to add another.",
+    "colors": {
+      "cyan": "Cyan",
+      "teal": "Teal",
+      "green": "Green",
+      "lime": "Lime",
+      "yellow": "Yellow",
+      "orange": "Orange",
+      "indigo": "Indigo",
+      "purple": "Purple",
+      "pink": "Pink",
+      "brown": "Brown",
+      "gray": "Gray"
+    }
+  },
   "unread": "Unread",
   "unreadAgent": "Your agent hasn't marked it read yet",
   "markRead": "Mark as read",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 9776d73ad..73518cfeb 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -27,6 +27,30 @@
   "notSpam": "Não é spam",
   "restore": "Restaurar",
   "trashRetention": "As conversas na Lixeira são excluídas {days, plural, one {# dia} other {# dias}} depois de chegarem aqui.",
+  "labels": {
+    "edit": "Editar etiqueta",
+    "back": "Voltar",
+    "name": "Nome",
+    "color": "Cor",
+    "custom": "Cor personalizada",
+    "delete": "Excluir etiqueta",
+    "deleteConfirm": "Excluir “{name}”? Ela sai de todas as conversas.",
+    "taken": "Já existe uma etiqueta com esse nome.",
+    "limit": "Uma caixa pode ter até {max} etiquetas. Exclua uma para criar outra.",
+    "colors": {
+      "cyan": "Ciano",
+      "teal": "Verde-água",
+      "green": "Verde",
+      "lime": "Verde-limão",
+      "yellow": "Amarelo",
+      "orange": "Laranja",
+      "indigo": "Índigo",
+      "purple": "Roxo",
+      "pink": "Rosa",
+      "brown": "Marrom",
+      "gray": "Cinza"
+    }
+  },
   "unread": "Não lida",
   "unreadAgent": "O agente ainda não marcou como lida",
   "markRead": "Marcar como lida",
diff --git a/apps/web/src/app/(dashboard)/audience/segments/filter-builder.tsx b/apps/web/src/app/(dashboard)/audience/segments/filter-builder.tsx
index f4929ed6d..88a885759 100644
--- a/apps/web/src/app/(dashboard)/audience/segments/filter-builder.tsx
+++ b/apps/web/src/app/(dashboard)/audience/segments/filter-builder.tsx
@@ -6,8 +6,8 @@ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom";
 import { useAnchoredPanel } from "@/components/anchored-panel";
 import { PlusGlyph } from "@/components/icons/nav-icons";
-import { FOCUSABLE } from "@/components/modal";
 import { Select, type SelectOption } from "@/components/select";
+import { FOCUSABLE } from "@/lib/keyboard";
 import {
   BASE_FIELDS,
   type BuilderRow,
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
new file mode 100644
index 000000000..b66221afd
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import { INBOX_LABELS_MAX, LABEL_COLORS } from "@millionsend/core/inbox-organize";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useId, useState } from "react";
+import { GroupedMultiSelect } from "@/components/grouped-multi-select";
+import { ChevronLeftIcon, TagIcon } from "@/components/icons/mail-icons";
+import { PlusGlyph } from "@/components/icons/nav-icons";
+import { BtnSpinner } from "@/components/spinner";
+import { StatusDot } from "@/components/status-badge";
+import { inLabelPalette, randomLabelColor } from "@/lib/label-colors";
+import { useTRPC } from "@/lib/trpc";
+import type { ThreadRow } from "../parts";
+
+type Label = ThreadRow["labels"][number];
+
+const GROUPS = [{ key: "labels", label: "" }];
+/** Room for the color swatches on one line, so the panel keeps its width as they appear. */
+const PANEL_WIDTH = 280;
+/** labels.create and labels.update take 64 characters at most. */
+const NAME_MAX = 64;
+// Text in the picker wraps at its width instead of widening it.
+const menuText = { contain: "inline-size" } as const;
+const menuError = { ...menuText, margin: "0 12px 8px", fontSize: 12 };
+
+/** A label as a neutral pill led by its color; with `onRemove`, its ✕ takes it off the thread. */
+export function LabelBadge({ label, onRemove }: { label: Label; onRemove?: () => void }) {
+  const t = useTranslations("inboxes");
+  return (
+    <span className="ms-badge ms-badge-neutral ms-label-badge">
+      <StatusDot color={label.color} />
+      {label.name}
+      {onRemove ? (
+        <button
+          type="button"
+          aria-label={t("removeLabel", { label: label.name })}
+          onClick={onRemove}
+        >
+          ✕
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+/**
+ * The thread's Labels picker: a pick toggles a label on the thread, a new name
+ * creates one in the color chosen under it (Enter alone keeps the random pick),
+ * and a row's pencil opens that label's edit view.
+ */
+export function LabelsMenu({
+  inboxId,
+  labels,
+  value,
+  onChange,
+  onCreated,
+}: {
+  inboxId: string;
+  labels: Label[];
+  value: string[];
+  onChange: (next: string[]) => void;
+  onCreated: (label: Label) => void;
+}) {
+  const t = useTranslations("inboxes");
+  const tc = useTranslations("common");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const [color, setColor] = useState(randomLabelColor);
+  const create = useMutation(
+    trpc.inboxes.labels.create.mutationOptions({
+      onSuccess: (label) => {
+        void queryClient.invalidateQueries({ queryKey: trpc.inboxes.labels.pathKey() });
+        setColor(randomLabelColor());
+        onCreated(label);
+      },
+    }),
+  );
+  const full = labels.length >= INBOX_LABELS_MAX;
+  return (
+    <GroupedMultiSelect
+      button
+      ariaLabel={t("addLabel")}
+      summary={
+        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+          <TagIcon />
+          {t("addLabel")}
+        </span>
+      }
+      value={value}
+      options={labels.map((label) => ({
+        value: label.id,
+        label: label.name,
+        group: "labels",
+        adornment: <StatusDot color={label.color} />,
+      }))}
+      groups={GROUPS}
+      searchPlaceholder={t("labelSearch")}
+      noResultsLabel={tc("select.noResults")}
+      maxLength={NAME_MAX}
+      panelMinWidth={PANEL_WIDTH}
+      onCreate={(name) => create.mutateAsync({ inboxId, name, color })}
+      createLabel={(name) => t("createLabel", { name })}
+      createExtra={(name, submit) =>
+        full ? (
+          <p className="ms-field-error" style={{ ...menuError, marginTop: 6 }}>
+            {t("labels.limit", { max: INBOX_LABELS_MAX })}
+          </p>
+        ) : (
+          <form
+            style={{ padding: "2px 4px 0" }}
+            onSubmit={(event) => {
+              event.preventDefault();
+              submit();
+            }}
+          >
+            <LabelColorField value={color} onChange={setColor} />
+            {create.error && create.variables?.name === name ? (
+              <p className="ms-field-error" style={menuError}>
+                {create.error.message}
+              </p>
+            ) : null}
+          </form>
+        )
+      }
+      editLabel={t("labels.edit")}
+      renderEdit={(option, back) => {
+        const label = labels.find((l) => l.id === option.value);
+        return label ? (
+          <LabelEditor
+            key={label.id}
+            inboxId={inboxId}
+            label={label}
+            labels={labels}
+            onDone={back}
+          />
+        ) : null;
+      }}
+      onChange={onChange}
+    />
+  );
+}
+
+/**
+ * The palette as round radio swatches, then a dashed one that opens the
+ * native color picker for any other color; a custom pick fills it.
+ */
+export function LabelColorField({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (color: string) => void;
+}) {
+  const t = useTranslations("inboxes");
+  const id = useId();
+  const custom = !inLabelPalette(value);
+  return (
+    <div>
+      <div
+        id={`${id}-label`}
+        className="ms-microlabel"
+        style={{ padding: "0 8px 6px", fontSize: 10.5 }}
+      >
+        {t("labels.color")}
+      </div>
+      <div className="ms-swatches">
+        <div role="radiogroup" aria-labelledby={`${id}-label`}>
+          {Object.entries(LABEL_COLORS).map(([key, hex]) => (
+            <input
+              key={key}
+              type="radio"
+              name={id}
+              value={hex}
+              className="ms-swatch"
+              style={{ background: hex }}
+              aria-label={t(`labels.colors.${key}`)}
+              checked={value === hex}
+              onChange={() => onChange(hex)}
+              onKeyDown={(event) => {
+                // Enter on a swatch submits, as Enter in a field does.
+                if (event.key !== "Enter") return;
+                event.preventDefault();
+                event.currentTarget.form?.requestSubmit();
+              }}
+            />
+          ))}
+        </div>
+        <label
+          className={custom ? "ms-swatch custom on" : "ms-swatch custom"}
+          style={custom ? { background: value } : undefined}
+          title={t("labels.custom")}
+        >
+          {custom ? null : <PlusGlyph size={10} />}
+          <input
+            type="color"
+            className="ms-swatch-picker"
+            aria-label={t("labels.custom")}
+            value={value.toLowerCase()}
+            onChange={(event) => onChange(event.target.value.toUpperCase())}
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+/** A label's edit view inside the picker: rename, recolor, or delete after a confirm in place. */
+export function LabelEditor({
+  inboxId,
+  label,
+  labels,
+  onDone,
+}: {
+  inboxId: string;
+  label: Label;
+  labels: Label[];
+  onDone: () => void;
+}) {
+  const t = useTranslations("inboxes");
+  const tc = useTranslations("common");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const [name, setName] = useState(label.name);
+  const [color, setColor] = useState(label.color);
+  const [confirming, setConfirming] = useState(false);
+  // Back from the confirm, focus returns to the button that opened it.
+  const [cancelled, setCancelled] = useState(false);
+  const saved = () => {
+    // Thread rows and the open thread show labels too.
+    void queryClient.invalidateQueries({ queryKey: trpc.inboxes.labels.pathKey() });
+    void queryClient.invalidateQueries({ queryKey: trpc.inboxes.threads.pathKey() });
+    onDone();
+  };
+  const update = useMutation(trpc.inboxes.labels.update.mutationOptions({ onSuccess: saved }));
+  const remove = useMutation(trpc.inboxes.labels.delete.mutationOptions({ onSuccess: saved }));
+  const trimmed = name.trim();
+  const taken = labels.some(
+    (other) => other.id !== label.id && other.name.toLowerCase() === trimmed.toLowerCase(),
+  );
+  const error = taken ? t("labels.taken") : (update.error ?? remove.error)?.message;
+  const save = () => {
+    if (trimmed === "" || taken || update.isPending) return;
+    const patch = {
+      ...(trimmed === label.name ? {} : { name: trimmed }),
+      ...(color === label.color ? {} : { color }),
+    };
+    if (Object.keys(patch).length === 0) onDone();
+    else update.mutate({ inboxId, labelId: label.id, ...patch });
+  };
+  return (
+    <form
+      style={{ padding: 4 }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        save();
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 4px 8px" }}>
+        <button
+          type="button"
+          className="ms-menu-trigger-bare"
+          style={{ width: 24, height: 24 }}
+          aria-label={t("labels.back")}
+          title={t("labels.back")}
+          onClick={onDone}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <span style={{ font: "600 13px var(--ms-font-sans)", color: "var(--ms-bone)" }}>
+          {t("labels.edit")}
+        </span>
+      </div>
+      <div style={{ padding: "0 8px 10px" }}>
+        <input
+          className="ms-input"
+          style={{ width: "100%" }}
+          // biome-ignore lint/a11y/noAutofocus: the view opens to rename, as the search it replaced had focus
+          autoFocus
+          aria-label={t("labels.name")}
+          value={name}
+          maxLength={NAME_MAX}
+          onChange={(event) => setName(event.target.value)}
+        />
+        {error ? (
+          <span className="ms-field-error" style={{ ...menuText, marginTop: 6, fontSize: 12 }}>
+            {error}
+          </span>
+        ) : null}
+      </div>
+      <LabelColorField value={color} onChange={setColor} />
+      <hr className="ms-menu-sep" style={{ margin: "6px -4px 4px" }} />
+      {confirming ? (
+        <div style={{ padding: "4px 4px 2px 8px" }}>
+          <p style={{ ...menuText, margin: "0 0 10px", fontSize: 12.5, lineHeight: 1.45 }}>
+            {t("labels.deleteConfirm", { name: label.name })}
+          </p>
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: 6 }}>
+            <button
+              type="button"
+              className="ms-btn ms-btn-secondary ms-btn-sm"
+              // biome-ignore lint/a11y/noAutofocus: the button that asked is gone; the safe choice takes focus
+              autoFocus
+              onClick={() => {
+                setConfirming(false);
+                setCancelled(true);
+              }}
+            >
+              {tc("cancel")}
+            </button>
+            <button
+              type="button"
+              className="ms-btn ms-btn-destructive ms-btn-sm"
+              disabled={remove.isPending}
+              onClick={() => remove.mutate({ inboxId, labelId: label.id })}
+            >
+              <BtnSpinner on={remove.isPending} />
+              {t("labels.delete")}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 10,
+            padding: "4px 4px 2px 0",
+          }}
+        >
+          <button
+            type="button"
+            className="ms-menu-item danger"
+            style={{ width: "auto" }}
+            // biome-ignore lint/a11y/noAutofocus: back from the confirm it replaced
+            autoFocus={cancelled}
+            onClick={() => setConfirming(true)}
+          >
+            {t("labels.delete")}
+          </button>
+          <button
+            type="submit"
+            className="ms-btn ms-btn-primary ms-btn-sm"
+            disabled={trimmed === "" || taken || update.isPending}
+          >
+            <BtnSpinner on={update.isPending} />
+            {t("edit.save")}
+          </button>
+        </div>
+      )}
+    </form>
+  );
+}
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
index d319e6d9d..f013571c7 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
@@ -7,14 +7,12 @@ import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useDeferredValue, useEffect, useId, useRef, useState } from "react";
 import { DraftBanner } from "@/components/draft-banner";
-import { GroupedMultiSelect } from "@/components/grouped-multi-select";
 import {
   ArchiveIcon,
   FolderInputIcon,
   InboxIcon,
   RestoreIcon,
   SpamIcon,
-  TagIcon,
   TrashIcon,
   XIcon,
 } from "@/components/icons/mail-icons";
@@ -48,6 +46,7 @@ import {
   type ThreadRow,
   TrustBadge,
 } from "../parts";
+import { LabelBadge, LabelsMenu } from "./labels";
 
 const FOLDERS = ["inbox", "archive", "spam", "sent", "trash"] as const;
 const MOVE_TO = ["inbox", "archive", "spam", "trash"] as const;
@@ -268,10 +267,7 @@ export function ThreadListRow({
             <SuspiciousBadge injection={row.injection_score} phishing={row.phishing_score} />
           ) : null}
           {row.labels.map((label) => (
-            <span key={label.id} className="ms-badge ms-badge-neutral">
-              <StatusDot color={label.color} />
-              {label.name}
-            </span>
+            <LabelBadge key={label.id} label={label} />
           ))}
         </span>
         {/* No handler of its own: its click, Enter's included, bubbles to the row. */}
@@ -307,7 +303,6 @@ function ThreadPane({
   onClose: () => void;
 }) {
   const t = useTranslations("inboxes");
-  const tc = useTranslations("common");
   const router = useRouter();
   const trpc = useTRPC();
   const queryClient = useQueryClient();
@@ -332,16 +327,6 @@ function ThreadPane({
       onError: (error) => toast(error.message, "danger"),
     }),
   );
-  // A label made here is applied to the open thread at once.
-  const createLabel = useMutation(
-    trpc.inboxes.labels.create.mutationOptions({
-      onSuccess: (label) => {
-        void queryClient.invalidateQueries({ queryKey: trpc.inboxes.labels.pathKey() });
-        update.mutate({ ...ref, labelId: label.id });
-      },
-      onError: (error) => toast(error.message, "danger"),
-    }),
-  );
   const unread = thread.data?.read === false;
   const { mutate } = update;
   // In a people inbox opening a thread reads it, as a mail client does. In an
@@ -445,29 +430,10 @@ function ThreadPane({
                 />
                 {/* ponytail: the ✓ follows the refetch, so a second toggle of one label
                     before it lands repeats the first; keep a pending value if that bites. */}
-                <GroupedMultiSelect
-                  button
-                  ariaLabel={t("addLabel")}
-                  summary={
-                    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
-                      <TagIcon />
-                      {t("addLabel")}
-                    </span>
-                  }
+                <LabelsMenu
+                  inboxId={inbox.id}
+                  labels={labels.data ?? []}
                   value={labelIds}
-                  options={(labels.data ?? []).map((label) => ({
-                    value: label.id,
-                    label: label.name,
-                    group: "labels",
-                    adornment: <StatusDot color={label.color} />,
-                  }))}
-                  groups={[{ key: "labels", label: "" }]}
-                  searchPlaceholder={t("labelSearch")}
-                  noResultsLabel={tc("select.noResults")}
-                  // labels.create takes 64 characters at most.
-                  maxLength={64}
-                  onCreate={(name) => createLabel.mutate({ inboxId: inbox.id, name })}
-                  createLabel={(name) => t("createLabel", { name })}
                   onChange={(next) => {
                     // A pick toggles one row: the id that differs says which, and how.
                     const added = next.find((id) => !labelIds.includes(id));
@@ -475,6 +441,8 @@ function ThreadPane({
                     if (added) update.mutate({ ...ref, labelId: added });
                     else if (removed) update.mutate({ ...ref, removeLabelId: removed });
                   }}
+                  // A label made here goes on the open thread at once.
+                  onCreated={(label) => update.mutate({ ...ref, labelId: label.id })}
                 />
                 <PopoverMenu
                   boxed
@@ -518,18 +486,13 @@ function ThreadPane({
       {summary && summary.labels.length > 0 ? (
         <span style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
           {summary.labels.map((label) => (
-            <span key={label.id} className="ms-chip">
-              <StatusDot color={label.color} />
-              {label.name}
-              <button
-                type="button"
-                aria-label={t("removeLabel", { label: label.name })}
-                disabled={inbox.expired}
-                onClick={() => update.mutate({ ...ref, removeLabelId: label.id })}
-              >
-                ✕
-              </button>
-            </span>
+            <LabelBadge
+              key={label.id}
+              label={label}
+              {...(inbox.expired
+                ? {}
+                : { onRemove: () => update.mutate({ ...ref, removeLabelId: label.id }) })}
+            />
           ))}
         </span>
       ) : null}
diff --git a/apps/web/src/components/grouped-multi-select.tsx b/apps/web/src/components/grouped-multi-select.tsx
index 2ca38a565..a0c97d3e0 100644
--- a/apps/web/src/components/grouped-multi-select.tsx
+++ b/apps/web/src/components/grouped-multi-select.tsx
@@ -2,8 +2,10 @@
 
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { loopTab } from "@/lib/keyboard";
 import { PANEL_MAX_WIDTH } from "@/lib/panel-placement";
 import { useAnchoredPanel } from "./anchored-panel";
+import { PencilIcon } from "./icons/mail-icons";
 import { ChevronGlyph, PlusGlyph } from "./icons/nav-icons";
 import { useDismiss } from "./popover-menu";
 
@@ -47,7 +49,13 @@ export interface OptionGroup {
  *
  * With `onCreate`, a search that names no option exactly ends the list with a
  * row that creates it (`createLabel` words that row); Enter reaches it like
- * any row.
+ * any row. `createExtra` adds controls under that row (how the new option is
+ * made); while the panel holds controls besides the search, Tab cycles
+ * through them instead of leaving.
+ *
+ * With `renderEdit`, the hovered or arrowed-to row shows a pencil, and → on
+ * it (past the end of the typed text) does the same: the panel swaps to the
+ * row's edit view until it calls `back`, or Esc.
  */
 export function GroupedMultiSelect({
   value,
@@ -65,6 +73,10 @@ export function GroupedMultiSelect({
   button = false,
   onCreate,
   createLabel,
+  createExtra,
+  editLabel,
+  renderEdit,
+  panelMinWidth,
   maxLength,
 }: {
   value: string[];
@@ -89,14 +101,24 @@ export function GroupedMultiSelect({
   id?: string;
   /** Trigger drawn as a secondary button instead of an input, as Select's. */
   button?: boolean;
-  onCreate?: (name: string) => void;
+  /** A returned promise keeps the name typed until it settles, and after a refusal, so the reason can show beside it. */
+  onCreate?: (name: string) => unknown;
   createLabel?: (name: string) => string;
+  /** Controls under the create row; `create` runs the row, as Enter on it does. */
+  createExtra?: (name: string, create: () => void) => React.ReactNode;
+  /** The pencil's title. */
+  editLabel?: string;
+  renderEdit?: (option: GroupedOption, back: () => void) => React.ReactNode;
+  /** Overrides the button trigger's panel width floor, for rows or controls wider than a name. */
+  panelMinWidth?: number;
   /** Caps the search text, and so the longest name the create row offers. */
   maxLength?: number;
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(0);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -124,6 +146,8 @@ export function GroupedMultiSelect({
     !options.some((o) => o.label.toLowerCase() === typed.toLowerCase());
   const createIndex = allOffset + orderedFiltered.length;
   const rowCount = createIndex + (creatable ? 1 : 0);
+  const editingOption =
+    renderEdit && editing !== null ? options.find((o) => o.value === editing) : undefined;
 
   useDismiss(dismissRefs, open, () => setOpen(false));
 
@@ -137,6 +161,7 @@ export function GroupedMultiSelect({
     if (disabled) return;
     setQuery("");
     setActiveIndex(0);
+    setEditing(null);
     setOpen(true);
   }
 
@@ -165,9 +190,20 @@ export function GroupedMultiSelect({
       return;
     }
     if (creatable && index === createIndex) {
-      onCreate?.(typed);
-      setQuery("");
-      setActiveIndex(0);
+      if (creating) return;
+      const name = typed;
+      // Clears the search, unless it moved on while the create was in flight.
+      const clear = () => {
+        setQuery((q) => (q.trim() === name ? "" : q));
+        setActiveIndex(0);
+      };
+      const created = onCreate?.(name);
+      if (created instanceof Promise) {
+        setCreating(true);
+        created.then(clear, () => {}).finally(() => setCreating(false));
+      } else {
+        clear();
+      }
       return;
     }
     const option = orderedFiltered[index - allOffset];
@@ -213,20 +249,45 @@ export function GroupedMultiSelect({
         event.preventDefault();
         activate(activeIndex);
         break;
+      case "ArrowRight": {
+        const option = orderedFiltered[activeIndex - allOffset];
+        const field = event.currentTarget;
+        // Inside the typed text, → moves the caret.
+        const atEnd =
+          !(field instanceof HTMLInputElement) || field.selectionStart === field.value.length;
+        if (renderEdit && option && atEnd) {
+          event.preventDefault();
+          setEditing(option.value);
+        }
+        break;
+      }
       case "Escape":
         // Do not let a parent modal's Escape handler also fire.
         event.stopPropagation();
         closeMenu();
         break;
       case "Tab":
-        setOpen(false);
+        if (!loopTab(event, menuRef.current)) setOpen(false);
         break;
       default:
         break;
     }
   }
 
-  const activeId = open && activeIndex < rowCount ? `${listboxId}-${activeIndex}` : undefined;
+  /** Keys in the panel's other controls (a create row's extras, an edit view): Esc steps back out. */
+  function onControlsKeyDown(event: React.KeyboardEvent) {
+    if (event.key === "Tab") {
+      loopTab(event, menuRef.current);
+    } else if (event.key === "Escape") {
+      event.stopPropagation();
+      if (editingOption) setEditing(null);
+      else closeMenu();
+    }
+  }
+
+  const panelMax = typeof panelStyle.maxHeight === "number" ? panelStyle.maxHeight : 264;
+  const activeId =
+    open && !editingOption && activeIndex < rowCount ? `${listboxId}-${activeIndex}` : undefined;
   const rowChecked = (option: GroupedOption) =>
     (allOption?.selected === true && !allOption.exclusive && !option.excludedFromAll) ||
     value.includes(option.value);
@@ -238,6 +299,7 @@ export function GroupedMultiSelect({
     adornment,
     label,
     hint,
+    edit,
   }: {
     index: number;
     checked: boolean;
@@ -245,7 +307,9 @@ export function GroupedMultiSelect({
     adornment?: React.ReactNode;
     label: string;
     hint?: string;
+    edit?: () => void;
   }) {
+    const check = checked ? <span aria-hidden="true">✓</span> : null;
     return (
       <button
         id={`${listboxId}-${index}`}
@@ -264,7 +328,25 @@ export function GroupedMultiSelect({
             <span style={{ color: "var(--ms-faint)", fontSize: 12, flex: "none" }}>{hint}</span>
           ) : null}
         </span>
-        {checked ? <span aria-hidden="true">✓</span> : null}
+        {edit && index === activeIndex ? (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+            {check}
+            {/* Hidden from assistive tech: an option holds no button, and → opens the same view. */}
+            <span
+              className="ms-menu-edit"
+              title={editLabel}
+              aria-hidden="true"
+              onClick={(event) => {
+                event.stopPropagation();
+                edit();
+              }}
+            >
+              <PencilIcon />
+            </span>
+          </span>
+        ) : (
+          check
+        )}
       </button>
     );
   }
@@ -318,105 +400,126 @@ export function GroupedMultiSelect({
               className="ms-menu"
               style={{
                 ...panelStyle,
-                ...(button ? { minWidth: BUTTON_PANEL_MIN_WIDTH } : {}),
+                ...(button ? { minWidth: panelMinWidth ?? BUTTON_PANEL_MIN_WIDTH } : {}),
                 width: "max-content",
                 maxWidth: `min(320px, ${PANEL_MAX_WIDTH})`,
                 padding: 0,
                 overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
                 zIndex: "var(--ms-z-menu)",
               }}
             >
-              <input
-                className="ms-menu-search"
-                style={{ width: "100%", margin: 0 }}
-                // Search is the typing surface while the popover is open.
-                // biome-ignore lint/a11y/noAutofocus: focus moves into the popover by design, Esc restores the trigger
-                autoFocus
-                value={query}
-                maxLength={maxLength}
-                placeholder={searchPlaceholder}
-                aria-label={searchPlaceholder}
-                {...(activeId !== undefined ? { "aria-activedescendant": activeId } : {})}
-                onChange={(event) => {
-                  setQuery(event.target.value);
-                  setActiveIndex(0);
-                }}
-                onKeyDown={onKeyDown}
-              />
-              <div
-                id={listboxId}
-                role="listbox"
-                aria-multiselectable="true"
-                aria-label={ariaLabel}
-                style={{
-                  // The search row takes the top of the panel's height budget.
-                  maxHeight:
-                    (typeof panelStyle.maxHeight === "number" ? panelStyle.maxHeight : 264) - 40,
-                  overflowY: "auto",
-                  padding: 4,
-                  boxSizing: "border-box",
-                }}
-              >
-                {allOption ? (
-                  <Row
-                    index={0}
-                    checked={allOption.selected}
-                    onClick={() => activate(0)}
-                    {...(allOption.adornment !== undefined
-                      ? { adornment: allOption.adornment }
-                      : {})}
-                    label={allOption.label}
+              {editingOption && renderEdit ? (
+                // biome-ignore lint/a11y/noStaticElementInteractions: keydown only keeps Tab in the view and takes Esc back to the list
+                <div style={{ minHeight: 0, overflowY: "auto" }} onKeyDown={onControlsKeyDown}>
+                  {renderEdit(editingOption, () => setEditing(null))}
+                </div>
+              ) : (
+                <>
+                  <input
+                    className="ms-menu-search"
+                    style={{ width: "100%", margin: 0 }}
+                    // Search is the typing surface while the popover is open.
+                    // biome-ignore lint/a11y/noAutofocus: focus moves into the popover by design, Esc restores the trigger
+                    autoFocus
+                    value={query}
+                    maxLength={maxLength}
+                    placeholder={searchPlaceholder}
+                    aria-label={searchPlaceholder}
+                    {...(activeId !== undefined ? { "aria-activedescendant": activeId } : {})}
+                    onChange={(event) => {
+                      setQuery(event.target.value);
+                      setActiveIndex(0);
+                    }}
+                    onKeyDown={onKeyDown}
                   />
-                ) : null}
-                {orderedFiltered.length === 0 && !creatable ? (
-                  <div style={{ padding: "7px 12px", fontSize: 13, color: "var(--ms-muted)" }}>
-                    {noResultsLabel}
-                  </div>
-                ) : (
-                  groups.map((group) => {
-                    const rows = orderedFiltered.filter((o) => o.group === group.key);
-                    if (rows.length === 0) return null;
-                    return (
-                      <div key={group.key}>
-                        {group.label ? <div className="ms-menu-label">{group.label}</div> : null}
-                        {rows.map((option) => {
-                          const index = allOffset + orderedFiltered.indexOf(option);
-                          return (
-                            <Row
-                              key={option.value}
-                              index={index}
-                              checked={rowChecked(option)}
-                              onClick={() => activate(index)}
-                              {...(option.adornment !== undefined
-                                ? { adornment: option.adornment }
-                                : {})}
-                              {...(option.hint !== undefined ? { hint: option.hint } : {})}
-                              label={option.label}
-                            />
-                          );
-                        })}
+                  <div
+                    id={listboxId}
+                    role="listbox"
+                    aria-multiselectable="true"
+                    aria-label={ariaLabel}
+                    style={{
+                      // The search row takes the top of the panel's height budget.
+                      maxHeight: panelMax - 40,
+                      // Gives way first when a create row's extras need the room.
+                      minHeight: 0,
+                      overflowY: "auto",
+                      padding: 4,
+                      boxSizing: "border-box",
+                    }}
+                  >
+                    {allOption ? (
+                      <Row
+                        index={0}
+                        checked={allOption.selected}
+                        onClick={() => activate(0)}
+                        {...(allOption.adornment !== undefined
+                          ? { adornment: allOption.adornment }
+                          : {})}
+                        label={allOption.label}
+                      />
+                    ) : null}
+                    {orderedFiltered.length === 0 && !creatable ? (
+                      <div style={{ padding: "7px 12px", fontSize: 13, color: "var(--ms-muted)" }}>
+                        {noResultsLabel}
                       </div>
-                    );
-                  })
-                )}
-                {creatable ? (
-                  <>
-                    {/* A listbox holds only options: a div, not a separator <hr>. */}
-                    {createIndex > 0 ? <div className="ms-menu-sep" /> : null}
-                    <Row
-                      index={createIndex}
-                      checked={false}
-                      onClick={() => activate(createIndex)}
-                      adornment={
-                        <span style={{ display: "flex", color: "var(--ms-muted)" }}>
-                          <PlusGlyph size={12} />
-                        </span>
-                      }
-                      label={createLabel ? createLabel(typed) : typed}
-                    />
-                  </>
-                ) : null}
-              </div>
+                    ) : (
+                      groups.map((group) => {
+                        const rows = orderedFiltered.filter((o) => o.group === group.key);
+                        if (rows.length === 0) return null;
+                        return (
+                          <div key={group.key}>
+                            {group.label ? (
+                              <div className="ms-menu-label">{group.label}</div>
+                            ) : null}
+                            {rows.map((option) => {
+                              const index = allOffset + orderedFiltered.indexOf(option);
+                              return (
+                                <Row
+                                  key={option.value}
+                                  index={index}
+                                  checked={rowChecked(option)}
+                                  onClick={() => activate(index)}
+                                  {...(option.adornment !== undefined
+                                    ? { adornment: option.adornment }
+                                    : {})}
+                                  {...(option.hint !== undefined ? { hint: option.hint } : {})}
+                                  {...(renderEdit ? { edit: () => setEditing(option.value) } : {})}
+                                  label={option.label}
+                                />
+                              );
+                            })}
+                          </div>
+                        );
+                      })
+                    )}
+                    {creatable ? (
+                      <>
+                        {/* A listbox holds only options: a div, not a separator <hr>. */}
+                        {createIndex > 0 ? <div className="ms-menu-sep" /> : null}
+                        <Row
+                          index={createIndex}
+                          checked={false}
+                          onClick={() => activate(createIndex)}
+                          adornment={
+                            <span style={{ display: "flex", color: "var(--ms-muted)" }}>
+                              <PlusGlyph size={12} />
+                            </span>
+                          }
+                          label={createLabel ? createLabel(typed) : typed}
+                        />
+                      </>
+                    ) : null}
+                  </div>
+                  {creatable && createExtra ? (
+                    // biome-ignore lint/a11y/noStaticElementInteractions: keydown only keeps Tab in the panel and Esc closing it
+                    <div onKeyDown={onControlsKeyDown}>
+                      {createExtra(typed, () => activate(createIndex))}
+                    </div>
+                  ) : null}
+                </>
+              )}
             </div>,
             document.body,
           )
diff --git a/apps/web/src/components/modal.tsx b/apps/web/src/components/modal.tsx
index 6e88ad1af..963279504 100644
--- a/apps/web/src/components/modal.tsx
+++ b/apps/web/src/components/modal.tsx
@@ -3,6 +3,7 @@
 import { useTranslations } from "next-intl";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { FOCUSABLE } from "@/lib/keyboard";
 import { refusedAsReadOnly } from "@/lib/read-only";
 import { useScrollLock } from "@/lib/use-scroll-lock";
 import { DotParts } from "./dot-parts";
@@ -30,10 +31,6 @@ function CloseGlyph({ onClose }: { onClose: () => void }) {
   );
 }
 
-/** Tab stops inside a panel that runs its own focus loop (dialogs, anchored editors). */
-export const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-
 export function Modal({
   open,
   onClose,
diff --git a/apps/web/src/lib/keyboard.ts b/apps/web/src/lib/keyboard.ts
index 519812afe..df1b6cc4f 100644
--- a/apps/web/src/lib/keyboard.ts
+++ b/apps/web/src/lib/keyboard.ts
@@ -29,3 +29,33 @@ const ESC_LAYERS = '.ms-menu, .ms-tooltip, [role="dialog"], .ms-drawer-scrim';
 export function escapeTaken(target: EventTarget | null): boolean {
   return shortcutBlocked(target) || document.querySelector(ESC_LAYERS) !== null;
 }
+
+/** Tab stops inside a panel that runs its own focus loop (dialogs, anchored editors). */
+export const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Keeps Tab inside `panel` while focus is in it: past the last stop it wraps
+ * to the first, and Shift+Tab the other way. False when focus is outside the
+ * panel or the panel has no other stop, so Tab may leave.
+ */
+export function loopTab(
+  event: Pick<KeyboardEvent, "shiftKey" | "preventDefault">,
+  panel: HTMLElement | null,
+): boolean {
+  if (!panel?.contains(document.activeElement)) return false;
+  const stops = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+    (el) => el.tabIndex >= 0,
+  );
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  if (!first || !last || first === last) return false;
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+  return true;
+}
diff --git a/apps/web/src/lib/label-colors.ts b/apps/web/src/lib/label-colors.ts
new file mode 100644
index 000000000..976bf2a0a
--- /dev/null
+++ b/apps/web/src/lib/label-colors.ts
@@ -0,0 +1,13 @@
+import { LABEL_COLORS } from "@millionsend/core/inbox-organize";
+
+const PALETTE: readonly string[] = Object.values(LABEL_COLORS);
+
+/** A palette color at random: where a new label's color starts, as core picks one for a label made without. */
+export function randomLabelColor(): string {
+  return PALETTE[Math.floor(Math.random() * PALETTE.length)] ?? LABEL_COLORS.gray;
+}
+
+/** Whether a #RRGGBB color is one of the palette's swatches rather than a custom pick. */
+export function inLabelPalette(color: string): boolean {
+  return PALETTE.includes(color.toUpperCase());
+}
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 6c1fc3455..da14e2937 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -594,6 +594,90 @@ table.ms-table {
     min-height: 0;
   }
 }
+/* A label's pill, in thread rows and under the open thread's title: the
+   neutral badge led by the label's color dot (inboxes/[id]/labels.tsx). */
+.ms-label-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+/* The labels picker: the pencil on its active row, and the color swatches its
+   create row and edit view share. A palette swatch is a radio drawn as its
+   color, ringed in bone once picked; the dashed one opens the native picker
+   through the color input laid over it, and fills with a custom pick. */
+.ms-menu-edit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: -3px -4px -3px 2px;
+  border-radius: 6px;
+  color: var(--ms-muted);
+  cursor: pointer;
+}
+.ms-menu-edit:hover {
+  background: var(--ms-line);
+  color: var(--ms-bone);
+}
+.ms-swatches,
+.ms-swatches > [role="radiogroup"] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.ms-swatches {
+  padding: 4px 8px 8px;
+}
+.ms-swatch {
+  appearance: none;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.ms-swatch:checked,
+.ms-swatch.on {
+  outline: 1.5px solid var(--ms-bone);
+  outline-offset: 2px;
+}
+.ms-swatch.custom {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--ms-faint);
+  color: var(--ms-muted);
+  transition:
+    color var(--ms-dur-fast) var(--ms-ease),
+    border-color var(--ms-dur-fast) var(--ms-ease);
+}
+.ms-swatch.custom:hover {
+  border-color: var(--ms-muted);
+  color: var(--ms-bone);
+}
+.ms-swatch.custom.on {
+  border-color: transparent;
+}
+.ms-swatch.custom:has(:focus-visible) {
+  box-shadow: var(--ms-focus-ring);
+}
+.ms-swatch-picker {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
 
 /* Inputs. A fieldset's legend labels its group like any field's label. */
 .ms-field label,
@@ -750,7 +834,8 @@ table.ms-table {
     animation: none;
   }
 }
-.ms-chip button {
+.ms-chip button,
+.ms-label-badge button {
   background: none;
   border: 0;
   color: var(--ms-muted);
@@ -764,7 +849,8 @@ table.ms-table {
   flex-shrink: 0;
   transition: color var(--ms-dur-fast) var(--ms-ease);
 }
-.ms-chip button:hover {
+.ms-chip button:hover,
+.ms-label-badge button:hover {
   color: var(--ms-bone);
 }
 /* Chips inside the token input (chip-multi-select.tsx) are 20px, so one never
@@ -2963,6 +3049,7 @@ summary:focus-visible,
   .ms-modal-close,
   .ms-tooltip-trigger:not(.inline),
   .ms-chip button,
+  .ms-label-badge button,
   button.ms-notice-strip-action,
   .ms-crumb {
     position: relative;
@@ -2970,6 +3057,7 @@ summary:focus-visible,
   .ms-modal-close::after,
   .ms-tooltip-trigger:not(.inline)::after,
   .ms-chip button::after,
+  .ms-label-badge button::after,
   button.ms-notice-strip-action::after {
     content: "";
     position: absolute;
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index f2cef4608..4f7125ca2 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -1,4 +1,5 @@
 import { readFileSync } from "node:fs";
+import { LABEL_COLORS } from "@millionsend/core/inbox-organize";
 import type { InboxSafety } from "@millionsend/db/schema";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
@@ -117,6 +118,7 @@ const { ThreadListRow } = await import("@/app/(dashboard)/inboxes/[id]/threads-t
 const { ThreadsTab } = await vi.importActual<
   typeof import("@/app/(dashboard)/inboxes/[id]/threads-tab")
 >("@/app/(dashboard)/inboxes/[id]/threads-tab");
+const { LabelColorField, LabelEditor } = await import("@/app/(dashboard)/inboxes/[id]/labels");
 const { InboxesView } = await import("@/app/(dashboard)/inboxes/inboxes-view");
 const { approvalReasonWords, QuarantinedBadge, replyAllAdds, replyTarget, TrustBadge } =
   await import("@/app/(dashboard)/inboxes/parts");
@@ -350,6 +352,10 @@ describe("threads", () => {
       /class="ms-tooltip-trigger inline" tabindex="0"><span id="[^"]+-dot" class="ms-dot" style="background:var\(--ms-bone\)" role="img" aria-label="Unread">/,
     );
     expect(render(false, true)).toContain('aria-label="Your agent hasn&#x27;t marked it read yet"');
+    // The row's label is the sans pill, without the header's ✕.
+    expect(read).toContain(
+      '<span class="ms-badge ms-badge-neutral ms-label-badge"><span class="ms-dot" style="background:#46A758" aria-hidden="true"></span>Billing</span>',
+    );
   });
 
   it("closes the open thread with an icon button named Close, the last control in its header", () => {
@@ -358,6 +364,10 @@ describe("threads", () => {
       /<span class="ms-tooltip-trigger inline"><button type="button" class="ms-btn ms-btn-icon" aria-label="Close"><svg[^>]*>(<path[^>]*><\/path>){2}<\/svg><\/button><\/span>$/,
     );
     expect(html).not.toContain("ms-btn-ghost");
+    // The same pill as the rows, keeping its ✕.
+    expect(tab("inbox")).toContain(
+      '<span class="ms-badge ms-badge-neutral ms-label-badge"><span class="ms-dot" style="background:#46A758" aria-hidden="true"></span>Billing<button type="button" aria-label="Remove Billing">✕</button></span>',
+    );
   });
 
   it("puts Not spam before Move in Spam, Restore in Trash, and neither elsewhere", () => {
@@ -381,6 +391,9 @@ describe("threads", () => {
     const html = tab("spam", { expired: true });
     expect(header(html)).toContain('aria-label="Close"');
     expect(header(html)).not.toMatch(/Not spam|aria-label="Move"|aria-label="Labels"|More actions/);
+    // Its labels show, with no ✕ to take them off.
+    expect(html).toContain("ms-label-badge");
+    expect(html).not.toContain("Remove Billing");
   });
 
   it("says over Trash how long it keeps a thread, from core's own number", () => {
@@ -390,6 +403,54 @@ describe("threads", () => {
     );
     expect(tab("spam")).not.toContain(line);
   });
+
+  it("offers the palette as swatches, the pick checked, and a dashed custom one", () => {
+    const field = (value: string) =>
+      renderToStaticMarkup(createElement(LabelColorField, { value, onChange: () => {} }));
+    const swatches = (html: string) =>
+      [...html.matchAll(/<input type="radio"[^>]*>/g)].map((match) => match[0]);
+    const purple = field("#AB4ABA");
+    expect(swatches(purple)).toHaveLength(Object.keys(LABEL_COLORS).length);
+    expect(swatches(purple).filter((swatch) => swatch.includes('checked=""'))).toEqual([
+      expect.stringContaining('aria-label="Purple"'),
+    ]);
+    expect(purple).toContain('role="radiogroup"');
+    expect(purple).toMatch(/<label class="ms-swatch custom" title="Custom color"><svg/);
+    expect(purple).toContain(
+      '<input type="color" class="ms-swatch-picker" aria-label="Custom color" value="#ab4aba"/>',
+    );
+    // A color off the palette fills the custom swatch, and checks none of the others.
+    const custom = field("#123456");
+    expect(swatches(custom).some((swatch) => swatch.includes("checked"))).toBe(false);
+    expect(custom).toContain('<label class="ms-swatch custom on" style="background:#123456"');
+    // Every swatch has a name to read out, in both languages.
+    expect(Object.keys(en.inboxes.labels.colors)).toEqual(Object.keys(LABEL_COLORS));
+  });
+
+  it("edits a label in the picker: back, name, the same swatches, delete and save", () => {
+    const html = renderToStaticMarkup(
+      createElement(LabelEditor, {
+        inboxId: "i1",
+        label: billing,
+        labels: [billing, { id: "l2", name: "Follow-up", color: "#F76B15" }],
+        onDone: () => {},
+      }),
+    );
+    expect(html).toMatch(
+      /<button type="button" class="ms-menu-trigger-bare"[^>]*aria-label="Back"/,
+    );
+    expect(html).toContain(">Edit label<");
+    expect(html).toMatch(
+      /<input class="ms-input"[^>]*aria-label="Name" maxLength="64" value="Billing"/,
+    );
+    expect(html).toMatch(/aria-label="Green" name="[^"]+" checked=""/);
+    expect(html).toContain(
+      '<button type="button" class="ms-menu-item danger" style="width:auto">Delete label</button>',
+    );
+    expect(html).toMatch(
+      /<button type="submit" class="ms-btn ms-btn-primary ms-btn-sm">.*Save<\/button>/,
+    );
+  });
 });
 
 describe("inbox screens", () => {
diff --git a/apps/web/test/threads-keyboard.test.ts b/apps/web/test/threads-keyboard.test.ts
index c42d3fb7c..07a1b706f 100644
--- a/apps/web/test/threads-keyboard.test.ts
+++ b/apps/web/test/threads-keyboard.test.ts
@@ -64,9 +64,13 @@ vi.mock("@/lib/trpc", () => {
   return { useTRPC: () => root };
 });
 
+const { LabelsMenu } = await import("@/app/(dashboard)/inboxes/[id]/labels");
 const { ThreadsTab } = await import("@/app/(dashboard)/inboxes/[id]/threads-tab");
 const { useEscape } = await import("@/lib/use-escape");
 
+const billing = { id: "l1", name: "Billing", color: "#46A758" };
+const followUp = { id: "l2", name: "Follow-up", color: "#F76B15" };
+
 let container: HTMLDivElement;
 let root: Root;
 
@@ -88,6 +92,14 @@ afterEach(async () => {
 
 const $ = <T extends Element = HTMLElement>(selector: string) =>
   document.querySelector<T & Element>(selector);
+/** Types into a controlled field the way React hears it. */
+async function type(field: HTMLInputElement, text: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  await act(async () => {
+    setter?.call(field, text);
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
 async function press(target: Element, key: string) {
   await act(async () => {
     target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
@@ -97,6 +109,143 @@ async function click(target: Element | null) {
   await act(async () => (target as HTMLElement).click());
 }
 
+async function openMenu(onChange = vi.fn(), onCreated = vi.fn()) {
+  await act(async () =>
+    root.render(
+      createElement(LabelsMenu, {
+        inboxId: "i1",
+        labels: [billing, followUp],
+        value: [billing.id],
+        onChange,
+        onCreated,
+      }),
+    ),
+  );
+  await click($('[role="combobox"]'));
+  return $<HTMLInputElement>(".ms-menu-search") as HTMLInputElement;
+}
+
+describe("the labels picker", () => {
+  it("creates a new name in the swatch picked under it, or the random one Enter alone keeps", async () => {
+    const onCreated = vi.fn();
+    const search = await openMenu(vi.fn(), onCreated);
+    expect($(".ms-swatches")).toBeNull();
+    await type(search, "Refund");
+    const radios = [
+      ...document.querySelectorAll<HTMLInputElement>(".ms-menu .ms-swatch[type=radio]"),
+    ];
+    expect(radios).toHaveLength(11);
+    const random = radios.filter((radio) => radio.checked);
+    expect(random).toHaveLength(1);
+    expect($('.ms-menu input[type="color"]')?.getAttribute("aria-label")).toBe("Custom color");
+    await press(search, "Enter");
+    expect(sent.create).toHaveBeenLastCalledWith({
+      inboxId: "i1",
+      name: "Refund",
+      color: random[0]?.value,
+    });
+    // Made, it goes on the thread, and the search clears for the next pick.
+    expect(onCreated).toHaveBeenCalledWith({ id: "l9", name: "Refund", color: random[0]?.value });
+    expect(search.value).toBe("");
+
+    await type(search, "Refund later");
+    await click($('.ms-menu .ms-swatch[aria-label="Purple"]'));
+    await press(search, "Enter");
+    expect(sent.create).toHaveBeenLastCalledWith({
+      inboxId: "i1",
+      name: "Refund later",
+      color: "#AB4ABA",
+    });
+  });
+
+  it("opens a label's edit view with → or the pencil, without picking it", async () => {
+    const onChange = vi.fn();
+    const search = await openMenu(onChange);
+    // The active row carries the pencil.
+    const pencil = $('.ms-menu [role="option"].active .ms-menu-edit');
+    expect(pencil?.getAttribute("title")).toBe("Edit label");
+    await click(pencil);
+    expect(onChange).not.toHaveBeenCalled();
+    expect($<HTMLInputElement>('.ms-menu input[aria-label="Name"]')?.value).toBe("Billing");
+    expect($<HTMLInputElement>('.ms-menu .ms-swatch[aria-label="Green"]')?.checked).toBe(true);
+
+    await click($('.ms-menu button[aria-label="Back"]'));
+    const back = $<HTMLInputElement>(".ms-menu-search");
+    expect(back).not.toBeNull();
+    // Inside the typed text → moves the caret; past its end it opens the row.
+    await type(back as HTMLInputElement, "foll");
+    (back as HTMLInputElement).setSelectionRange(1, 1);
+    await press(back as HTMLInputElement, "ArrowRight");
+    expect($(".ms-menu-search")).not.toBeNull();
+    (back as HTMLInputElement).setSelectionRange(4, 4);
+    await press(back as HTMLInputElement, "ArrowRight");
+    expect($<HTMLInputElement>('.ms-menu input[aria-label="Name"]')?.value).toBe("Follow-up");
+    expect(search.isConnected).toBe(false);
+  });
+
+  it("saves only what changed, and refuses a name another label has before sending it", async () => {
+    const search = await openMenu();
+    await press(search, "ArrowRight");
+    const name = $<HTMLInputElement>('.ms-menu input[aria-label="Name"]') as HTMLInputElement;
+    await type(name, "follow-UP");
+    expect($(".ms-menu .ms-field-error")?.textContent).toBe(
+      "A label with this name already exists.",
+    );
+    expect($<HTMLButtonElement>('.ms-menu button[type="submit"]')?.disabled).toBe(true);
+
+    await type(name, " Invoices ");
+    expect($(".ms-menu .ms-field-error")).toBeNull();
+    await click($('.ms-menu button[type="submit"]'));
+    expect(sent.update).toHaveBeenLastCalledWith({
+      inboxId: "i1",
+      labelId: "l1",
+      name: "Invoices",
+    });
+
+    await click($('.ms-menu .ms-swatch[aria-label="Cyan"]'));
+    await type(name, "Billing");
+    await click($('.ms-menu button[type="submit"]'));
+    expect(sent.update).toHaveBeenLastCalledWith({
+      inboxId: "i1",
+      labelId: "l1",
+      color: "#00A2C7",
+    });
+  });
+
+  it("deletes a label only once its confirm, in place, says yes", async () => {
+    const search = await openMenu();
+    await press(search, "ArrowRight");
+    const ask = () => $(".ms-menu button.ms-menu-item.danger");
+    await click(ask());
+    expect($(".ms-menu p")?.textContent).toBe("Delete “Billing”? It's removed from every thread.");
+    // The safe answer takes focus; backing out returns it to the button that asked.
+    expect(document.activeElement?.textContent).toBe("Cancel");
+    await click(document.activeElement);
+    expect(document.activeElement).toBe(ask());
+    expect(sent.delete).not.toHaveBeenCalled();
+
+    await click(ask());
+    await click($(".ms-menu .ms-btn-destructive"));
+    expect(sent.delete).toHaveBeenCalledWith({ inboxId: "i1", labelId: "l1" });
+  });
+
+  it("keeps Tab inside the panel while it holds more than its search, and Esc steps back", async () => {
+    const search = await openMenu();
+    await press(search, "ArrowRight");
+    const back = $('.ms-menu button[aria-label="Back"]') as HTMLElement;
+    const save = $('.ms-menu button[type="submit"]') as HTMLElement;
+    await act(async () => save.focus());
+    await press(save, "Tab");
+    expect(document.activeElement).toBe(back);
+    await press(document.activeElement as Element, "Escape");
+    // Out of the edit view, back to the list; one more Esc closes the menu.
+    const list = $(".ms-menu-search") as HTMLElement;
+    expect(list).not.toBeNull();
+    await press(list, "Escape");
+    expect($(".ms-menu")).toBeNull();
+  });
+});
+
 describe("Esc on the page", () => {
   function Probe({ onEscape }: { onEscape: () => void }) {
     useEscape(onEscape);

From e26a7a58ce19a2f50cc935c30e3112784919d97f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:06:05 -0300
Subject: [PATCH 15/24] Keep Esc on the reply editor's toolbar from closing the
 thread

Esc typed into the reply editor never closes the pane, but its toolbar
buttons sit outside the editable area, so Esc there did. Closing the pane
unmounts the composer before its debounced local draft is written, which
can drop the last words typed. Anywhere in the message editor now counts
as the field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/lib/keyboard.ts           | 11 ++++++++---
 apps/web/test/threads-keyboard.test.ts |  8 +++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/lib/keyboard.ts b/apps/web/src/lib/keyboard.ts
index df1b6cc4f..da17c704d 100644
--- a/apps/web/src/lib/keyboard.ts
+++ b/apps/web/src/lib/keyboard.ts
@@ -23,11 +23,16 @@ export function shortcutBlocked(target: EventTarget | null): boolean {
 const ESC_LAYERS = '.ms-menu, .ms-tooltip, [role="dialog"], .ms-drawer-scrim';
 
 /**
- * Whether an Esc belongs to something before the page: a field, where it must
- * never throw away what was typed, or an open layer that closes on it.
+ * Whether an Esc belongs to something before the page: a field, or anywhere in
+ * the message editor (its toolbar included), where it must never throw away
+ * what was typed; or an open layer that closes on it.
  */
 export function escapeTaken(target: EventTarget | null): boolean {
-  return shortcutBlocked(target) || document.querySelector(ESC_LAYERS) !== null;
+  return (
+    shortcutBlocked(target) ||
+    (target instanceof Element && target.closest(".ms-maily") !== null) ||
+    document.querySelector(ESC_LAYERS) !== null
+  );
 }
 
 /** Tab stops inside a panel that runs its own focus loop (dialogs, anchored editors). */
diff --git a/apps/web/test/threads-keyboard.test.ts b/apps/web/test/threads-keyboard.test.ts
index 07a1b706f..f62b26934 100644
--- a/apps/web/test/threads-keyboard.test.ts
+++ b/apps/web/test/threads-keyboard.test.ts
@@ -254,6 +254,11 @@ describe("Esc on the page", () => {
       null,
       createElement("button", { id: "probe-button", type: "button" }),
       createElement("input", { id: "probe-field" }),
+      createElement(
+        "div",
+        { className: "ms-maily" },
+        createElement("button", { id: "probe-bold", type: "button" }),
+      ),
     );
   }
 
@@ -265,8 +270,9 @@ describe("Esc on the page", () => {
 
     await esc(button);
     expect(onEscape).toHaveBeenCalledTimes(1);
-    // Typed in a field: never.
+    // Typed in a field, or anywhere in the message editor: never.
     await esc($("#probe-field") as HTMLElement);
+    await esc($("#probe-bold") as HTMLElement);
     expect(onEscape).toHaveBeenCalledTimes(1);
     // A tooltip that closes on the same Esc, gone before the key reaches window.
     const tip = document.createElement("div");

From 3b56e597d7a0cd24bd059076f646f27e60872b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 17:18:30 -0300
Subject: [PATCH 16/24] Let Esc close the thread while focus is inside the
 message

The thread pane closes on an Esc that reaches the dashboard's window, but
the message body now renders in a frame, and keys pressed in a frame's
document never reach the parent window. After a click on the message's
text, or once a focused link's tip was dismissed, Esc did nothing.

The frame already listens to its document for the link tip, so an Esc the
tip doesn't take is re-sent from the iframe element. Page handlers see it
as an Esc on the frame, and the pane closes with focus back on the row.
An Esc typed in a field inside the message still goes nowhere.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/mail-frame.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/mail-frame.tsx b/apps/web/src/components/mail-frame.tsx
index 70db8f667..a660e9770 100644
--- a/apps/web/src/components/mail-frame.tsx
+++ b/apps/web/src/components/mail-frame.tsx
@@ -192,6 +192,18 @@ export function MailFrame({
       event.preventDefault();
       hide();
     };
+    // Keys pressed in the message never reach the dashboard's window: an Esc
+    // the tip didn't take goes on from the frame, so the page's own Esc
+    // (closing the thread) still hears it. Not one typed in a field.
+    const forward = (event: Event) => {
+      dismiss(event);
+      const target = event.target as HTMLElement;
+      if ((event as KeyboardEvent).key !== "Escape" || event.defaultPrevented) return;
+      if (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
+      frame.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    };
     const listeners: [string, (event: Event) => void][] = [
       ["load", measure],
       ["error", measure],
@@ -207,7 +219,7 @@ export function MailFrame({
         },
       ],
       ["focusout", (event) => follow((event as FocusEvent).relatedTarget)],
-      ["keydown", dismiss],
+      ["keydown", forward],
       ["scroll", hide],
     ];
     const attach = () => {

From bf0aa27754f97f3bcc84ee8cc3aad9325fda11b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:53:53 -0300
Subject: [PATCH 17/24] Read a From value's address from where it ends

The thread pane took the "Always for" domain, and the address in each
message's header, from the first <...> in the From value. A display name
may carry an address of its own, quoted, as in
"Bank <alerts@bank.example>" <promo@attacker.example>: mail that
authenticated as attacker.example read as bank.example, so a reader who
had chosen "Always for bank.example" would get the attacker's remote
images loaded unasked. The address is now the angle-addr the value ends
with, the one authentication vouched for, as senderName already reads it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/lib/format.ts            | 16 ++++++++++------
 apps/web/test/format.test.ts          | 11 +++++++++++
 apps/web/test/inboxes-screens.test.ts |  7 +++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/lib/format.ts b/apps/web/src/lib/format.ts
index 175362d9e..385680839 100644
--- a/apps/web/src/lib/format.ts
+++ b/apps/web/src/lib/format.ts
@@ -191,14 +191,12 @@ export function maskApiKey(tokenPrefix: string, last4: string): string {
 }
 
 /**
- * URL for display surfaces (chips, table cells, headings): the scheme is
- * noise there — endpoints are https-only, so it carries no information.
- * Copy affordances must still copy the full URL; pass this only as the
- * visible text.
+ * The bare address inside a From header value: `Acme <a@acme.dev>` → `a@acme.dev`.
+ * Read from the end: a quoted display name may carry an address of its own
+ * (`"Bank <alerts@bank.example>" <x@attacker.example>`).
  */
-/** The bare address inside a From header value: `Acme <a@acme.dev>` → `a@acme.dev`. */
 export function addrSpec(from: string): string {
-  const inner = /<([^>]+)>/.exec(from);
+  const inner = /<([^<>]*)>\s*$/.exec(from);
   return (inner?.[1] ?? from).trim();
 }
 
@@ -235,6 +233,12 @@ export function mailDomain(address: string): string {
         .toLowerCase();
 }
 
+/**
+ * URL for display surfaces (chips, table cells, headings): the scheme is
+ * noise there — endpoints are https-only, so it carries no information.
+ * Copy affordances must still copy the full URL; pass this only as the
+ * visible text.
+ */
 export function displayUrl(url: string): string {
   return url.replace(/^https?:\/\//, "");
 }
diff --git a/apps/web/test/format.test.ts b/apps/web/test/format.test.ts
index 264516e7d..1cd50c740 100644
--- a/apps/web/test/format.test.ts
+++ b/apps/web/test/format.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   abbreviateDkim,
+  addrSpec,
   formatBytes,
   formatDayUtc,
   formatDurationShort,
@@ -106,6 +107,16 @@ describe("formatMoneyTotals", () => {
   });
 });
 
+describe("addrSpec", () => {
+  it("reads the address the From value ends with, never one its display name carries", () => {
+    expect(addrSpec("Ana <ana@sender.example>")).toBe("ana@sender.example");
+    expect(addrSpec("ana@sender.example")).toBe("ana@sender.example");
+    expect(addrSpec('"Bank <alerts@bank.example>" <promo@attacker.example>')).toBe(
+      "promo@attacker.example",
+    );
+  });
+});
+
 describe("senderName", () => {
   it("reads a From value as its display name, else its address", () => {
     expect(senderName('"Ana Souza" <ana@sender.example>')).toBe("Ana Souza");
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index 93fe3a4ff..1b55b1c29 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -1008,6 +1008,13 @@ describe("a message in the thread pane", () => {
     expect(held).not.toContain("Show quoted text");
   });
 
+  it("reads the sender's address, and so its domain, from where From ends", () => {
+    // Authentication vouched for promo@attacker.example; the name is the sender's own words.
+    const html = render({ from: '"Bank <alerts@bank.example>" <promo@attacker.example>' });
+    expect(html).toContain('color:var(--ms-muted)">promo@attacker.example</span>');
+    expect(html).not.toContain(">alerts@bank.example<");
+  });
+
   it("loads images unasked only for a sender authentication proved", () => {
     expect(["owner", "allowlisted", "external"].every(authenticatedSender)).toBe(true);
     // A known thread proves the thread, not the From domain.

From 603ba6c7b795c4ff566a05e3a53a56e5271427ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:55:25 -0300
Subject: [PATCH 18/24] Build the message frame from what it will parse, and
 fold only trailing quotes

The frame parses the prepared markup again, and some trees read back
differently: MathML and SVG text turned into a referrer meta and a
preconnect link the strip had seen as text, and a declarative shadow root
or a nested srcdoc frame held a document no check reached. The strip now
runs until a parse changes nothing, drops nested frames and shadow-root
templates, and gives every link target _blank and rel noopener: a named
target kept an opener, which in Firefox let the sender's page send the
dashboard tab elsewhere.

Show images allowed any https image, and the frame shares the dashboard's
origin, so an image on the dashboard's own host went out with the reader's
session (a CSV export per image, say). The policy now lists only the hosts
the message names, never the dashboard's.

WebKit runs no listener on a document whose frame allows no scripts, the
dashboard's included, so in Safari the link tip, the re-measure and menu
dismissal never ran. The frame now follows its document with a
ResizeObserver (content that grows after load, such as an opened
<details>, is no longer clipped) and reads the hovered or focused link
from the dashboard while the pointer is over the frame or a link inside
has focus. A click into the message closes open menus and pinned
tooltips, as a click anywhere else does. Esc from inside the message
still cannot reach the dashboard in WebKit.

The link tip shows the host whole, the domain its owner registered in
bold: a look-alike host buries the real domain at its end, past what a
four-line cut showed. Show images and Always for move focus into the
message instead of dropping it with the bar.

Folding takes only the quotes after the last thing the sender wrote, so
inline answers keep their questions (Gmail's answers inside its quote
included); hidden text and zero-width characters no longer count as
written, and a message whose subject names a forward (FW:, Fwd:, ENC:,
RV:) is never folded, in HTML or text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../(dashboard)/inboxes/[id]/threads-tab.tsx  |   6 +-
 .../src/components/email-content-panel.tsx    |   3 +-
 apps/web/src/components/mail-frame.tsx        | 172 ++++++----
 apps/web/src/lib/email-preview.test.ts        | 189 +++++++++--
 apps/web/src/lib/email-preview.ts             | 319 ++++++++++++++----
 apps/web/src/styles/components.css            |  20 +-
 6 files changed, 542 insertions(+), 167 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
index d4d10185b..35c20aa46 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
@@ -28,6 +28,7 @@ import { StatusBadge, StatusDot } from "@/components/status-badge";
 import { toast } from "@/components/toast";
 import { Tooltip } from "@/components/tooltip";
 import { authenticatedSender } from "@/lib/auth-result";
+import { isForwardSubject } from "@/lib/email-preview";
 import { addrSpec, formatBytes, formatRelative, mailDomain, senderName } from "@/lib/format";
 import { htmlToText } from "@/lib/html";
 import { isReadOnly } from "@/lib/read-only";
@@ -556,6 +557,8 @@ export function MessageCard({
   const inbound = message.direction === "inbound";
   const verdict = inbound ? message.screening.verdict : null;
   const held = verdict === "quarantined";
+  // A forward's quoted original is what the sender wants read.
+  const forward = isForwardSubject(message.subject);
   return (
     <article style={held ? { ...card, borderColor: "var(--ms-danger-border)" } : card}>
       <header style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
@@ -625,9 +628,10 @@ export function MessageCard({
           title={t("mail.title", { name: senderName(message.from) })}
           domain={mailDomain(addrSpec(message.from))}
           authenticated={inbound && authenticatedSender(message.screening.sender_trust)}
+          foldQuote={!forward}
         />
       ) : message.text ? (
-        <MailText text={message.text} foldQuote={!held} />
+        <MailText text={message.text} foldQuote={!held && !forward} />
       ) : null}
       {message.attachments.length > 0 ? (
         <ul style={{ margin: "10px 0 0", padding: 0, listStyle: "none", ...muted }}>
diff --git a/apps/web/src/components/email-content-panel.tsx b/apps/web/src/components/email-content-panel.tsx
index cf2c3c40e..ed1f283ed 100644
--- a/apps/web/src/components/email-content-panel.tsx
+++ b/apps/web/src/components/email-content-panel.tsx
@@ -9,7 +9,7 @@ import { Drawer } from "@/components/drawer";
 import { MailFrame } from "@/components/mail-frame";
 import { PreviewSchemePills } from "@/components/preview-scheme-pills";
 import { Switch } from "@/components/switch";
-import { emulateEmailScheme, PREVIEW_CANVAS } from "@/lib/email-preview";
+import { emulateEmailScheme, isForwardSubject, PREVIEW_CANVAS } from "@/lib/email-preview";
 import { formatDayTime } from "@/lib/format";
 import { formatHtml } from "@/lib/html";
 import { BAND_TONE, checkGlyph, formatScoreTenths } from "@/lib/score-band";
@@ -475,6 +475,7 @@ export function EmailContentPanel({
                 scheme={scheme}
                 domain={received.domain}
                 authenticated={received.authenticated}
+                foldQuote={!isForwardSubject(email.subject)}
               />
             ) : email.html ? (
               // Edge to edge: the message lays itself out inside the frame,
diff --git a/apps/web/src/components/mail-frame.tsx b/apps/web/src/components/mail-frame.tsx
index a660e9770..3447bd1b3 100644
--- a/apps/web/src/components/mail-frame.tsx
+++ b/apps/web/src/components/mail-frame.tsx
@@ -10,6 +10,7 @@ import {
   type EmailScheme,
   emulateEmailScheme,
   imagesAlwaysShown,
+  type LinkDestination,
   linkDestination,
   lockDownReceivedHtml,
   onImagesAlwaysShown,
@@ -35,9 +36,7 @@ const FIT_TO_CONTENT =
 // Gmail or Apple Mail carry no font, and the browser's would be a serif.
 const CLIENT_FONT = "<style>body{font-family:sans-serif;font-size:13.5px}</style>";
 
-interface LinkTip {
-  text: string;
-  mail: boolean;
+interface LinkTip extends LinkDestination {
   /** The link's box in the dashboard's viewport. */
   anchor: Box;
 }
@@ -102,6 +101,7 @@ export function MailFrame({
   authenticated,
   scheme,
   panel = false,
+  foldQuote = true,
 }: {
   html: string;
   title: string;
@@ -113,13 +113,16 @@ export function MailFrame({
   scheme?: EmailScheme | undefined;
   /** Edge to edge in a panel, rather than boxed inside a card. */
   panel?: boolean;
+  /** A reply's quoted history folds under "•••"; a forward's never does. */
+  foldQuote?: boolean;
 }) {
   const t = useTranslations("inboxes");
   const [themeScheme] = usePreviewScheme();
   const shownScheme = scheme ?? themeScheme;
   const prepared = useMemo(() => prepareReceivedHtml(html), [html]);
+  const trimmed = foldQuote ? prepared.trimmed : null;
   const [quoteShown, setQuoteShown] = useState(false);
-  const body = quoteShown || !prepared.trimmed ? prepared.full : prepared.trimmed;
+  const body = quoteShown || !trimmed ? prepared.full : trimmed;
   // A spoofed From proves no domain, so it never gets images loaded unasked.
   const trusted = authenticated && domain !== "";
   const always = useSyncExternalStore(
@@ -131,7 +134,7 @@ export function MailFrame({
   const images = imagesShown || always;
   const srcDoc =
     lockDownReceivedHtml(emulateEmailScheme(CLIENT_FONT + body.html, shownScheme), {
-      remoteImages: images,
+      imageHosts: images ? body.imageHosts : [],
     }) + FIT_TO_CONTENT;
 
   const frameRef = useRef<HTMLIFrameElement>(null);
@@ -147,50 +150,92 @@ export function MailFrame({
     // document before it (the initial blank one, or the last rendering).
     const before = frame.contentDocument;
     let doc: Document | null = null;
-    let link: Element | null = null;
-    let width = frame.clientWidth;
     let raf = 0;
+    let watching = 0;
+    /** The link the tip names, and where it was drawn. */
+    let link: Element | null = null;
+    let drawn: Box | null = null;
+    /** A link whose tip Esc put away: it stays away until the reader moves on. */
+    let dismissed: Element | null = null;
+    /** Whether focus was in the message when last looked. */
+    let inside = false;
     const measure = () => {
       const root = doc?.documentElement;
       const view = frame.contentWindow;
-      if (!root || !view) return;
+      if (!root || !view || frame.contentDocument !== doc) return;
       // A sideways scrollbar takes its height out of the viewport.
       setHeight(
         Math.ceil(root.getBoundingClientRect().height) + view.innerHeight - root.clientHeight,
       );
     };
-    const follow = (target: EventTarget | null) => {
-      const found =
-        target && "closest" in target ? (target as Element).closest("a[href], area[href]") : null;
+    // The document's own size: images arriving, an expanded <details>, the
+    // frame's width. Observed from here, it is heard in every engine.
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    /** The tip names the link under the pointer, else the one focused in the message. */
+    const update = () => {
+      if (!doc) return;
+      const focused = document.activeElement === frame;
+      const target =
+        (frame.matches(":hover") ? doc.querySelector("a[href]:hover, area[href]:hover") : null) ??
+        (focused ? (doc.activeElement?.closest("a[href], area[href]") ?? null) : null);
+      if (target !== dismissed) dismissed = null;
+      const shown = target === dismissed ? null : target;
       // An SVG link's href is no string: it gets no tip.
-      const href = (found as HTMLAnchorElement | null)?.href;
-      const next = typeof href === "string" ? found : null;
-      if (next === link) return;
-      link = next;
-      if (!next || typeof href !== "string") {
-        setTip(null);
+      const href: unknown = (shown as HTMLAnchorElement | null)?.href;
+      if (!shown || typeof href !== "string") {
+        if (link) setTip(null);
+        link = null;
+        drawn = null;
         return;
       }
-      const inner = next.getBoundingClientRect();
+      const inner = shown.getBoundingClientRect();
       const outer = frame.getBoundingClientRect();
       const left = outer.left + frame.clientLeft;
       const top = outer.top + frame.clientTop;
-      setTip({
-        ...linkDestination(href),
-        anchor: {
-          left: left + inner.left,
-          right: left + inner.right,
-          top: top + inner.top,
-          bottom: top + inner.bottom,
-        },
-      });
+      const anchor = {
+        left: left + inner.left,
+        right: left + inner.right,
+        top: top + inner.top,
+        bottom: top + inner.bottom,
+      };
+      if (shown === link && drawn?.left === anchor.left && drawn.top === anchor.top) return;
+      link = shown;
+      drawn = anchor;
+      setTip({ ...linkDestination(href), anchor });
+    };
+    // WebKit runs no listener on a document whose frame allows no scripts,
+    // the dashboard's included: while the pointer is over the frame, or one
+    // of its links has focus, it is read every frame instead.
+    const watch = () => {
+      const focused = document.activeElement === frame;
+      // A click into the message is one outside the dashboard's open menus and pinned tooltips.
+      if (focused && !inside)
+        frame.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+      inside = focused;
+      update();
+      const onLink = focused && doc?.activeElement?.closest("a[href], area[href]");
+      watching = frame.matches(":hover") || onLink ? requestAnimationFrame(watch) : 0;
     };
-    const hide = () => follow(null);
-    // Esc dismisses an open tip, and only that: the pane's own Esc sees it handled.
+    const enter = () => {
+      if (watching) return;
+      inside = document.activeElement === frame;
+      watch();
+    };
+    // The dashboard's window blurs as focus moves into the frame (Tab onto a
+    // link), a moment before the link inside has it.
+    const blur = () => {
+      if (document.activeElement !== frame || watching) return;
+      inside = true;
+      watching = requestAnimationFrame(watch);
+    };
+    // Esc puts the tip away, and only that: the pane's own Esc sees it handled.
     const dismiss = (event: Event) => {
       if ((event as KeyboardEvent).key !== "Escape" || !link) return;
       event.preventDefault();
-      hide();
+      dismissed = link;
+      link = null;
+      drawn = null;
+      setTip(null);
     };
     // Keys pressed in the message never reach the dashboard's window: an Esc
     // the tip didn't take goes on from the frame, so the page's own Esc
@@ -205,26 +250,13 @@ export function MailFrame({
       );
     };
     const listeners: [string, (event: Event) => void][] = [
-      ["load", measure],
-      ["error", measure],
-      ["mouseover", (event) => follow(event.target)],
-      // A scroll hides the tip it would misplace; the pointer's next move brings it back.
-      ["mousemove", (event) => follow(event.target)],
-      ["focusin", (event) => follow(event.target)],
-      [
-        "mouseout",
-        (event) => {
-          // Leaving the frame; a move between its elements is the next mouseover's call.
-          if (!(event as MouseEvent).relatedTarget) hide();
-        },
-      ],
-      ["focusout", (event) => follow((event as FocusEvent).relatedTarget)],
+      ["focusin", update],
+      ["scroll", update],
       ["keydown", forward],
-      ["scroll", hide],
     ];
     const attach = () => {
       const current = frame.contentDocument;
-      // Gone cross-origin: a link with its own target navigated the frame.
+      // Cross-origin, past reading: every link opens a new tab, so it never should be.
       if (!current) return;
       if (current === before || current.readyState === "loading") {
         raf = requestAnimationFrame(attach);
@@ -232,26 +264,26 @@ export function MailFrame({
       }
       doc = current;
       for (const [type, listener] of listeners) doc.addEventListener(type, listener, true);
+      observer?.observe(doc.documentElement);
       measure();
+      if (frame.matches(":hover") || document.activeElement === frame) enter();
     };
     attach();
     frame.addEventListener("load", measure);
-    window.addEventListener("scroll", hide, { capture: true, passive: true });
+    frame.addEventListener("mouseenter", enter);
+    window.addEventListener("blur", blur);
+    window.addEventListener("scroll", update, { capture: true, passive: true });
+    document.addEventListener("focusin", update, true);
     document.addEventListener("keydown", dismiss, true);
-    const observer =
-      typeof ResizeObserver === "undefined"
-        ? null
-        : new ResizeObserver(() => {
-            if (frame.clientWidth === width) return;
-            width = frame.clientWidth;
-            measure();
-          });
-    observer?.observe(frame);
     return () => {
       cancelAnimationFrame(raf);
+      cancelAnimationFrame(watching);
       observer?.disconnect();
       frame.removeEventListener("load", measure);
-      window.removeEventListener("scroll", hide, { capture: true });
+      frame.removeEventListener("mouseenter", enter);
+      window.removeEventListener("blur", blur);
+      window.removeEventListener("scroll", update, { capture: true });
+      document.removeEventListener("focusin", update, true);
       document.removeEventListener("keydown", dismiss, true);
       for (const [type, listener] of listeners) doc?.removeEventListener(type, listener, true);
       if (link) setTip(null);
@@ -273,17 +305,19 @@ export function MailFrame({
     el.style.top = `${placed.top}px`;
   }, [tip]);
 
+  // The bar goes with the click: focus moves on to the message it opened up.
+  const showImages = () => {
+    setImagesShown(true);
+    frameRef.current?.focus();
+  };
+
   return (
     <div className={panel ? "ms-mail-panel" : undefined}>
-      {body.remoteImages && !images ? (
+      {body.imageHosts.length > 0 && !images ? (
         <div className="ms-mail-bar">
           <ImageOffIcon />
           <span className="ms-mail-bar-text">{t("mail.imagesHidden")}</span>
-          <button
-            type="button"
-            className="ms-btn ms-btn-secondary"
-            onClick={() => setImagesShown(true)}
-          >
+          <button type="button" className="ms-btn ms-btn-secondary" onClick={showImages}>
             {t("mail.showImages")}
           </button>
           {trusted ? (
@@ -292,7 +326,7 @@ export function MailFrame({
               className="ms-link"
               onClick={() => {
                 alwaysShowImages(domain);
-                setImagesShown(true);
+                showImages();
               }}
             >
               {t("mail.alwaysFor", { domain })}
@@ -309,7 +343,7 @@ export function MailFrame({
         className="ms-mail-frame"
         style={{ height, background: PREVIEW_CANVAS[shownScheme] }}
       />
-      {prepared.trimmed ? (
+      {trimmed ? (
         <QuoteToggle shown={quoteShown} onToggle={() => setQuoteShown((shown) => !shown)} />
       ) : null}
       {tip
@@ -321,7 +355,13 @@ export function MailFrame({
               // First-paint guess; the layout effect places it before paint.
               style={{ left: tip.anchor.left, top: tip.anchor.bottom + TIP_GAP }}
             >
-              <span className="ms-mono ms-mail-href">{tip.text}</span>
+              {tip.lead || tip.domain ? (
+                <span className="ms-mono ms-mail-host">
+                  {tip.lead}
+                  {tip.domain ? <strong>{tip.domain}</strong> : null}
+                </span>
+              ) : null}
+              {tip.rest ? <span className="ms-mono ms-mail-href">{tip.rest}</span> : null}
               {tip.mail ? null : (
                 <span className="ms-mail-href-note">{t("mail.opensInNewTab")}</span>
               )}
diff --git a/apps/web/src/lib/email-preview.test.ts b/apps/web/src/lib/email-preview.test.ts
index 43bc95d0f..5c9b54929 100644
--- a/apps/web/src/lib/email-preview.test.ts
+++ b/apps/web/src/lib/email-preview.test.ts
@@ -3,12 +3,17 @@ import { describe, expect, it } from "vitest";
 import {
   DARK_CLIENT_SIM,
   emulateEmailScheme,
+  isForwardSubject,
   linkDestination,
   lockDownReceivedHtml,
   prepareReceivedHtml,
   withoutTrailingQuote,
 } from "./email-preview";
 
+/** What the frame builds from a prepared body: the doctype is its no-quirks parse. */
+const framed = (html: string) =>
+  new DOMParser().parseFromString(`<!doctype html>${html}`, "text/html");
+
 describe("emulateEmailScheme", () => {
   const html =
     "<style>@media screen and (prefers-color-scheme: dark){body{background:#000}} @media (prefers-color-scheme: light){body{color:#111}}</style><p>hi</p>";
@@ -53,11 +58,13 @@ describe("lockDownReceivedHtml", () => {
     expect(doc).toContain('<meta name="referrer" content="no-referrer">');
   });
 
-  it("lets images, and only images, come from the network once the reader asks", () => {
-    const doc = lockDownReceivedHtml("<p>hi</p>", { remoteImages: true });
+  it("lets images, and only images from the hosts named, come from the network once asked", () => {
+    const doc = lockDownReceivedHtml("<p>hi</p>", {
+      imageHosts: ["cdn.example.com", "img.example.net:8443"],
+    });
     expect(doc.startsWith(POLICY)).toBe(true);
     expect(doc).toContain(
-      "default-src 'none'; img-src data: https:; style-src 'unsafe-inline'; font-src data:",
+      "default-src 'none'; img-src data: https://cdn.example.com https://img.example.net:8443; style-src 'unsafe-inline'; font-src data:",
     );
   });
 
@@ -75,32 +82,73 @@ describe("prepareReceivedHtml", () => {
     const { full } = prepareReceivedHtml(
       '<html><head><meta http-equiv="refresh" content="0;url=https://x.example/"><base href="https://x.example/">' +
         '<meta name="referrer" content="unsafe-url"><link rel="preconnect" href="https://tracker.example">' +
-        '<meta name="color-scheme" content="light dark"></head><body><a href="/a">a</a></body></html>',
+        '<meta name="color-scheme" content="light dark"></head><body><a href="/a">a</a>' +
+        '<iframe srcdoc="&lt;link rel=preconnect href=https://tracker.example&gt;"></iframe></body></html>',
     );
-    expect(full.html).not.toMatch(/refresh|<base|unsafe-url|<link/);
+    expect(full.html).not.toMatch(/refresh|<base|unsafe-url|<link|<iframe/);
     expect(full.html).toContain('<meta name="color-scheme" content="light dark">');
-    expect(full.html).toContain('<a href="/a">a</a>');
+    expect(full.html).toContain('<a href="/a" target="_blank" rel="noopener noreferrer">a</a>');
+  });
+
+  it("opens every link in a new tab with no way back to the dashboard", () => {
+    const { full } = prepareReceivedHtml(
+      '<a id="named" href="https://sender.example/a" target="promo" rel="opener">a</a>' +
+        '<a id="self" href="https://sender.example/b" target="_self">b</a>' +
+        '<map><area id="area" href="https://sender.example/c" target="_top"></map>' +
+        '<svg><a id="svg" href="https://sender.example/d"><text>d</text></a></svg>',
+    );
+    const doc = framed(full.html);
+    for (const id of ["named", "self", "area", "svg"]) {
+      const link = doc.getElementById(id);
+      expect(link?.getAttribute("target"), id).toBe("_blank");
+      expect(link?.getAttribute("rel"), id).toBe("noopener noreferrer");
+    }
+  });
+
+  it("strips what only the frame's own parse would build: re-parsed markup and shadow roots", () => {
+    // Read once, the metadata here is text in a <style>; the frame, parsing
+    // the markup that read serializes to, makes elements of it.
+    const mutation =
+      '<form><math><mtext></form><form><mglyph><style></math><meta name="referrer" content="unsafe-url"><link rel="preconnect" href="https://sender.example">';
+    const shadow =
+      '<div><template shadowrootmode="open"><link rel="preconnect" href="https://sender.example"><a href="https://sender.example/x">x</a></template></div>';
+    for (const html of [mutation, shadow]) {
+      const { full } = prepareReceivedHtml(html);
+      const doc = framed(full.html);
+      expect(doc.querySelector('meta[name="referrer"], link, template[shadowrootmode]')).toBeNull();
+      // What the frame builds is exactly what was checked.
+      expect(doc.documentElement.outerHTML).toBe(full.html);
+    }
   });
 
-  it("tells a message that would load remote images from one that carries its own", () => {
-    const remote = (html: string) => prepareReceivedHtml(html).full.remoteImages;
-    expect(remote('<img src="https://cdn.example.com/a.png">')).toBe(true);
-    expect(remote('<img src="//cdn.example.com/a.png">')).toBe(true);
+  it("names the hosts a message's remote images come from, never the dashboard's own", () => {
+    const hosts = (html: string) => prepareReceivedHtml(html).full.imageHosts;
+    expect(hosts('<img src="https://cdn.example.com/a.png">')).toEqual(["cdn.example.com"]);
+    expect(hosts('<img src="//cdn.example.com/a.png">')).toEqual(["cdn.example.com"]);
     expect(
-      remote('<img srcset="data:image/png;base64,AA== 1x, https://cdn.example.com/b.png 2x">'),
-    ).toBe(true);
-    expect(remote('<table background="https://cdn.example.com/bg.png"></table>')).toBe(true);
+      hosts('<img srcset="data:image/png;base64,AA== 1x, https://cdn.example.com/b.png 2x">'),
+    ).toEqual(["cdn.example.com"]);
+    expect(hosts('<table background="https://bg.example.net/bg.png"></table>')).toEqual([
+      "bg.example.net",
+    ]);
     expect(
-      remote('<div style="background:url(&quot;https://cdn.example.com/bg.png&quot;)"></div>'),
-    ).toBe(true);
+      hosts('<div style="background:url(&quot;https://cdn.example.com/bg.png&quot;)"></div>'),
+    ).toEqual(["cdn.example.com"]);
     expect(
-      remote("<style>.hero{background-image:url(https://cdn.example.com/h.png)}</style>"),
-    ).toBe(true);
-    expect(remote('<img src="data:image/png;base64,AA=="><img src="cid:logo@example.com">')).toBe(
-      false,
+      hosts("<style>.hero{background-image:url(https://img.example.org:8443/h.png)}</style>"),
+    ).toEqual(["img.example.org:8443"]);
+    expect(hosts('<img src="data:image/png;base64,AA=="><img src="cid:logo@example.com">')).toEqual(
+      [],
     );
     // Written as text, a URL is no image.
-    expect(remote("<p>see https://cdn.example.com/a.png</p>")).toBe(false);
+    expect(hosts("<p>see https://cdn.example.com/a.png</p>")).toEqual([]);
+    // The frame shares the dashboard's origin: an image there would carry the reader's session.
+    expect(
+      hosts(
+        `<img src="/export/emails"><img src="https://${location.host}/export/contacts">` +
+          `<img src="//${location.host}/api/x"><div style="background:url(/y)"></div>`,
+      ),
+    ).toEqual([]);
   });
 
   it("folds the quoted history mail clients mark, and keeps it when it is all there is", () => {
@@ -128,6 +176,55 @@ describe("prepareReceivedHtml", () => {
     expect(trimmed("<p>No quote here.</p>")).toBeNull();
   });
 
+  it("folds only the history after the last thing the sender wrote, never answers' questions", () => {
+    const trimmed = (html: string) => prepareReceivedHtml(html).trimmed?.html ?? null;
+    // Apple Mail and Thunderbird answer between top-level quotes.
+    expect(
+      trimmed(
+        'Answers inline.<blockquote type="cite">Can you send the Q3 report?</blockquote>Yes, attached.' +
+          '<blockquote type="cite">And the invoice for October?</blockquote>Next week.',
+      ),
+    ).toBeNull();
+    expect(
+      trimmed(
+        '<div class="moz-cite-prefix">On 10/16/26, Ana wrote:</div><blockquote type="cite">Ship Friday?</blockquote>' +
+          '<p>No, Monday.</p><blockquote type="cite">Who signs?</blockquote><p>Bruno does.</p>',
+      ),
+    ).toBeNull();
+    // Gmail keeps the answers inside its quote, beside the quoted parts.
+    expect(
+      trimmed(
+        '<div dir="ltr">Hi Ana,</div><div class="gmail_quote"><div class="gmail_attr">On Thu, Ana wrote:<br></div>' +
+          '<blockquote class="gmail_quote">1. Ship Friday?</blockquote><div>Yes, Friday works.</div>' +
+          '<blockquote class="gmail_quote">2. Invoice?</blockquote><div>Sent it this morning.</div></div>',
+      ),
+    ).toBeNull();
+    // Answered between, then quoted again at the end: only the end folds.
+    const partly = trimmed(
+      'Intro<blockquote type="cite">Question</blockquote>Answer<blockquote type="cite">Old history</blockquote>',
+    );
+    expect(partly).toContain("Question");
+    expect(partly).toContain("Answer");
+    expect(partly).not.toContain("Old history");
+  });
+
+  it("folds nothing when all the reader would see outside the quote is hidden", () => {
+    const trimmed = (html: string) => prepareReceivedHtml(html).trimmed;
+    expect(
+      trimmed(
+        '<div style="display:none">Ticket #1042 was updated</div><blockquote type="cite"><p>Hi Ana, we refunded order #1042.</p></blockquote>',
+      ),
+    ).toBeNull();
+    expect(
+      trimmed(
+        '<div style="max-height:0;overflow:hidden">Preview text</div><div hidden>more</div><blockquote type="cite">All of it</blockquote>',
+      ),
+    ).toBeNull();
+    expect(
+      trimmed('<div>\u200b\u200c&nbsp;</div><blockquote type="cite">All of it</blockquote>'),
+    ).toBeNull();
+  });
+
   it("never folds a forward, whose original is what the sender wants read", () => {
     expect(
       prepareReceivedHtml(
@@ -146,11 +243,20 @@ describe("prepareReceivedHtml", () => {
     const { full, trimmed } = prepareReceivedHtml(
       '<p>Thanks!</p><blockquote type="cite"><img src="https://cdn.example.com/logo.png"></blockquote>',
     );
-    expect(full.remoteImages).toBe(true);
-    expect(trimmed?.remoteImages).toBe(false);
+    expect(full.imageHosts).toEqual(["cdn.example.com"]);
+    expect(trimmed?.imageHosts).toEqual([]);
   });
 });
 
+it("tells a forward by the prefixes mail clients give its subject", () => {
+  for (const subject of ["Fwd: Invoice", "FW: Invoice", "ENC: Fatura", "RV: Factura", "WG: x"]) {
+    expect(isForwardSubject(subject), subject).toBe(true);
+  }
+  for (const subject of ["Re: Fwd: Invoice", "Forward planning", "Invoice", null]) {
+    expect(isForwardSubject(subject), String(subject)).toBe(false);
+  }
+});
+
 describe("withoutTrailingQuote", () => {
   it("cuts a reply's quoted tail, attribution included", () => {
     expect(
@@ -170,17 +276,46 @@ describe("withoutTrailingQuote", () => {
     expect(
       withoutTrailingQuote("FYI\n\n---------- Forwarded message ---------\nFrom: Ana\n\n> quoted"),
     ).toBeNull();
+    // Answered inline under an attribution.
+    expect(
+      withoutTrailingQuote(
+        "Hi Ana,\n\nOn 10/16/26, Ana wrote:\n> 1. Ship Friday?\nYes, Friday works.\n> 2. Invoice?\nSent it this morning.",
+      ),
+    ).toBeNull();
   });
 });
 
-it("names where a link leads: a mailto's address, any other link whole", () => {
+it("names where a link leads: the host whole with its owner's domain apart, a mailto's address", () => {
+  // A look-alike host puts the real domain at the end, where a cut would hide it.
+  expect(
+    linkDestination(
+      "https://accounts.example.com.signin.session-check.evil.example:8443/login?next=%2F#top",
+    ),
+  ).toEqual({
+    lead: "https://accounts.example.com.signin.session-check.",
+    domain: "evil.example",
+    rest: ":8443/login?next=%2F#top",
+    mail: false,
+  });
+  // The host as it resolves: no userinfo to read as a name, punycode for look-alike letters.
+  expect(linkDestination("https://bank.example@evil.example/")).toEqual({
+    lead: "https://",
+    domain: "evil.example",
+    rest: "",
+    mail: false,
+  });
+  expect(linkDestination("https://www.bаnk.example/").domain).toMatch(/^xn--/);
   expect(linkDestination("mailto:ana%40example.com?subject=Hi")).toEqual({
-    text: "ana@example.com",
+    lead: "ana@example.com",
+    domain: "",
+    rest: "",
     mail: true,
   });
-  expect(linkDestination("https://example.com/a?utm_source=x")).toEqual({
-    text: "https://example.com/a?utm_source=x",
+  expect(linkDestination("mailto:%E0%A4%A").lead).toBe("%E0%A4%A");
+  expect(linkDestination("tel:+15555550100")).toEqual({
+    lead: "",
+    domain: "",
+    rest: "tel:+15555550100",
     mail: false,
   });
-  expect(linkDestination("mailto:%E0%A4%A")).toEqual({ text: "%E0%A4%A", mail: true });
 });
diff --git a/apps/web/src/lib/email-preview.ts b/apps/web/src/lib/email-preview.ts
index b510db8a5..7772ea770 100644
--- a/apps/web/src/lib/email-preview.ts
+++ b/apps/web/src/lib/email-preview.ts
@@ -1,3 +1,5 @@
+import { dropInvisible } from "@millionsend/core/customer-text";
+import { ownerDomain } from "@millionsend/core/org-domain";
 import {
   hasForwardMarker,
   OUTLOOK_QUOTE_IDS,
@@ -73,9 +75,9 @@ function openLinksOutside(html: string): string {
  * Mail from a stranger loads nothing from the network until the reader asks:
  * a remote image is a read receipt, and remote CSS, fonts and DNS prefetches
  * leak the same way. Inline styles and data: images stay, which is how cid:
- * parts arrive. Asked, images come straight from the sender over https; the
- * rest stays blocked. The frame's sandbox already stops scripts, forms and
- * meta refresh.
+ * parts arrive. Asked, images come straight from the hosts the message names
+ * over https; the rest stays blocked. The frame's sandbox already stops
+ * scripts, forms and meta refresh.
  */
 function receivedLockdown(imageSources: string): string {
   return (
@@ -86,49 +88,131 @@ function receivedLockdown(imageSources: string): string {
 }
 
 /**
- * A received message's preview document. The policy goes first, after the
- * doctype if there is one, so it governs every element that follows: ahead
- * of <html> the parser puts it in an implied head, and the doctype it kept
- * leaves the message's rendering mode as sent.
+ * A received message's preview document, with images from `imageHosts`
+ * allowed. The policy goes first, after the doctype if there is one, so it
+ * governs every element that follows: ahead of <html> the parser puts it in
+ * an implied head, and the doctype it kept leaves the message's rendering
+ * mode as sent.
  */
 export function lockDownReceivedHtml(
   html: string,
-  { remoteImages = false }: { remoteImages?: boolean } = {},
+  { imageHosts = [] }: { imageHosts?: readonly string[] } = {},
 ): string {
   const doctype = /^\s*<!doctype[^>]*>/i.exec(html)?.[0] ?? "";
-  return (
-    doctype + receivedLockdown(remoteImages ? "data: https:" : "data:") + html.slice(doctype.length)
-  );
+  const sources = ["data:", ...imageHosts.map((host) => `https://${host}`)].join(" ");
+  return doctype + receivedLockdown(sources) + html.slice(doctype.length);
 }
 
-/** A received message's HTML as its frame shows it, and whether it asks for remote images. */
+/** A received message's HTML as its frame shows it, and the hosts its remote images come from. */
 export interface MailBody {
   html: string;
-  remoteImages: boolean;
+  imageHosts: string[];
 }
 
 const REMOTE_URL = /^\s*(?:https?:)?\/\//i;
-const REMOTE_CSS_URL = /url\(\s*['"]?\s*(?:https?:)?\/\//i;
+const CSS_URL = /url\(\s*(['"]?)([^'")]*)\1\s*\)/gi;
+/** What a policy's host source can name; anything else stays blocked. */
+const POLICY_HOST = /^[a-z0-9.-]+(?::\d+)?$/;
 const QUOTE_SELECTOR = [...QUOTE_CLASSES.map((name) => `.${name}`), 'blockquote[type="cite"]'].join(
   ", ",
 );
 const OUTLOOK_QUOTE_ID: ReadonlySet<string> = new Set(OUTLOOK_QUOTE_IDS);
+const GMAIL_QUOTE = ".gmail_quote, .gmail_quote_container";
 const LINE_BLOCKS = "div, p, blockquote, li, tr, h1, h2, h3, h4, h5, h6";
+/** Elements whose text never shows. */
+const UNSEEN = new Set(["style", "script", "template", "title"]);
+/**
+ * Parse rounds a message gets to read the same twice. Mail settles on the
+ * second; markup that keeps changing is built to slip past the checks.
+ */
+const SETTLE_ROUNDS = 4;
 
-/** Whether anything in the document would load an image from the network. */
-function hasRemoteImages(doc: Document): boolean {
-  const some = (selector: string, remote: (el: Element) => boolean) =>
-    Array.from(doc.querySelectorAll(selector)).some(remote);
-  const url = (name: string) => (el: Element) => REMOTE_URL.test(el.getAttribute(name) ?? "");
-  return (
-    some("img[src]", url("src")) ||
-    some("[background]", url("background")) ||
-    some("img[srcset], source[srcset]", (el) =>
-      (el.getAttribute("srcset") ?? "").split(",").some((candidate) => REMOTE_URL.test(candidate)),
-    ) ||
-    some("[style]", (el) => REMOTE_CSS_URL.test(el.getAttribute("style") ?? "")) ||
-    some("style", (el) => REMOTE_CSS_URL.test(el.textContent ?? ""))
-  );
+/**
+ * The hosts a document's remote images come from: what the reader's "Show
+ * images" lets through. The dashboard's own host never is: the frame shares
+ * its origin, so an image there would go out with the reader's session.
+ */
+function imageHosts(doc: Document): string[] {
+  const hosts = new Set<string>();
+  const add = (raw: string) => {
+    if (!REMOTE_URL.test(raw)) return;
+    try {
+      const url = new URL(raw.trim(), location.href);
+      if (
+        /^https?:$/.test(url.protocol) &&
+        url.host !== location.host &&
+        POLICY_HOST.test(url.host)
+      ) {
+        hosts.add(url.host);
+      }
+    } catch {
+      // Not a URL: nothing loads from it.
+    }
+  };
+  const css = (text: string) => {
+    for (const [, , url = ""] of text.matchAll(CSS_URL)) add(url);
+  };
+  for (const el of doc.querySelectorAll("img[src]")) add(el.getAttribute("src") ?? "");
+  for (const el of doc.querySelectorAll("[background]")) add(el.getAttribute("background") ?? "");
+  for (const el of doc.querySelectorAll("img[srcset], source[srcset]")) {
+    for (const candidate of (el.getAttribute("srcset") ?? "").split(",")) {
+      add(candidate.trim().split(/\s+/)[0] ?? "");
+    }
+  }
+  for (const el of doc.querySelectorAll("[style]")) css(el.getAttribute("style") ?? "");
+  for (const el of doc.querySelectorAll("style")) css(el.textContent ?? "");
+  return [...hosts];
+}
+
+/**
+ * Takes out what would override the frame's own policy or reach past it:
+ * <base>, <link> (a preconnect is a read receipt), http-equiv and referrer
+ * metas (later than ours, they win), nested frames (a srcdoc document none
+ * of this reaches) and declarative shadow roots (a tree no query enters).
+ * Every link opens a new tab that cannot reach back: a named target, or an
+ * SVG link's own, would keep an opener to the dashboard.
+ */
+function strip(doc: Document): void {
+  for (const el of doc.querySelectorAll("base, link, meta, iframe")) {
+    if (
+      el.localName !== "meta" ||
+      el.hasAttribute("http-equiv") ||
+      el.getAttribute("name")?.trim().toLowerCase() === "referrer"
+    ) {
+      el.remove();
+    }
+  }
+  for (const el of doc.querySelectorAll("template")) {
+    el.removeAttribute("shadowrootmode");
+    el.removeAttribute("shadowroot");
+  }
+  for (const el of doc.querySelectorAll("a, area")) {
+    el.setAttribute("target", "_blank");
+    el.setAttribute("rel", "noopener noreferrer");
+  }
+}
+
+/**
+ * The message as its frame will build it, stripped, or null when it never
+ * reads the same twice. The frame parses the markup again, and some trees
+ * serialize to markup that parses differently (MathML and SVG text read back
+ * as elements), so the strip runs until a round changes nothing. The doctype
+ * gives the frame's no-quirks parse.
+ */
+function settle(html: string): Document | null {
+  let source = html;
+  for (let round = 0; round < SETTLE_ROUNDS; round++) {
+    const doc = new DOMParser().parseFromString(`<!doctype html>${source}`, "text/html");
+    strip(doc);
+    const out = doc.documentElement.outerHTML;
+    if (out === source) return doc;
+    source = out;
+  }
+  return null;
+}
+
+function mailBody(doc: Document): MailBody {
+  return { html: doc.documentElement.outerHTML, imageHosts: imageHosts(doc) };
 }
 
 /** A quote container opening with a forward marker: its original is what the sender wants read. */
@@ -140,11 +224,64 @@ function isForward(el: Element): boolean {
   return hasForwardMarker(first ?? "");
 }
 
-/** Whether a reader would see anything in the body: text, or an image. */
-function showsAnything(body: HTMLElement): boolean {
-  const copy = body.cloneNode(true) as HTMLElement;
-  for (const el of copy.querySelectorAll("style, script, template, title")) el.remove();
-  return (copy.textContent ?? "").trim() !== "" || copy.querySelector("img") !== null;
+/** An element its own style hides, the way mail hides a preheader. */
+function hidden(el: Element): boolean {
+  if (el.hasAttribute("hidden")) return true;
+  // Not every DOM gives a MathML element a style.
+  const style = (el as Partial<HTMLElement>).style;
+  if (!style) return false;
+  const collapsed =
+    Number.parseFloat(style.maxHeight) === 0 || Number.parseFloat(style.height) === 0;
+  return (
+    style.display === "none" ||
+    style.visibility === "hidden" ||
+    (collapsed && style.overflow === "hidden")
+  );
+}
+
+/**
+ * Whether `node`, inside `quote`, is an answer written inline: Gmail keeps
+ * those in its quote, after its first quoted part (the attribution comes
+ * before it) and outside them all.
+ */
+function answeredInline(quote: Element, node: Node): boolean {
+  if (!quote.matches(GMAIL_QUOTE) || quote.localName === "blockquote") return false;
+  const first = quote.querySelector("blockquote");
+  const quoted = node.parentElement?.closest("blockquote") ?? null;
+  return (
+    first !== null &&
+    (first.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 &&
+    !quote.contains(quoted)
+  );
+}
+
+/**
+ * The last text or image a reader would see that the sender wrote: outside
+ * `quotes`, or answered inline in one. Null when there is none.
+ */
+function lastWritten(body: HTMLElement, quotes: readonly Element[]): Node | null {
+  const walker = body.ownerDocument.createTreeWalker(
+    body,
+    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+    {
+      acceptNode: (node) =>
+        node.nodeType === Node.ELEMENT_NODE &&
+        (UNSEEN.has((node as Element).localName) || hidden(node as Element))
+          ? NodeFilter.FILTER_REJECT
+          : NodeFilter.FILTER_ACCEPT,
+    },
+  );
+  let last: Node | null = null;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const shows =
+      node.nodeType === Node.TEXT_NODE
+        ? dropInvisible(node.textContent ?? "").trim() !== ""
+        : (node as Element).localName === "img";
+    if (!shows) continue;
+    const quote = quotes.find((q) => q.contains(node));
+    if (!quote || answeredInline(quote, node)) last = node;
+  }
+  return last;
 }
 
 /** Removes `el`, the rule Outlook draws right above it, and everything after it up to the body. */
@@ -157,41 +294,50 @@ function cutFrom(el: Element, body: HTMLElement): void {
 }
 
 /**
- * A received message's HTML, parsed once for its frame. What would override
- * the frame's own policy goes: <base>, <link> (a preconnect is a read
- * receipt), and http-equiv and referrer metas, which win over ours because
- * they come later. A reply also comes without its quoted history, unless
- * that is all there is or it holds a forward.
+ * Folds a reply's quoted history in place: Outlook's, from its marker on,
+ * and every quote after the last thing the sender wrote. Answers written
+ * between quotes keep theirs. False when nothing folds: there is no quote,
+ * the quote is all there is, or it holds a forward.
+ */
+function foldQuotes(doc: Document): boolean {
+  const outlook = Array.from(doc.body.querySelectorAll("[id]")).find(
+    (el) => OUTLOOK_QUOTE_ID.has(el.id.toLowerCase()) && el.closest(QUOTE_SELECTOR) === null,
+  );
+  if (outlook) cutFrom(outlook, doc.body);
+  const quotes = Array.from(doc.body.querySelectorAll(QUOTE_SELECTOR)).filter(
+    (el) => !el.parentElement?.closest(QUOTE_SELECTOR),
+  );
+  const last = lastWritten(doc.body, quotes);
+  if (!last) return false;
+  const trailing = quotes.filter(
+    (el) => (last.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0,
+  );
+  if (trailing.some(isForward)) return false;
+  for (const el of trailing) el.remove();
+  return outlook !== undefined || trailing.length > 0;
+}
+
+/**
+ * A received message's HTML, read once for its frame: stripped (see strip),
+ * and a reply also without its quoted history (see foldQuotes).
  */
 export function prepareReceivedHtml(html: string): { full: MailBody; trimmed: MailBody | null } {
   // A server render has no DOM, and no message reaches a frame before the
   // client holds it; the frame's sandbox and policy guard it either way.
   if (typeof DOMParser === "undefined") {
-    return { full: { html, remoteImages: false }, trimmed: null };
-  }
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  for (const el of doc.querySelectorAll("base, link, meta")) {
-    if (
-      el.localName !== "meta" ||
-      el.hasAttribute("http-equiv") ||
-      el.getAttribute("name")?.trim().toLowerCase() === "referrer"
-    ) {
-      el.remove();
-    }
+    return { full: { html, imageHosts: [] }, trimmed: null };
   }
-  const root = doc.documentElement;
-  const full = { html: root.outerHTML, remoteImages: hasRemoteImages(doc) };
-  const quotes = Array.from(doc.querySelectorAll(QUOTE_SELECTOR)).filter(
-    (el) => !el.parentElement?.closest(QUOTE_SELECTOR),
-  );
-  const outlook = Array.from(doc.querySelectorAll("[id]")).find((el) =>
-    OUTLOOK_QUOTE_ID.has(el.id.toLowerCase()),
-  );
-  if ((quotes.length === 0 && !outlook) || quotes.some(isForward)) return { full, trimmed: null };
-  for (const el of quotes) el.remove();
-  if (outlook) cutFrom(outlook, doc.body);
-  if (!showsAnything(doc.body)) return { full, trimmed: null };
-  return { full, trimmed: { html: root.outerHTML, remoteImages: hasRemoteImages(doc) } };
+  const doc = settle(html);
+  // Markup built to slip past the checks: none of it is shown.
+  if (!doc) return { full: { html: "", imageHosts: [] }, trimmed: null };
+  const full = mailBody(doc);
+  const folded = foldQuotes(doc) ? settle(doc.documentElement.outerHTML) : null;
+  return { full, trimmed: folded ? mailBody(folded) : null };
+}
+
+/** Whether a subject names a forward, as mail clients prefix one (Fwd:, FW:, ENC:, RV:, WG:, TR:). */
+export function isForwardSubject(subject: string | null): boolean {
+  return /^\s*(?:fwd?|enc|rv|wg|tr)\s*:/i.test(subject ?? "");
 }
 
 /**
@@ -203,18 +349,55 @@ export function withoutTrailingQuote(text: string): string | null {
   const body = text.replace(/\r\n?/g, "\n").trimEnd();
   const { quoted } = splitTextQuotes(body);
   if (!quoted || !body.endsWith(quoted)) return null;
+  // Answered inline: lines of the sender's own between the quoted ones.
+  const lines = quoted.split("\n");
+  const first = lines.findIndex((line) => line.trimStart().startsWith(">"));
+  if (
+    first >= 0 &&
+    lines.slice(first).some((line) => line.trim() !== "" && !line.trimStart().startsWith(">"))
+  ) {
+    return null;
+  }
   return body.slice(0, body.length - quoted.length).trimEnd() || null;
 }
 
-/** Where a link in a message leads, as its tooltip names it: a mailto's address, else the URL. */
-export function linkDestination(href: string): { text: string; mail: boolean } {
-  if (!/^mailto:/i.test(href)) return { text: href, mail: false };
-  const address = href.slice("mailto:".length).split("?")[0] ?? "";
+/** Where a link in a message leads, as its tooltip names it. */
+export interface LinkDestination {
+  /** Never cut: a web link's scheme and host up to `domain`, or a mailto's address. */
+  lead: string;
+  /** The domain the host's owner registered, set apart: what a look-alike host buries. */
+  domain: string;
+  /** The port, path and query after it, which a tracking link runs long in. */
+  rest: string;
+  mail: boolean;
+}
+
+export function linkDestination(href: string): LinkDestination {
+  if (/^mailto:/i.test(href)) {
+    const address = href.slice("mailto:".length).split("?")[0] ?? "";
+    let lead = address;
+    try {
+      lead = decodeURIComponent(address);
+    } catch {
+      // Malformed escapes: the address as written.
+    }
+    return { lead, domain: "", rest: "", mail: true };
+  }
   try {
-    return { text: decodeURIComponent(address), mail: true };
+    const url = new URL(href);
+    if (/^https?:$/.test(url.protocol)) {
+      const domain = ownerDomain(url.hostname);
+      const at = url.hostname.endsWith(domain) ? url.hostname.length - domain.length : -1;
+      const path = `${url.pathname}${url.search}${url.hash}`;
+      const rest = `${url.port ? `:${url.port}` : ""}${path === "/" ? "" : path}`;
+      return at < 0
+        ? { lead: `${url.protocol}//${url.hostname}`, domain: "", rest, mail: false }
+        : { lead: `${url.protocol}//${url.hostname.slice(0, at)}`, domain, rest, mail: false };
+    }
   } catch {
-    return { text: address, mail: true };
+    // Not a URL the parser reads: shown as written.
   }
+  return { lead: "", domain: "", rest: href, mail: false };
 }
 
 /** localStorage key prefix: one key per sender domain whose remote images always load. */
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 692c86b07..8f3852e4b 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -2418,15 +2418,27 @@ summary:focus-visible,
 .ms-mail-panel .ms-mail-quote {
   margin: 10px 18px 12px;
 }
-/* Tracking links run to hundreds of characters: the start, which names the
-   host, is what the reader needs. */
+/* The host is never cut, and the domain its owner registered stands out: a
+   look-alike host buries it at the end. Tracking paths run to hundreds of
+   characters, so the rest stops after four lines. */
+.ms-mail-host,
+.ms-mail-href {
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+  color: var(--ms-muted);
+}
+.ms-mail-host {
+  display: block;
+}
+.ms-mail-host strong {
+  font-weight: 700;
+  color: var(--ms-bone);
+}
 .ms-mail-href {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   overflow: hidden;
-  font-size: 11.5px;
-  overflow-wrap: anywhere;
 }
 .ms-mail-href-note {
   display: block;

From 3f3efdf4d1886b510483c434471f827b3dcfb804 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:55:38 -0300
Subject: [PATCH 19/24] Inline a received message's cid: images for the thread
 pane

The thread pane now renders each message's HTML, but the thread read
returned it byte for byte, with cid: references a frame can never load: a
logo in an Outlook or Apple Mail signature showed as a broken image, and
no Show images could fix it. The dashboard's read now inlines them as data
URLs, as the received email's own read does, under the same size cap; past
it the references stay. The public API keeps the HTML as received.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/server/routers/inboxes.ts     |  2 +
 apps/web/test/inboxes-router.test.ts       |  8 ++-
 packages/core/src/inboxes/threads.ts       | 21 +++++++-
 packages/core/src/receiving/message.ts     |  6 +--
 packages/core/test/inboxes-threads.test.ts | 58 ++++++++++++++++++----
 5 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/server/routers/inboxes.ts b/apps/web/src/server/routers/inboxes.ts
index 5acb844ec..45fdd1ec8 100644
--- a/apps/web/src/server/routers/inboxes.ts
+++ b/apps/web/src/server/routers/inboxes.ts
@@ -555,6 +555,8 @@ export const inboxesRouter = router({
           agentView: false,
           includeHeld: true,
           envelopeOnly,
+          // The pane renders the HTML, where a cid: reference could never load.
+          inlineImages: true,
         });
         if ("error" in result) throw inboxFailure(result.error);
         const page = idPage(result);
diff --git a/apps/web/test/inboxes-router.test.ts b/apps/web/test/inboxes-router.test.ts
index 46b6cef71..c7d385d59 100644
--- a/apps/web/test/inboxes-router.test.ts
+++ b/apps/web/test/inboxes-router.test.ts
@@ -376,7 +376,13 @@ describe("support view", () => {
     expect(core.listThreadEmails).toHaveBeenCalledWith(
       db,
       expect.anything(),
-      expect.objectContaining({ envelopeOnly: true, agentView: false, includeHeld: true }),
+      // The pane renders the HTML: its cid: images come inlined.
+      expect.objectContaining({
+        envelopeOnly: true,
+        agentView: false,
+        includeHeld: true,
+        inlineImages: true,
+      }),
     );
     expect(page.items).toEqual([
       {
diff --git a/packages/core/src/inboxes/threads.ts b/packages/core/src/inboxes/threads.ts
index c7cf5472e..3bdf537fe 100644
--- a/packages/core/src/inboxes/threads.ts
+++ b/packages/core/src/inboxes/threads.ts
@@ -21,6 +21,7 @@ import { dropControls, dropInvisible } from "../customer-text.js";
 import { resultRows } from "../driver-result.js";
 import { escapeRegex } from "../erase-recipient.js";
 import {
+  inlineCidImages,
   openReceivedAttachments,
   openReceivedExtracted,
   openReceivedRaw,
@@ -809,10 +810,15 @@ const PARSE = {
   keepCidLinks: true,
 } as const;
 
-/** HTML byte-for-byte, text with invisible characters out, the sanitized read, attachment facts. */
+/**
+ * HTML byte-for-byte (or with its `cid:` images inlined, for a viewer that
+ * renders it), text with invisible characters out, the sanitized read,
+ * attachment facts.
+ */
 async function inboundContent(
   row: ReceivedEmailRow,
   keyring: Keyring,
+  inlineImages: boolean,
 ): Promise<MessageContent & { extractedText: string | null }> {
   const empty = { html: null, text: null, attachments: [], extractedText: null };
   try {
@@ -828,6 +834,8 @@ async function inboundContent(
         const parsed = await simpleParser(raw, PARSE);
         html = parsed.html || null;
         text = parsed.text || null;
+        // Past the inlining cap the references stay, as a received email's read serves them.
+        if (html && inlineImages) html = inlineCidImages(html, parsed.attachments) ?? html;
       } catch {
         // Malformed MIME reads as no body; the metadata still answers.
       }
@@ -894,6 +902,7 @@ async function threadEmail(
     agentView: boolean;
     includeHeld: boolean;
     envelopeOnly: boolean;
+    inlineImages: boolean;
   },
 ): Promise<ThreadEmailWire | InboxError> {
   if (p.ref.dir === "out") {
@@ -932,7 +941,11 @@ async function threadEmail(
   return contentSlot(async () => {
     const [row] = await db.select().from(r).where(eq(r.id, p.ref.id));
     if (!row) return EMAIL_NOT_FOUND;
-    return inboundThreadEmailWire(row, membership, await inboundContent(row, keyring));
+    return inboundThreadEmailWire(
+      row,
+      membership,
+      await inboundContent(row, keyring, p.inlineImages),
+    );
   });
 }
 
@@ -958,6 +971,8 @@ export async function listThreadEmails(
     includeHeld: boolean;
     /** Support view: metadata only, never content. */
     envelopeOnly?: boolean | undefined;
+    /** `cid:` images inlined as data URLs, for a viewer that renders the HTML. */
+    inlineImages?: boolean | undefined;
   },
 ): Promise<{ data: ThreadEmailWire[]; hasMore: boolean } | { error: InboxError }> {
   const missing = await threadFor(db, p);
@@ -999,6 +1014,7 @@ export async function listThreadEmails(
       ref,
       includeHeld,
       envelopeOnly: Boolean(p.envelopeOnly),
+      inlineImages: Boolean(p.inlineImages),
     });
     if (!isInboxError(email)) data.push(email);
   }
@@ -1030,6 +1046,7 @@ export async function getThreadEmail(
     ref: { id, dir: outbound ? "out" : "in" },
     includeHeld: !p.agentView && p.includeHeld,
     envelopeOnly: Boolean(p.envelopeOnly),
+    inlineImages: false,
   });
   return isInboxError(email) ? { error: email } : email;
 }
diff --git a/packages/core/src/receiving/message.ts b/packages/core/src/receiving/message.ts
index 50603c263..3fb99a6af 100644
--- a/packages/core/src/receiving/message.ts
+++ b/packages/core/src/receiving/message.ts
@@ -617,10 +617,10 @@ function withReturnPath(headers: Record<string, string>, row: ReceivedEmailMeta)
  * URL, as mailparser inlines them, or null when the result would pass
  * `maxChars`; measured before any data URL is built.
  */
-function inlineCidImages(
+export function inlineCidImages(
   html: string,
   attachments: readonly Attachment[],
-  maxChars: number,
+  maxChars = MAX_INLINED_HTML_CHARS,
 ): string | null {
   const images = new Map<string, Attachment | undefined>();
   const imageFor = (cid: string) => {
@@ -682,7 +682,7 @@ export async function receivedEmailDetail(
         let html = parsed.html || null;
         let htmlFormat = options.htmlFormat;
         if (html && htmlFormat === "data_uri") {
-          const inlined = inlineCidImages(html, parsed.attachments, MAX_INLINED_HTML_CHARS);
+          const inlined = inlineCidImages(html, parsed.attachments);
           if (inlined === null) htmlFormat = "cid";
           else html = inlined;
         }
diff --git a/packages/core/test/inboxes-threads.test.ts b/packages/core/test/inboxes-threads.test.ts
index 9bee7b084..2c03b280d 100644
--- a/packages/core/test/inboxes-threads.test.ts
+++ b/packages/core/test/inboxes-threads.test.ts
@@ -106,6 +106,8 @@ async function inbound(
     text?: string;
     html?: string;
     attach?: boolean;
+    /** A logo the HTML shows by cid:logo@sender.test. */
+    logo?: boolean;
     held?: "pending" | "quarantined";
     virus?: boolean;
     read?: boolean;
@@ -123,15 +125,27 @@ async function inbound(
     subject: p.subject,
     text: p.text ?? `About ${p.subject}`,
     html: p.html,
-    attachments: p.attach
-      ? [
-          {
-            filename: "invoice.pdf",
-            content: Buffer.from("%PDF-1.4 x"),
-            contentType: "application/pdf",
-          },
-        ]
-      : [],
+    attachments: [
+      ...(p.attach
+        ? [
+            {
+              filename: "invoice.pdf",
+              content: Buffer.from("%PDF-1.4 x"),
+              contentType: "application/pdf",
+            },
+          ]
+        : []),
+      ...(p.logo
+        ? [
+            {
+              filename: "logo.png",
+              content: Buffer.from("logo"),
+              contentType: "image/png",
+              cid: "logo@sender.test",
+            },
+          ]
+        : []),
+    ],
   });
   const raw = info.message as Buffer;
   const owner = { teamId: s.teamId, rowId: id };
@@ -875,6 +889,32 @@ describe("thread emails", () => {
     expect(await list({ query: { after: heldId } })).toMatchObject({ error: { status: 404 } });
   });
 
+  it("inlines cid: images only for a viewer that renders the HTML", async () => {
+    const s = await setup("thread-cid");
+    const id = await thread(s, { subject: "Logo" });
+    await inbound(s, id, {
+      subject: "Logo",
+      html: '<p>Thanks</p><img src="cid:logo@sender.test">',
+      logo: true,
+    });
+    const html = async (inlineImages?: boolean) => {
+      const page = await listThreadEmails(db, keyring, {
+        teamId: s.teamId,
+        inboxId: s.inboxId,
+        threadId: id,
+        query: {},
+        agentView: false,
+        includeHeld: true,
+        inlineImages,
+      });
+      return "data" in page ? page.data[0]?.html : null;
+    };
+    expect(await html()).toBe('<p>Thanks</p><img src="cid:logo@sender.test">');
+    expect(await html(true)).toBe(
+      `<p>Thanks</p><img src="data:image/png;base64,${Buffer.from("logo").toString("base64")}">`,
+    );
+  });
+
   it("answers a held message 403 to agents, a pending one 404, and shows a virus's text only", async () => {
     const s = await setup("thread-email");
     const id = await thread(s, { subject: "Held" });

From a003a7020e0e11970b10aeb546134c4893fab097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:55:51 -0300
Subject: [PATCH 20/24] Keep the Inboxes list's addresses and catch-all link at
 laptop widths

The Needs attention cell went one line by refusing to wrap, which made
its column as wide as its longest text: at 920 to 1024px windows the
Inbox column was left with no room, so rows showed only their tiles. The
cell now ends in an ellipsis inside its own 22%, and the Inbox column
keeps 160px while the other columns give way first.

The catch-all row's "turn off" link sat at the end of its tail, the first
thing cut, and stayed in the Tab order while out of sight. LeadCell takes
an action that follows the tail whole: the tail's words give way before
the address, and the link always shows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |  5 ++--
 apps/web/messages/pt-BR/inboxes.json          |  5 ++--
 .../app/(dashboard)/inboxes/inboxes-view.tsx  | 26 ++++++++++---------
 apps/web/src/components/lead-cell.tsx         |  9 +++++--
 apps/web/src/styles/components.css            | 20 +++++++++++---
 apps/web/test/inboxes-screens.test.ts         | 12 +++++++--
 6 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index b5ee24b2f..7407afaf8 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -117,8 +117,9 @@
     "full": "You've reached the inbox limit of your plan. Upgrade to create more."
   },
   "catchAll": {
-    "row": "Addresses with no inbox · <link>turn off</link>",
-    "turnOff": "Turn off on the domain"
+    "row": "Addresses with no inbox",
+    "turnOff": "Turn off on the domain",
+    "turnOffLink": "turn off"
   },
   "create": {
     "title": "Create inbox",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index cdd06827f..392776f23 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -117,8 +117,9 @@
     "full": "Você chegou ao limite de caixas do seu plano. Faça upgrade para criar mais."
   },
   "catchAll": {
-    "row": "Endereços sem caixa · <link>desligar</link>",
-    "turnOff": "Desligar no domínio"
+    "row": "Endereços sem caixa",
+    "turnOff": "Desligar no domínio",
+    "turnOffLink": "desligar"
   },
   "create": {
     "title": "Criar caixa de entrada",
diff --git a/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx b/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
index b8bde02c5..eae4af138 100644
--- a/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/inboxes-view.tsx
@@ -17,6 +17,7 @@ import { Skeleton } from "@/components/skeleton";
 import { StatusTile, TONE_COLOR } from "@/components/status-tile";
 import { Table } from "@/components/table";
 import { Tooltip } from "@/components/tooltip";
+import { Truncated } from "@/components/truncated";
 import { formatTimeLeft } from "@/lib/format";
 import { useTRPC } from "@/lib/trpc";
 import { oneOf, useUrlState } from "@/lib/url-state";
@@ -35,7 +36,8 @@ function InboxesHead() {
   return (
     <thead>
       <tr>
-        <th>{t("col.inbox")}</th>
+        {/* Room for an address however narrow the window: the other columns give theirs first. */}
+        <th style={{ minWidth: 160 }}>{t("col.inbox")}</th>
         <th style={{ width: 90 }}>{t("col.type")}</th>
         <th style={{ width: "22%" }}>{t("col.attention")}</th>
         <th className="right" style={{ width: 130 }}>
@@ -244,18 +246,20 @@ export function InboxesView() {
                       value={`*@${domain.name}`}
                       href={href}
                       mono
-                      tail={t.rich("catchAll.row", {
-                        link: (chunks) => (
+                      tail={t("catchAll.row")}
+                      action={
+                        <>
+                          {"· "}
                           <Tooltip inline focusableChild text={t("catchAll.turnOff")}>
                             <Link
                               href={`/domains/${domain.domainId}`}
                               onClick={(event) => event.stopPropagation()}
                             >
-                              {chunks}
+                              {t("catchAll.turnOffLink")}
                             </Link>
                           </Tooltip>
-                        ),
-                      })}
+                        </>
+                      }
                     />
                     <td>{t("type.catchAll")}</td>
                     <td>{none}</td>
@@ -314,14 +318,12 @@ export function InboxesView() {
                       tail={detail.join(" · ")}
                     />
                     <td>{kindWord(t, inbox.kind)}</td>
-                    {/* One line: the inbox column gives up the width instead. */}
+                    {/* One line that ends in an ellipsis inside its own share of the row. */}
                     <td
-                      style={{
-                        whiteSpace: "nowrap",
-                        color: attention.length > 0 ? "var(--ms-bone)" : undefined,
-                      }}
+                      className="ms-cell-fill"
+                      style={attention.length > 0 ? { color: "var(--ms-bone)" } : undefined}
                     >
-                      {attention.length > 0 ? attention.join(" · ") : none}
+                      {attention.length > 0 ? <Truncated text={attention.join(" · ")} /> : none}
                     </td>
                     <td className="right ms-digits">{nf.format(inbox.received_30d)}</td>
                     <td className="right" style={{ whiteSpace: "nowrap" }}>
diff --git a/apps/web/src/components/lead-cell.tsx b/apps/web/src/components/lead-cell.tsx
index 2434a080c..927ce1df6 100644
--- a/apps/web/src/components/lead-cell.tsx
+++ b/apps/web/src/components/lead-cell.tsx
@@ -12,8 +12,9 @@ export const LEAD_GLYPH = { size: 14, strokeWidth: 2 } as const;
  * A list row's first cell, on one line: an optional status tile, the row's
  * value (an address or a title) ending in an ellipsis where the column runs
  * out and whole in a tooltip, "+N" for the addresses behind the first, and
- * an optional muted tail that gives way before the value does. Phones keep
- * the whole line and scroll the list sideways.
+ * an optional muted tail that gives way before the value does, then an
+ * optional action that never does. Phones keep the whole line and scroll the
+ * list sideways.
  */
 export function LeadCell({
   tile,
@@ -22,6 +23,7 @@ export function LeadCell({
   mono = false,
   more = [],
   tail,
+  action,
 }: {
   tile?: React.ReactNode;
   value: string;
@@ -33,6 +35,8 @@ export function LeadCell({
   more?: readonly string[];
   /** A string tail shows whole in a tooltip once cut. */
   tail?: React.ReactNode;
+  /** A link after the tail, kept whole. */
+  action?: React.ReactNode;
 }) {
   const line = <Truncated text={value} />;
   return (
@@ -56,6 +60,7 @@ export function LeadCell({
             {typeof tail === "string" ? <Truncated text={tail} /> : tail}
           </span>
         ) : null}
+        {action ? <span className="ms-lead-action">{action}</span> : null}
       </span>
     </td>
   );
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 8f3852e4b..1d073fef4 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -2041,15 +2041,27 @@ summary:focus-visible,
 .ms-lead-more {
   color: var(--ms-muted);
 }
+.ms-lead-tail,
+.ms-lead-action {
+  font-family: var(--ms-font-sans);
+  font-size: 12.5px;
+  color: var(--ms-muted);
+  white-space: nowrap;
+}
 .ms-lead-tail {
   flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--ms-font-sans);
-  font-size: 12.5px;
-  color: var(--ms-muted);
+}
+/* An action after the tail (the catch-all row's "turn off") stays whole and
+   right after the tail's words, which grow no wider than they are. */
+.ms-lead-tail:has(+ .ms-lead-action) {
+  max-width: max-content;
+}
+.ms-lead-action {
+  flex: none;
+  margin-left: -6px;
 }
 
 .ms-theme-toggle {
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index 1b55b1c29..f8793ddc6 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -629,11 +629,19 @@ describe("inbox screens", () => {
     expect(html).toContain(tail("Every email your domains received"));
     expect(html).toContain(tail("Orders agent"));
     expect(html).toContain(tail("Support · forwards to ops@example.com"));
-    // The catch-all's turn-off link stays in its tail, the where in its tooltip.
+    // The catch-all's turn-off link follows its tail, kept whole as the tail
+    // gives way; the where is in its tooltip.
+    expect(html).toContain(tail("Addresses with no inbox"));
     expect(html).toMatch(
-      /class="ms-lead-tail">Addresses with no inbox · <span class="ms-tooltip-trigger inline"><a href="\/domains\/d1">turn off<\/a><\/span><\/span>/,
+      /class="ms-lead-action">· <span class="ms-tooltip-trigger inline"><a href="\/domains\/d1">turn off<\/a><\/span><\/span>/,
     );
     expect(t("catchAll.turnOff")).toBe("Turn off on the domain");
+    // What needs attention ends in an ellipsis inside its own column, which
+    // never takes the addresses' room.
+    expect(html).toContain(
+      '<td class="ms-cell-fill" style="color:var(--ms-bone)"><span class="ms-truncate">1 in quarantine</span></td>',
+    );
+    expect(html).toContain('<th style="min-width:160px">Inbox</th>');
     expect(html).toContain('<th style="width:90px">Type</th>');
     expect(html).toContain('<th style="width:22%">Needs attention</th>');
   });

From a05e5a2c3de7ae678972d6311abbf304c8e2c8fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:56:09 -0300
Subject: [PATCH 21/24] Keep focus and unsaved drafts when the thread pane
 changes or closes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Not spam, Restore and Move closed the pane with focus inside it, and the
moved thread's row left the list with the refetch, so focus fell to the
page and the next Tab started from the sidebar. Focus now moves to the
row beside the thread, or to the folder's button when there is none. A
label's ✕ in the pane header hands focus to a neighbouring ✕, or to the
Labels menu, before its badge goes.

Esc closing the pane could throw away typing: an open draft edit lives
only in the card, so Esc leaves the pane open while one is being edited;
and the reply composer's draft, mirrored to local storage on a short
timer, is now written when the composer unmounts rather than dropped
with the timer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../app/(dashboard)/inboxes/[id]/labels.tsx   | 15 +++-
 .../(dashboard)/inboxes/[id]/threads-tab.tsx  | 39 +++++++--
 apps/web/src/lib/use-local-draft.ts           | 48 ++++++-----
 apps/web/test/threads-keyboard.test.ts        | 85 ++++++++++++++++++-
 4 files changed, 154 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
index b66221afd..35500606f 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
@@ -24,8 +24,17 @@ const NAME_MAX = 64;
 const menuText = { contain: "inline-size" } as const;
 const menuError = { ...menuText, margin: "0 12px 8px", fontSize: 12 };
 
-/** A label as a neutral pill led by its color; with `onRemove`, its ✕ takes it off the thread. */
-export function LabelBadge({ label, onRemove }: { label: Label; onRemove?: () => void }) {
+/**
+ * A label as a neutral pill led by its color; with `onRemove`, its ✕ takes it
+ * off the thread, and is handed over so focus can leave it first.
+ */
+export function LabelBadge({
+  label,
+  onRemove,
+}: {
+  label: Label;
+  onRemove?: (button: HTMLButtonElement) => void;
+}) {
   const t = useTranslations("inboxes");
   return (
     <span className="ms-badge ms-badge-neutral ms-label-badge">
@@ -35,7 +44,7 @@ export function LabelBadge({ label, onRemove }: { label: Label; onRemove?: () =>
         <button
           type="button"
           aria-label={t("removeLabel", { label: label.name })}
-          onClick={onRemove}
+          onClick={(event) => onRemove(event.currentTarget)}
         >
           ✕
         </button>
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
index 35c20aa46..f6426a5b2 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/threads-tab.tsx
@@ -349,15 +349,42 @@ function ThreadPane({
       pane.scrollIntoView({ block: "start", behavior: "auto" });
     }
   }, []);
-  // Focus inside the pane would fall to the page as it goes: it moves to the thread's row.
-  const close = () => {
+  // Focus inside the pane would fall to the page as it goes: it moves to the
+  // thread's row, or to the row beside it when the thread is leaving the list,
+  // or to the folder's button when there is no row.
+  const closePane = (leaving: boolean) => {
     const pane = paneRef.current;
     if (pane?.contains(document.activeElement)) {
-      pane.previousElementSibling?.querySelector<HTMLElement>('[aria-current="true"]')?.focus();
+      const row = pane.previousElementSibling?.querySelector('[aria-current="true"]');
+      const item = row?.closest("li");
+      const next = leaving
+        ? (item?.nextElementSibling ?? item?.previousElementSibling)?.querySelector(
+            ".ms-thread-open",
+          )
+        : row;
+      const folder = pane.closest(".ms-threads")?.querySelector('.ms-tabs [aria-pressed="true"]');
+      ((next ?? folder) as HTMLElement | null | undefined)?.focus();
     }
     onClose();
   };
-  useEscape(close);
+  const close = () => closePane(false);
+  // The ✕ goes with its badge: focus on it moves to a neighbour's ✕, else to the Labels menu.
+  const removeLabel = (labelId: string, button: HTMLElement) => {
+    if (document.activeElement === button) {
+      const all = [...(button.parentElement?.parentElement?.querySelectorAll("button") ?? [])];
+      const at = all.indexOf(button as HTMLButtonElement);
+      (
+        all[at + 1] ??
+        all[at - 1] ??
+        paneRef.current?.querySelector<HTMLElement>('[role="combobox"]')
+      )?.focus();
+    }
+    update.mutate({ ...ref, removeLabelId: labelId });
+  };
+  // A draft being edited is held nowhere else: Esc leaves the pane open with it.
+  useEscape(() => {
+    if (!paneRef.current?.querySelector("textarea")) close();
+  });
   const moveTo = (folder: (typeof MOVE_TO)[number]) =>
     update.mutate(
       { ...ref, folder },
@@ -365,7 +392,7 @@ function ThreadPane({
         // The thread has left the list beside it, so the pane goes too.
         onSuccess: () => {
           toast(t("movedTo", { folder }));
-          onClose();
+          closePane(true);
         },
       },
     );
@@ -494,7 +521,7 @@ function ThreadPane({
               label={label}
               {...(inbox.expired
                 ? {}
-                : { onRemove: () => update.mutate({ ...ref, removeLabelId: label.id }) })}
+                : { onRemove: (button: HTMLElement) => removeLabel(label.id, button) })}
             />
           ))}
         </span>
diff --git a/apps/web/src/lib/use-local-draft.ts b/apps/web/src/lib/use-local-draft.ts
index 68adae4a7..82257cfa9 100644
--- a/apps/web/src/lib/use-local-draft.ts
+++ b/apps/web/src/lib/use-local-draft.ts
@@ -55,30 +55,38 @@ export function useLocalDraft<T>({
     }
   }, [storageKey]);
 
+  const keyRef = useRef(storageKey);
+  keyRef.current = storageKey;
+  // Reads only refs, so the timer and the unmount both write what is current.
+  const writeRef = useRef(() => {
+    if (recoveredPendingRef.current) return; // don't clobber an unanswered offer
+    // Saves are refused under a support view, so a mirrored draft would never
+    // be cleared and the customer's content would stay in the operator's browser.
+    if (isReadOnly()) return;
+    try {
+      const snapshot = JSON.stringify(stateRef.current);
+      if (snapshot === baselineRef.current) {
+        localStorage.removeItem(keyRef.current);
+      } else {
+        localStorage.setItem(
+          keyRef.current,
+          JSON.stringify({ savedAt: Date.now(), data: stateRef.current }),
+        );
+      }
+    } catch {
+      // Storage full/unavailable — drafts are best-effort.
+    }
+  });
+
   // Debounced write on every state change.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: the effect is keyed on the state identity; the body reads through a ref so the timeout always sees the latest
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the effect is keyed on the state identity; the write reads through refs so the timeout always sees the latest
   useEffect(() => {
-    const id = setTimeout(() => {
-      if (recoveredPendingRef.current) return; // don't clobber an unanswered offer
-      // Saves are refused under a support view, so a mirrored draft would never
-      // be cleared and the customer's content would stay in the operator's browser.
-      if (isReadOnly()) return;
-      try {
-        const snapshot = JSON.stringify(stateRef.current);
-        if (snapshot === baselineRef.current) {
-          localStorage.removeItem(storageKey);
-        } else {
-          localStorage.setItem(
-            storageKey,
-            JSON.stringify({ savedAt: Date.now(), data: stateRef.current }),
-          );
-        }
-      } catch {
-        // Storage full/unavailable — drafts are best-effort.
-      }
-    }, 800);
+    const id = setTimeout(writeRef.current, 800);
     return () => clearTimeout(id);
   }, [state, storageKey]);
+  // Unmounted (a reply composer closing with its thread), the write still
+  // pending happens now rather than never.
+  useEffect(() => () => writeRef.current(), []);
 
   /**
    * After a successful persist: the current state becomes the baseline, or
diff --git a/apps/web/test/threads-keyboard.test.ts b/apps/web/test/threads-keyboard.test.ts
index f62b26934..2fc3fe0d4 100644
--- a/apps/web/test/threads-keyboard.test.ts
+++ b/apps/web/test/threads-keyboard.test.ts
@@ -67,6 +67,7 @@ vi.mock("@/lib/trpc", () => {
 const { LabelsMenu } = await import("@/app/(dashboard)/inboxes/[id]/labels");
 const { ThreadsTab } = await import("@/app/(dashboard)/inboxes/[id]/threads-tab");
 const { useEscape } = await import("@/lib/use-escape");
+const { useLocalDraft } = await import("@/lib/use-local-draft");
 
 const billing = { id: "l1", name: "Billing", color: "#46A758" };
 const followUp = { id: "l2", name: "Follow-up", color: "#F76B15" };
@@ -308,7 +309,7 @@ describe("the open thread", () => {
     subject: "Can't log in after the update",
     from: "Ana Souza <ana@example.com>",
     to: ["support@acme.example"],
-    labels: [],
+    labels: [] as (typeof billing)[],
     message_count: 1,
     read: true,
     received_at: new Date().toISOString(),
@@ -316,14 +317,19 @@ describe("the open thread", () => {
     quarantined: 0,
     snippet: "",
   };
-  async function openThread() {
+  const next = { ...row, id: "t2", subject: "Invoice for October" };
+  async function openThread(
+    thread: Partial<typeof row> = {},
+    answers: Record<string, unknown> = {},
+  ) {
     page.search = "thread=t1";
     page.answers = {
-      "inboxes.threads.list.infiniteQueryOptions": { pages: [{ items: [row] }] },
-      "inboxes.threads.get.queryOptions": row,
+      "inboxes.threads.list.infiniteQueryOptions": { pages: [{ items: [row, next] }] },
+      "inboxes.threads.get.queryOptions": { ...row, ...thread },
       "inboxes.threads.emails.infiniteQueryOptions": { pages: [{ items: [] }] },
       "inboxes.drafts.list.queryOptions": { items: [] },
       "inboxes.labels.list.queryOptions": [],
+      ...answers,
     };
     await act(async () =>
       root.render(
@@ -345,6 +351,58 @@ describe("the open thread", () => {
     expect(document.activeElement?.textContent).toContain(row.subject);
   });
 
+  it("hands focus to the row beside a thread that leaves the list", async () => {
+    await openThread({ folder: "spam" });
+    const notSpam = [...document.querySelectorAll<HTMLElement>("section button")].find(
+      (button) => button.textContent === "Not spam",
+    ) as HTMLElement;
+    await act(async () => notSpam.focus());
+    await click(notSpam);
+    const [variables, options] = sent.update.mock.calls[0] as [object, { onSuccess: () => void }];
+    expect(variables).toMatchObject({ threadId: "t1", folder: "inbox" });
+    await act(async () => options.onSuccess());
+    expect($("section")).toBeNull();
+    expect(document.activeElement?.textContent).toContain(next.subject);
+  });
+
+  it("moves focus off a label's ✕ before its badge goes", async () => {
+    await openThread({ labels: [billing, followUp] });
+    const remove = $('section button[aria-label="Remove Billing"]') as HTMLElement;
+    await act(async () => remove.focus());
+    await click(remove);
+    expect(sent.update).toHaveBeenCalledWith({
+      inboxId: "i1",
+      threadId: "t1",
+      removeLabelId: "l1",
+    });
+    expect(document.activeElement?.getAttribute("aria-label")).toBe("Remove Follow-up");
+  });
+
+  it("stays open on Esc while a draft is being edited, which is kept nowhere else", async () => {
+    await openThread(
+      {},
+      {
+        "inboxes.drafts.list.queryOptions": {
+          items: [{ id: "d1", thread_id: "t1", status: "pending_approval", approval_reasons: [] }],
+        },
+        "inboxes.drafts.get.queryOptions": {
+          text: "Hi Ana, it's fixed.",
+          created_at: new Date().toISOString(),
+        },
+      },
+    );
+    const button = (label: string) =>
+      [...document.querySelectorAll<HTMLElement>("section button")].find(
+        (el) => el.textContent === label,
+      ) as HTMLElement;
+    await click(button("Edit"));
+    const save = button("Save draft");
+    await act(async () => save.focus());
+    await press(save, "Escape");
+    expect($("section textarea")).not.toBeNull();
+    expect($("section h2")).not.toBeNull();
+  });
+
   it("stays open for an Esc typed in a field", async () => {
     await openThread();
     const search = $('input[placeholder="Search threads…"]') as HTMLInputElement;
@@ -355,3 +413,22 @@ describe("the open thread", () => {
     expect($("section")).toBeNull();
   });
 });
+
+describe("a local draft", () => {
+  function Probe({ text }: { text: string }) {
+    useLocalDraft({ storageKey: "ms-draft:probe", state: text, initialState: "" });
+    return null;
+  }
+
+  it("is written when its editor goes before the debounce does", async () => {
+    localStorage.removeItem("ms-draft:probe");
+    await act(async () => root.render(createElement(Probe, { text: "" })));
+    await act(async () => root.render(createElement(Probe, { text: "Thanks, I'll check" })));
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    expect(JSON.parse(localStorage.getItem("ms-draft:probe") ?? "{}").data).toBe(
+      "Thanks, I'll check",
+    );
+    localStorage.removeItem("ms-draft:probe");
+  });
+});

From 0bd0b71d0cedbd5772b5e37c4474c983e35a58b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:56:22 -0300
Subject: [PATCH 22/24] Name the label editor's controls in the app's tooltips
 and to screen readers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The custom-color swatch and the edit view's Back button carried native
titles, which never show on keyboard focus: the app's tooltip sat at
modal level, under the portaled menu. Tooltips are now the top layer, and
both controls use them.

The pencil is hidden from assistive tech, and → was the only keyboard way
into rename, recolor and delete, so a screen reader never learned the
edit view existed. Each label row now describes → and declares it as its
key shortcut, and the edit view is a group named "Edit label".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/messages/en/inboxes.json             |  1 +
 apps/web/messages/pt-BR/inboxes.json          |  1 +
 .../app/(dashboard)/inboxes/[id]/labels.tsx   | 52 ++++++++++---------
 .../src/components/grouped-multi-select.tsx   | 32 ++++++++++--
 apps/web/src/styles/components.css            |  6 +--
 apps/web/test/inboxes-screens.test.ts         |  8 ++-
 apps/web/test/threads-keyboard.test.ts        | 10 +++-
 7 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/apps/web/messages/en/inboxes.json b/apps/web/messages/en/inboxes.json
index 7407afaf8..a1b5a326e 100644
--- a/apps/web/messages/en/inboxes.json
+++ b/apps/web/messages/en/inboxes.json
@@ -29,6 +29,7 @@
   "trashRetention": "Threads in Trash are deleted {days, plural, one {# day} other {# days}} after they're moved here.",
   "labels": {
     "edit": "Edit label",
+    "editHint": "Press the right arrow to edit this label",
     "back": "Back",
     "name": "Name",
     "color": "Color",
diff --git a/apps/web/messages/pt-BR/inboxes.json b/apps/web/messages/pt-BR/inboxes.json
index 392776f23..797caa717 100644
--- a/apps/web/messages/pt-BR/inboxes.json
+++ b/apps/web/messages/pt-BR/inboxes.json
@@ -29,6 +29,7 @@
   "trashRetention": "As conversas na Lixeira são excluídas {days, plural, one {# dia} other {# dias}} depois de chegarem aqui.",
   "labels": {
     "edit": "Editar etiqueta",
+    "editHint": "Aperte a seta para a direita para editar esta etiqueta",
     "back": "Voltar",
     "name": "Nome",
     "color": "Cor",
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
index 35500606f..c882b83b5 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
@@ -9,6 +9,7 @@ import { ChevronLeftIcon, TagIcon } from "@/components/icons/mail-icons";
 import { PlusGlyph } from "@/components/icons/nav-icons";
 import { BtnSpinner } from "@/components/spinner";
 import { StatusDot } from "@/components/status-badge";
+import { Tooltip } from "@/components/tooltip";
 import { inLabelPalette, randomLabelColor } from "@/lib/label-colors";
 import { useTRPC } from "@/lib/trpc";
 import type { ThreadRow } from "../parts";
@@ -133,6 +134,7 @@ export function LabelsMenu({
         )
       }
       editLabel={t("labels.edit")}
+      editHint={t("labels.editHint")}
       renderEdit={(option, back) => {
         const label = labels.find((l) => l.id === option.value);
         return label ? (
@@ -195,20 +197,21 @@ export function LabelColorField({
             />
           ))}
         </div>
-        <label
-          className={custom ? "ms-swatch custom on" : "ms-swatch custom"}
-          style={custom ? { background: value } : undefined}
-          title={t("labels.custom")}
-        >
-          {custom ? null : <PlusGlyph size={10} />}
-          <input
-            type="color"
-            className="ms-swatch-picker"
-            aria-label={t("labels.custom")}
-            value={value.toLowerCase()}
-            onChange={(event) => onChange(event.target.value.toUpperCase())}
-          />
-        </label>
+        <Tooltip inline focusableChild text={t("labels.custom")}>
+          <label
+            className={custom ? "ms-swatch custom on" : "ms-swatch custom"}
+            style={custom ? { background: value } : undefined}
+          >
+            {custom ? null : <PlusGlyph size={10} />}
+            <input
+              type="color"
+              className="ms-swatch-picker"
+              aria-label={t("labels.custom")}
+              value={value.toLowerCase()}
+              onChange={(event) => onChange(event.target.value.toUpperCase())}
+            />
+          </label>
+        </Tooltip>
       </div>
     </div>
   );
@@ -266,16 +269,17 @@ export function LabelEditor({
       }}
     >
       <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 4px 8px" }}>
-        <button
-          type="button"
-          className="ms-menu-trigger-bare"
-          style={{ width: 24, height: 24 }}
-          aria-label={t("labels.back")}
-          title={t("labels.back")}
-          onClick={onDone}
-        >
-          <ChevronLeftIcon />
-        </button>
+        <Tooltip inline focusableChild text={t("labels.back")}>
+          <button
+            type="button"
+            className="ms-menu-trigger-bare"
+            style={{ width: 24, height: 24 }}
+            aria-label={t("labels.back")}
+            onClick={onDone}
+          >
+            <ChevronLeftIcon />
+          </button>
+        </Tooltip>
         <span style={{ font: "600 13px var(--ms-font-sans)", color: "var(--ms-bone)" }}>
           {t("labels.edit")}
         </span>
diff --git a/apps/web/src/components/grouped-multi-select.tsx b/apps/web/src/components/grouped-multi-select.tsx
index a0c97d3e0..b97a137dc 100644
--- a/apps/web/src/components/grouped-multi-select.tsx
+++ b/apps/web/src/components/grouped-multi-select.tsx
@@ -55,7 +55,8 @@ export interface OptionGroup {
  *
  * With `renderEdit`, the hovered or arrowed-to row shows a pencil, and → on
  * it (past the end of the typed text) does the same: the panel swaps to the
- * row's edit view until it calls `back`, or Esc.
+ * row's edit view until it calls `back`, or Esc. Each row tells assistive
+ * tech about → with `editHint`, since the pencil is hidden from it.
  */
 export function GroupedMultiSelect({
   value,
@@ -75,6 +76,7 @@ export function GroupedMultiSelect({
   createLabel,
   createExtra,
   editLabel,
+  editHint,
   renderEdit,
   panelMinWidth,
   maxLength,
@@ -106,8 +108,10 @@ export function GroupedMultiSelect({
   createLabel?: (name: string) => string;
   /** Controls under the create row; `create` runs the row, as Enter on it does. */
   createExtra?: (name: string, create: () => void) => React.ReactNode;
-  /** The pencil's title. */
+  /** The pencil's title, and the edit view's name. */
   editLabel?: string;
+  /** How → opens a row's edit view, as each row's description. */
+  editHint?: string;
   renderEdit?: (option: GroupedOption, back: () => void) => React.ReactNode;
   /** Overrides the button trigger's panel width floor, for rows or controls wider than a name. */
   panelMinWidth?: number;
@@ -316,6 +320,9 @@ export function GroupedMultiSelect({
         type="button"
         role="option"
         aria-selected={checked}
+        {...(edit
+          ? { "aria-keyshortcuts": "ArrowRight", "aria-describedby": `${listboxId}-edit` }
+          : {})}
         tabIndex={-1}
         className={index === activeIndex ? "ms-menu-item active" : "ms-menu-item"}
         onMouseEnter={() => setActiveIndex(index)}
@@ -411,10 +418,20 @@ export function GroupedMultiSelect({
               }}
             >
               {editingOption && renderEdit ? (
-                // biome-ignore lint/a11y/noStaticElementInteractions: keydown only keeps Tab in the view and takes Esc back to the list
-                <div style={{ minHeight: 0, overflowY: "auto" }} onKeyDown={onControlsKeyDown}>
+                <fieldset
+                  aria-label={editLabel}
+                  style={{
+                    minWidth: 0,
+                    minHeight: 0,
+                    margin: 0,
+                    padding: 0,
+                    border: 0,
+                    overflowY: "auto",
+                  }}
+                  onKeyDown={onControlsKeyDown}
+                >
                   {renderEdit(editingOption, () => setEditing(null))}
-                </div>
+                </fieldset>
               ) : (
                 <>
                   <input
@@ -512,6 +529,11 @@ export function GroupedMultiSelect({
                       </>
                     ) : null}
                   </div>
+                  {renderEdit && editHint ? (
+                    <span id={`${listboxId}-edit`} hidden>
+                      {editHint}
+                    </span>
+                  ) : null}
                   {creatable && createExtra ? (
                     // biome-ignore lint/a11y/noStaticElementInteractions: keydown only keeps Tab in the panel and Esc closing it
                     <div onKeyDown={onControlsKeyDown}>
diff --git a/apps/web/src/styles/components.css b/apps/web/src/styles/components.css
index 1d073fef4..924c88060 100644
--- a/apps/web/src/styles/components.css
+++ b/apps/web/src/styles/components.css
@@ -2316,9 +2316,9 @@ summary:focus-visible,
 }
 .ms-tooltip {
   position: fixed;
-  /* Modal-level so a tooltip inside a modal wins; ties with the overlay
-     resolve by DOM order — the tooltip portal mounts after the modal's. */
-  z-index: var(--ms-z-modal);
+  /* The top layer: a tooltip names something in the modal or the portaled
+     menu it opened from, so it clears both. */
+  z-index: calc(var(--ms-z-menu) + 1);
   /* The max-width below is the whole panel, padding and border included,
      which is what tooltip.tsx clamps into the viewport. */
   box-sizing: border-box;
diff --git a/apps/web/test/inboxes-screens.test.ts b/apps/web/test/inboxes-screens.test.ts
index f8793ddc6..bc0e1e544 100644
--- a/apps/web/test/inboxes-screens.test.ts
+++ b/apps/web/test/inboxes-screens.test.ts
@@ -415,7 +415,11 @@ describe("threads", () => {
       expect.stringContaining('aria-label="Purple"'),
     ]);
     expect(purple).toContain('role="radiogroup"');
-    expect(purple).toMatch(/<label class="ms-swatch custom" title="Custom color"><svg/);
+    // Named in the app's own tooltip, which shows on keyboard focus too.
+    expect(purple).toMatch(
+      /<span class="ms-tooltip-trigger inline"><label class="ms-swatch custom"><svg/,
+    );
+    expect(purple).not.toContain("title=");
     expect(purple).toContain(
       '<input type="color" class="ms-swatch-picker" aria-label="Custom color" value="#ab4aba"/>',
     );
@@ -437,7 +441,7 @@ describe("threads", () => {
       }),
     );
     expect(html).toMatch(
-      /<button type="button" class="ms-menu-trigger-bare"[^>]*aria-label="Back"/,
+      /<span class="ms-tooltip-trigger inline"><button type="button" class="ms-menu-trigger-bare"[^>]*aria-label="Back"/,
     );
     expect(html).toContain(">Edit label<");
     expect(html).toMatch(
diff --git a/apps/web/test/threads-keyboard.test.ts b/apps/web/test/threads-keyboard.test.ts
index 2fc3fe0d4..996cdeadf 100644
--- a/apps/web/test/threads-keyboard.test.ts
+++ b/apps/web/test/threads-keyboard.test.ts
@@ -162,12 +162,20 @@ describe("the labels picker", () => {
   it("opens a label's edit view with → or the pencil, without picking it", async () => {
     const onChange = vi.fn();
     const search = await openMenu(onChange);
-    // The active row carries the pencil.
+    // The active row carries the pencil; assistive tech, which the pencil
+    // is hidden from, hears about → on every row.
     const pencil = $('.ms-menu [role="option"].active .ms-menu-edit');
     expect(pencil?.getAttribute("title")).toBe("Edit label");
+    for (const option of document.querySelectorAll('.ms-menu [role="option"]')) {
+      expect(option.getAttribute("aria-keyshortcuts")).toBe("ArrowRight");
+      const hint = document.getElementById(option.getAttribute("aria-describedby") ?? "");
+      expect(hint?.textContent).toBe("Press the right arrow to edit this label");
+    }
     await click(pencil);
     expect(onChange).not.toHaveBeenCalled();
     expect($<HTMLInputElement>('.ms-menu input[aria-label="Name"]')?.value).toBe("Billing");
+    // The view names itself as focus lands in it.
+    expect($('.ms-menu fieldset[aria-label="Edit label"] input[aria-label="Name"]')).not.toBeNull();
     expect($<HTMLInputElement>('.ms-menu .ms-swatch[aria-label="Green"]')?.checked).toBe(true);
 
     await click($('.ms-menu button[aria-label="Back"]'));

From f363832654212cd5cdd97dba21d1ed02c69e7336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:56:29 -0300
Subject: [PATCH 23/24] Share the label name cap and the preview canvas color

The 64-character label name cap was declared three times: the labels
picker, the router's create and update inputs, and core's own default.
It is now LABEL_NAME_MAX in core's client-safe organize module, next to
the palette and the label limit, read by all three. The broadcast and
template previews take their canvas color from PREVIEW_CANVAS, as the
received-mail frame does, instead of their own copies.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/(dashboard)/broadcasts/parts.tsx    | 4 ++--
 apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx | 8 +++-----
 apps/web/src/app/(dashboard)/templates/html-mode.tsx | 4 ++--
 apps/web/src/server/routers/inboxes.ts               | 5 +++--
 packages/core/src/inboxes/inbox-common.ts            | 5 ++---
 packages/core/src/inboxes/organize.ts                | 3 +++
 packages/core/src/inboxes/username.ts                | 2 +-
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/broadcasts/parts.tsx b/apps/web/src/app/(dashboard)/broadcasts/parts.tsx
index 8b5f46a5b..ae495ff75 100644
--- a/apps/web/src/app/(dashboard)/broadcasts/parts.tsx
+++ b/apps/web/src/app/(dashboard)/broadcasts/parts.tsx
@@ -6,7 +6,7 @@ import { useMemo } from "react";
 import { DotParts } from "@/components/dot-parts";
 import { PreviewSchemePills } from "@/components/preview-scheme-pills";
 import type { TONE_COLOR } from "@/components/status-tile";
-import { emulateEmailScheme } from "@/lib/email-preview";
+import { emulateEmailScheme, PREVIEW_CANVAS } from "@/lib/email-preview";
 import {
   formatDayTime,
   formatFinishAbout,
@@ -470,7 +470,7 @@ export function ContentPreview({
           width: "100%",
           height: 560,
           border: 0,
-          background: scheme === "dark" ? "#111113" : "#ffffff",
+          background: PREVIEW_CANVAS[scheme],
         }}
       />
     </div>
diff --git a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
index c882b83b5..1b1cc784c 100644
--- a/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/[id]/labels.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { INBOX_LABELS_MAX, LABEL_COLORS } from "@millionsend/core/inbox-organize";
+import { INBOX_LABELS_MAX, LABEL_COLORS, LABEL_NAME_MAX } from "@millionsend/core/inbox-organize";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useId, useState } from "react";
@@ -19,8 +19,6 @@ type Label = ThreadRow["labels"][number];
 const GROUPS = [{ key: "labels", label: "" }];
 /** Room for the color swatches on one line, so the panel keeps its width as they appear. */
 const PANEL_WIDTH = 280;
-/** labels.create and labels.update take 64 characters at most. */
-const NAME_MAX = 64;
 // Text in the picker wraps at its width instead of widening it.
 const menuText = { contain: "inline-size" } as const;
 const menuError = { ...menuText, margin: "0 12px 8px", fontSize: 12 };
@@ -107,7 +105,7 @@ export function LabelsMenu({
       groups={GROUPS}
       searchPlaceholder={t("labelSearch")}
       noResultsLabel={tc("select.noResults")}
-      maxLength={NAME_MAX}
+      maxLength={LABEL_NAME_MAX}
       panelMinWidth={PANEL_WIDTH}
       onCreate={(name) => create.mutateAsync({ inboxId, name, color })}
       createLabel={(name) => t("createLabel", { name })}
@@ -292,7 +290,7 @@ export function LabelEditor({
           autoFocus
           aria-label={t("labels.name")}
           value={name}
-          maxLength={NAME_MAX}
+          maxLength={LABEL_NAME_MAX}
           onChange={(event) => setName(event.target.value)}
         />
         {error ? (
diff --git a/apps/web/src/app/(dashboard)/templates/html-mode.tsx b/apps/web/src/app/(dashboard)/templates/html-mode.tsx
index 3d923e043..2978cc36c 100644
--- a/apps/web/src/app/(dashboard)/templates/html-mode.tsx
+++ b/apps/web/src/app/(dashboard)/templates/html-mode.tsx
@@ -12,7 +12,7 @@ import { ConfirmKeycap, ModalFooter } from "@/components/modal-footer";
 import { PreviewSchemePills } from "@/components/preview-scheme-pills";
 import { BtnSpinner } from "@/components/spinner";
 import { findMatches, nearestMatch, stepMatch } from "@/lib/code-find";
-import { emulateEmailScheme } from "@/lib/email-preview";
+import { emulateEmailScheme, PREVIEW_CANVAS } from "@/lib/email-preview";
 import { type MergeFieldOption, makeMergeToken } from "@/lib/merge-fields";
 import { plainTextSource } from "@/lib/template-mode";
 import { usePreviewScheme } from "@/lib/use-preview-scheme";
@@ -268,7 +268,7 @@ function CodePreview({
       </div>
       <div
         className="ms-tpl-code-frame"
-        style={filled ? { background: scheme === "dark" ? "#111113" : "#ffffff" } : undefined}
+        style={filled ? { background: PREVIEW_CANVAS[scheme] } : undefined}
       >
         {filled ? (
           <iframe
diff --git a/apps/web/src/server/routers/inboxes.ts b/apps/web/src/server/routers/inboxes.ts
index 45fdd1ec8..61dd70ff0 100644
--- a/apps/web/src/server/routers/inboxes.ts
+++ b/apps/web/src/server/routers/inboxes.ts
@@ -47,6 +47,7 @@ import {
   updateThread,
   visibleLine,
 } from "@millionsend/core";
+import { LABEL_NAME_MAX } from "@millionsend/core/inbox-organize";
 import { INBOX_NAME_MAX } from "@millionsend/core/inbox-username";
 import { type Db, schema } from "@millionsend/db";
 import { TRPCError } from "@trpc/server";
@@ -600,7 +601,7 @@ export const inboxesRouter = router({
       .input(
         z.object({
           ...inboxRef,
-          name: z.string().trim().min(1).max(64),
+          name: z.string().trim().min(1).max(LABEL_NAME_MAX),
           color: z.string().regex(HEX_COLOR_RE).optional(),
         }),
       )
@@ -621,7 +622,7 @@ export const inboxesRouter = router({
         z.object({
           ...inboxRef,
           labelId: z.uuid(),
-          name: z.string().trim().min(1).max(64).optional(),
+          name: z.string().trim().min(1).max(LABEL_NAME_MAX).optional(),
           color: z.string().regex(HEX_COLOR_RE).optional(),
         }),
       )
diff --git a/packages/core/src/inboxes/inbox-common.ts b/packages/core/src/inboxes/inbox-common.ts
index e47419ce1..f0bce4ee7 100644
--- a/packages/core/src/inboxes/inbox-common.ts
+++ b/packages/core/src/inboxes/inbox-common.ts
@@ -3,6 +3,7 @@ import { type SQL, sql } from "drizzle-orm";
 import type { AnyPgColumn } from "drizzle-orm/pg-core";
 import type { AuditActor } from "../audit.js";
 import type { InboxActor } from "./activity.js";
+import { LABEL_NAME_MAX } from "./organize.js";
 import {
   CURSOR_NOT_FOUND_MESSAGE,
   INBOX_NOT_FOUND_MESSAGE,
@@ -42,10 +43,8 @@ export const labelNotFound = (id: string): InboxError => notFound(`Label "${id}"
 export const isInboxError = (v: unknown): v is InboxError =>
   typeof v === "object" && v !== null && "status" in v && "name" in v && "message" in v;
 
-const NAME_MAX = 64;
-
 /** A label name, or an inbox name given `max`: 1 to `max` characters after trimming, on one line. */
-export function oneLineName(value: string, max = NAME_MAX): string | InboxError {
+export function oneLineName(value: string, max = LABEL_NAME_MAX): string | InboxError {
   const name = value.trim();
   return name.length === 0 || name.length > max || /[\p{Cc}\p{Zl}\p{Zp}]/u.test(name)
     ? invalid(`name must be 1-${max} characters on one line`)
diff --git a/packages/core/src/inboxes/organize.ts b/packages/core/src/inboxes/organize.ts
index d27e76746..0a5cd8f82 100644
--- a/packages/core/src/inboxes/organize.ts
+++ b/packages/core/src/inboxes/organize.ts
@@ -23,5 +23,8 @@ export const LABEL_COLORS = {
 
 export const INBOX_LABELS_MAX = 100;
 
+/** The longest label name, in characters after trimming. */
+export const LABEL_NAME_MAX = 64;
+
 /** Days a thread stays in Trash before it is deleted. */
 export const TRASH_RETENTION_DAYS = 30;
diff --git a/packages/core/src/inboxes/username.ts b/packages/core/src/inboxes/username.ts
index e98226770..9067b102b 100644
--- a/packages/core/src/inboxes/username.ts
+++ b/packages/core/src/inboxes/username.ts
@@ -10,6 +10,6 @@ export const SHARED_USERNAME = /^(?!.*\.\.)[a-z0-9](?:[a-z0-9._-]{0,62}[a-z0-9])
 /**
  * The longest inbox name: room for any address, which is the name an inbox
  * gets when none is given (a 64-character local part, @ and a domain of up
- * to 255). Label names keep oneLineName's default of 64.
+ * to 255). Label names keep oneLineName's default, LABEL_NAME_MAX.
  */
 export const INBOX_NAME_MAX = 320;

From f118b06007c605942d429274c710cbd7f42aac70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Costa?= <tweenzx@gmail.com>
Date: Fri, 16 Oct 2026 18:56:36 -0300
Subject: [PATCH 24/24] Open the received email's events strip on its newest
 step

A message held, released and delivered fills the strip with six or seven
steps, wider than the page at 1440: Delivered, the newest node with the
pulse, ended past the edge and the Webhook node was out of view, with
macOS overlay scrollbars giving no hint. When the strip overflows it now
opens scrolled to its end, as the phone layout already leads with the
latest event; a refetch leaves the reader's own scroll be.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inboxes/received/[id]/received-email.tsx         | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
index b30deabc4..d31dd8784 100644
--- a/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
+++ b/apps/web/src/app/(dashboard)/inboxes/received/[id]/received-email.tsx
@@ -5,7 +5,7 @@ import type { inferRouterOutputs } from "@trpc/server";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import { useCallback, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Breakable } from "@/components/breakable";
 import { confirmDialog } from "@/components/confirm-dialog";
 import { CopyChip } from "@/components/copy-chip";
@@ -251,10 +251,18 @@ export function ReceivedEvents({
     times.at(-1) === null
       ? times.length - 1
       : times.lastIndexOf(Math.max(...times.map((time) => time ?? Number.NEGATIVE_INFINITY)));
+  // Wider than the page (a message held, released and delivered), the strip
+  // opens on its end: the latest step is what the page was opened for.
+  const strip = useRef<HTMLDivElement>(null);
+  // biome-ignore lint/correctness/useExhaustiveDependencies(timeline.length): only a new step moves it; a refetch leaves the reader's scroll be
+  useLayoutEffect(() => {
+    const el = strip.current;
+    if (el && el.scrollWidth > el.clientWidth) el.scrollLeft = el.scrollWidth;
+  }, [timeline.length]);
   return (
     <section style={{ marginTop: 26 }}>
       <div className="ms-microlabel">{te("detail.events")}</div>
-      <div className="ms-events">
+      <div ref={strip} className="ms-events">
         {timeline.map((entry, index) => {
           const { color, glyph } = receivedEventLook(entry.step);
           const at = times[index] ?? null;