@novacraft-engineering/mailbox 0.2.1 → 0.4.2

package/app/mail/page.tsx

@@ -4,14 +4,49 @@ 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'
+
+/** Which product an address belongs to, so the picker can wear its mark. */
+function productOf(address: string): 'vela' | 'hosting' | 'person' {
+  const local = address.split('@')[0].toLowerCase()
+  if (local === 'vela') return 'vela'
+  if (local === 'hosting') return 'hosting'
+  return 'person'
+}
+
+const MAILBOX_GLYPH: Record<'all' | 'vela' | 'hosting' | 'person', React.ReactNode> = {
+  all: (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden>
+      <rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3 6l7 5 7-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  vela: (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path d="M3.4 16h13.2L10 3.2z" fill="#2FB574" fillOpacity="0.55" />
+      <path d="M10 3.2V16" stroke="#6FD3A2" strokeWidth="1.6" />
+    </svg>
+  ),
+  hosting: (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path d="M10 2.6l6.4 3.7v7.4L10 17.4 3.6 13.7V6.3z" fill="#8B4FF5" fillOpacity="0.45" stroke="#A578FF" strokeWidth="1.4" strokeLinejoin="round" />
+    </svg>
+  ),
+  person: (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden>
+      <circle cx="10" cy="7" r="3.1" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M4.2 16.4c.8-2.7 3-4.2 5.8-4.2s5 1.5 5.8 4.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  ),
+}
+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 +164,7 @@ type SentEmail = {
   createdAt: string
   scheduledAt: string | null
   lastEvent: string
+  attachmentCount?: number
   starred: boolean
   archived: boolean
   trashed: boolean
@@ -303,6 +339,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 +1045,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 +1420,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 +1455,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,
@@ -1556,6 +1617,40 @@ export default function DevMailPage() {
     }),
     [email, password],
   )
+  const [mailboxes, setMailboxes] = useState<{ address: string; name: string }[]>([])
+  const [mailboxAll, setMailboxAll] = useState(false)
+
+  useEffect(() => {
+    if (!isLoggedIn) return
+    let live = true
+    fetch('/api/mail/mailboxes', { headers: apiHeaders() })
+      .then(response => response.json())
+      .then(data => {
+        if (!live || !data?.ok) return
+        setMailboxAll(Boolean(data.all))
+        setMailboxes(Array.isArray(data.mailboxes) ? data.mailboxes : [])
+      })
+      .catch(() => {})
+    return () => {
+      live = false
+    }
+  }, [isLoggedIn, apiHeaders])
+
+  const mailboxQuery = mailboxAll && mailbox !== 'all' ? `?mailbox=${encodeURIComponent(mailbox)}` : ''
+
+  const mailboxOptions = useMemo(
+    () => [
+      { value: 'all', label: 'All mail', hint: 'every mailbox', icon: MAILBOX_GLYPH.all },
+      ...mailboxes.map(entry => ({
+        value: entry.address,
+        label: entry.name,
+        hint: entry.address,
+        icon: MAILBOX_GLYPH[productOf(entry.address)],
+      })),
+    ],
+    [mailboxes],
+  )
+
   const [threads, setThreads] = useState<ConversationRow[]>([])
   const [threadsResolved, setThreadsResolved] = useState(false)
   const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : 'inbox'
@@ -1563,17 +1658,31 @@ export default function DevMailPage() {
   const threadsLoadedFolder = useRef<string | null>(null)
   const [threadsCursor, setThreadsCursor] = useState<string | null>(null)
   const THREAD_PAGE = 500
+  // The key carries the mailbox as well as the folder: switching tabs has to refetch, and
+  // the guard would otherwise treat the other mailbox's list as already loaded.
+  const threadKey = `${mailboxQuery}|${threadFolder}`
+
+  useEffect(() => {
+    setThreads([])
+    setThreadsCursor(null)
+    setThreadsResolved(false)
+    threadsFetch.current = null
+    threadsLoadedFolder.current = null
+  }, [mailboxQuery])
   const loadThreads = useCallback(async () => {
     if (!isLoggedIn) return
-    if (threadsFetch.current === threadFolder) return
-    threadsFetch.current = threadFolder
+    if (threadsFetch.current === threadKey) return
+    threadsFetch.current = threadKey
     try {
-      const response = await fetch(`/api/mail/threads?folder=${threadFolder}&limit=${THREAD_PAGE}`, { headers: apiHeaders() })
+      const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
+      params.set('folder', threadFolder)
+      params.set('limit', String(THREAD_PAGE))
+      const response = await fetch(`/api/mail/threads?${params.toString()}`, { headers: apiHeaders() })
       const data = await response.json().catch(() => null)
       if (data?.ok && Array.isArray(data.threads)) {
         const fresh = data.threads as ConversationRow[]
-        const replace = threadsLoadedFolder.current !== threadFolder
-        threadsLoadedFolder.current = threadFolder
+        const replace = threadsLoadedFolder.current !== threadKey
+        threadsLoadedFolder.current = threadKey
         setThreads(current => {
           if (replace || current.length === 0) return fresh
           const freshIds = new Set(fresh.map(entry => entry.threadId))
@@ -1583,10 +1692,10 @@ export default function DevMailPage() {
       }
     } catch {
     } finally {
-      if (threadsFetch.current === threadFolder) threadsFetch.current = null
+      if (threadsFetch.current === threadKey) threadsFetch.current = null
       setThreadsResolved(true)
     }
-  }, [isLoggedIn, threadFolder, apiHeaders])
+  }, [isLoggedIn, threadFolder, threadKey, mailboxQuery, apiHeaders])
 
   const threadPageInFlight = useRef(false)
   const loadMoreThreads = useCallback(async () => {
@@ -1594,7 +1703,11 @@ export default function DevMailPage() {
     threadPageInFlight.current = true
     setLoadingMore(true)
     try {
-      const response = await fetch(`/api/mail/threads?folder=${threadFolder}&limit=${THREAD_PAGE}&cursor=${encodeURIComponent(threadsCursor)}`, { headers: apiHeaders() })
+      const moreParams = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
+      moreParams.set('folder', threadFolder)
+      moreParams.set('limit', String(THREAD_PAGE))
+      moreParams.set('cursor', threadsCursor)
+      const response = await fetch(`/api/mail/threads?${moreParams.toString()}`, { headers: apiHeaders() })
       const data = await response.json().catch(() => null)
       if (!data?.ok || !Array.isArray(data.threads)) return
       const fresh = data.threads as ConversationRow[]
@@ -1608,7 +1721,7 @@ export default function DevMailPage() {
       threadPageInFlight.current = false
       setLoadingMore(false)
     }
-  }, [threadsCursor, threadFolder, apiHeaders])
+  }, [threadsCursor, threadFolder, mailboxQuery, apiHeaders])
 
   useEffect(() => {
     setThreadsResolved(false)
@@ -1821,10 +1934,8 @@ export default function DevMailPage() {
     }
   }, [])
 
-  const mailboxQuery = ''
-
-  // Nobody browses another mailbox any more, so mail always goes out as the signed-in
-  // account and there is no one to act as.
+  // Mail always goes out as the signed-in account, so browsing another mailbox never
+  // changes who a reply comes from.
   const actingAs: string | null = null
 
   const decorateSent = (data: {
@@ -1859,8 +1970,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 +1987,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 +2061,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 +2106,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 +2728,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 +2856,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 +2878,7 @@ export default function DevMailPage() {
         folder: entry.trashed ? 'trash' : entry.archived ? 'archive' : 'inbox',
       })
     },
-    [searchQuery],
+    [residualQuery],
   )
 
   const matchesSent = useCallback(
@@ -2776,7 +2896,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 +3097,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 +5324,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 +5457,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 +5535,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 +5562,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 +5752,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 +5781,50 @@ 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>
+              {folds && !open && <span className={styles.threadMsgHint}>(click to open)</span>}
             </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 +5865,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 +5955,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 +6180,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 +6326,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 +6545,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 +7092,20 @@ 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'} →
+        {mailboxAll && mailboxes.length > 1 && (
+          <div className={styles.mailboxPick}>
+            <MailSelect
+              value={mailbox}
+              options={mailboxOptions}
+              ariaLabel="Mailbox"
+              buttonClassName={styles.mailboxPickBtn}
+              onChange={value => { setMailbox(value); setSelectedId(null) }}
+            />
+          </div>
+        )}
+        {crossFolder && listItems.length > 0 && (
+          <button type="button" className={styles.crossFolderHint} onClick={followCrossFolder}>
+            {crossFolderLabel}
           </button>
         )}
         <div className={styles.search}>
@@ -6893,7 +7116,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 +7127,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 +7144,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 +7156,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 +7309,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 +7416,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 +8175,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' && (<>