@novacraft-engineering/mailbox 0.1.0

package/app/mail/pwa.ts

@@ -0,0 +1,191 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+
+type InstallPrompt = Event & {
+  prompt: () => Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+const standalone = () =>
+  typeof window !== 'undefined' &&
+  (window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as Navigator & { standalone?: boolean }).standalone === true)
+
+const subscribeStandalone = (notify: () => void) => {
+  const query = window.matchMedia('(display-mode: standalone)')
+  query.addEventListener('change', notify)
+  window.addEventListener('appinstalled', notify)
+  return () => {
+    query.removeEventListener('change', notify)
+    window.removeEventListener('appinstalled', notify)
+  }
+}
+
+const PERMISSION_EVENT = 'mailbox-notification-permission'
+const readPermission = (): NotificationPermission | 'unsupported' =>
+  typeof Notification === 'undefined' ? 'unsupported' : Notification.permission
+const subscribePermission = (notify: () => void) => {
+  window.addEventListener(PERMISSION_EVENT, notify)
+  return () => window.removeEventListener(PERMISSION_EVENT, notify)
+}
+
+/**
+ * Chrome only fires beforeinstallprompt once per page load and refuses to let it be
+ * replayed later, so the event is captured and held rather than requested on click.
+ */
+export function useInstall() {
+  const [deferred, setDeferred] = useState<InstallPrompt | null>(null)
+  const [accepted, setAccepted] = useState(false)
+  const installed = useSyncExternalStore(subscribeStandalone, standalone, () => false) || accepted
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js').catch(() => {})
+    }
+
+    const onPrompt = (event: Event) => {
+      event.preventDefault()
+      setDeferred(event as InstallPrompt)
+    }
+    const onInstalled = () => {
+      setAccepted(true)
+      setDeferred(null)
+    }
+
+    window.addEventListener('beforeinstallprompt', onPrompt)
+    window.addEventListener('appinstalled', onInstalled)
+    return () => {
+      window.removeEventListener('beforeinstallprompt', onPrompt)
+      window.removeEventListener('appinstalled', onInstalled)
+    }
+  }, [])
+
+  const install = useCallback(async () => {
+    if (!deferred) return 'unavailable'
+    await deferred.prompt()
+    const { outcome } = await deferred.userChoice
+    if (outcome === 'accepted') setAccepted(true)
+    setDeferred(null)
+    return outcome
+  }, [deferred])
+
+  return { canInstall: Boolean(deferred), installed, install }
+}
+
+const serverKey = (base64: string): ArrayBuffer => {
+  const padded = base64.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (base64.length % 4)) % 4)
+  return Uint8Array.from(atob(padded), char => char.charCodeAt(0)).buffer
+}
+
+/** Registers this device for pushes to the signed-in mailbox. Harmless to repeat. */
+export async function subscribePush(headers: Record<string, string>): Promise<boolean> {
+  try {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) return false
+    const registration = await navigator.serviceWorker.ready
+    let subscription = await registration.pushManager.getSubscription()
+    if (!subscription) {
+      const keyResponse = await fetch('/api/mail/push', { headers })
+      const { publicKey } = (await keyResponse.json()) as { publicKey?: string }
+      if (!publicKey) return false
+      subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: serverKey(publicKey) })
+    }
+    const saved = await fetch('/api/mail/push', {
+      method: 'POST',
+      headers: { ...headers, 'content-type': 'application/json' },
+      body: JSON.stringify(subscription.toJSON()),
+    })
+    return saved.ok
+  } catch {
+    return false
+  }
+}
+
+export async function unsubscribePush(headers: Record<string, string>): Promise<void> {
+  try {
+    if (!('serviceWorker' in navigator)) return
+    const registration = await navigator.serviceWorker.ready
+    const subscription = await registration.pushManager.getSubscription()
+    if (!subscription) return
+    await fetch(`/api/mail/push?endpoint=${encodeURIComponent(subscription.endpoint)}`, { method: 'DELETE', headers })
+    await subscription.unsubscribe()
+  } catch {
+    // Nothing to undo.
+  }
+}
+
+export function useNotifications(enabled: boolean) {
+  const permission = useSyncExternalStore(subscribePermission, readPermission, () => 'default' as const)
+  const seen = useRef<Set<string>>(new Set())
+  const primed = useRef(false)
+
+  const request = useCallback(async () => {
+    if (typeof Notification === 'undefined') return 'unsupported' as const
+    const result = await Notification.requestPermission()
+    window.dispatchEvent(new Event(PERMISSION_EVENT))
+    return result
+  }, [])
+
+  /**
+   * The first pass only records what is already in the mailbox: without it, opening the
+   * app would fire a notification for every unread message sitting there.
+   */
+  const announce = useCallback(
+    (items: Array<{ id: string; from: string; subject: string; read: boolean }>) => {
+      if (!primed.current) {
+        items.forEach(item => seen.current.add(item.id))
+        primed.current = true
+        return
+      }
+
+      const fresh = items.filter(item => !seen.current.has(item.id))
+      fresh.forEach(item => seen.current.add(item.id))
+
+      if (!enabled || permission !== 'granted' || typeof Notification === 'undefined') return
+      if (document.visibilityState === 'visible') return
+
+      const unread = fresh.filter(item => !item.read)
+      if (unread.length === 0) return
+
+      // An installed PWA on Android refuses `new Notification()` outright — it
+      // only allows the service worker to raise one. Prefer the registration and
+      // fall back to the constructor on desktop browsers without one.
+      const show = async (title: string, options: NotificationOptions) => {
+        try {
+          const registration = await navigator.serviceWorker?.ready
+          if (registration?.showNotification) {
+            await registration.showNotification(title, options)
+            return
+          }
+        } catch {
+          // Fall through to the constructor.
+        }
+        try {
+          new Notification(title, options)
+        } catch {
+          // Nothing more to try; a refused notification must not break polling.
+        }
+      }
+
+      if (unread.length === 1) {
+        void show(unread[0].from || 'New mail', {
+          body: unread[0].subject || '(no subject)',
+          icon: '/icon-192.png',
+          badge: '/icon-192.png',
+          tag: unread[0].id,
+        })
+        return
+      }
+
+      void show(`${unread.length} new messages`, {
+        body: unread.map(item => item.subject || '(no subject)').slice(0, 3).join('\n'),
+        icon: '/icon-192.png',
+        badge: '/icon-192.png',
+        tag: 'mailbox-batch',
+      })
+    },
+    [enabled, permission],
+  )
+
+  return { permission, request, announce }
+}

package/app/mail/reset/page.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { CLIENT_BRAND } from '@/lib/brand.client'
+import { Suspense, useState } from 'react'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+import styles from '../page.module.css'
+
+function ResetForm() {
+  const params = useSearchParams()
+  const token = params.get('token') ?? ''
+  const invite = params.get('invite') === '1'
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [status, setStatus] = useState<'idle' | 'saving' | 'done'>('idle')
+  const [error, setError] = useState('')
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setError('')
+    if (password.length < 10) {
+      setError('Password must be at least 10 characters')
+      return
+    }
+    if (password !== confirm) {
+      setError('Passwords do not match')
+      return
+    }
+    setStatus('saving')
+    try {
+      const response = await fetch('/api/mail/reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      })
+      const data = await response.json()
+      if (data.ok) {
+        setStatus('done')
+      } else {
+        setError(data.error ?? 'Could not reset password')
+        setStatus('idle')
+      }
+    } catch {
+      setError('Network error — try again')
+      setStatus('idle')
+    }
+  }
+
+  if (!token) {
+    return (
+      <div className={styles.loginCard}>
+        <div className={styles.loginBrand}>
+          <span className={styles.brandMark} role="img" aria-label={CLIENT_BRAND.name} />
+          <h1 className={styles.loginTitle}>Reset link needed</h1>
+        </div>
+        <p className={styles.loginSub}>This page needs a reset token. Request a fresh link from the sign-in screen.</p>
+        <Link className={styles.loginBtn} href="/mail" style={{ textAlign: 'center' }}>
+          Back to sign in
+        </Link>
+      </div>
+    )
+  }
+
+  if (status === 'done') {
+    return (
+      <div className={styles.loginCard}>
+        <div className={styles.loginBrand}>
+          <span className={styles.brandMark} role="img" aria-label={CLIENT_BRAND.name} />
+          <h1 className={styles.loginTitle}>{invite ? "You're all set" : 'Password updated'}</h1>
+        </div>
+        <p className={styles.loginSub}>
+          {invite ? 'Your mailbox is ready. Sign in with your new password.' : 'Your new password is set. Sign in with it now.'}
+        </p>
+        <Link className={styles.loginBtn} href="/mail" style={{ textAlign: 'center' }}>
+          Go to sign in
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <form className={styles.loginCard} onSubmit={submit}>
+      <div className={styles.loginBrand}>
+        <span className={styles.brandMark} role="img" aria-label={CLIENT_BRAND.name} />
+        <h1 className={styles.loginTitle}>{invite ? `Welcome to ${CLIENT_BRAND.name} Mail` : 'Set a new password'}</h1>
+      </div>
+      <p className={styles.loginSub}>
+        {invite ? 'Create a password to activate your mailbox and sign in.' : `Choose a new password for your ${CLIENT_BRAND.name} Mail account.`}
+      </p>
+      <label className={styles.loginField}>
+        <span>New password</span>
+        <div className={styles.pwWrap}>
+          <input
+            type={showPassword ? 'text' : 'password'}
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+            autoComplete="new-password"
+            required
+          />
+          <button type="button" className={styles.pwToggle} onClick={() => setShowPassword(show => !show)}>
+            {showPassword ? 'Hide' : 'Show'}
+          </button>
+        </div>
+      </label>
+      <label className={styles.loginField}>
+        <span>Confirm password</span>
+        <input
+          type={showPassword ? 'text' : 'password'}
+          value={confirm}
+          onChange={event => setConfirm(event.target.value)}
+          autoComplete="new-password"
+          required
+        />
+      </label>
+      {error && <p className={styles.loginError}>{error}</p>}
+      <button type="submit" className={styles.loginBtn} disabled={status === 'saving'}>
+        {status === 'saving' ? 'Saving…' : invite ? 'Create password' : 'Save password'}
+      </button>
+    </form>
+  )
+}
+
+export default function ResetPage() {
+  return (
+    <div className={styles.loginWrap}>
+      <Suspense fallback={<p className={styles.loginSub}>Loading…</p>}>
+        <ResetForm />
+      </Suspense>
+    </div>
+  )
+}

package/app/mail/search.ts

@@ -0,0 +1,172 @@
+/**
+ * Gmail-style query parsing for the mail list.
+ *
+ * A query is an AND of groups; a group is an OR of terms. `-` negates a term, quotes keep a
+ * phrase together, and `OR` (or `|`) joins the previous term with the next into one group.
+ * Anything without a `field:` prefix is free text and is matched against every searchable
+ * part of the message, body included.
+ */
+
+export type SearchDoc = {
+  from: string
+  to: string
+  cc: string
+  bcc: string
+  subject: string
+  body: string
+  filenames: string
+  date: number
+  /** null when the size isn't known — larger:/smaller: then leave the message in rather than dropping it. */
+  size: number | null
+  read: boolean
+  starred: boolean
+  hasAttachment: boolean
+  labels: string[]
+  folder: string
+}
+
+type Term = { negated: boolean; field: string | null; value: string }
+export type ParsedQuery = { groups: Term[][]; isEmpty: boolean }
+
+const FIELDS = new Set([
+  'from', 'to', 'cc', 'bcc', 'subject', 'body', 'label', 'filename', 'in', 'is', 'has',
+  'before', 'after', 'older_than', 'newer_than', 'larger', 'smaller',
+])
+
+function tokenize(raw: string): string[] {
+  const out: string[] = []
+  let current = ''
+  let quoted = false
+  for (const char of raw) {
+    if (char === '"') {
+      quoted = !quoted
+      continue
+    }
+    if (!quoted && /\s/.test(char)) {
+      if (current) out.push(current)
+      current = ''
+      continue
+    }
+    current += char
+  }
+  if (current) out.push(current)
+  return out
+}
+
+export function parseQuery(raw: string): ParsedQuery {
+  const groups: Term[][] = []
+  let orPending = false
+
+  for (const token of tokenize(raw)) {
+    if (/^(or|\|)$/i.test(token)) {
+      orPending = groups.length > 0
+      continue
+    }
+    let rest = token
+    let negated = false
+    if (rest.startsWith('-') && rest.length > 1) {
+      negated = true
+      rest = rest.slice(1)
+    }
+    const colon = rest.indexOf(':')
+    let field: string | null = null
+    let value = rest
+    if (colon > 0) {
+      const candidate = rest.slice(0, colon).toLowerCase()
+      if (FIELDS.has(candidate)) {
+        field = candidate
+        value = rest.slice(colon + 1)
+      }
+    }
+    if (!value) continue
+    const term: Term = { negated, field, value: value.toLowerCase() }
+    if (orPending && groups.length) groups[groups.length - 1].push(term)
+    else groups.push([term])
+    orPending = false
+  }
+
+  return { groups, isEmpty: groups.length === 0 }
+}
+
+/** "7d" / "2w" / "3m" / "1y" -> milliseconds. */
+function duration(value: string): number | null {
+  const match = value.match(/^(\d+)\s*([dwmy])$/)
+  if (!match) return null
+  const amount = Number(match[1])
+  const unit = { d: 864e5, w: 6048e5, m: 2592e6, y: 31536e6 }[match[2] as 'd' | 'w' | 'm' | 'y']
+  return amount * unit
+}
+
+/** "500k" / "5m" / "12345" -> bytes. */
+function bytes(value: string): number | null {
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*([kmg])?$/)
+  if (!match) return null
+  const scale = { k: 1024, m: 1024 ** 2, g: 1024 ** 3 }[match[2] as 'k' | 'm' | 'g'] ?? 1
+  return Number(match[1]) * scale
+}
+
+function dateValue(value: string): number | null {
+  const stamp = Date.parse(value)
+  return Number.isNaN(stamp) ? null : stamp
+}
+
+function matchTerm(term: Term, doc: SearchDoc): boolean {
+  const { field, value } = term
+  const has = (haystack: string) => haystack.toLowerCase().includes(value)
+
+  switch (field) {
+    case 'from': return has(doc.from)
+    case 'to': return has(doc.to)
+    case 'cc': return has(doc.cc)
+    case 'bcc': return has(doc.bcc)
+    case 'subject': return has(doc.subject)
+    case 'body': return has(doc.body)
+    case 'filename': return has(doc.filenames)
+    case 'label': return doc.labels.some(label => label.toLowerCase().includes(value))
+    case 'in': return doc.folder.toLowerCase() === value
+    case 'is':
+      if (value === 'unread') return !doc.read
+      if (value === 'read') return doc.read
+      if (value === 'starred') return doc.starred
+      if (value === 'unstarred') return !doc.starred
+      return true
+    case 'has':
+      if (value === 'attachment' || value === 'attachments') return doc.hasAttachment
+      if (value === 'link') return /https?:\/\//i.test(doc.body)
+      return true
+    case 'before': {
+      const stamp = dateValue(value)
+      return stamp === null ? true : doc.date < stamp
+    }
+    case 'after': {
+      const stamp = dateValue(value)
+      return stamp === null ? true : doc.date > stamp
+    }
+    case 'older_than': {
+      const span = duration(value)
+      return span === null ? true : doc.date < Date.now() - span
+    }
+    case 'newer_than': {
+      const span = duration(value)
+      return span === null ? true : doc.date > Date.now() - span
+    }
+    case 'larger': {
+      const size = bytes(value)
+      return size === null || doc.size === null ? true : doc.size > size
+    }
+    case 'smaller': {
+      const size = bytes(value)
+      return size === null || doc.size === null ? true : doc.size < size
+    }
+    default:
+      // Free text sweeps everything the message carries, body included.
+      return has(`${doc.from} ${doc.to} ${doc.cc} ${doc.subject} ${doc.body} ${doc.filenames}`)
+  }
+}
+
+export function matchesQuery(query: ParsedQuery, doc: SearchDoc): boolean {
+  if (query.isEmpty) return true
+  return query.groups.every(group =>
+    group.some(term => (term.negated ? !matchTerm(term, doc) : matchTerm(term, doc))),
+  )
+}

package/app/manifest.ts

@@ -0,0 +1,21 @@
+import type { MetadataRoute } from 'next'
+import { CLIENT_BRAND } from '@/lib/brand.client'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: `${CLIENT_BRAND.name} Mail`,
+    short_name: CLIENT_BRAND.name,
+    description: `The ${CLIENT_BRAND.name} team mailbox`,
+    start_url: '/mail',
+    scope: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: CLIENT_BRAND.accent,
+    orientation: 'portrait-primary',
+    icons: [
+      { src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+      { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+      { src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+    ],
+  }
+}

package/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/mail')
+}

package/app/robots.ts

@@ -0,0 +1,22 @@
+import type { MetadataRoute } from 'next'
+
+/**
+ * A private mailbox: no crawler is welcome, and the AI agents are named
+ * individually because several of them honour a specific disallow while
+ * ignoring the wildcard.
+ */
+const AGENTS = [
+  '*',
+  'GPTBot', 'OAI-SearchBot', 'ChatGPT-User',
+  'ClaudeBot', 'Claude-User', 'Claude-SearchBot', 'anthropic-ai',
+  'PerplexityBot', 'Perplexity-User',
+  'Google-Extended', 'Googlebot', 'Bingbot', 'Applebot', 'Applebot-Extended',
+  'CCBot', 'Amazonbot', 'meta-externalagent', 'FacebookBot',
+  'DuckAssistBot', 'cohere-ai', 'YouBot', 'Bytespider', 'Diffbot', 'ImagesiftBot',
+]
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: AGENTS.map(userAgent => ({ userAgent, disallow: '/' })),
+  }
+}