@novacraft-engineering/mailbox 0.1.0 → 0.2.0

package/app/api/mail/maintenance/received/route.ts

@@ -0,0 +1,64 @@
+import { timingSafeEqual } from 'node:crypto'
+import { NextResponse } from 'next/server'
+import { claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent } from '@/lib/mailbox'
+import { findMissingReceived, ingestReceived } from '@/lib/receive'
+
+export const runtime = 'nodejs'
+export const maxDuration = 300
+
+function authorised(req: Request): boolean {
+  const secret = process.env.MAINTENANCE_TOKEN
+  if (!secret) return false
+  const token = (req.headers.get('authorization') ?? '').replace(/^Bearer\s+/i, '')
+  if (token.length !== secret.length) return false
+  try {
+    return timingSafeEqual(Buffer.from(token), Buffer.from(secret))
+  } catch {
+    return false
+  }
+}
+
+function sinceFrom(req: Request): Date {
+  const days = Math.min(Math.max(Number(new URL(req.url).searchParams.get('days') ?? 30) || 30, 1), 90)
+  return new Date(Date.now() - days * 86400_000)
+}
+
+/** What the provider received for this domain that never reached the mailbox. Read-only. */
+export async function GET(req: Request) {
+  if (!authorised(req)) return NextResponse.json({ ok: false, error: 'Unauthorised' }, { status: 403 })
+  const apiKey = process.env.RESEND_API_KEY
+  if (!apiKey) return NextResponse.json({ ok: false, error: 'No provider key' }, { status: 400 })
+  const missing = await findMissingReceived(apiKey, sinceFrom(req))
+  return NextResponse.json({ ok: true, missing })
+}
+
+/**
+ * Take in the messages the provider holds and we do not — one by `?id=`, or every one
+ * since `?days=`. Each goes through the same path a webhook delivery does, under the same
+ * kind of claim, so a delivery arriving at the same moment cannot store a second copy.
+ */
+export async function POST(req: Request) {
+  if (!authorised(req)) return NextResponse.json({ ok: false, error: 'Unauthorised' }, { status: 403 })
+  const apiKey = process.env.RESEND_API_KEY
+  if (!apiKey) return NextResponse.json({ ok: false, error: 'No provider key' }, { status: 400 })
+  const url = new URL(req.url)
+  const one = url.searchParams.get('id')
+  const targets = one ? [one] : (await findMissingReceived(apiKey, sinceFrom(req))).map(item => item.id)
+
+  const taken: Array<{ id: string; owner: string; subject: string }> = []
+  const skipped: string[] = []
+  const failed: Array<{ id: string; error: string }> = []
+  for (const id of targets) {
+    const claim = await claimWebhookEvent(`received:${id}`)
+    if (claim !== 'claimed') { skipped.push(id); continue }
+    try {
+      const result = await ingestReceived(id)
+      await completeWebhookEvent(`received:${id}`)
+      taken.push({ id, owner: result.owner, subject: result.subject })
+    } catch (err) {
+      await releaseWebhookEvent(`received:${id}`)
+      failed.push({ id, error: err instanceof Error ? err.message : String(err) })
+    }
+  }
+  return NextResponse.json({ ok: true, taken, skipped, failed })
+}

package/app/api/mail/pixel/[id]/route.ts

@@ -1,13 +1,19 @@
 import { markPixelOpened } from '@/lib/mailbox'
+import { readSession } from '@/lib/session'
 
 export const runtime = 'nodejs'
 export const dynamic = 'force-dynamic'
 
 const PIXEL = Buffer.from('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 'base64')
 
-export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+/** A signed-in user of this mailbox looking at their own mail is not a recipient opening it. */
+function ownView(req: Request): boolean {
+  return Boolean(readSession(req))
+}
+
+export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  if (id) await markPixelOpened(id).catch(() => {})
+  if (id && !ownView(req)) await markPixelOpened(id).catch(() => {})
   return new Response(PIXEL, {
     headers: {
       'Content-Type': 'image/gif',

package/app/api/mail/request-reset/route.ts

@@ -1,9 +1,10 @@
 import { BRAND } from '@/lib/brand'
 import { randomBytes } from 'node:crypto'
 import { NextResponse } from 'next/server'
-import { Resend } from 'resend'
 import { isMailAccount } from '@/lib/dev-auth'
 import { createResetToken, recordSentMeta } from '@/lib/mailbox'
+import { sendMail } from '@/lib/mail-provider'
+import { renderActionEmail } from '@/lib/emails'
 import { publicOrigin } from '@/lib/public-url'
 import { clientKey, rateLimit } from '@/lib/rate-limit'
 
@@ -35,30 +36,33 @@ export async function POST(req: Request) {
   const token = randomBytes(32).toString('hex')
   await createResetToken(email, token, Date.now() + RESET_TTL_MS)
 
-  const apiKey = process.env.RESEND_API_KEY
-  if (apiKey) {
-    const from = (process.env.MAIL_FROM ?? process.env.RESEND_FROM ?? BRAND.supportEmail)
-      .replace(/^.*<|>$/g, '')
-      .trim()
-    const resetUrl = `${publicOrigin(req)}/mail/reset?token=${token}`
-    const resend = new Resend(apiKey)
-    try {
-      const { data } = await resend.emails.send({
-        from: `${BRAND.name} Mail <${from}>`,
-        to: [email],
-        subject: `Reset your ${BRAND.name} Mail password`,
-        text: `Someone requested a password reset for ${BRAND.name} Mail.\n\nSet a new password: ${resetUrl}\n\nThis link expires in 30 minutes. If you didn't request it, ignore this email — your password won't change.`,
-        html: `<div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#1A1030;">
-          <p style="margin:0 0 12px;color:${BRAND.colors.accent};font-weight:600;">Reset your ${BRAND.name} Mail password</p>
-          <p style="margin:0 0 16px;">Click below to set a new password. The link expires in 30 minutes.</p>
-          <a href="${resetUrl}" style="display:inline-block;background:${BRAND.colors.accent};color:#fff;text-decoration:none;font-weight:600;padding:11px 20px;border-radius:8px;">Set a new password</a>
-          <p style="margin:16px 0 0;color:#8E84A8;font-size:13px;">Didn't request this? Ignore this email — your password won't change.</p>
-        </div>`,
-      })
-      if (data?.id) await recordSentMeta(data.id, null, true).catch(() => {})
-    } catch (err) {
-      console.warn('[mail] reset email failed:', err)
-    }
+  const from = (process.env.MAIL_FROM ?? process.env.RESEND_FROM ?? BRAND.supportEmail)
+    .replace(/^.*<|>$/g, '')
+    .trim()
+  const resetUrl = `${publicOrigin(req)}/mail/reset?token=${token}`
+  try {
+    const { id } = await sendMail({
+      from,
+      fromName: `${BRAND.name} Mail`,
+      to: [email],
+      subject: `Reset your ${BRAND.name} Mail password`,
+      text: `Someone requested a password reset for ${BRAND.name} Mail.\n\nSet a new password: ${resetUrl}\n\nThis link expires in 30 minutes. If you didn't request it, ignore this email — your password won't change.`,
+      html: renderActionEmail({
+        eyebrow: `${BRAND.name} · Mail`,
+        accent: BRAND.colors.accent,
+        title: 'Reset your password',
+        body: `Someone asked to reset the password for your ${BRAND.name} Mail account. Choose a new one below.`,
+        actionLabel: 'Set a new password',
+        actionUrl: resetUrl,
+        expiry: 'This link expires in 30 minutes and can be used once.',
+        footer: "Didn't request this? Ignore this email — your password will not change.",
+      }),
+    })
+    if (id) await recordSentMeta(id, null, true).catch(() => {})
+  } catch (err) {
+    // A reset that silently sends nothing is indistinguishable from one that worked.
+    console.error('[mail] reset email failed:', err)
+    return NextResponse.json({ ok: false, error: 'Could not send the reset email' }, { status: 502 })
   }
 
   return NextResponse.json({ ok: true })

package/app/api/mail/signature-logo/route.ts

@@ -5,7 +5,7 @@ import { presign } from '@/lib/r2'
 
 export const runtime = 'nodejs'
 
-const MAX_BYTES = 2 * 1024 * 1024
+const MAX_BYTES = 8 * 1024 * 1024
 const TYPES: Record<string, string> = {
   'image/png': 'png',
   'image/jpeg': 'jpg',
@@ -14,6 +14,22 @@ const TYPES: Record<string, string> = {
   'image/svg+xml': 'svg',
 }
 
+/** The type the bytes say they are; a browser's label for a file is often missing or wrong. */
+function sniffImageType(bytes: Buffer): string | null {
+  if (bytes.length >= 8 && bytes.subarray(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))) return 'image/png'
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return 'image/jpeg'
+  if (bytes.length >= 6 && bytes.subarray(0, 6).toString('latin1').startsWith('GIF8')) return 'image/gif'
+  if (bytes.length >= 12 && bytes.subarray(0, 4).toString('latin1') === 'RIFF' && bytes.subarray(8, 12).toString('latin1') === 'WEBP') return 'image/webp'
+  if (bytes.length >= 12 && bytes.subarray(4, 8).toString('latin1') === 'ftyp') {
+    const brand = bytes.subarray(8, 12).toString('latin1')
+    if (/^(heic|heix|hevc|mif1|msf1)/.test(brand)) return 'image/heic'
+    if (/^avi[fs]/.test(brand)) return 'image/avif'
+  }
+  const head = bytes.subarray(0, 512).toString('utf8').trimStart().toLowerCase()
+  if (head.startsWith('<svg') || (head.startsWith('<?xml') && head.includes('<svg'))) return 'image/svg+xml'
+  return null
+}
+
 /**
  * A signature logo has to stay reachable for whoever opens the mail, months later, so it
  * cannot be a presigned link that expires or an attachment. The bytes live in the bucket
@@ -41,16 +57,25 @@ export async function POST(req: Request) {
   const account = await resolveAccount(req)
   if (!account.email) return NextResponse.json({ ok: false, error: 'Not signed in.' }, { status: 401 })
 
-  const contentType = (req.headers.get('content-type') ?? '').split(';')[0].trim()
-  const extension = TYPES[contentType]
-  if (!extension) {
-    return NextResponse.json({ ok: false, error: 'Use a PNG, JPEG, GIF, WebP or SVG image.' }, { status: 400 })
-  }
-
   const bytes = Buffer.from(await req.arrayBuffer())
   if (bytes.length === 0) return NextResponse.json({ ok: false, error: 'That file is empty.' }, { status: 400 })
   if (bytes.length > MAX_BYTES) {
-    return NextResponse.json({ ok: false, error: 'Keep the logo under 2MB.' }, { status: 413 })
+    return NextResponse.json({ ok: false, error: 'Keep the image under 8MB.' }, { status: 413 })
+  }
+
+  const declared = (req.headers.get('content-type') ?? '').split(/[;,]/)[0].trim().toLowerCase()
+  const sniffed = sniffImageType(bytes)
+  // Raster formats always announce themselves in their first bytes; only SVG is taken on the label.
+  const contentType = sniffed && TYPES[sniffed] ? sniffed : !sniffed && declared === 'image/svg+xml' ? declared : ''
+  const extension = TYPES[contentType]
+  if (!extension) {
+    if (sniffed === 'image/heic' || sniffed === 'image/avif') {
+      return NextResponse.json(
+        { ok: false, error: 'That is a HEIC/AVIF photo, which mail apps cannot display. Export it as JPEG or PNG first.' },
+        { status: 400 },
+      )
+    }
+    return NextResponse.json({ ok: false, error: 'Use a PNG, JPEG, GIF, WebP or SVG image.' }, { status: 400 })
   }
 
   // Content-addressed, so re-uploading the same logo does not pile up copies.

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

@@ -11,7 +11,7 @@ export async function GET(req: Request) {
   const account = await resolveAccount(req)
   const url = new URL(req.url)
   const folderParam = url.searchParams.get('folder')
-  const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred'] as const).find(f => f === folderParam) ?? 'inbox'
+  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'))
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })

package/app/brand/[file]/placeholder.ts

@@ -0,0 +1,70 @@
+export const PLACEHOLDER_MARK = Buffer.from(
+  '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' +
+  'A7IzV23ru0wqAAAAAElFTkSuQmCC',
+  'base64',
+)

package/app/brand/[file]/route.ts

@@ -1,11 +1,14 @@
 import { readFile } from 'node:fs/promises'
 import { extname, join } from 'node:path'
 import { NextResponse } from 'next/server'
+import { PLACEHOLDER_MARK } from './placeholder'
 
 export const runtime = 'nodejs'
 
 const DIR = process.env.BRAND_ASSET_DIR ?? '/data/brand'
 
+const PLACEHOLDER_FILES = new Set(['mark.png', 'mark-email.png', 'logo.png'])
+
 const TYPES: Record<string, string> = {
   '.png': 'image/png',
   '.jpg': 'image/jpeg',
@@ -32,6 +35,9 @@ export async function GET(_request: Request, { params }: { params: Promise<{ fil
       headers: { 'content-type': type, 'cache-control': 'public, max-age=86400' },
     })
   } catch {
-    return new NextResponse('Not found', { status: 404 })
+    if (!PLACEHOLDER_FILES.has(file)) return new NextResponse('Not found', { status: 404 })
+    return new NextResponse(new Uint8Array(PLACEHOLDER_MARK), {
+      headers: { 'content-type': 'image/png', 'cache-control': 'public, max-age=3600' },
+    })
   }
 }

package/app/layout.tsx

@@ -1,6 +1,6 @@
 import { BRAND } from '@/lib/brand'
 import type { Metadata, Viewport } from 'next'
-import type { ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import './globals.css'
 
 export const metadata: Metadata = {
@@ -19,12 +19,20 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   themeColor: BRAND.colors.accent,
   viewportFit: 'cover',
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 }
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body
+        style={{ ['--brand-mark' as string]: `url('${BRAND.chromeMarkUrl}')` } as CSSProperties}
+      >
+        {children}
+      </body>
     </html>
   )
 }

package/app/mail/MailSelect.tsx

@@ -27,6 +27,9 @@ export default function MailSelect({
   placeholder = 'Select',
   editable = false,
   optionStyle,
+  prefix,
+  compact = false,
+  title,
 }: {
   value: string
   options: Array<{ value: string; label: string }>
@@ -37,6 +40,11 @@ export default function MailSelect({
   /** Typed values are accepted too: committed on Enter or when the field loses focus. */
   editable?: boolean
   optionStyle?: (value: string) => React.CSSProperties
+  /** A quiet glyph before the value, so three selects in a row can be told apart. */
+  prefix?: React.ReactNode
+  /** Closed, show only the glyph; the value stays in the title and the menu. */
+  compact?: boolean
+  title?: string
 }) {
   const [open, setOpen] = useState(false)
   const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({})
@@ -76,7 +84,8 @@ export default function MailSelect({
   return (
     <span className={styles.select} ref={wrapRef}>
       {editable ? (
-        <span ref={anchorRef as React.RefObject<HTMLSpanElement>} className={`${styles.selectBtn} ${styles.selectEditable} ${buttonClassName ?? ''}`}>
+        <span ref={anchorRef as React.RefObject<HTMLSpanElement>} className={`${styles.selectBtn} ${styles.selectEditable} ${buttonClassName ?? ''}`} title={title}>
+          {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
           <input
             className={styles.selectInput}
             aria-label={ariaLabel}
@@ -104,10 +113,12 @@ export default function MailSelect({
           className={`${styles.selectBtn} ${buttonClassName ?? ''}`}
           aria-haspopup="listbox"
           aria-expanded={open}
-          aria-label={ariaLabel}
+          aria-label={compact ? `${ariaLabel}: ${current?.label ?? placeholder}` : ariaLabel}
+          title={title ?? (compact ? `${ariaLabel}: ${current?.label ?? placeholder}` : undefined)}
           onClick={toggle}
         >
-          <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{current?.label ?? placeholder}</span>
+          {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
+          {!compact && <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{current?.label ?? placeholder}</span>}
           {CHEVRON}
         </button>
       )}