@novacraft-engineering/mailbox 0.4.28 → 0.4.30

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

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
 import { scopeFor } from '@/lib/scope'
-import { countFolders, countFoldersCached } from '@/lib/mailbox'
+import { countFilteredThreads, countFolders, countFoldersCached, inboxFiltersFor } from '@/lib/mailbox'
 
 /**
  * Counts come from the durable cache, which every write that moves mail clears. An extra
@@ -22,6 +22,16 @@ 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(scopeFor(account, new URL(req.url).searchParams.get('mailbox')), fresh)
-  return NextResponse.json({ ok: true, counts })
+  const owner = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
+  const [counts, filtered] = await Promise.all([
+    cachedCounts(owner, fresh),
+    inboxFiltersFor(account.email || 'local@dev').then(filters => countFilteredThreads(owner, filters)),
+  ])
+  // The cache is per mailbox and the rules are per person, so the rules come off afterwards.
+  const conversations = counts.conversations && {
+    ...counts.conversations,
+    inbox: Math.max(0, counts.conversations.inbox - filtered.total),
+    unread: Math.max(0, counts.conversations.unread - filtered.unread),
+  }
+  return NextResponse.json({ ok: true, counts: { ...counts, conversations, filtered } })
 }

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

@@ -2,7 +2,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, setInboundSpam, setInboundFlagsForThread, setInboundLabels, setThreadSnooze, setInboxOwner, readInbox, claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent, pruneWebhookEvents, type InboundFlags } from '@/lib/mailbox'
+import { searchInbox, appendEvent, appendInbound, recordContact, setInboundFlags, setInboundSpam, setInboundFlagsForThread, setInboundLabels, setThreadSnooze, setInboxOwner, readInbox, trustSenderOf, claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent, pruneWebhookEvents, type InboundFlags } from '@/lib/mailbox'
 import { addressedToUs, attributeOwner, forwardToAccounts, ingestReceived, parseSender } from '@/lib/receive'
 import { isBrevoInbound, normalizeBrevoInbound } from '@/lib/mail-provider'
 
@@ -57,7 +57,7 @@ export async function GET(req: Request) {
 export async function PATCH(req: Request) {
   const guard = await mailAuthGuard(req)
   if (guard) return guard
-  let body: { id?: string; ids?: string[]; threadId?: string; labels?: string[]; owner?: string; snoozedUntil?: string | null; spam?: boolean } & InboundFlags
+  let body: { id?: string; ids?: string[]; threadId?: string; labels?: string[]; owner?: string; snoozedUntil?: string | null; spam?: boolean; trust?: boolean } & InboundFlags
   try {
     body = await req.json()
   } catch {
@@ -110,6 +110,10 @@ export async function PATCH(req: Request) {
     const changed = await setInboundFlagsForThread(account.address ?? ' no-address', body.threadId, flags)
     return NextResponse.json({ ok: true, ids: changed })
   }
+  if (body.trust === true) {
+    const cleared = (await Promise.all(ids.map(id => trustSenderOf(id)))).flat()
+    return NextResponse.json({ ok: true, ids: cleared })
+  }
   // Quarantine is its own move: it teaches the sender's standing, which a flag does not.
   if (body.spam !== undefined) {
     await Promise.all(ids.map(id => setInboundSpam(id, Boolean(body.spam))))

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

@@ -27,6 +27,7 @@ export async function POST(req: Request) {
   const result = await rejudgeStored({
     before: url.searchParams.get('before') ?? undefined,
     limit: Number(url.searchParams.get('limit') ?? 200) || 200,
+    flaggedOnly: url.searchParams.get('flagged') === '1',
   })
   return NextResponse.json({ ok: true, ...result })
 }

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

@@ -1,7 +1,7 @@
 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'
+import { inboxFiltersFor, listThreads, threadsLive, type ThreadFolder } from '@/lib/mailbox'
 
 export const runtime = 'nodejs'
 
@@ -12,8 +12,9 @@ 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', 'snoozed', 'spam'] as const).find(f => f === folderParam) ?? 'inbox'
+  const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed', 'spam', 'filtered'] as const).find(f => f === folderParam) ?? 'inbox'
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 500) || 500, 1000)
-  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'))
+  const filters = folder === 'inbox' || folder === 'filtered' ? await inboxFiltersFor(account.email || 'local@dev') : []
+  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'), filters)
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })
 }

package/app/mail/InboxFilters.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import styles from './page.module.css'
+import MailSelect from './MailSelect'
+import { INBOX_FILTER_KINDS, normalizeInboxFilters, type InboxFilter, type InboxFilterKind } from '@/lib/inbox-filters'
+
+const FILTER_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+  </svg>
+)
+
+const labelOf = (kind: InboxFilterKind) => INBOX_FILTER_KINDS.find(option => option.kind === kind)?.label ?? kind
+
+export default function InboxFilters({
+  filters,
+  counts,
+  showing,
+  onShowingChange,
+  onFiltersChange,
+}: {
+  filters: InboxFilter[]
+  counts: { total: number; unread: number } | null
+  showing: boolean
+  onShowingChange: (showing: boolean) => void
+  onFiltersChange: (filters: InboxFilter[]) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [kind, setKind] = useState<InboxFilterKind>('senderPrefix')
+  const [value, setValue] = useState('')
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointer = (event: PointerEvent) => {
+      const target = event.target as HTMLElement
+      if (wrapRef.current?.contains(target) || target.closest('[role="listbox"]')) return
+      setOpen(false)
+    }
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointer)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('pointerdown', onPointer)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const total = counts?.total ?? 0
+  const unread = counts?.unread ?? 0
+  const placeholder = INBOX_FILTER_KINDS.find(option => option.kind === kind)?.placeholder ?? ''
+
+  const addRule = () => {
+    const next = normalizeInboxFilters([...filters, { kind, value }])
+    if (next.length === filters.length) return
+    onFiltersChange(next)
+    setValue('')
+  }
+
+  const summary = total
+    ? `${total.toLocaleString()} filtered out of your Inbox${unread ? `, ${unread.toLocaleString()} unread` : ''}`
+    : 'Filtered out of your Inbox'
+
+  return (
+    <div className={styles.filterWrap} ref={wrapRef}>
+      <button
+        type="button"
+        className={`${styles.filterChip} ${showing ? styles.filterChipOn : ''}`}
+        onClick={() => setOpen(current => !current)}
+        aria-expanded={open}
+        aria-label={summary}
+        title={summary}
+      >
+        {FILTER_ICON}
+        <span className={styles.filterChipLabel}>Filtered</span>
+        {total > 0 && (
+          <span className={styles.filterChipCount}>
+            {total.toLocaleString()}
+            {unread > 0 && <span className={styles.filterChipUnread}>{unread.toLocaleString()} new</span>}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div className={styles.filterMenu} role="dialog" aria-label="Filtered out of your Inbox">
+          <div className={styles.filterMenuHead}>
+            <span>Filtered out of your Inbox</span>
+            <span className={styles.filterMenuHint}>Matching mail skips the Inbox and never notifies. Nothing is deleted.</span>
+          </div>
+          <button
+            type="button"
+            className={styles.filterMenuView}
+            onClick={() => {
+              onShowingChange(!showing)
+              setOpen(false)
+            }}
+          >
+            {showing ? 'Back to Inbox' : 'Show filtered mail'}
+            {!showing && total > 0 && (
+              <span className={styles.filterChipCount}>
+                {total.toLocaleString()}
+                {unread > 0 && <span className={styles.filterChipUnread}>{unread.toLocaleString()} new</span>}
+              </span>
+            )}
+          </button>
+          <div className={styles.filterRules}>
+            {filters.length === 0 && <div className={styles.filterEmpty}>No rules. Everything reaches your Inbox.</div>}
+            {filters.map(filter => (
+              <div key={`${filter.kind}:${filter.value}`} className={styles.filterRule}>
+                <span className={styles.filterRuleKind}>{labelOf(filter.kind)}</span>
+                <span className={styles.filterRuleValue}>{filter.value}</span>
+                <button
+                  type="button"
+                  className={styles.filterRuleRemove}
+                  aria-label={`Remove ${labelOf(filter.kind).toLowerCase()} ${filter.value}`}
+                  onClick={() => onFiltersChange(filters.filter(entry => entry !== filter))}
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+          <form
+            className={styles.filterAdd}
+            onSubmit={event => {
+              event.preventDefault()
+              addRule()
+            }}
+          >
+            <MailSelect
+              value={kind}
+              options={INBOX_FILTER_KINDS.map(option => ({ value: option.kind, label: option.label }))}
+              ariaLabel="Rule type"
+              buttonClassName={styles.filterAddKind}
+              onChange={next => setKind(next as InboxFilterKind)}
+            />
+            <input
+              className={styles.filterAddValue}
+              value={value}
+              placeholder={placeholder}
+              aria-label="Rule value"
+              onChange={event => setValue(event.target.value)}
+            />
+            <button type="submit" className={styles.filterAddBtn} disabled={!value.trim()}>
+              Add
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}

package/app/mail/page.module.css

@@ -559,6 +559,176 @@
   transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
 }
 .refreshBtn:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.filterWrap {
+  position: relative;
+  margin-left: auto;
+}
+.filterWrap + .refreshBtn { margin-left: 0; }
+.filterChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 500 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
+}
+.filterChip svg {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+.filterChip:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.filterChipOn {
+  color: var(--nc-fg-1);
+  border-color: var(--nc-violet-500);
+}
+.filterChipCount {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--nc-font-mono);
+  color: var(--nc-fg-2);
+}
+.filterChipUnread {
+  padding: 2px 5px;
+  border-radius: 999px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 10px/1 var(--nc-font-sans);
+}
+.filterMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  width: min(330px, calc(100vw - 32px));
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--nc-line-2);
+  border-radius: var(--radius-card);
+  background: var(--nc-ink-2);
+  box-shadow: 0 18px 44px rgba(4, 2, 8, .42);
+  animation: ncFadeDown .16s var(--nc-ease-out);
+}
+.filterMenuHead {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 6px 2px;
+  color: var(--nc-fg-1);
+  font: 600 13px/1.2 var(--nc-font-sans);
+}
+.filterMenuHint {
+  color: var(--nc-fg-3);
+  font: 400 12px/1.4 var(--nc-font-sans);
+}
+.filterMenuView {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 10px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: var(--nc-ink-3);
+  color: var(--nc-fg-1);
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+  text-align: left;
+}
+.filterMenuView:hover { border-color: var(--nc-violet-500); }
+.filterRules {
+  display: flex;
+  flex-direction: column;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.filterRule {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 6px;
+  border-bottom: 1px solid var(--nc-line-1);
+}
+.filterRule:last-child { border-bottom: none; }
+.filterRuleKind {
+  color: var(--nc-fg-3);
+  font: 500 11px/1.2 var(--nc-font-sans);
+  white-space: nowrap;
+}
+.filterRuleValue {
+  overflow: hidden;
+  color: var(--nc-fg-1);
+  font: 500 12px/1.2 var(--nc-font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filterRuleRemove {
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 400 16px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.filterRuleRemove:hover { color: var(--nc-danger); background: var(--nc-ink-4); }
+.filterEmpty {
+  padding: 8px 6px;
+  color: var(--nc-fg-3);
+  font: 400 12px/1.4 var(--nc-font-sans);
+}
+.filterAdd {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--nc-line-1);
+}
+.filterAdd > :first-child { grid-column: 1 / -1; }
+.filterAddKind {
+  width: 100%;
+  min-width: 0;
+}
+.filterAddValue {
+  min-width: 0;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 400 12px/1 var(--nc-font-sans);
+}
+.filterAddValue:focus { outline: none; border-color: var(--nc-violet-500); }
+.filterAddBtn {
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.filterAddBtn:disabled {
+  opacity: .45;
+  cursor: default;
+}
+.listHead { container-type: inline-size; }
+@container (max-width: 440px) {
+  .filterChipLabel { display: none; }
+}
 .crossFolderHint {
   align-self: flex-start;
   margin: 0 16px 8px;
@@ -1098,6 +1268,18 @@
 .riskBannerWhy { display: block; margin-top: 3px; opacity: 0.92; font-size: 12.5px; }
 .riskBannerReasons { margin: 4px 0 0; padding-left: 16px; opacity: 0.92; font-size: 12.5px; list-style: disc; }
 .riskBannerReasons li { margin-top: 2px; }
+.riskBannerTrust {
+  margin-top: 9px;
+  padding: 6px 11px;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  border-radius: 6px;
+  background: transparent;
+  color: #fff;
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.riskBannerTrust:hover { background: rgba(255, 255, 255, 0.14); }
+.riskBannerTrust:disabled { opacity: 0.7; cursor: default; }
 
 .riskNoteIcon,
 .riskBannerIcon { display: inline-flex; flex-shrink: 0; }

package/app/mail/page.tsx

@@ -52,9 +52,12 @@ const MAILBOX_GLYPH: Record<'all' | 'vela' | 'hosting' | 'person', React.ReactNo
     </svg>
   ),
 }
+import InboxFilters from './InboxFilters'
 import Ticker, { TICKER_SPOTS, tickerDefault, tickerSettingsFrom, type TickerSettings, type TickerSpot } from './Ticker'
 import { splitQuotedTail, splitQuotedText } from './quoted'
 import { applyThreadFlagDeltas, normalizeSubject } from '@/lib/threads'
+import { matchesInboxFilters, normalizeInboxFilters, type InboxFilter } from '@/lib/inbox-filters'
+import { FIRST_MESSAGE_REASON } from '@/lib/risk'
 import { defaultSignature, fillSignature } from '@/lib/default-signature'
 import styles from './page.module.css'
 
@@ -364,6 +367,7 @@ type MailSettings = {
   fonts: CustomFont[]
   defaultFont: BaseFont
   prefs?: { theme?: ThemePref; accent?: string; themeCustom?: ThemeCustom; layout?: 'list' | 'bubbles' }
+  inboxFilters?: InboxFilter[]
 }
 
 const EMAIL_SHAPE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/
@@ -1373,6 +1377,9 @@ export default function DevMailPage() {
   const [addrCopied, setAddrCopied] = useState(false)
 
   const [folder, setFolder] = useState<Folder>('inbox')
+  const [showFiltered, setShowFiltered] = useState(false)
+  const showFilteredRef = useRef(false)
+  useEffect(() => { showFilteredRef.current = showFiltered }, [showFiltered])
   const [search, setSearch] = useState('')
   const [sentEmails, setSentEmails] = useState<SentEmail[]>([])
   // What is waiting to be sent lives here now, not at the provider: a delayed message is
@@ -1386,7 +1393,7 @@ export default function DevMailPage() {
   const [inboxCursor, setInboxCursor] = useState<string | null>(null)
   const inboxFetch = useRef<string | null>(null)
   type FolderTally = { inbox: number; unread: number; starred: number; archived: number; trashed: number; spam: number; snoozed: number }
-  const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null }) | null>(null)
+  const [serverCounts, setServerCounts] = useState<(FolderTally & { conversations: FolderTally | null; filtered?: { total: number; unread: number } }) | null>(null)
   const [countsLoading, setCountsLoading] = useState(false)
   const [composeExpanded, setComposeExpanded] = useState(true)
   const pwSectionRef = useRef<HTMLDivElement | null>(null)
@@ -1520,6 +1527,10 @@ export default function DevMailPage() {
     } catch {}
   }, [])
   const [settings, setMailSettings] = useState<MailSettings>(DEFAULT_SETTINGS)
+  const inboxFilters = useMemo(() => normalizeInboxFilters(settings.inboxFilters), [settings.inboxFilters])
+  useEffect(() => {
+    if (folder !== 'inbox') setShowFiltered(false)
+  }, [folder])
   const tickerOn = (spot: TickerSpot) => settings.ticker?.[spot] ?? tickerDefault(spot)
   const messagesAlwaysOpen = settings.threadMessages === 'open'
   const { canInstall, installed, install, ios } = useInstall()
@@ -1719,7 +1730,7 @@ export default function DevMailPage() {
 
   const [threads, setThreads] = useState<ConversationRow[]>([])
   const [threadsResolved, setThreadsResolved] = useState(false)
-  const threadFolder = folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : folder === 'spam' ? 'spam' : 'inbox'
+  const threadFolder = folder === 'inbox' && showFiltered ? 'filtered' : folder === 'archived' ? 'archive' : folder === 'trash' ? 'trash' : folder === 'starred' ? 'starred' : folder === 'snoozed' ? 'snoozed' : folder === 'spam' ? 'spam' : 'inbox'
   const threadsFetch = useRef<string | null>(null)
   const threadsLoadedFolder = useRef<string | null>(null)
   const [threadsCursor, setThreadsCursor] = useState<string | null>(null)
@@ -3059,9 +3070,9 @@ export default function DevMailPage() {
     if (folder === 'starred') return tally.starred
     if (folder === 'snoozed') return tally.snoozed
     if (folder === 'spam') return tally.spam
-    if (folder === 'inbox') return tally.inbox
+    if (folder === 'inbox') return showFiltered ? serverCounts?.filtered?.total ?? null : tally.inbox
     return null
-  }, [serverCounts, search, folder])
+  }, [serverCounts, search, folder, showFiltered])
 
   const eventsByEmail = useMemo(() => {
     const map: Record<string, MailEvent[]> = {}
@@ -3335,6 +3346,10 @@ export default function DevMailPage() {
         .filter(inboxFolderPredicate)
         .filter(matchesInbound)
         .filter(entry => !(folder === 'inbox' && hideForwarded && isAppNotification(entry.subject)))
+        .filter(entry =>
+          folder !== 'inbox' || Boolean(search.trim()) ||
+          matchesInboxFilters(inboxFilters, { senders: [entry.from], subject: entry.subject, text: entry.text }) === showFiltered,
+        )
       const groups = new Map<string, InboundEmail[]>()
       for (const entry of visible) {
         const key = threadKeys.get(entry.id) ?? entry.id
@@ -3456,7 +3471,7 @@ export default function DevMailPage() {
       .filter(entry => searched || matches(`${entry.to.join(' ')} ${entry.subject}`))
       .filter(entry => !(folder === 'sent' && (entry.archived || entry.trashed)))
       .map(entry => sentToItem(entry))
-  }, [folder, isInboundFolder, inboxEmails, drafts, scheduledEmails, deliveredEmails, sentSearchResults, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, now, hideForwarded, threadSentMembers, detailCache, threads, search])
+  }, [folder, isInboundFolder, inboxEmails, drafts, scheduledEmails, deliveredEmails, sentSearchResults, matches, matchesInbound, matchesSent, inboxFolderPredicate, threadKeys, now, hideForwarded, threadSentMembers, detailCache, threads, search, inboxFilters, showFiltered])
 
   const listSettling = searching || sentSearching || ((mailboxLoading || !threadsResolved) && listItems.length === 0)
   const listRefreshing = !listSettling && (mailboxStale || mailboxLoading || !threadsResolved)
@@ -3700,6 +3715,34 @@ export default function DevMailPage() {
    * against the sender, rescuing counts for them, and the next message from that domain
    * is judged with the answer already in hand.
    */
+  const [trustingId, setTrustingId] = useState<string | null>(null)
+  const trustSender = useCallback(
+    async (entry: InboundEmail) => {
+      setTrustingId(entry.id)
+      const response = await fetch('/api/mail/inbox', {
+        method: 'PATCH',
+        headers: apiHeaders(),
+        body: JSON.stringify({ ids: [entry.id], trust: true }),
+      }).catch(() => null)
+      const data = await response?.json().catch(() => null)
+      setTrustingId(null)
+      if (!data?.ok) {
+        setSentFlash('Could not trust this sender. Try again.')
+        window.setTimeout(() => setSentFlash(''), 2500)
+        return
+      }
+      const cleared = new Set<string>([entry.id, ...((data.ids as string[] | undefined) ?? [])])
+      setInboxEmails(list => list.map(item => (cleared.has(item.id) ? { ...item, risk: 'clean', riskReasons: [] } : item)))
+      const domain = parseAddress(entry.from).split('@')[1] ?? 'this sender'
+      setSentFlash(`Mail from ${domain} is trusted now`)
+      window.setTimeout(() => setSentFlash(''), 2500)
+      threadsLoadedFolder.current = null
+      threadsFetch.current = null
+      loadThreads()
+    },
+    [apiHeaders, loadThreads],
+  )
+
   const markSpam = useCallback(
     async (ids: string[], spam: boolean) => {
       if (!ids.length) return
@@ -3756,7 +3799,7 @@ export default function DevMailPage() {
           if (flags.read === true) ids.forEach(id => pendingRead.current.delete(id))
           // The starred tally counts conversations, not messages, so it cannot be derived
           // from the ids alone — the server says what it is now.
-          if (flags.starred !== undefined) loadCounts(true)
+          if (flags.starred !== undefined || (flags.read !== undefined && showFilteredRef.current)) loadCounts(true)
         })
     },
     [apiHeaders],
@@ -3975,6 +4018,19 @@ export default function DevMailPage() {
     [apiHeaders],
   )
 
+  const changeInboxFilters = useCallback(
+    async (next: InboxFilter[]) => {
+      const nextSettings = { ...settings, inboxFilters: next }
+      setMailSettings(nextSettings)
+      if (!next.length) setShowFiltered(false)
+      await fetch('/api/mail/settings', { method: 'PUT', headers: apiHeaders(), body: JSON.stringify(nextSettings) }).catch(() => {})
+      threadsLoadedFolder.current = null
+      threadsFetch.current = null
+      await Promise.all([loadThreads(), loadCounts(true)])
+    },
+    [settings, apiHeaders, loadThreads, loadCounts],
+  )
+
   const writingSettings = useMemo(() => writingSettingsFrom(settings.writing), [settings.writing])
   const saveWriting = useCallback((next: WritingSettings) => saveSettings({ ...settings, writing: next }), [saveSettings, settings])
   const saveTemplate = useCallback(
@@ -6471,6 +6527,16 @@ export default function DevMailPage() {
                   <span className={styles.riskBannerWhy}>
                     Treat links and attachments here with care, and do not enter passwords or payment details.
                   </span>
+                  {inbound.risk === 'suspicious' && (inbound.riskReasons ?? []).includes(FIRST_MESSAGE_REASON) && (
+                    <button
+                      type="button"
+                      className={styles.riskBannerTrust}
+                      disabled={trustingId === inbound.id}
+                      onClick={() => void trustSender(inbound)}
+                    >
+                      {trustingId === inbound.id ? 'Trusting…' : 'Trust this sender'}
+                    </button>
+                  )}
                 </span>
               </div>
             )}
@@ -7616,11 +7682,20 @@ export default function DevMailPage() {
           <button className={styles.menuBtn} onClick={() => setRailOpen(true)} aria-label="Open menu">
             {ICONS.menu}
           </button>
-          <h1 className={styles.listTitle}>{folderTitles[folder]}</h1>
+          <h1 className={styles.listTitle}>{folder === 'inbox' && showFiltered ? 'Filtered' : folderTitles[folder]}</h1>
           <span className={styles.listMeta} title={listCountTitle}>
             {listCountFigure}{' '}
             <span className={styles.listMetaUnit}>{listCountUnit}</span>
           </span>
+          {folder === 'inbox' && (
+            <InboxFilters
+              filters={inboxFilters}
+              counts={serverCounts?.filtered ?? null}
+              showing={showFiltered}
+              onShowingChange={setShowFiltered}
+              onFiltersChange={changeInboxFilters}
+            />
+          )}
           <button
             className={`${styles.refreshBtn} ${refreshing ? styles.spinning : ''}`}
             onClick={refreshAll}
@@ -7870,7 +7945,7 @@ export default function DevMailPage() {
             <div className={styles.emptyList}>
               <span className={styles.emptyHex} />
               <p className={styles.emptyTitle}>
-                {folder === 'inbox' && 'Inbox zero'}
+                {folder === 'inbox' && (showFiltered ? 'Nothing filtered' : 'Inbox zero')}
                 {folder === 'starred' && 'No starred mail'}
                 {folder === 'snoozed' && 'Nothing snoozed'}
                 {folder === 'sent' && 'Nothing sent yet'}
@@ -7881,7 +7956,9 @@ export default function DevMailPage() {
               </p>
               <p className={styles.emptySub}>
                 {folder === 'inbox' &&
-                  'Nothing new right now. Messages sent to your address will appear here.'}
+                  (showFiltered
+                    ? 'Mail that matches your filter rules waits here instead of the Inbox.'
+                    : 'Nothing new right now. Messages sent to your address will appear here.')}
                 {folder === 'starred' && 'Star a message and it will be kept here so you can find it again.'}
                 {folder === 'snoozed' &&
                   'Put a conversation aside and it waits here, then returns to the inbox by itself at the time you chose.'}