@novacraft-engineering/mailbox 0.3.0 → 0.4.3

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

@@ -2,6 +2,7 @@ import { BRAND } from '@/lib/brand'
 import { NextResponse } from 'next/server'
 import { matchesQuery, parseQuery } from '@/app/mail/search'
 import { FORWARD_RECIPIENTS, mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { readSentFlags, setSentFlags, readPixelOpens, readSentMeta, setSentMetaOwner, listAccounts, readSentArchive, type SentFlags } from '@/lib/mailbox'
 
 const SHARED_ADDRESS = (process.env.RESEND_FROM ?? BRAND.supportEmail).replace(/^.*<|>$/g, '').trim().toLowerCase()
@@ -68,9 +69,9 @@ export async function GET(req: Request) {
     attachmentCount: item.attachmentCount ?? 0,
   }))
 
-  // Sent mail is scoped the same way the inbox is: to the signed-in mailbox, whatever
-  // the role. Administering accounts does not carry the right to read someone's sends.
-  const ownerScope: string = account.address ?? ' no-address'
+  // Sent mail is scoped the same way the inbox is, including the one address a
+  // deployment may name as able to read every account.
+  const ownerScope = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
 
   // Ownership is the sender identity: the `from` address if it's an accessor's, else the
   // shared inbox (admin). This attributes historical sends (all from hello@) correctly.

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

@@ -1,14 +1,15 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { countFolders, countFoldersCached } from '@/lib/mailbox'
 
 const COUNTS_TTL_MS = 20 * 1000
 const countsCache = new Map<string, { at: number; value: Awaited<ReturnType<typeof countFolders>> }>()
-async function cachedCounts(owner: string, fresh: boolean) {
-  const hit = countsCache.get(owner)
+async function cachedCounts(owner: string | null, fresh: boolean) {
+  const hit = countsCache.get(owner ?? '*all')
   if (!fresh && hit && Date.now() - hit.at < COUNTS_TTL_MS) return hit.value
-  const value = fresh ? await countFolders(owner) : await countFoldersCached(owner)
-  countsCache.set(owner, { at: Date.now(), value })
+  const value = fresh ? await countFolders(owner ?? undefined) : await countFoldersCached(owner)
+  countsCache.set(owner ?? '*all', { at: Date.now(), value })
   return value
 }
 
@@ -21,6 +22,6 @@ export async function GET(req: Request) {
   // Counts describe the signed-in mailbox, matching what the list will actually show.
   const account = await resolveAccount(req)
   const fresh = new URL(req.url).searchParams.get('fresh') === '1'
-  const counts = await cachedCounts(account.address ?? ' no-address', fresh)
+  const counts = await cachedCounts(scopeFor(account, new URL(req.url).searchParams.get('mailbox')), fresh)
   return NextResponse.json({ ok: true, counts })
 }

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

@@ -1,6 +1,7 @@
 import { createHmac, timingSafeEqual } from 'node:crypto'
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, isLocalOrigin, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { searchInbox, appendEvent, appendInbound, recordContact, setInboundFlags, setInboundFlagsForThread, setInboundLabels, setThreadSnooze, setInboxOwner, readInbox, claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent, pruneWebhookEvents, type InboundFlags } from '@/lib/mailbox'
 import { attributeOwner, forwardToAccounts, ingestReceived, parseSender } from '@/lib/receive'
 import { isBrevoInbound, normalizeBrevoInbound } from '@/lib/mail-provider'
@@ -11,9 +12,9 @@ export async function GET(req: Request) {
   const guard = await mailAuthGuard(req)
   if (guard) return guard
   const account = await resolveAccount(req)
-  // Everyone sees their own mailbox and only their own. Administering accounts is a
-  // separate power from reading other people's mail, so an admin is scoped here too.
-  const ownerFilter: string = account.address ?? ' no-address'
+  // Everyone sees their own mailbox and only their own, unless this deployment names one
+  // address that reads every account. Administering accounts stays a separate power.
+  const ownerFilter = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
   // A query or an explicit page means the caller wants the searchable, paged path.
   // Without either, fall back to readInbox so existing callers are unaffected.
   const params = new URL(req.url).searchParams
@@ -29,7 +30,7 @@ export async function GET(req: Request) {
     const folder = (['inbox', 'archive', 'trash', 'starred', 'snoozed'] as const).find(f => f === folderParam)
     const { rows, total, nextCursor } = await searchInbox({
       text,
-      owner: ownerFilter,
+      owner: ownerFilter ?? undefined,
       folder,
       limit: Number(limitRaw ?? 50) || 50,
       offset,

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

@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server'
+import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { listAccounts } from '@/lib/mailbox'
+import { readsAllInboxes } from '@/lib/scope'
+
+export const runtime = 'nodejs'
+
+export async function GET(req: Request) {
+  const guard = await mailAuthGuard(req)
+  if (guard) return guard
+  const account = await resolveAccount(req)
+
+  if (!readsAllInboxes(account)) {
+    const address = account.address
+    return NextResponse.json({
+      ok: true,
+      all: false,
+      mailboxes: address ? [{ address, name: account.name ?? address }] : [],
+    })
+  }
+
+  const accounts = await listAccounts()
+  const mailboxes = accounts
+    .filter(entry => entry.address && entry.status === 'active')
+    .map(entry => ({ address: entry.address as string, name: entry.name || entry.email }))
+  return NextResponse.json({ ok: true, all: true, mailboxes })
+}

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

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { listThreads, threadsLive, type ThreadFolder } from '@/lib/mailbox'
 
 export const runtime = 'nodejs'
@@ -13,6 +14,6 @@ export async function GET(req: Request) {
   const folderParam = url.searchParams.get('folder')
   const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed'] as const).find(f => f === folderParam) ?? 'inbox'
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 500) || 500, 1000)
-  const page = await listThreads(account.address ?? ' no-address', folder, limit, url.searchParams.get('cursor'))
+  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'))
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })
 }

package/app/mail/MailSelect.tsx

@@ -41,7 +41,7 @@ export default function MailSelect({
   label,
 }: {
   value: string
-  options: Array<{ value: string; label: string; closed?: string }>
+  options: Array<{ value: string; label: string; closed?: string; icon?: React.ReactNode; hint?: string }>
   onChange: (value: string) => void
   ariaLabel: string
   buttonClassName?: string
@@ -125,6 +125,7 @@ export default function MailSelect({
           onClick={toggle}
         >
           {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
+          {current?.icon && <span className={styles.selectOptionIcon} aria-hidden>{current.icon}</span>}
           {label && <span className={styles.selectLabel}>{label}</span>}
           <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{shown ?? placeholder}</span>
           {CHEVRON}
@@ -147,7 +148,15 @@ export default function MailSelect({
                 setOpen(false)
               }}
             >
-              {option.label}
+              {option.icon && <span className={styles.selectOptionIcon} aria-hidden>{option.icon}</span>}
+              {option.hint ? (
+                <span className={styles.selectOptionText}>
+                  <span className={styles.selectOptionLabel}>{option.label}</span>
+                  <span className={styles.selectOptionHint}>{option.hint}</span>
+                </span>
+              ) : (
+                option.label
+              )}
             </button>
           ))}
         </div>

package/app/mail/page.module.css

@@ -489,6 +489,39 @@
   gap: 10px;
   padding: 18px 18px 12px;
 }
+.mailboxPick {
+  display: flex;
+  align-items: center;
+  padding: 0 18px 10px;
+}
+.mailboxPickBtn {
+  max-width: 100%;
+  min-height: 36px;
+}
+.selectOption {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.selectOptionIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+}
+.selectOptionIcon svg { width: 18px; height: 18px; }
+.selectOptionText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.selectOptionLabel { font-weight: 600; }
+.selectOptionHint {
+  color: var(--nc-fg-3, #8a8f99);
+  font: 400 11.5px/1.2 var(--nc-font-mono);
+}
+@media (max-width: 760px) {
+  .mailboxPickBtn { min-height: 44px; }
+}
+
 .listTitle {
   font-family: var(--nc-font-display);
   font-weight: 700;
@@ -1724,7 +1757,7 @@
 .itemSubject { display: flex; align-items: center; gap: 4px; }
 .itemSubjectText { flex: 1; }
 .threadMsgFrom { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
-.threadMsgFromText { flex: 1; }
+.threadMsgFromText { flex: 0 1 auto; min-width: 0; }
 .rteColourDot {
   display: inline-block;
   width: 16px;
@@ -2642,6 +2675,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.threadMsgHint {
+  flex-shrink: 0;
+  color: var(--nc-fg-4);
+  font: 400 11px/1 var(--nc-font-sans);
+  transition: color var(--dur-fast) var(--nc-ease-out);
+}
+.threadMsgHead:hover .threadMsgHint { color: var(--nc-fg-3); }
+
 .threadMsgRecips {
   display: flex;
   align-items: baseline;

package/app/mail/page.tsx

@@ -8,9 +8,43 @@ import { parseQuery, matchesQuery, serverSearchParams, splitForServer } from './
 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 { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel, healGooglePrivateImages } 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'
+
+/** 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'
@@ -889,6 +923,14 @@ function pastedMarkdown(event: React.ClipboardEvent): string | null {
  */
 const OWN_IMAGE_HOSTS = `${CLIENT_BRAND.websiteUrl} ${CLIENT_BRAND.publicUrl}`
 
+/** Mail one of our own addresses sent, so a signature logo in it was ours to restore. */
+function sentByUs(address: string): boolean {
+  const email = (address.match(/<([^>]+)>/)?.[1] ?? address).trim().toLowerCase()
+  if (!email.includes('@')) return false
+  const domain = email.slice(email.lastIndexOf('@') + 1)
+  return MAIL_ADDRESSES.includes(email) || LOGIN_DOMAINS.includes(domain)
+}
+
 // When allowRemote is false the CSP blocks remote fetches so tracking pixels never load.
 function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SPACING, dark = false): string {
   const csp = allowRemote
@@ -1583,6 +1625,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'
@@ -1590,17 +1666,33 @@ 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
+    setInboxEmails([])
+    setServerCounts(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))
@@ -1610,10 +1702,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 () => {
@@ -1621,7 +1713,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[]
@@ -1635,7 +1731,7 @@ export default function DevMailPage() {
       threadPageInFlight.current = false
       setLoadingMore(false)
     }
-  }, [threadsCursor, threadFolder, apiHeaders])
+  }, [threadsCursor, threadFolder, mailboxQuery, apiHeaders])
 
   useEffect(() => {
     setThreadsResolved(false)
@@ -1848,10 +1944,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: {
@@ -2059,13 +2153,18 @@ export default function DevMailPage() {
    * is loaded describes the page, not the mailbox, and grows as you scroll.
    */
   const lastCountAt = useRef(0)
+  // Keyed on the mailbox as well as the clock: the throttle is there to absorb a burst of
+  // actions on one mailbox, and must never swallow the recount that a switch requires.
+  const lastCountKey = useRef<string | null>(null)
   const loadCounts = useCallback(async (force = false) => {
     // Counting reads the whole mailbox — about seventy thousand rows here — so it runs when
     // the figures can actually have changed, not on the periodic refresh. A minute's
     // throttle keeps a burst of actions from re-counting once each.
-    if (!force && Date.now() - lastCountAt.current < 300000) return
-    if (!force && document.visibilityState !== 'visible') return
+    const sameMailbox = lastCountKey.current === mailboxQuery
+    if (!force && sameMailbox && Date.now() - lastCountAt.current < 300000) return
+    if (!force && sameMailbox && document.visibilityState !== 'visible') return
     lastCountAt.current = Date.now()
+    lastCountKey.current = mailboxQuery
     setCountsLoading(true)
     try {
       const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
@@ -2120,7 +2219,7 @@ export default function DevMailPage() {
   useEffect(() => {
     if (!isLoggedIn) return
     try {
-      const cached = localStorage.getItem(`${LS_INBOX_CACHE_KEY}:${email}`)
+      const cached = localStorage.getItem(`${LS_INBOX_CACHE_KEY}:${email}${mailboxQuery}`)
       if (!cached) return
       const saved = JSON.parse(cached) as { at?: number; rows?: InboundEmail[]; threads?: ConversationRow[]; folder?: string; counts?: typeof serverCounts }
       if (saved?.counts) setServerCounts(current => current ?? saved.counts!)
@@ -2137,13 +2236,13 @@ export default function DevMailPage() {
       // A cache that will not parse is not worth a broken mailbox.
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoggedIn, email])
+  }, [isLoggedIn, email, mailboxQuery])
 
   useEffect(() => {
     if (!isLoggedIn || mailboxStale || inboxEmails.length === 0) return
     try {
       localStorage.setItem(
-        `${LS_INBOX_CACHE_KEY}:${email}`,
+        `${LS_INBOX_CACHE_KEY}:${email}${mailboxQuery}`,
         JSON.stringify({
           at: Date.now(),
           folder: threadFolder,
@@ -2155,7 +2254,7 @@ export default function DevMailPage() {
     } catch {
       // Storage full or blocked: the cache is an optimisation, never a requirement.
     }
-  }, [inboxEmails, threads, threadFolder, isLoggedIn, mailboxStale, email, serverCounts])
+  }, [inboxEmails, threads, threadFolder, isLoggedIn, mailboxStale, email, mailboxQuery, serverCounts])
 
   const typedOnce = useRef(false)
   useEffect(() => {
@@ -5490,7 +5589,10 @@ export default function DevMailPage() {
     }
     const split = splitQuotedTail(message.html)
     const quoteShown = quoteOpen.has(message.id)
-    const bodyHtml = split.tail && !quoteShown ? split.head : message.html
+    const bodyHtml = healGooglePrivateImages(
+      split.tail && !quoteShown ? split.head : message.html,
+      sentByUs(message.from) ? CLIENT_BRAND.markUrl : null,
+    )
     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.
@@ -5533,7 +5635,7 @@ export default function DevMailPage() {
         <iframe
           className={styles.threadFrame}
           sandbox="allow-same-origin"
-          srcDoc={frameHtml(detail.html, true, readerSpacing, resolvedTheme === 'dark')}
+          srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme === 'dark')}
           title="Sent email"
           onLoad={event => {
             try {
@@ -5717,6 +5819,7 @@ export default function DevMailPage() {
             <span className={styles.threadMsgFrom}>
               {unread && <span className={styles.unreadDot} />}
               <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} enabled={tickerOn('threadSnippet')}>{snippet}</Ticker>}
             {open && layout !== 'bubbles' && (
@@ -7007,6 +7110,17 @@ export default function DevMailPage() {
             {ICONS.refresh}
           </button>
         </div>
+        {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}

package/lib/email-html.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict'
-import { inlineEmailStyles, htmlToPlainText, safeHref, dropUnreachableImages, outlookSafeImages } from './email-html.ts'
+import { inlineEmailStyles, htmlToPlainText, safeHref, dropUnreachableImages, outlookSafeImages, healGooglePrivateImages } from './email-html.ts'
 
 // A paragraph with no styling of its own gets the base inline style.
 assert.match(inlineEmailStyles('<p>Hello</p>'), /<p style="font-family:Arial[^"]*">Hello<\/p>/)
@@ -72,3 +72,19 @@ assert.ok(!centred.includes('data-align'), 'the editor marker is stripped')
 // A linked logo keeps its link, inside the cell rather than around the table.
 const linked = outlookSafeImages('<a href="https://x.test"><img src="https://x.test/m.png" style="display:block;width:100px;border:1px solid #000;"></a>')
 assert.match(linked, /<td[^>]*><a href="https:\/\/x\.test"><img/, 'the anchor sits inside the cell')
+
+// A Gmail-hosted signature logo cannot load outside that mailbox: drop it, or put ours back.
+assert.equal(
+  healGooglePrivateImages('<p>Hi</p><img src="https://ci3.googleusercontent.com/mail-sig/ABC"><p>Regards</p>'),
+  '<p>Hi</p><p>Regards</p>',
+)
+assert.equal(
+  healGooglePrivateImages('<img src="https://ci3.googleusercontent.com/mail-sig/ABC" alt="logo">', 'https://mail.example.com/brand/mark.png'),
+  '<img src="https://mail.example.com/brand/mark.png" alt="logo">',
+)
+// Entity-encoded query strings still match, and everything else is left alone.
+assert.equal(healGooglePrivateImages('<img src="https://mail.google.com/mail/u/0?ui=2&amp;ik=x">'), '')
+assert.equal(
+  healGooglePrivateImages('<img src="cid:abc"><img src="https://lh3.googleusercontent.com/real.png">'),
+  '<img src="cid:abc"><img src="https://lh3.googleusercontent.com/real.png">',
+)

package/lib/email-html.ts

@@ -112,6 +112,29 @@ export function dropUnreachableImages(html: string): string {
   })
 }
 
+/**
+ * Addresses Gmail serves only to the account that owns them.
+ *
+ * A signature logo written by Gmail lives on Google's own CDN, and Takeout exports the
+ * link but never the bytes. Outside that mailbox the address answers 400, so the picture
+ * has been broken since the day the mail was exported and can never load again.
+ */
+const GOOGLE_PRIVATE_IMAGE = /^https?:\/\/(?:ci\d*\.googleusercontent\.com\/mail-sig\/|mail\.google\.com\/mail\/|docs\.google\.com\/uc\?)/i
+
+/**
+ * Removes those pictures so the signature reads as text rather than a broken icon.
+ * When `mark` is given — only for mail one of our own addresses sent, where we know whose
+ * logo it was — the tenant's own mark is put back in its place instead.
+ */
+export function healGooglePrivateImages(html: string, mark?: string | null): string {
+  return html.replace(/<img\b[^>]*>/gi, tag => {
+    const src = /\bsrc\s*=\s*["']([^"']*)["']/i.exec(tag)?.[1]?.trim() ?? ''
+    if (!GOOGLE_PRIVATE_IMAGE.test(src)) return tag
+    if (!mark) return ''
+    return tag.replace(/\bsrc\s*=\s*["'][^"']*["']/i, `src="${mark}"`)
+  })
+}
+
 export function stripCidPlaceholders(text: string): string {
   return text
     .replace(/\[cid:[^\]\n]{0,300}\]/gi, '')

package/lib/mailbox.ts

@@ -598,10 +598,10 @@ export async function invalidateCounts(owner: string | null | undefined): Promis
   }
 }
 
-export async function countFoldersCached(owner: string): Promise<FolderCounts> {
+export async function countFoldersCached(owner: string | null): Promise<FolderCounts> {
   await ensureMailSchema()
   const sql = db()
-  const key = owner.toLowerCase()
+  const key = owner === null ? '*all' : owner.toLowerCase()
   const hit = await sql`SELECT computed_at, counts FROM mail_counts_cache WHERE owner = ${key}`
   const row = hit[0]
   if (row && Date.now() - Date.parse(String(row.computed_at)) < COUNTS_CACHE_MS) {
@@ -610,7 +610,7 @@ export async function countFoldersCached(owner: string): Promise<FolderCounts> {
     // than serve a shape the caller will read as "threads are not live".
     if (parsed && 'conversations' in parsed) return parsed
   }
-  const fresh = await countFolders(owner)
+  const fresh = await countFolders(owner ?? undefined)
   await sql`
     INSERT INTO mail_counts_cache (owner, computed_at, counts)
     VALUES (${key}, ${new Date().toISOString()}, ${JSON.stringify(fresh)})
@@ -836,9 +836,9 @@ export type ThreadFolder = 'inbox' | 'archive' | 'trash' | 'starred' | 'snoozed'
 /** The newest conversations in a folder: one row each, already summarised. */
 export type ThreadPage = { rows: ThreadRow[]; nextCursor: string | null }
 
-export async function listThreads(ownerRaw: string, folder: ThreadFolder, limit: number, cursorRaw?: string | null): Promise<ThreadPage> {
+export async function listThreads(ownerRaw: string | null, folder: ThreadFolder, limit: number, cursorRaw?: string | null): Promise<ThreadPage> {
   await ensureMailSchema()
-  const owner = ownerRaw.toLowerCase()
+  const owner = ownerRaw === null ? null : ownerRaw.toLowerCase()
   const nowIso = new Date().toISOString()
   const predicate =
     folder === 'archive' ? 'archived_count > 0'
@@ -850,15 +850,31 @@ export async function listThreads(ownerRaw: string, folder: ThreadFolder, limit:
   // cursor's arguments have to follow whatever the predicate used.
   const folderArgs = folder === 'snoozed' || folder === 'inbox' ? [nowIso] : []
   const cursor = decodeCursor(cursorRaw)
-  const rows = await tagged(db(), `
-    SELECT thread_id, subject, first_at, latest_at, latest_id, count, unread_count, starred_count,
-      inbox_count, archived_count, trashed_count, attach_count, senders, snippet, labels, snoozed_until
-    FROM mail_threads WHERE owner = ? AND ${predicate}
-      ${cursor ? 'AND (latest_at < ? OR (latest_at = ? AND thread_id < ?))' : ''}
-    ORDER BY latest_at DESC, thread_id DESC LIMIT ?`,
-    cursor
-      ? [owner, ...folderArgs, cursor.receivedAt, cursor.receivedAt, cursor.id, limit]
-      : [owner, ...folderArgs, limit])
+  const cursorClause = cursor ? '(latest_at < ? OR (latest_at = ? AND thread_id < ?))' : ''
+  const cursorArgs = cursor ? [cursor.receivedAt, cursor.receivedAt, cursor.id] : []
+  // Thread rows are materialised per owner, so reading every account has to fold the same
+  // conversation back together. SQLite fills a bare column from whichever row matched the
+  // MAX in the same select, which is how subject, snippet and senders come from the latest
+  // message rather than an arbitrary one.
+  const rows = owner === null
+    ? await tagged(db(), `
+        SELECT thread_id, subject, MIN(first_at) AS first_at, MAX(latest_at) AS latest_at, latest_id,
+          SUM(count) AS count, SUM(unread_count) AS unread_count, SUM(starred_count) AS starred_count,
+          SUM(inbox_count) AS inbox_count, SUM(archived_count) AS archived_count,
+          SUM(trashed_count) AS trashed_count, SUM(attach_count) AS attach_count,
+          senders, snippet, labels, snoozed_until
+        FROM mail_threads
+        GROUP BY thread_id
+        HAVING ${predicate}${cursorClause ? ` AND ${cursorClause}` : ''}
+        ORDER BY latest_at DESC, thread_id DESC LIMIT ?`,
+        [...folderArgs, ...cursorArgs, limit])
+    : await tagged(db(), `
+        SELECT thread_id, subject, first_at, latest_at, latest_id, count, unread_count, starred_count,
+          inbox_count, archived_count, trashed_count, attach_count, senders, snippet, labels, snoozed_until
+        FROM mail_threads WHERE owner = ? AND ${predicate}
+          ${cursorClause ? `AND ${cursorClause}` : ''}
+        ORDER BY latest_at DESC, thread_id DESC LIMIT ?`,
+        [owner, ...folderArgs, ...cursorArgs, limit])
   const last = rows[rows.length - 1]
   const nextCursor = rows.length === limit && last ? encodeCursor(String(last.latest_at), String(last.thread_id)) : null
   const mapped = rows.map(row => ({

package/lib/scope.ts

@@ -0,0 +1,34 @@
+import type { MailRole } from './brand'
+
+const ALL_INBOXES = (process.env.MAIL_ALL_INBOXES_ADDRESS ?? '').trim().toLowerCase()
+
+export type Viewer = { address: string | null; role: MailRole }
+
+/**
+ * One address per deployment may read every account's mail. Naming the address rather
+ * than granting it to the admin role keeps the two powers apart: administering accounts
+ * still does not carry the right to read someone else's inbox.
+ */
+export function readsAllInboxes(viewer: Viewer): boolean {
+  if (!ALL_INBOXES) return false
+  if (viewer.role !== 'admin') return false
+  return (viewer.address ?? '').toLowerCase() === ALL_INBOXES
+}
+
+/** The owner to filter reads by, or null for every account. */
+export function inboxScope(viewer: Viewer): string | null {
+  if (readsAllInboxes(viewer)) return null
+  return viewer.address ?? ' no-address'
+}
+
+/**
+ * Which inbox a request should read. An address the viewer may not see is not an error:
+ * it falls back to their own, so a guessed parameter reveals nothing.
+ */
+export function scopeFor(viewer: Viewer, requested?: string | null): string | null {
+  const own = viewer.address ?? ' no-address'
+  const wanted = (requested ?? '').trim().toLowerCase()
+  const everything = readsAllInboxes(viewer)
+  if (!wanted || wanted === 'all') return everything ? null : own
+  return everything ? wanted : own
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novacraft-engineering/mailbox",
-  "version": "0.3.0",
+  "version": "0.4.3",
   "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",
@@ -38,7 +38,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@libsql/client": "0.17.0",
+    "@libsql/client": "0.18.0",
     "@tiptap/extension-color": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",
@@ -51,8 +51,8 @@
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
     "next": "^16.3.5",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "resend": "^6.12.3",
     "web-push": "^3.6.7"
   },
@@ -61,8 +61,8 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/web-push": "^3.6.4",
-    "eslint": "^9.39.5",
+    "eslint": "9.39.5",
     "eslint-config-next": "^16.2.6",
-    "typescript": "^5"
+    "typescript": "6.0.3"
   }
 }