@novacraft-engineering/mailbox 0.2.1 → 0.3.0

package/app/api/mail/emails/route.ts

@@ -12,7 +12,7 @@ function fromAddressOf(email: SentEmail): string {
 
 export const runtime = 'nodejs'
 
-type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string }
+type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string; attachmentCount: number }
 
 const KNOWN_AUTO_SUBJECTS = new Set([`Reset your ${BRAND.name} Mail password`])
 
@@ -65,6 +65,7 @@ export async function GET(req: Request) {
     createdAt: item.createdAt,
     scheduledAt: null,
     lastEvent: item.lastEvent ?? '',
+    attachmentCount: item.attachmentCount ?? 0,
   }))
 
   // Sent mail is scoped the same way the inbox is: to the signed-in mailbox, whatever
@@ -106,7 +107,7 @@ export async function GET(req: Request) {
         size: null,
         read: true,
         starred: Boolean(flagOf[email.id]?.starred),
-        hasAttachment: false,
+        hasAttachment: (email.attachmentCount ?? 0) > 0,
         labels: [],
         folder: flagOf[email.id]?.trashed ? 'trash' : flagOf[email.id]?.archived ? 'archive' : 'sent',
       }),

package/app/api/mail/inbox/route.ts

@@ -37,7 +37,7 @@ export async function GET(req: Request) {
       // Counting scans the whole match. Unfiltered, the sidebar already has this number
       // from countFolders, so only a search — whose match nothing else knows — pays for it.
       threadId,
-      withTotal: !cursor && Boolean(text),
+      withTotal: !cursor && Boolean(text || params.get('from') || params.get('to') || params.get('label') || params.get('unread') || params.get('starred') || params.get('attachment')),
       unread: params.get('unread') === '1' ? true : undefined,
       starred: params.get('starred') === '1' ? true : undefined,
       hasAttachment: params.get('attachment') === '1' || undefined,

package/app/mail/Ticker.tsx

@@ -3,17 +3,49 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 import styles from './page.module.css'
 
+export const TICKER_SPOTS = [
+  { group: 'Mail list', on: false, spots: [['listFrom', 'Sender'], ['listSubject', 'Subject'], ['listSnippet', 'Preview']] },
+  { group: 'Conversation', on: true, spots: [['threadFrom', 'Sender'], ['threadSnippet', 'Preview']] },
+  { group: 'Reader', on: true, spots: [['readerFrom', 'From'], ['readerTo', 'To and Cc']] },
+  { group: 'Attachments', on: true, spots: [['attachName', 'File names in the row'], ['attachChip', 'File names in the composer']] },
+  { group: 'Reply bar', on: true, spots: [['replyRecipients', 'Recipients']] },
+] as const
+
+export type TickerSpot = (typeof TICKER_SPOTS)[number]['spots'][number][0]
+export type TickerSettings = Partial<Record<TickerSpot, boolean>>
+
+const DEFAULT_ON = new Map<string, boolean>(TICKER_SPOTS.flatMap(group => group.spots.map(([spot]) => [spot, group.on])))
+
+export function tickerDefault(spot: TickerSpot): boolean {
+  return DEFAULT_ON.get(spot) ?? true
+}
+
+export function tickerSettingsFrom(raw: unknown): TickerSettings {
+  const kept: TickerSettings = {}
+  if (raw && typeof raw === 'object') {
+    for (const [spot, value] of Object.entries(raw)) {
+      if (DEFAULT_ON.has(spot) && typeof value === 'boolean') kept[spot as TickerSpot] = value
+    }
+  }
+  return kept
+}
+
 /**
  * One line of text that, when it does not fit, glides back and forth instead of ending in
  * an ellipsis. Measured on mount and whenever the host or its text changes size.
  */
-export default function Ticker({ className, title, children }: { className?: string; title?: string; children: ReactNode }) {
+export default function Ticker({ className, title, enabled = true, children }: { className?: string; title?: string; enabled?: boolean; children: ReactNode }) {
   const host = useRef<HTMLSpanElement>(null)
   const text = useRef<HTMLSpanElement>(null)
   useEffect(() => {
     const outer = host.current
     const inner = text.current
     if (!outer || !inner) return
+    if (!enabled) {
+      delete outer.dataset.ticker
+      outer.style.removeProperty('--ticker-shift')
+      return
+    }
     const measure = () => {
       const shift = inner.scrollWidth - outer.clientWidth
       if (shift > 4) {
@@ -31,7 +63,7 @@ export default function Ticker({ className, title, children }: { className?: str
     observer.observe(outer)
     observer.observe(inner)
     return () => observer.disconnect()
-  }, [children])
+  }, [children, enabled])
   return (
     <span ref={host} className={`${className ?? ''} ${styles.tickerHost}`} title={title}>
       <span ref={text} className={styles.tickerText}>{children}</span>

package/app/mail/page.module.css

@@ -196,6 +196,7 @@
 .folderActive {
   background: var(--nc-ink-3);
   color: var(--nc-fg-1);
+  box-shadow: inset 0 0 0 1.5px var(--nc-violet-500);
 }
 .folder svg { width: 16px; height: 16px; flex-shrink: 0; }
 /* Total for the folder — plain and muted. */
@@ -527,6 +528,12 @@
   cursor: pointer;
 }
 .crossFolderHint:hover { border-color: var(--nc-violet-500); }
+.emptyNudge {
+  align-self: center;
+  margin: 2px 0 0;
+  padding: 8px 14px;
+  font-size: 13px;
+}
 .refreshBtn svg { width: 14px; height: 14px; }
 .filterChip {
   margin-left: auto;
@@ -2560,6 +2567,40 @@
   overflow: hidden;
   background: transparent;
 }
+.quoteLine {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 2px 0 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.quoteLineRule {
+  flex: 1;
+  height: 1px;
+  background: var(--nc-line-1);
+}
+.quoteLineLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 4px 11px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-3);
+  font: 500 11.5px/1 var(--nc-font-sans);
+  transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
+}
+.quoteLineLabel svg { width: 11px; height: 8px; }
+.quoteLine:hover .quoteLineLabel { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.quoteLine[aria-expanded='true'] .quoteLineLabel svg { transform: rotate(180deg); }
+
+.threadMsgStatic .threadMsgHead { cursor: default; }
 .threadMsg + .threadMsg { border-top: 1px solid var(--nc-line-1); }
 .threadMsgOpen .threadMsgHead { border-bottom: 1px solid var(--nc-line-1); }
 .threadMsgHead {
@@ -2601,6 +2642,34 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.threadMsgRecips {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  margin-top: 3px;
+  overflow: hidden;
+}
+.threadMsgRecipsText {
+  /* Hugs the addresses so Details sits beside them rather than out at the far margin. */
+  flex: 0 1 auto;
+  min-width: 0;
+  font: 400 11.5px/1.35 var(--nc-font-sans);
+  color: var(--nc-fg-3);
+}
+.threadMsgDetails {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--nc-violet-500);
+  font: 500 11px/1.35 var(--nc-font-sans);
+  cursor: pointer;
+}
+.threadMsgDetails:hover { text-decoration: underline; }
+
 .threadMsgDate {
   font: 400 11px/1 var(--nc-font-mono);
   color: var(--nc-fg-3);
@@ -3945,6 +4014,18 @@
   font: 500 14px/1.4 var(--nc-font-sans);
   color: var(--nc-fg-1);
 }
+.tickerGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+}
+.tickerGroupName {
+  font: 600 11px/1 var(--nc-font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--nc-fg-3);
+}
 .settingsToggle input {
   width: 16px;
   height: 16px;

package/app/mail/page.tsx

@@ -4,14 +4,15 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 import { extractUrls, inspectUrl, type LinkVerdict } from '@/lib/link-safety'
 import AttachmentLightbox, { attachmentKind, formatSize, type PreviewItem } from './AttachmentLightbox'
 import AccessCheck from './AccessCheck'
-import { parseQuery, matchesQuery } from './search'
+import { parseQuery, matchesQuery, serverSearchParams, splitForServer } from './search'
 import { useConfirm } from './ConfirmDialog'
 import { subscribePush, unsubscribePush, useInstall, useNotifications } from './pwa'
 import RichEditor from './RichEditor'
 import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel } from '@/lib/email-html'
 import { BUILTIN_FONTS, DEFAULT_LINE_SPACING, EMPTY_FONT, FONT_SIZES, LINE_SPACINGS, fontFaceCss, fontStack, lineSpacingOf, type BaseFont, type CustomFont, paragraphGap } from '@/lib/fonts'
 import MailSelect, { GLYPH } from './MailSelect'
-import Ticker from './Ticker'
+import Ticker, { TICKER_SPOTS, tickerDefault, tickerSettingsFrom, type TickerSettings, type TickerSpot } from './Ticker'
+import { splitQuotedTail, splitQuotedText } from './quoted'
 import { applyThreadFlagDeltas, normalizeSubject } from '@/lib/threads'
 import { defaultSignature, fillSignature } from '@/lib/default-signature'
 import styles from './page.module.css'
@@ -129,6 +130,7 @@ type SentEmail = {
   createdAt: string
   scheduledAt: string | null
   lastEvent: string
+  attachmentCount?: number
   starred: boolean
   archived: boolean
   trashed: boolean
@@ -303,6 +305,9 @@ type MailSettings = {
   mobile: string
   replyAllDefault: boolean
   replyStyle: 'panel' | 'mini'
+  /** Whether a message in a conversation folds away, or stays open so the thread reads straight through. */
+  threadMessages?: 'collapsible' | 'open'
+  ticker?: TickerSettings
   notifyEmail: string
   fonts: CustomFont[]
   defaultFont: BaseFont
@@ -1006,6 +1011,24 @@ function formatHtmlSource(html: string): string {
   return out.join('\n')
 }
 
+/**
+ * When a message in a conversation arrived, said outright rather than as "3h".
+ * A relative age suits a list being scanned; a thread being read is a record, and a record
+ * wants the day and the hour. The year appears only once it is no longer the current one.
+ */
+function formatStamp(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  const sameYear = date.getFullYear() === new Date().getFullYear()
+  return date.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    ...(sameYear ? {} : { year: 'numeric' }),
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
 function formatRelative(iso: string, now: number): string {
   const time = new Date(iso).getTime()
   if (Number.isNaN(time)) return ''
@@ -1363,9 +1386,11 @@ export default function DevMailPage() {
   const [threadOrder, setThreadOrder] = useState<'newest' | 'oldest'>('newest')
   const [threadOpening, setThreadOpening] = useState<string | null>(null)
   const [searchOpen, setSearchOpen] = useState(false)
-  const [searchPick, setSearchPick] = useState(0)
+  const [searchPick, setSearchPick] = useState(-1)
   const [threadExpanded, setThreadExpanded] = useState<Set<string>>(new Set())
   const [threadEverOpen, setThreadEverOpen] = useState<Set<string>>(new Set())
+  const [quoteOpen, setQuoteOpen] = useState<Set<string>>(new Set())
+  const [msgDetails, setMsgDetails] = useState<Set<string>>(new Set())
   const [linkVerdicts, setLinkVerdicts] = useState<Record<string, { verdict: LinkVerdict; reasons: string[] }>>({})
   const scanLinksRef = useRef<(urls: string[]) => void>(() => {})
   const [preview, setPreview] = useState<{ items: PreviewItem[]; index: number } | null>(null)
@@ -1396,6 +1421,8 @@ export default function DevMailPage() {
     } catch {}
   }, [])
   const [settings, setMailSettings] = useState<MailSettings>(DEFAULT_SETTINGS)
+  const tickerOn = (spot: TickerSpot) => settings.ticker?.[spot] ?? tickerDefault(spot)
+  const messagesAlwaysOpen = settings.threadMessages === 'open'
   const { canInstall, installed, install } = useInstall()
   const { permission: notifyPermission, request: requestNotifyPermission, announce } = useNotifications(
     settings.desktopNotifications,
@@ -1859,8 +1886,16 @@ export default function DevMailPage() {
    * not looked. Null means "no search", so the folder shows the ordinary list.
    */
   const [sentSearchResults, setSentSearchResults] = useState<SentEmail[] | null>(null)
-  const [crossFolder, setCrossFolder] = useState<{ folder: 'sent' | 'inbox'; count: number; more: boolean } | null>(null)
+  const [crossFolder, setCrossFolder] = useState<{ folder: 'sent' | 'inbox'; query: string; count: number; more: boolean } | null>(null)
   const crossFolderSeq = useRef(0)
+  const crossFolderLabel = crossFolder
+    ? `Also ${crossFolder.count.toLocaleString()}${crossFolder.more ? '+' : ''} in ${crossFolder.folder === 'sent' ? 'Sent' : 'Inbox'} →`
+    : ''
+  const followCrossFolder = () => {
+    if (!crossFolder) return
+    setFolder(crossFolder.folder)
+    setSearch(crossFolder.query)
+  }
   useEffect(() => {
     const text = search.trim()
     const seq = ++crossFolderSeq.current
@@ -1868,19 +1903,21 @@ export default function DevMailPage() {
       setCrossFolder(null)
       return
     }
+    const mirrored = text.replace(/(^|\s)(from|to):/gi, (_, lead: string, field: string) => `${lead}${field.toLowerCase() === 'from' ? 'to' : 'from'}:`)
     const timer = window.setTimeout(async () => {
       try {
         if (folder === 'sent') {
-          const response = await fetch(`/api/mail/inbox?limit=1&folder=inbox&q=${encodeURIComponent(text)}`, { headers: apiHeaders() })
+          const params = new URLSearchParams({ limit: '1', folder: 'inbox', ...serverSearchParams(mirrored) })
+          const response = await fetch(`/api/mail/inbox?${params.toString()}`, { headers: apiHeaders() })
           const data = await response.json()
           if (seq !== crossFolderSeq.current) return
-          setCrossFolder(data.ok && typeof data.total === 'number' && data.total > 0 ? { folder: 'inbox', count: data.total, more: false } : null)
+          setCrossFolder(data.ok && typeof data.total === 'number' && data.total > 0 ? { folder: 'inbox', query: mirrored, count: data.total, more: false } : null)
         } else {
-          const response = await fetch(`/api/mail/emails?q=${encodeURIComponent(text)}`, { headers: apiHeaders() })
+          const response = await fetch(`/api/mail/emails?q=${encodeURIComponent(mirrored)}`, { headers: apiHeaders() })
           const data = await response.json()
           if (seq !== crossFolderSeq.current) return
           const count = Array.isArray(data.emails) ? data.emails.length : 0
-          setCrossFolder(data.ok && count > 0 ? { folder: 'sent', count, more: Boolean(data.truncated) } : null)
+          setCrossFolder(data.ok && count > 0 ? { folder: 'sent', query: mirrored, count, more: Boolean(data.truncated) } : null)
         }
       } catch {
         if (seq === crossFolderSeq.current) setCrossFolder(null)
@@ -1940,8 +1977,7 @@ export default function DevMailPage() {
         params.set('folder', threadFolder)
         // A cursor asks for the page after a known row; without one this is the first page.
         if (cursor) params.set('cursor', cursor)
-        const text = search.trim()
-        if (text) params.set('q', text)
+        for (const [name, value] of Object.entries(serverSearchParams(search))) params.set(name, value)
         const response = await fetch(`/api/mail/inbox?${params.toString()}`, { headers: apiHeaders() })
         if (!response.ok) throw new Error(describeHttp(response.status))
         const data = await response.json().catch(() => null)
@@ -1986,8 +2022,7 @@ export default function DevMailPage() {
       const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
       params.set('limit', String(INBOX_PAGE))
       params.set('folder', threadFolder)
-      const text = search.trim()
-      if (text) params.set('q', text)
+      for (const [name, value] of Object.entries(serverSearchParams(search))) params.set(name, value)
       const response = await fetch(`/api/mail/inbox?${params.toString()}`, { headers: apiHeaders() })
       if (!response.ok) throw new Error(describeHttp(response.status))
       const data = await response.json().catch(() => null)
@@ -2609,12 +2644,12 @@ export default function DevMailPage() {
       .then(response => response.json())
       .then(data => {
         if (data.ok && data.settings) {
-          const stored = data.settings as MailSettings & { density?: string; replyStyle?: string }
+          const stored = data.settings as MailSettings & { density?: string; replyStyle?: string; ticker?: unknown; threadMessages?: string }
           // Only the roomy setting is named; anything else — unset, or the retired
           // "comfortable" — is the default. Treating every unrecognised value as roomy put
           // six of the seven mailboxes into a reduced reader none of them had asked for.
           const density: MailSettings['density'] = stored.density === 'relaxed' ? 'relaxed' : 'compact'
-          setMailSettings(current => ({ ...current, ...data.settings, density, replyStyle: stored.replyStyle === 'mini' ? 'mini' : 'panel' }))
+          setMailSettings(current => ({ ...current, ...data.settings, density, replyStyle: stored.replyStyle === 'mini' ? 'mini' : 'panel', ticker: tickerSettingsFrom(stored.ticker), threadMessages: stored.threadMessages === 'open' ? 'open' : 'collapsible' }))
           const prefs = (data.settings as MailSettings).prefs
           if (prefs?.theme) { setThemePref(prefs.theme); localStorage.setItem(LS_THEME_KEY, prefs.theme) }
           if (prefs?.accent && hexToHsl(prefs.accent)) { setAccent(prefs.accent); localStorage.setItem(LS_ACCENT_KEY, prefs.accent) }
@@ -2737,11 +2772,12 @@ export default function DevMailPage() {
 
 
   const searchQuery = useMemo(() => parseQuery(search), [search])
+  const residualQuery = useMemo(() => splitForServer(searchQuery).residual, [searchQuery])
 
   const matchesInbound = useCallback(
     (entry: InboundEmail) => {
-      if (searchQuery.isEmpty) return true
-      return matchesQuery(searchQuery, {
+      if (residualQuery.isEmpty) return true
+      return matchesQuery(residualQuery, {
         from: entry.from,
         to: entry.to.join(' '),
         cc: (entry.cc ?? []).join(' '),
@@ -2758,7 +2794,7 @@ export default function DevMailPage() {
         folder: entry.trashed ? 'trash' : entry.archived ? 'archive' : 'inbox',
       })
     },
-    [searchQuery],
+    [residualQuery],
   )
 
   const matchesSent = useCallback(
@@ -2776,7 +2812,7 @@ export default function DevMailPage() {
         size: null,
         read: true,
         starred: entry.starred,
-        hasAttachment: false,
+        hasAttachment: (entry.attachmentCount ?? 0) > 0,
         labels: [],
         folder: entry.trashed ? 'trash' : entry.archived ? 'archive' : 'sent',
       })
@@ -2977,7 +3013,7 @@ export default function DevMailPage() {
           : formatRelative(entry.createdAt, now),
       unread: false,
       starred: entry.starred,
-      hasAttachment: false,
+      hasAttachment: (entry.attachmentCount ?? 0) > 0,
       chip: (folder === 'scheduled' ? 'scheduled' : null) as string | null,
       threadCount: 1,
       latestAt: new Date(entry.createdAt).getTime(),
@@ -5204,7 +5240,7 @@ export default function DevMailPage() {
                 )}
               </button>
               <div className={styles.attachInfo}>
-                <Ticker className={styles.attachName} title={attachment.filename}>{attachment.filename}</Ticker>
+                <Ticker className={styles.attachName} title={attachment.filename} enabled={tickerOn('attachName')}>{attachment.filename}</Ticker>
                 <span className={styles.attachMeta}>
                   {attachment.size ? formatSize(attachment.size) : null}
                   {attachment.shareId ? `${attachment.size ? ' · ' : ''}shared link` : null}
@@ -5337,7 +5373,7 @@ export default function DevMailPage() {
               <span className={styles.attachThumbExt}>{extension || 'FILE'}</span>
             </span>
           )}
-          <Ticker className={styles.attachChipName} title={attachment.filename}>{attachment.filename}</Ticker>
+          <Ticker className={styles.attachChipName} title={attachment.filename} enabled={tickerOn('attachChip')}>{attachment.filename}</Ticker>
           <span className={styles.attachChipSize}>{state}</span>
           {attachment.error && attachment.file && (
             <button type="button" className={styles.attachRetry} onClick={() => retryUpload(attachment)}>
@@ -5415,6 +5451,26 @@ export default function DevMailPage() {
     return list.length ? renderAttachmentTiles(list) : null
   }
 
+  const toggleQuote = (id: string) =>
+    setQuoteOpen(current => {
+      const next = new Set(current)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  /** The line offering the repeated thread underneath a reply. */
+  const renderQuoteLine = (id: string, shown: boolean) => (
+    <button type="button" className={styles.quoteLine} aria-expanded={shown} onClick={() => toggleQuote(id)}>
+      <span className={styles.quoteLineRule} aria-hidden />
+      <span className={styles.quoteLineLabel}>
+        {ICONS.chevron}
+        {shown ? 'Hide earlier messages' : 'Show earlier messages'}
+      </span>
+      <span className={styles.quoteLineRule} aria-hidden />
+    </button>
+  )
+
   const renderInboundBody = (message: InboundEmail, framed: boolean) => {
     if (readerMode === 'plain') {
       return <pre className={styles.readerText}>{message.text?.trim() || htmlToSnippetText(message.html, null) || '(no text part)'}</pre>
@@ -5422,26 +5478,46 @@ export default function DevMailPage() {
     if (readerMode === 'html') return <pre className={styles.readerSource}>{formatHtmlSource(message.html ?? '')}</pre>
     if (readerMode === 'raw') return <pre className={styles.readerSource}>{rawInboundMessage(message)}</pre>
     // preview
-    if (!message.html) return <pre className={styles.readerText}>{message.text ?? '(no content)'}</pre>
+    if (!message.html) {
+      const plain = splitQuotedText(message.text ?? '')
+      const textShown = quoteOpen.has(message.id)
+      return (
+        <>
+          <pre className={styles.readerText}>{(textShown ? message.text : plain.head) || '(no content)'}</pre>
+          {plain.tail && renderQuoteLine(message.id, textShown)}
+        </>
+      )
+    }
+    const split = splitQuotedTail(message.html)
+    const quoteShown = quoteOpen.has(message.id)
+    const bodyHtml = split.tail && !quoteShown ? split.head : message.html
     if (framed) {
       // Thread messages auto-size to content (whole conversation scrolls as one).
       // sandbox omits allow-scripts, so no email JS runs; CSP still blocks fetches.
       return (
-        <iframe
-          className={styles.threadFrame}
-          sandbox="allow-same-origin"
-          srcDoc={frameHtml(message.html, showRemote, readerSpacing, resolvedTheme === 'dark')}
-          title="Email content"
-          onLoad={event => {
-            try {
-              const doc = event.currentTarget.contentDocument
-              if (doc) event.currentTarget.style.height = `${Math.min(1600, doc.documentElement.scrollHeight + 8)}px`
-            } catch {}
-          }}
-        />
+        <>
+          <iframe
+            className={styles.threadFrame}
+            sandbox="allow-same-origin"
+            srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')}
+            title="Email content"
+            onLoad={event => {
+              try {
+                const doc = event.currentTarget.contentDocument
+                if (doc) event.currentTarget.style.height = `${Math.min(1600, doc.documentElement.scrollHeight + 8)}px`
+              } catch {}
+            }}
+          />
+          {split.tail && renderQuoteLine(message.id, quoteShown)}
+        </>
       )
     }
-    return <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(message.html, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+    return (
+      <>
+        <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+        {split.tail && renderQuoteLine(message.id, quoteShown)}
+      </>
+    )
   }
 
   // One message open at a time — opening another collapses the rest.
@@ -5592,11 +5668,23 @@ export default function DevMailPage() {
       mine ? (detail ? htmlToSnippetText(detail.html, detail.text) : item.sent.subject) : htmlToSnippetText(item.inbound.html, item.inbound.text)
     ).slice(0, 100)
     const unread = !mine && !item.inbound.read
+    // Who each reply actually went to. A thread quietly gains and loses people in Cc, and
+    // that is the change most worth noticing partway down a conversation.
+    const recips = mine
+      ? { to: item.sent.to, cc: detail?.cc ?? [], bcc: detail?.bcc ?? [] }
+      : { to: item.inbound.to, cc: item.inbound.cc ?? [], bcc: item.inbound.bcc ?? [] }
+    const recipsLine = [
+      `to ${recips.to.join(', ') || 'you'}`,
+      recips.cc.length ? `cc ${recips.cc.join(', ')}` : '',
+      recips.bcc.length ? `bcc ${recips.bcc.join(', ')}` : '',
+    ].filter(Boolean).join('  ·  ')
+    const detailsOpen = msgDetails.has(item.id)
     const hasAttach = mine ? (detail?.attachments?.length ?? 0) > 0 : visibleAttachments(item.inbound).length > 0
+    const folds = !messagesAlwaysOpen || layout === 'bubbles'
     const shellClass =
       layout === 'bubbles'
         ? `${styles.bubble} ${mine ? styles.bubbleOut : styles.bubbleIn} ${open ? styles.bubbleOpen : ''}`
-        : `${styles.threadMsg} ${open ? styles.threadMsgOpen : ''}`
+        : `${styles.threadMsg} ${open ? styles.threadMsgOpen : ''} ${folds ? '' : styles.threadMsgStatic}`
     // Body stays mounted once opened so collapsing animates too, instead of snapping shut.
     const toggleOpen = () => {
       setThreadEverOpen(current => (current.has(item.id) ? current : new Set(current).add(item.id)))
@@ -5609,24 +5697,49 @@ export default function DevMailPage() {
             the attachment mark, and a button cannot hold another button. */}
         <div
           className={styles.threadMsgHead}
-          role="button"
-          tabIndex={0}
-          aria-expanded={open}
-          onClick={toggleOpen}
-          onKeyDown={event => {
-            if (event.key === 'Enter' || event.key === ' ') {
-              event.preventDefault()
-              toggleOpen()
-            }
-          }}
+          {...(folds
+            ? {
+                role: 'button' as const,
+                tabIndex: 0,
+                'aria-expanded': open,
+                onClick: toggleOpen,
+                onKeyDown: (event: React.KeyboardEvent) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
+                    toggleOpen()
+                  }
+                },
+              }
+            : {})}
         >
           <span className={styles.avatar}>{initial}</span>
           <span className={styles.threadMsgMeta}>
             <span className={styles.threadMsgFrom}>
               {unread && <span className={styles.unreadDot} />}
-              <Ticker className={styles.threadMsgFromText}>{from}</Ticker>
+              <Ticker className={styles.threadMsgFromText} enabled={tickerOn('threadFrom')}>{from}</Ticker>
             </span>
-            {!open && <Ticker className={styles.threadMsgSnippet}>{snippet}</Ticker>}
+            {!open && <Ticker className={styles.threadMsgSnippet} enabled={tickerOn('threadSnippet')}>{snippet}</Ticker>}
+            {open && layout !== 'bubbles' && (
+              <span className={styles.threadMsgRecips}>
+                <Ticker className={styles.threadMsgRecipsText} enabled={tickerOn('readerTo')}>{recipsLine}</Ticker>
+                <button
+                  type="button"
+                  className={styles.threadMsgDetails}
+                  aria-expanded={detailsOpen}
+                  onClick={event => {
+                    event.stopPropagation()
+                    setMsgDetails(current => {
+                      const next = new Set(current)
+                      if (next.has(item.id)) next.delete(item.id)
+                      else next.add(item.id)
+                      return next
+                    })
+                  }}
+                >
+                  {detailsOpen ? 'Hide details' : 'Details'}
+                </button>
+              </span>
+            )}
           </span>
           {hasAttach && (
             <span className={styles.threadMsgTool} title="Carries an attachment" aria-label="Carries an attachment">
@@ -5667,11 +5780,20 @@ export default function DevMailPage() {
             {ICONS.print}
           </button>
           )}
-          <span className={styles.threadMsgDate}>{formatRelative(when, now)}</span>
-          <span className={styles.threadChevron} aria-hidden>{ICONS.chevron}</span>
+          <span className={styles.threadMsgDate} title={new Date(when).toLocaleString()}>{formatStamp(when)}</span>
+          {folds && <span className={styles.threadChevron} aria-hidden>{ICONS.chevron}</span>}
         </div>
         {(open || threadEverOpen.has(item.id)) && (
           <div className={`${styles.threadMsgWrap} ${open ? styles.threadMsgWrapOpen : ''}`}>
+          {open && detailsOpen && layout !== 'bubbles' && (
+            <dl className={styles.fullHeaders}>
+              <div><dt>From</dt><dd>{mine ? 'You' : item.inbound.from}</dd></div>
+              <div><dt>To</dt><dd>{recips.to.join(', ') || '—'}</dd></div>
+              {recips.cc.length > 0 && <div><dt>Cc</dt><dd>{recips.cc.join(', ')}</dd></div>}
+              {recips.bcc.length > 0 && <div><dt>Bcc</dt><dd>{recips.bcc.join(', ')}</dd></div>}
+              <div><dt>Date</dt><dd>{new Date(when).toLocaleString()}</dd></div>
+            </dl>
+          )}
           <div className={styles.threadMsgBody}>
             {layout === 'bubbles' ? (
               mine && !detail ? (
@@ -5748,16 +5870,21 @@ export default function DevMailPage() {
             <div className={styles.readerMeta}>
               <div className={styles.avatar}>{(parseAddress(inbound.from)[0] ?? '?').toUpperCase()}</div>
               <div className={styles.readerMetaText}>
-                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`}>{inbound.from}</Ticker>
-                <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>to {inbound.to.join(', ') || 'you'}</Ticker>
-                {inbound.cc.length > 0 && <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>cc {inbound.cc.join(', ')}</Ticker>}
-              </div>
-              <div className={styles.readerDate}>
-                {new Date(inbound.receivedAt).toLocaleString()}
-                <button className={styles.headerToggle} onClick={() => setShowFullHeaders(open => !open)}>
-                  {showFullHeaders ? 'Hide details' : 'Details'}
-                </button>
+                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`} enabled={tickerOn('readerFrom')}>{inbound.from}</Ticker>
+                <span className={styles.threadMsgRecips}>
+                  <Ticker className={styles.threadMsgRecipsText} enabled={tickerOn('readerTo')}>
+                    {[
+                      `to ${inbound.to.join(', ') || 'you'}`,
+                      inbound.cc.length ? `cc ${inbound.cc.join(', ')}` : '',
+                      inbound.bcc.length ? `bcc ${inbound.bcc.join(', ')}` : '',
+                    ].filter(Boolean).join('  ·  ')}
+                  </Ticker>
+                  <button className={styles.threadMsgDetails} aria-expanded={showFullHeaders} onClick={() => setShowFullHeaders(open => !open)}>
+                    {showFullHeaders ? 'Hide details' : 'Details'}
+                  </button>
+                </span>
               </div>
+              <div className={styles.readerDate}>{new Date(inbound.receivedAt).toLocaleString()}</div>
             </div>
             {showFullHeaders && (
               <dl className={styles.fullHeaders}>
@@ -5968,7 +6095,7 @@ export default function DevMailPage() {
             <div className={readerLayout === 'bubbles' ? styles.bubbles : styles.thread}>
               {/* Bubbles stay chronological — a chat reads oldest to newest. */}
               {(readerLayout === 'bubbles' || threadOrder === 'oldest' ? unified : [...unified].reverse()).map(item =>
-                renderThreadMessage(item, threadExpanded.has(item.id), readerLayout),
+                renderThreadMessage(item, messagesAlwaysOpen || threadExpanded.has(item.id), readerLayout),
               )}
             </div>
           ) : (
@@ -6114,7 +6241,7 @@ export default function DevMailPage() {
                     title="Recipients — Cc, Bcc"
                   >
                     <span className={styles.replyRecipsChevron}>{ICONS.chevron}</span>
-                    <Ticker className={styles.replyRecipsSummary}>{recipSummary}</Ticker>
+                    <Ticker className={styles.replyRecipsSummary} enabled={tickerOn('replyRecipients')}>{recipSummary}</Ticker>
                   </button>
                 </div>
                 {replyRecipsOpen && (
@@ -6333,8 +6460,8 @@ export default function DevMailPage() {
             <div className={styles.readerMeta}>
               <div className={styles.avatar}>N</div>
               <div className={styles.readerMetaText}>
-                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`}>{selectedDetail?.from ?? selectedSent.from}</Ticker>
-                <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`}>to {selectedSent.to.join(', ')}</Ticker>
+                <Ticker className={`${styles.readerFrom} ${styles.tickerBlock}`} enabled={tickerOn('readerFrom')}>{selectedDetail?.from ?? selectedSent.from}</Ticker>
+                <Ticker className={`${styles.readerTo} ${styles.tickerBlock}`} enabled={tickerOn('readerTo')}>to {selectedSent.to.join(', ')}</Ticker>
               </div>
               <div className={styles.readerDate}>
                 {isScheduled && selectedSent.scheduledAt
@@ -6880,9 +7007,9 @@ export default function DevMailPage() {
             {ICONS.refresh}
           </button>
         </div>
-        {crossFolder && (
-          <button type="button" className={styles.crossFolderHint} onClick={() => setFolder(crossFolder.folder)}>
-            Also {crossFolder.count.toLocaleString()}{crossFolder.more ? '+' : ''} in {crossFolder.folder === 'sent' ? 'Sent' : 'Inbox'} →
+        {crossFolder && listItems.length > 0 && (
+          <button type="button" className={styles.crossFolderHint} onClick={followCrossFolder}>
+            {crossFolderLabel}
           </button>
         )}
         <div className={styles.search}>
@@ -6893,7 +7020,7 @@ export default function DevMailPage() {
             onChange={event => {
               setSearch(event.target.value)
               setSearchOpen(true)
-              setSearchPick(0)
+              setSearchPick(-1)
             }}
             onFocus={() => setSearchOpen(true)}
             onBlur={() => window.setTimeout(() => setSearchOpen(false), 120)}
@@ -6904,11 +7031,12 @@ export default function DevMailPage() {
                 setSearchPick(current => (current + 1) % searchSuggestions.length)
               } else if (event.key === 'ArrowUp') {
                 event.preventDefault()
-                setSearchPick(current => (current - 1 + searchSuggestions.length) % searchSuggestions.length)
+                setSearchPick(current => (current <= 0 ? searchSuggestions.length : current) - 1)
               } else if (event.key === 'Enter') {
                 event.preventDefault()
-                setSearch(searchSuggestions[searchPick].apply)
-                setSearchPick(0)
+                if (searchPick >= 0) setSearch(searchSuggestions[searchPick].apply)
+                setSearchPick(-1)
+                setSearchOpen(false)
               } else if (event.key === 'Escape') {
                 setSearchOpen(false)
               }
@@ -6920,7 +7048,7 @@ export default function DevMailPage() {
             </button>
           )}
           {searchOpen && searchSuggestions.length > 0 && (
-            <div className={styles.searchSuggest} role="listbox">
+            <div className={styles.searchSuggest} role="listbox" onMouseLeave={() => setSearchPick(-1)}>
               {searchSuggestions.map((suggestion, index) => (
                 <button
                   key={suggestion.apply}
@@ -6932,7 +7060,7 @@ export default function DevMailPage() {
                   onMouseDown={event => {
                     event.preventDefault()
                     setSearch(suggestion.apply)
-                    setSearchPick(0)
+                    setSearchPick(-1)
                   }}
                 >
                   <span className={styles.searchOptionLabel}>{suggestion.label}</span>
@@ -7085,6 +7213,17 @@ export default function DevMailPage() {
                 Try again
               </button>
             </div>
+          ) : listItems.length === 0 && search.trim() ? (
+            <div className={styles.emptyList}>
+              <span className={styles.emptyHex} />
+              <p className={styles.emptyTitle}>Nothing matches here</p>
+              <p className={styles.emptySub}>No mail in {folderTitles[folder]} matches “{search.trim()}”.</p>
+              {crossFolder && (
+                <button type="button" className={`${styles.crossFolderHint} ${styles.emptyNudge}`} onClick={followCrossFolder}>
+                  {crossFolderLabel}
+                </button>
+              )}
+            </div>
           ) : listItems.length === 0 ? (
             <div className={styles.emptyList}>
               <span className={styles.emptyHex} />
@@ -7181,15 +7320,15 @@ export default function DevMailPage() {
                 </span>
                 <span className={styles.itemBody}>
                   <span className={styles.itemTop}>
-                    <Ticker className={styles.itemFrom}>{item.primary}</Ticker>
+                    <Ticker className={styles.itemFrom} enabled={tickerOn('listFrom')}>{item.primary}</Ticker>
                     {item.threadCount > 1 && <span className={styles.threadBadge}>{item.threadCount}</span>}
                     <span className={styles.itemTime}>{item.time}</span>
                   </span>
                   <p className={styles.itemSubject}>
                     {item.hasAttachment && <span className={styles.itemClip}>{ICONS.attach}</span>}
-                    <Ticker className={styles.itemSubjectText}>{item.subject}</Ticker>
+                    <Ticker className={styles.itemSubjectText} enabled={tickerOn('listSubject')}>{item.subject}</Ticker>
                   </p>
-                  {item.snippet && <Ticker className={`${styles.itemSnippet} ${styles.tickerBlock}`}>{item.snippet}</Ticker>}
+                  {item.snippet && <Ticker className={`${styles.itemSnippet} ${styles.tickerBlock}`} enabled={tickerOn('listSnippet')}>{item.snippet}</Ticker>}
                   {item.labels.length > 0 && (
                     <span className={styles.itemLabels}>
                       {item.labels.map(labelId => {
@@ -7940,6 +8079,44 @@ export default function DevMailPage() {
                 ))}
               </div>
             </div>
+            <div className={styles.settingsField}>
+              <span>Conversation messages</span>
+              <div className={styles.themeRow}>
+                {([
+                  ['collapsible', 'Collapsible'],
+                  ['open', 'Always open'],
+                ] as Array<[NonNullable<MailSettings['threadMessages']>, string]>).map(([value, label]) => (
+                  <button
+                    key={value}
+                    type="button"
+                    className={`${styles.themeChip} ${(settings.threadMessages ?? 'collapsible') === value ? styles.themeChipOn : ''}`}
+                    onClick={() => setMailSettings(current => ({ ...current, threadMessages: value }))}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+              <p className={styles.settingsNote}>Collapsible folds each message away until you click it. Always open lays the whole conversation out to read straight through.</p>
+            </div>
+            <div className={styles.settingsField}>
+              <span>Scrolling text</span>
+              <p className={styles.settingsNote}>A line that does not fit glides back and forth. Turn that off anywhere you would rather see it cut short.</p>
+              {TICKER_SPOTS.map(group => (
+                <div key={group.group} className={styles.tickerGroup}>
+                  <span className={styles.tickerGroupName}>{group.group}</span>
+                  {group.spots.map(([spot, label]) => (
+                    <label key={spot} className={styles.settingsToggle}>
+                      <input
+                        type="checkbox"
+                        checked={tickerOn(spot)}
+                        onChange={event => setMailSettings(current => ({ ...current, ticker: { ...current.ticker, [spot]: event.target.checked } }))}
+                      />
+                      <span>{label}</span>
+                    </label>
+                  ))}
+                </div>
+              ))}
+            </div>
             </>)}
 
             {settingsTab === 'profile' && (<>

package/app/mail/quoted.ts

@@ -0,0 +1,162 @@
+/**
+ * Where a received message stops being new and starts repeating the thread.
+ *
+ * Mail clients append the entire earlier conversation under a reply, so a long thread
+ * carries the first message a dozen times over. The boundary is found, the repeat is
+ * folded away, and the reader is offered it rather than made to scroll past it.
+ *
+ * Every rule here was measured against the real mailbox, and the near misses matter more
+ * than the hits: a bare "From:" line fires on ordinary sentences a thousand times over, and
+ * a row of underscores is a decoration as often as a divider. Only the conjunctions are
+ * trusted — the divider AND the header block that must follow it.
+ */
+
+const CONTAINER = [
+  // Outlook stacks a prefix onto the id on every requote, so match the suffix.
+  '[id$="divRplyFwdMsg" i]',
+  // Outlook Web draws this rule immediately above that div; every instance in the corpus
+  // sits on a real boundary, while a bare <hr> is decorative half the time.
+  'hr[style*="inline-block"][style*="98%"]',
+  // Outlook desktop flattens the same boundary to a bordered div.
+  'div[style*="border-top"][style*="#E1E1E1" i]',
+  '[class*="gmail_quote_container" i]',
+  'blockquote[class*="gmail_quote" i]',
+  'blockquote[type="cite" i]',
+  'blockquote[id*="blockquote_zmail" i]',
+  '[class*="moz-cite-prefix" i]',
+].join(',')
+
+// Deliberately absent: Outlook's empty "appendonsend" anchor. It marks where typing stopped,
+// which looks like the ideal cut, but the sender's signature is sometimes emitted after it.
+
+/** A reply divider: everything below it is the thread being repeated. */
+const REPLY_DIVIDER = [
+  /^\s*On\b[\s\S]{10,220}?\bwrote:\s*$/i,
+  /^\s*-{4,}\s*On\b[\s\S]{10,220}?\bwrote\s*-{4,}\s*$/i,
+]
+
+/**
+ * A forward marker means the opposite of a reply divider: what follows is not a repeat,
+ * it is the whole point of the message. Folding it on a bare forward would leave the
+ * reader a cover note and a fold line, so it is only honoured under a real covering note.
+ */
+const FORWARD_MARKER = [
+  /^\s*-{2,20}\s*(?:Original Message|Original message|Forwarded message)\s*-{2,20}\s*$/i,
+  /^\s*Begin forwarded message:\s*$/i,
+]
+
+/** A header block — only trusted when From: is followed by Sent:/Date:, never alone. */
+const HEADER_BLOCK = /^\s*(?:\*\s*)?(?:From|De)\s*:\s*\S[\s\S]{0,400}?^\s*(?:\*\s*)?(?:Sent|Date|Enviado)\s*:/im
+
+/** Text the reader must keep: if trimming leaves less than this, nothing is trimmed. */
+const MIN_HEAD_CHARS = 25
+/** A forward needs a substantial note of its own before its body may be folded. */
+const MIN_HEAD_CHARS_FORWARD = 150
+
+type Boundary = 'reply' | 'forward' | null
+
+function quoteStart(element: Element): Boundary {
+  if (element.matches(CONTAINER)) return 'reply'
+  const text = (element.textContent ?? '').trim()
+  if (!text) return null
+  if (text.length < 400 && REPLY_DIVIDER.some(pattern => pattern.test(text))) return 'reply'
+  if (text.length < 400 && FORWARD_MARKER.some(pattern => pattern.test(text))) return 'forward'
+  // A divider drawn as a rule or a run of underscores only counts when a header block follows.
+  const looksLikeDivider = element.tagName === 'HR' || /^[_—-]{10,}$/.test(text)
+  if (looksLikeDivider) return null
+  return text.length < 1200 && HEADER_BLOCK.test(text) ? 'reply' : null
+}
+
+export type QuotedSplit = { head: string; tail: string | null }
+
+/**
+ * Splits a message body into what was written now and what is being repeated.
+ * Returns tail = null when there is no repeat, or when trimming would leave nothing to read.
+ */
+export function splitQuotedTail(html: string): QuotedSplit {
+  if (typeof window === 'undefined' || !html) return { head: html, tail: null }
+  let doc: Document
+  try {
+    doc = new DOMParser().parseFromString(html, 'text/html')
+  } catch {
+    return { head: html, tail: null }
+  }
+  const body = doc.body
+  if (!body) return { head: html, tail: null }
+
+  // Walk the outermost run of siblings, descending through wrapper divs that hold everything.
+  let scope: Element = body
+  for (let depth = 0; depth < 6; depth++) {
+    const elements = Array.from(scope.children)
+    if (elements.length !== 1 || !/^(div|table|tbody|tr|td|section|article)$/i.test(elements[0].tagName)) break
+    if (elements[0].matches(CONTAINER)) break
+    scope = elements[0]
+  }
+
+  const children = Array.from(scope.children)
+  let at = -1
+  let kind: Boundary = null
+  for (const [index, element] of children.entries()) {
+    const boundary = quoteStart(element)
+    if (boundary) { at = index; kind = boundary; break }
+  }
+  if (at <= 0) return { head: html, tail: null }
+
+  const head = children.slice(0, at)
+  const kept = head.map(element => element.textContent ?? '').join(' ').trim().length
+  if (kept < (kind === 'forward' ? MIN_HEAD_CHARS_FORWARD : MIN_HEAD_CHARS)) {
+    return { head: html, tail: null }
+  }
+  const tail = children.slice(at)
+  return {
+    head: head.map(element => element.outerHTML).join(''),
+    tail: tail.map(element => element.outerHTML).join(''),
+  }
+}
+
+/**
+ * The same boundary in a message that arrived as plain text only.
+ *
+ * Half the bodies in the archive are text with no HTML part, and they quote just as
+ * heavily — so the reader needs this as much as the HTML path. Each pattern below was
+ * counted against the real archive, and the two that looked obvious are the two that
+ * had to be rejected: a lone "From:" heads every bounce report, and a row of underscores
+ * is a confidentiality footer more often than a divider.
+ */
+const TEXT_REPLY = [
+  // A run of underscores, but only where the quoted headers actually follow it.
+  /(?:^|\r?\n)[ \t]*_{10,}[ \t]*(?:\r?\n)+(?=[ \t]*(?:>[ \t]*)*(?:From|De)[ \t]*:[ \t])/,
+  // The header block itself: From, then Sent or Date, then To or Cc.
+  /(?:^|\r?\n)(?:>[ \t]*)*(?:From|De)[ \t]*:[ \t][^\n]{1,400}(?:[ \t]*\r?\n)+(?:>[ \t]*)*(?:Sent|Date|Enviado)[ \t]*:[ \t][^\n]{1,200}(?:[ \t]*\r?\n)+(?:>[ \t]*)*(?:To|Cc|Para)[ \t]*:[ \t]/,
+  // The attribution sentence, allowed to wrap over a few lines.
+  /(?:^|\r?\n)[ \t>]*On\b(?:[^\n]*\n){0,3}?[^\n]*\bwrote:[ \t]*(?=\r?\n|$)/,
+  /(?:^|\r?\n)[ \t>]*-{4,}[ \t]*On\b[^\n]{0,300}?wrote[ \t]*-{4,}[ \t]*$/m,
+]
+
+const TEXT_FORWARD = [
+  /(?:^|\r?\n)[ \t>]*-{2,20}[ \t]?(?:Original Message|Original message|Forwarded message)[ \t]?-{2,20}[ \t]*(?=\r?\n|$)/,
+  /(?:^|\r?\n)[ \t]*Begin forwarded message:[ \t]*(?=\r?\n|$)/,
+]
+
+export type TextSplit = { head: string; tail: string | null }
+
+export function splitQuotedText(text: string): TextSplit {
+  if (!text) return { head: text, tail: null }
+  let cut = -1
+  let kind: Boundary = null
+  for (const [patterns, boundary] of [[TEXT_REPLY, 'reply'], [TEXT_FORWARD, 'forward']] as const) {
+    for (const pattern of patterns) {
+      const match = pattern.exec(text)
+      if (!match) continue
+      // Cut at the divider itself, not after the newline that introduced it.
+      const at = match.index + (/^\r?\n/.test(match[0]) ? 1 : 0)
+      if (cut === -1 || at < cut) { cut = at; kind = boundary }
+    }
+  }
+  if (cut <= 0) return { head: text, tail: null }
+  const head = text.slice(0, cut)
+  if (head.trim().length < (kind === 'forward' ? MIN_HEAD_CHARS_FORWARD : MIN_HEAD_CHARS)) {
+    return { head: text, tail: null }
+  }
+  return { head: head.replace(/\s+$/, ''), tail: text.slice(cut) }
+}

package/app/mail/search.ts

@@ -164,6 +164,56 @@ function matchTerm(term: Term, doc: SearchDoc): boolean {
   }
 }
 
+export type ServerSearch = {
+  text: string
+  from?: string
+  to?: string
+  label?: string
+  unread?: boolean
+  starred?: boolean
+  hasAttachment?: boolean
+}
+
+/**
+ * The parts of a query the inbox route can answer itself go to the server; whatever it
+ * cannot express stays behind as the residual the browser still has to check.
+ */
+export function splitForServer(query: ParsedQuery): { server: ServerSearch; residual: ParsedQuery } {
+  const server: ServerSearch = { text: '' }
+  const words: string[] = []
+  const residual: Term[][] = []
+  for (const group of query.groups) {
+    const term = group.length === 1 ? group[0] : null
+    if (!term || term.negated) {
+      residual.push(group)
+      continue
+    }
+    if (term.field === null) words.push(term.value)
+    else if (term.field === 'from' && !server.from) server.from = term.value
+    else if (term.field === 'to' && !server.to) server.to = term.value
+    else if (term.field === 'label' && !server.label) server.label = term.value
+    else if (term.field === 'is' && term.value === 'unread') server.unread = true
+    else if (term.field === 'is' && term.value === 'starred') server.starred = true
+    else if (term.field === 'has' && term.value === 'attachment') server.hasAttachment = true
+    else residual.push(group)
+  }
+  server.text = words.join(' ')
+  return { server, residual: { groups: residual, isEmpty: residual.length === 0 } }
+}
+
+export function serverSearchParams(raw: string): Record<string, string> {
+  const { server } = splitForServer(parseQuery(raw))
+  const params: Record<string, string> = {}
+  if (server.text) params.q = server.text
+  if (server.from) params.from = server.from
+  if (server.to) params.to = server.to
+  if (server.label) params.label = server.label
+  if (server.unread) params.unread = '1'
+  if (server.starred) params.starred = '1'
+  if (server.hasAttachment) params.attachment = '1'
+  return params
+}
+
 export function matchesQuery(query: ParsedQuery, doc: SearchDoc): boolean {
   if (query.isEmpty) return true
   return query.groups.every(group =>

package/lib/mailbox.ts

@@ -1551,6 +1551,8 @@ export type SentMessage = {
   lastEvent?: string | null
   /** The bucket keys that went out with it, so a forward has something of ours to copy. */
   attachments?: Array<{ filename: string; size?: number; contentType?: string; key?: string }>
+  /** How many files the list should raise a paperclip for, counted the way the inbox counts. */
+  attachmentCount?: number
 }
 
 export async function recordSentMessage(message: SentMessage): Promise<void> {
@@ -1672,6 +1674,7 @@ export async function readSentArchive(options: {
   const rows = await tagged(
     sql,
     `SELECT s.id, s.from_addr, s.to_addrs, s.cc, s.bcc, s.reply_to, s.subject, s.created_at, s.last_event,
+            json_array_length(CASE WHEN json_valid(s.attachments) THEN s.attachments ELSE '[]' END) AS attach_count,
             ${textColumn} AS text
      FROM mail_sent s LEFT JOIN mail_sent_meta m ON m.email_id = s.id
      ${where.length ? `WHERE ${where.join(' AND ')}` : ''}
@@ -1690,6 +1693,7 @@ export async function readSentArchive(options: {
     text: row.text == null ? null : String(row.text),
     createdAt: isoOrNull(row.created_at) ?? new Date(0).toISOString(),
     lastEvent: (row.last_event as string) ?? null,
+    attachmentCount: Number(row.attach_count ?? 0),
   }))
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novacraft-engineering/mailbox",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A shared webmail app: one codebase, one deployment per mailbox. Threads, a rich composer with signatures, attachments on S3-compatible storage, sharing links, full-text search, web push and PWA install.",
   "keywords": [
     "webmail",
@@ -50,7 +50,6 @@
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
-    "@vercel/blob": "^2.6.1",
     "next": "^16.3.5",
     "react": "19.2.4",
     "react-dom": "19.2.4",

package/tools/import-mbox.py

@@ -23,6 +23,7 @@ import os
 import re
 import socket
 import sys
+import sqlite3
 import threading
 import time
 import urllib.error
@@ -73,7 +74,7 @@ INBOX_COLUMNS = ('id, from_addr, to_addrs, cc, bcc, reply_to, subject, html, bod
 INSERT_INBOX = (f'INSERT INTO mail_inbox ({INBOX_COLUMNS}) VALUES ({",".join("?" * 18)}) '
                 'ON CONFLICT (id) DO NOTHING')
 INSERT_SENT = ('INSERT INTO mail_sent (id, from_addr, to_addrs, cc, bcc, reply_to, subject, html, body_text, '
-               'created_at, last_event, provider) VALUES (?,?,?,?,?,?,?,?,?,?,?,?) ON CONFLICT (id) DO NOTHING')
+               'created_at, last_event, provider, attachments) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?) ON CONFLICT (id) DO NOTHING')
 INSERT_SENT_META = ('INSERT INTO mail_sent_meta (email_id, owner, is_auto, created_at) VALUES (?,?,0,?) '
                     'ON CONFLICT (email_id) DO NOTHING')
 
@@ -332,20 +333,23 @@ STORE = 'blob'
 
 
 def stored_attachments(url, token, ids):
-    """id -> (owner, attachments) for inbox rows already stored."""
+    """id -> (owner, attachments, table) for rows already stored, in either table."""
     if not ids:
         return {}
     marks = ','.join('?' * len(ids))
     results = execute(url, token, [
         {'sql': f'SELECT id, owner, attachments FROM mail_inbox WHERE id IN ({marks})', 'args': [arg(i) for i in ids]},
+        {'sql': f'SELECT s.id, m.owner, s.attachments FROM mail_sent s LEFT JOIN mail_sent_meta m ON m.email_id = s.id '
+                f'WHERE s.id IN ({marks})', 'args': [arg(i) for i in ids]},
     ])
     found = {}
-    for row in results[0]['response']['result']['rows']:
-        try:
-            entries = json.loads(row[2]['value'] or '[]')
-        except Exception:
-            entries = []
-        found[row[0]['value']] = ((row[1]['value'] or '').lower(), entries)
+    for table, result in zip(('mail_inbox', 'mail_sent'), results[:2]):
+        for row in result['response']['result']['rows']:
+            try:
+                entries = json.loads(row[2]['value'] or '[]')
+            except Exception:
+                entries = []
+            found[row[0]['value']] = ((row[1]['value'] or '').lower(), entries, table)
     return found
 
 
@@ -356,9 +360,26 @@ def arg(value, kind='text'):
 
 
 def execute(url, token, statements):
+    if url.startswith('file:'):
+        return execute_sqlite(url[len('file:'):], statements)
     return with_retry(lambda: execute_once(url, token, statements), 'turso')
 
 
+SQLITE_LOCK = threading.Lock()
+
+
+def execute_sqlite(path, statements):
+    """The pipeline's shape over a local SQLite file, for a database that is not served over HTTP."""
+    with SQLITE_LOCK, sqlite3.connect(path, timeout=120) as connection:
+        connection.execute('PRAGMA busy_timeout = 120000')
+        results = []
+        for statement in statements:
+            cursor = connection.execute(statement['sql'], [a['value'] for a in statement['args']])
+            rows = cursor.fetchall() if cursor.description else []
+            results.append({'response': {'result': {'rows': [[{'value': cell} for cell in row] for row in rows]}}})
+        return results
+
+
 def execute_once(url, token, statements):
     requests = [{'type': 'execute', 'stmt': stmt} for stmt in statements] + [{'type': 'close'}]
     request = urllib.request.Request(
@@ -409,6 +430,7 @@ def sent_statements(row):
             arg(row['id']), arg(row['from']), arg(json.dumps(row['to'])), arg(json.dumps(row['cc'])),
             arg(json.dumps(row['bcc'])), arg(json.dumps(row['replyTo'])), arg(row['subject']),
             arg(row['html']), arg(row['text']), arg(row['receivedAt']), arg('imported'), arg('mbox'),
+            arg(json.dumps(row['attachments'])),
         ]},
         {'sql': INSERT_SENT_META, 'args': [arg(row['id']), arg(row['owner']), arg(row['receivedAt'])]},
     ]
@@ -424,6 +446,7 @@ def main():
     parser.add_argument('--batch', type=int, default=10)
     parser.add_argument('--mark-read', action='store_true')
     parser.add_argument('--skip-attachments', action='store_true')
+    parser.add_argument('--kinds', default='inbox,sent', help='which rows the attachment pass touches: inbox, sent, or both')
     parser.add_argument('--attach-only', action='store_true',
                         help='second pass: upload attachments for rows already imported and write the URLs back')
     parser.add_argument('--workers', type=int, default=8, help='parallel attachment uploads')
@@ -450,8 +473,9 @@ def main():
         print(f'upload cap: {args.max_mbps} Mbit/s', flush=True)
     url, db_token = os.environ.get('TURSO_DATABASE_URL'), os.environ.get('TURSO_AUTH_TOKEN')
     blob_token = None if args.skip_attachments else (os.environ.get('BLOB_READ_WRITE_TOKEN') if STORE == 'blob' else 's3')
-    if not args.dry_run and not (url and db_token):
+    if not args.dry_run and not (url and (db_token or url.startswith('file:'))):
         sys.exit('TURSO_DATABASE_URL and TURSO_AUTH_TOKEN must be set')
+    kinds = {kind.strip() for kind in args.kinds.split(',') if kind.strip()}
     if not args.dry_run and not args.skip_attachments and not blob_token:
         print('BLOB_READ_WRITE_TOKEN unset: attachments will be metadata only', flush=True)
 
@@ -477,6 +501,7 @@ def main():
                 local['missing'] += 1
                 continue
             row['id'] = mine
+            row['table'] = stored[mine][2]
             entries = stored[mine][1]
             want = len(row['attachments'])
             complete = lambda e: bool(e.get('key')) or (bool(e.get('url')) and not args.replace_blob)
@@ -524,7 +549,7 @@ def main():
             touched.add(row['id'])
         for row in rows:
             if row['id'] in touched or row.get('reuse'):
-                execute(url, db_token, [{'sql': 'UPDATE mail_inbox SET attachments = ? WHERE id = ?',
+                execute(url, db_token, [{'sql': f'UPDATE {row["table"]} SET attachments = ? WHERE id = ?',
                                          'args': [arg(json.dumps(row['stored'])), arg(row['id'])]}])
                 local['updated'] += 1
             for attachment in row['attachments']:
@@ -659,7 +684,7 @@ def main():
             print(f'  {row["receivedAt"][:10]} {row["kind"]:5} {flag} {row["from"][:30]:30} {row["subject"][:44]}'
                   f'  [{len(row["attachments"])} files]', flush=True)
         if args.attach_only:
-            if row['kind'] != 'inbox' or not row['attachments']:
+            if row['kind'] not in kinds or not row['attachments']:
                 continue
             chunk.append(row)
             if len(chunk) >= args.batch:

package/app/api/mail/upload/route.ts

@@ -1,43 +0,0 @@
-import { NextResponse } from 'next/server'
-import { handleUpload, type HandleUploadBody } from '@vercel/blob/client'
-import { authenticate, isLocalOrigin, verifyMailAuth } from '@/lib/dev-auth'
-
-export const runtime = 'nodejs'
-
-const MAX_UPLOAD_BYTES = 100 * 1024 * 1024
-
-export async function POST(req: Request): Promise<NextResponse> {
-  const body = (await req.json()) as HandleUploadBody
-
-  try {
-    const result = await handleUpload({
-      body,
-      request: req,
-      onBeforeGenerateToken: async (_pathname, clientPayload) => {
-        // The session cookie is the normal path; the credentials in clientPayload are only
-        // still read so a tab that signed in before sessions existed can finish its upload.
-        let authorized = isLocalOrigin(req) || Boolean(await authenticate(req))
-        if (!authorized && clientPayload) {
-          try {
-            const creds = JSON.parse(clientPayload) as { email?: string; password?: string }
-            authorized = (await verifyMailAuth(creds.email ?? '', creds.password ?? '')).ok
-          } catch {
-            authorized = false
-          }
-        }
-        if (!authorized) throw new Error('Unauthorized')
-        return {
-          addRandomSuffix: true,
-          maximumSizeInBytes: MAX_UPLOAD_BYTES,
-          tokenPayload: null,
-        }
-      },
-      onUploadCompleted: async () => {
-        // No-op: the URL is returned to the client, which attaches it on send.
-      },
-    })
-    return NextResponse.json(result)
-  } catch (error) {
-    return NextResponse.json({ error: (error as Error).message }, { status: 400 })
-  }
-}