@novacraft-engineering/mailbox 0.4.3 → 0.4.5

package/app/mail/page.tsx

@@ -5,7 +5,7 @@ import { extractUrls, inspectUrl, type LinkVerdict } from '@/lib/link-safety'
 import AttachmentLightbox, { attachmentKind, formatSize, type PreviewItem } from './AttachmentLightbox'
 import AccessCheck from './AccessCheck'
 import { parseQuery, matchesQuery, serverSearchParams, splitForServer } from './search'
-import { useConfirm } from './ConfirmDialog'
+import { useConfirm, usePrompt } from './ConfirmDialog'
 import { subscribePush, unsubscribePush, useInstall, useNotifications } from './pwa'
 import RichEditor from './RichEditor'
 import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel, healGooglePrivateImages } from '@/lib/email-html'
@@ -173,6 +173,8 @@ type SentEmail = {
   openedAt: string | null
   owner?: string
   inReplyTo?: string | null
+  /** Sent by the app itself — an invite, a reset, an auto-reply. */
+  isAuto?: boolean
 }
 
 type DownloadAttachment = { filename: string; size: number; downloadUrl: string; shareId?: string; contentType?: string; contentId?: string }
@@ -551,22 +553,34 @@ function markdownToHtml(src: string): string {
   return out.join('\n')
 }
 
-function buildEmailHtml(data: ComposeData, signatureHtml: string, fontCss = '', base: BaseFont = EMPTY_FONT): string {
-  if (data.htmlDirty && data.htmlSource.trim()) return data.htmlSource
+function buildEmailHtml(
+  data: ComposeData,
+  signatureHtml: string,
+  fontCss = '',
+  base: BaseFont = EMPTY_FONT,
+  /**
+   * Links to files too big to attach. They belong with the message, above the signature —
+   * appended at the end they landed below the sign-off AND below the quoted thread, which
+   * in Outlook is behind the "show trimmed content" fold, so the recipient saw a covering
+   * note with no sign of the document it was about.
+   */
+  linksHtml = '',
+): string {
+  if (data.htmlDirty && data.htmlSource.trim()) return data.htmlSource + linksHtml
   // Editor HTML for anything composed here; markdown only for drafts saved before it.
   const body = data.bodyHtml.trim() ? data.bodyHtml : markdownToHtml(data.markdown)
-  const inner = body + (data.useSignature ? signatureHtml : '')
+  const inner = body + linksHtml + (data.useSignature ? signatureHtml : '')
   const fonts = fontCss ? `<style>${fontCss}</style>` : ''
   return `${fonts}<div style="font-family:${fontStack(base.family)};font-size:${base.size || '15px'};line-height:${lineSpacingOf(base)};color:#030712;">${outlookSafeImages(inlineEmailStyles(inner, base))}</div>${data.quoteHtml ?? ''}`
 }
 
-function buildEmailText(data: ComposeData, signatureText: string): string {
+function buildEmailText(data: ComposeData, signatureText: string, linksText = ''): string {
   // Every message carries a text part: some clients prefer it, and its absence reads as spam.
   const quoteText = data.quoteHtml ? `\n\n${htmlToPlainText(data.quoteHtml)}` : ''
   if (data.bodyHtml.trim()) {
-    return (htmlToPlainText(data.bodyHtml) + (data.useSignature ? signatureText : '') + quoteText).trim()
+    return (htmlToPlainText(data.bodyHtml) + linksText + (data.useSignature ? signatureText : '') + quoteText).trim()
   }
-  const body = data.markdown + (data.useSignature ? signatureText : '') + quoteText
+  const body = data.markdown + linksText + (data.useSignature ? signatureText : '') + quoteText
   return body
     // Images first, for the same precedence reason as inlineMd. The replacement must not
     // contain brackets, or the link rule below matches across it and mangles the line.
@@ -936,6 +950,10 @@ function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SP
   const csp = allowRemote
     ? `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src * data:; style-src 'unsafe-inline' *; font-src * data:; media-src * data:">`
     : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${OWN_IMAGE_HOSTS} data:; style-src 'unsafe-inline'; font-src data:">`
+  // Links open in a new tab, which a sandboxed frame may only do with allow-popups. Without
+  // it every link in every message was dead: the click was swallowed with no error and no
+  // navigation, which reads as a broken button rather than a blocked one. Scripts are still
+  // not allowed, so nothing here can open a tab on its own — only a real click can.
   return `<!doctype html><html><head><meta charset="utf-8">${csp}${readerTheme(spacing, dark)}<base target="_blank"></head><body><div class="nc-paper">${stripOwnPixel(html)}</div></body>`
 }
 
@@ -1302,6 +1320,7 @@ const FOLDER_ICONS: Record<Folder, React.ReactNode> = {
 
 export default function DevMailPage() {
   const confirm = useConfirm()
+  const promptFor = usePrompt()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [isLoggedIn, setIsLoggedIn] = useState(false)
@@ -1312,6 +1331,12 @@ export default function DevMailPage() {
   const [loginBusy, setLoginBusy] = useState(false)
   const [resetMode, setResetMode] = useState(false)
   const [resetSent, setResetSent] = useState(false)
+  const [resetMessage, setResetMessage] = useState('')
+  const [recoveryEmail, setRecoveryEmail] = useState('')
+  const [recoverySaved, setRecoverySaved] = useState<{ address: string | null; verified: boolean }>({ address: null, verified: false })
+  const [recoveryMsg, setRecoveryMsg] = useState('')
+  const [recoveryBad, setRecoveryBad] = useState(false)
+  const [recoveryBusy, setRecoveryBusy] = useState(false)
   const [resetBusy, setResetBusy] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [loginDomain, setLoginDomain] = useState(DEFAULT_MAIL_DOMAIN)
@@ -1441,6 +1466,7 @@ export default function DevMailPage() {
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [settingsTab, setSettingsTab] = useState<SettingsTab>('profile')
   const [pwCurrent, setPwCurrent] = useState('')
+  const [pwReveal, setPwReveal] = useState(false)
   const [pwNext, setPwNext] = useState('')
   const [pwRepeat, setPwRepeat] = useState('')
   const [pwBusy, setPwBusy] = useState(false)
@@ -1525,6 +1551,7 @@ export default function DevMailPage() {
   const [renameDomain, setRenameDomain] = useState('')
   const [inviteBusy, setInviteBusy] = useState(false)
   const [accessorsMsg, setAccessorsMsg] = useState('')
+  const [accessorsBad, setAccessorsBad] = useState(false)
   const isAdmin = account?.role === 'admin'
 
   const [composeOpen, setComposeOpen] = useState(false)
@@ -2560,14 +2587,96 @@ export default function DevMailPage() {
     if (isAdmin) loadAccessors()
   }, [isAdmin, loadAccessors])
 
+  const loadRecovery = useCallback(async () => {
+    try {
+      const response = await fetch('/api/mail/recovery', { headers: apiHeaders() })
+      const data = await response.json()
+      if (!data.ok) return
+      setRecoverySaved({ address: data.recoveryEmail ?? null, verified: Boolean(data.verified) })
+      setRecoveryEmail(data.recoveryEmail ?? '')
+    } catch {}
+  }, [apiHeaders])
+
+  useEffect(() => {
+    if (isLoggedIn) loadRecovery()
+  }, [isLoggedIn, loadRecovery])
+
+  const saveRecovery = useCallback(async () => {
+    setRecoveryBusy(true)
+    setRecoveryMsg('')
+    setRecoveryBad(false)
+    try {
+      const response = await fetch('/api/mail/recovery', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ recovery: recoveryEmail.trim() }),
+      })
+      const data = await response.json()
+      if (data.ok) {
+        setRecoverySaved({ address: data.recoveryEmail ?? null, verified: Boolean(data.verified) })
+        setRecoveryMsg(
+          data.recoveryEmail
+            ? `Confirm it from ${data.recoveryEmail} — the link is on its way and expires in 24 hours.`
+            : 'Recovery address removed.',
+        )
+      } else {
+        setRecoveryBad(true)
+        setRecoveryMsg(data.error || 'Could not save that address')
+      }
+    } catch {
+      setRecoveryBad(true)
+      setRecoveryMsg('Could not reach the server')
+    } finally {
+      setRecoveryBusy(false)
+    }
+  }, [apiHeaders, recoveryEmail])
+
+  const mintResetLink = useCallback(async (target: string) => {
+    setAccessorsBad(false)
+    setAccessorsMsg('')
+    try {
+      const response = await fetch('/api/mail/accessors/reset-link', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ email: target }),
+      })
+      const data = await response.json()
+      if (!data.ok) {
+        setAccessorsBad(true)
+        setAccessorsMsg(data.error || 'Could not make a reset link')
+        return
+      }
+      await navigator.clipboard?.writeText(data.url).catch(() => {})
+      setAccessorsMsg(`Reset link for ${data.email} copied — it works once and expires in ${data.expiresInMinutes} minutes.`)
+    } catch {
+      setAccessorsBad(true)
+      setAccessorsMsg('Could not reach the server')
+    }
+  }, [apiHeaders])
+
+  const failInvite = useCallback((message: string) => {
+    setAccessorsMsg(message)
+    setAccessorsBad(true)
+  }, [])
+
+  useEffect(() => {
+    if (!accessorsBad) return
+    const timer = setTimeout(() => {
+      setAccessorsBad(false)
+      setAccessorsMsg('')
+    }, 6000)
+    return () => clearTimeout(timer)
+  }, [accessorsBad, accessorsMsg])
+
   const inviteAccessor = useCallback(async () => {
     const target = inviteEmail.trim().toLowerCase()
-    if (!target.includes('@')) {
-      setAccessorsMsg('Enter a valid email')
+    if (!/^[^@\s]+@[^@\s.]+\.[^@\s]+$/.test(target)) {
+      failInvite('That is not an email address we can send to.')
       return
     }
     setInviteBusy(true)
     setAccessorsMsg('')
+    setAccessorsBad(false)
     try {
       const response = await fetch('/api/mail/accessors', {
         method: 'POST',
@@ -2582,6 +2691,7 @@ export default function DevMailPage() {
       })
       const data = await response.json()
       if (data.ok) {
+        setAccessorsBad(false)
         setAccessorsMsg(`Invite sent to ${data.email} — mailbox ${data.address}.`)
         setInviteEmail('')
         setInviteName('')
@@ -2589,14 +2699,14 @@ export default function DevMailPage() {
         setInviteRole('member')
         loadAccessors()
       } else {
-        setAccessorsMsg(data.error || 'Could not send the invite')
+        failInvite(data.error || 'Could not send the invite')
       }
     } catch {
-      setAccessorsMsg('Could not reach the server')
+      failInvite('Could not reach the server')
     } finally {
       setInviteBusy(false)
     }
-  }, [apiHeaders, inviteEmail, inviteName, inviteRole, inviteHandle, inviteDomain, loadAccessors])
+  }, [apiHeaders, inviteEmail, inviteName, inviteRole, inviteHandle, inviteDomain, loadAccessors, failInvite])
 
   const saveMailboxName = useCallback(
     async (targetEmail: string) => {
@@ -3113,7 +3223,7 @@ export default function DevMailPage() {
       unread: false,
       starred: entry.starred,
       hasAttachment: (entry.attachmentCount ?? 0) > 0,
-      chip: (folder === 'scheduled' ? 'scheduled' : null) as string | null,
+      chip: (folder === 'scheduled' ? 'scheduled' : entry.isAuto ? 'automated' : null) as string | null,
       threadCount: 1,
       latestAt: new Date(entry.createdAt).getTime(),
       labels: [] as string[],
@@ -4183,15 +4293,10 @@ export default function DevMailPage() {
       setComposeError(`${failedUpload.filename} did not upload. Remove it or try again.`)
       return
     }
-    let html = buildEmailHtml(compose, signatureHtml, fontCss, defaultFont)
-    let text = buildEmailText(compose, signatureText)
-    if (!html.trim() && !text.trim()) {
-      setComposeError('Write something first')
-      return
-    }
-
     const attachable = attachments.filter(entry => entry.size <= ATTACH_LIMIT_BYTES)
     const linked = attachments.filter(entry => entry.size > ATTACH_LIMIT_BYTES)
+    let linksHtml = ''
+    let linksText = ''
     if (linked.length) {
       const rows = linked
         .map(
@@ -4199,8 +4304,15 @@ export default function DevMailPage() {
             `<tr><td style="padding:6px 0"><a href="${entry.shareUrl ?? entry.url}" style="display:inline-block;background:${CLIENT_BRAND.accent};color:#fff;text-decoration:none;font-weight:600;padding:9px 16px;border-radius:8px;font-family:Arial,sans-serif;font-size:14px">Download ${escapeHtml(entry.filename)} (${formatBytes(entry.size)})</a></td></tr>`,
         )
         .join('')
-      html += `<div style="margin-top:20px"><p style="font-family:Arial,sans-serif;font-size:14px;color:#5A5170;margin:0 0 8px">Large files:</p><table role="presentation">${rows}</table></div>`
-      text += `\n\nLarge files:\n${linked.map(entry => `${entry.filename} — ${entry.shareUrl ?? entry.url}`).join('\n')}`
+      linksHtml = `<div style="margin:18px 0"><p style="font-family:Arial,sans-serif;font-size:14px;color:#5A5170;margin:0 0 8px">${linked.length === 1 ? 'Attached, as a download link:' : 'Attached, as download links:'}</p><table role="presentation">${rows}</table></div>`
+      linksText = `\n\n${linked.length === 1 ? 'Attached, as a download link:' : 'Attached, as download links:'}\n${linked.map(entry => `${entry.filename} — ${entry.shareUrl ?? entry.url}`).join('\n')}`
+    }
+
+    const html = buildEmailHtml(compose, signatureHtml, fontCss, defaultFont, linksHtml)
+    const text = buildEmailText(compose, signatureText, linksText)
+    if (!html.trim() && !text.trim()) {
+      setComposeError('Write something first')
+      return
     }
 
     // Resend can't schedule a send that carries attachments, so those go out
@@ -5006,13 +5118,24 @@ export default function DevMailPage() {
   }
 
   const revokeShareLink = async (id: string) => {
-    if (!window.confirm('Revoke this link? Anyone holding it loses access immediately.')) return
+    const agreed = await confirm({
+      title: 'Revoke this link?',
+      body: 'Anyone holding it loses access immediately, including people you have already sent it to.',
+      confirmLabel: 'Revoke link',
+      danger: true,
+    })
+    if (!agreed) return
     await fetch(`/api/mail/share?id=${encodeURIComponent(id)}`, { method: 'DELETE', headers: apiHeaders() }).catch(() => {})
     loadShares()
   }
 
   const changeSharePassword = async (id: string) => {
-    const next = window.prompt('Password for this link (leave blank to remove it):')
+    const next = await promptFor({
+      title: 'Password for this link',
+      body: 'Anyone opening the link is asked for this. Leave it blank to remove the password entirely.',
+      confirmLabel: 'Save password',
+      field: { label: 'Password', type: 'password', placeholder: 'Blank removes it' },
+    })
     if (next === null) return
     await fetch('/api/mail/share', {
       method: 'PATCH',
@@ -5072,11 +5195,13 @@ export default function DevMailPage() {
     }
     setResetBusy(true)
     try {
-      await fetch('/api/mail/request-reset', {
+      const response = await fetch('/api/mail/request-reset', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email }),
       })
+      const data = await response.json().catch(() => ({}))
+      setResetMessage(typeof data.message === 'string' ? data.message : '')
       setResetSent(true)
     } catch {
       setLoginError('Network error — try again')
@@ -5115,9 +5240,11 @@ export default function DevMailPage() {
             {resetSent ? (
               <>
                 <p className={styles.loginSub}>
-                  If {email} is an account, a reset link is on its way. The link expires in 30 minutes.
+                  {resetMessage
+                    ? resetMessage
+                    : `If ${email} is an account, a reset link is on its way.`}
                 </p>
-                <button className={styles.loginBtn} onClick={() => { setResetMode(false); setResetSent(false) }}>
+                <button className={styles.loginBtn} onClick={() => { setResetMode(false); setResetSent(false); setResetMessage('') }}>
                   Back to sign in
                 </button>
               </>
@@ -5600,7 +5727,7 @@ export default function DevMailPage() {
         <>
           <iframe
             className={styles.threadFrame}
-            sandbox="allow-same-origin"
+            sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
             srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')}
             title="Email content"
             onLoad={event => {
@@ -5616,7 +5743,7 @@ export default function DevMailPage() {
     }
     return (
       <>
-        <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+        <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(bodyHtml, showRemote, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
         {split.tail && renderQuoteLine(message.id, quoteShown)}
       </>
     )
@@ -5634,7 +5761,7 @@ export default function DevMailPage() {
       return (
         <iframe
           className={styles.threadFrame}
-          sandbox="allow-same-origin"
+          sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
           srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme === 'dark')}
           title="Sent email"
           onLoad={event => {
@@ -5906,13 +6033,16 @@ export default function DevMailPage() {
               )
             ) : mine ? (
               <>
-                {renderSentBody(item.sent)}
+                {/* Files first. The document is what a broker opened the message for; the
+                    covering note is read second, and burying the attachment under a long
+                    quoted thread meant scrolling past the reply to reach the thing itself. */}
                 {renderSentAttachments(item.sent)}
+                {renderSentBody(item.sent)}
               </>
             ) : (
               <>
-                {renderInboundBody(item.inbound, true)}
                 {renderInboundAttachments(item.inbound)}
+                {renderInboundBody(item.inbound, true)}
               </>
             )}
           </div>
@@ -6486,7 +6616,7 @@ export default function DevMailPage() {
                   <div className={styles.replyPreviewWrap}>
                     <iframe
                       className={styles.replyPreview}
-                      sandbox="allow-same-origin"
+                      sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
                       srcDoc={frameHtml(replyEffHtml, true, readerSpacing, resolvedTheme === 'dark')}
                       title="Reply preview"
                       onLoad={event => {
@@ -6685,16 +6815,28 @@ export default function DevMailPage() {
             const ordered = [...(eventsByEmail[selectedSent.id] ?? []), ...opened].sort(
               (a, b) => new Date(a.at).getTime() - new Date(b.at).getTime(),
             )
-            const seen = new Set<string>()
-            const timeline = ordered
-              .filter(event => {
-                if (seen.has(event.type)) return false
-                seen.add(event.type)
-                return true
-              })
+            // One event arrives per recipient, so a message to nine people that reached
+            // eight of them carries eight "delivered" and one "bounced". Collapsed to a
+            // bare type each, that read as though the whole message had bounced. Group
+            // them instead: keep the count, and name the addresses that actually failed.
+            const groups = new Map<string, { type: string; at: string; count: number; who: string[]; meta?: Record<string, string> }>()
+            for (const event of ordered) {
+              const recipient = event.meta?.to
+              const group = groups.get(event.type)
+              if (!group) {
+                groups.set(event.type, { type: event.type, at: event.at, count: 1, who: recipient ? [recipient] : [], meta: event.meta })
+                continue
+              }
+              group.count += 1
+              if (recipient && !group.who.includes(recipient)) group.who.push(recipient)
+              // Keep the first reason given; they are the same message per bounce type.
+              if (!group.meta?.bounceMessage && event.meta?.bounceMessage) group.meta = event.meta
+            }
+            const timeline = [...groups.values()]
               // sent/delivered often share a timestamp, so order by the email
               // lifecycle rather than time, which can flip them.
               .sort((a, b) => statusRank(a.type) - statusRank(b.type))
+            const audience = groups.get('email.sent')?.who.length ?? 0
             if (!timeline.length) return null
             return (
               <div className={styles.activity}>
@@ -6719,9 +6861,16 @@ export default function DevMailPage() {
                         <span className={styles.eventType}>
                           {event.type.replace('email.', '')}
                           {event.meta?.count ? ` ×${event.meta.count}` : ''}
+                          {audience > 1 && event.count < audience && !/bounce|fail|complain/.test(event.type)
+                            ? ` — ${event.count} of ${audience}`
+                            : ''}
                         </span>
                         <span className={styles.eventTime}>{new Date(event.at).toLocaleString()}</span>
                       </div>
+                      {/* Which addresses failed, not just that something did. */}
+                      {/bounce|fail|complain/.test(event.type) && event.who.length > 0 && (
+                        <span className={styles.eventMeta}>{event.who.join(', ')}</span>
+                      )}
                       {event.meta?.link && (
                         <span className={styles.eventMeta} title={event.meta.link}>
                           {event.meta.link}
@@ -6738,7 +6887,7 @@ export default function DevMailPage() {
             {!selectedDetail ? (
               <BodySkeleton />
             ) : selectedDetail.html ? (
-              <iframe className={styles.readerFrame} sandbox="" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
+              <iframe className={styles.readerFrame} sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(selectedDetail.html, true, readerSpacing, resolvedTheme === 'dark')} title="Email content" />
             ) : (
               <pre className={styles.readerText}>{selectedDetail.text ?? '(no content)'}</pre>
             )}
@@ -7484,7 +7633,9 @@ export default function DevMailPage() {
                               ? styles.chipBounced
                               : item.chip === 'draft'
                                 ? styles.chipDraft
-                                : ''
+                                : item.chip === 'automated'
+                                  ? styles.chipAuto
+                                  : ''
                       }`}
                     >
                       {item.chip}
@@ -7841,7 +7992,7 @@ export default function DevMailPage() {
               {compose.quoteHtml && !compose.campaign.kind && (
                 <details className={styles.composeQuote}>
                   <summary className={styles.composeQuoteLabel}>Quoted message</summary>
-                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
+                  <iframe className={styles.composeQuoteFrame} sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" srcDoc={frameHtml(compose.quoteHtml, true, readerSpacing, resolvedTheme === 'dark')} title="Quoted message" />
                 </details>
               )}
               {/* The signature is appended on send, so show it here rather than leaving the
@@ -8256,6 +8407,40 @@ export default function DevMailPage() {
               <p className={styles.settingsNote}>{account?.address || email || 'Not signed in'}</p>
             </div>
 
+            <div className={styles.settingsField}>
+              <span>Recovery email</span>
+              <p className={styles.settingsProse}>
+                Where a password reset is sent. It has to be an address outside this mailbox, and it only
+                counts once you confirm it — otherwise a locked account has to be reset by an administrator.
+              </p>
+              <div className={styles.pwWrap}>
+                <input
+                  type="email"
+                  autoComplete="email"
+                  className={recoveryBad ? styles.fieldBad : ''}
+                  aria-invalid={recoveryBad}
+                  placeholder="you@somewhere-else.com"
+                  value={recoveryEmail}
+                  onChange={event => { setRecoveryEmail(event.target.value); setRecoveryBad(false) }}
+                />
+                <button type="button" className={styles.pwToggle} disabled={recoveryBusy} onClick={saveRecovery}>
+                  {recoveryBusy ? 'Sending…' : recoverySaved.address === recoveryEmail.trim().toLowerCase() && recoverySaved.address ? 'Resend' : 'Save'}
+                </button>
+              </div>
+              {recoverySaved.address && (
+                <p className={styles.settingsNote}>
+                  {recoverySaved.verified
+                    ? `Confirmed — resets go to ${recoverySaved.address}.`
+                    : `${recoverySaved.address} is not confirmed yet, so resets cannot be sent there.`}
+                </p>
+              )}
+              {recoveryMsg && (
+                <p className={`${styles.settingsNote} ${recoveryBad ? styles.msgBad : ''}`} role={recoveryBad ? 'alert' : undefined}>
+                  {recoveryMsg}
+                </p>
+              )}
+            </div>
+
             <div
               ref={pwSectionRef}
               className={`${styles.pwSection} ${pwHighlight ? styles.pwSectionFocus : ''}`}
@@ -8268,18 +8453,33 @@ export default function DevMailPage() {
               </p>
               <label className={styles.settingsField}>
                 <span>Current password</span>
-                <input type="password" autoComplete="current-password" value={pwCurrent}
-                  onChange={event => setPwCurrent(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="current-password" value={pwCurrent}
+                    onChange={event => setPwCurrent(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               <label className={styles.settingsField}>
                 <span>New password</span>
-                <input type="password" autoComplete="new-password" value={pwNext}
-                  onChange={event => setPwNext(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="new-password" value={pwNext}
+                    onChange={event => setPwNext(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               <label className={styles.settingsField}>
                 <span>Repeat new password</span>
-                <input type="password" autoComplete="new-password" value={pwRepeat}
-                  onChange={event => setPwRepeat(event.target.value)} />
+                <div className={styles.pwWrap}>
+                  <input type={pwReveal ? 'text' : 'password'} autoComplete="new-password" value={pwRepeat}
+                    onChange={event => setPwRepeat(event.target.value)} />
+                  <button type="button" className={styles.pwToggle} onClick={() => setPwReveal(show => !show)}>
+                    {pwReveal ? 'Hide' : 'Show'}
+                  </button>
+                </div>
               </label>
               {pwMsg && (
                 <p className={pwMsg.tone === 'ok' ? styles.pwOk : styles.pwBad} role="status">{pwMsg.text}</p>
@@ -8716,11 +8916,12 @@ export default function DevMailPage() {
           <div className={styles.accessorInvite}>
             <div className={styles.accessorInviteRow}>
               <input
-                className={styles.accessorInput}
+                className={`${styles.accessorInput} ${accessorsBad ? styles.fieldBad : ''}`}
                 type="email"
+                aria-invalid={accessorsBad}
                 placeholder="name@email.com"
                 value={inviteEmail}
-                onChange={event => setInviteEmail(event.target.value)}
+                onChange={event => { setInviteEmail(event.target.value); setAccessorsBad(false) }}
               />
               <input
                 className={styles.accessorInput}
@@ -8765,7 +8966,11 @@ export default function DevMailPage() {
               They&apos;ll get an email to set their password. Members see only their own mail; admins see every mailbox.
               Leave the mailbox blank to derive one from their name.
             </p>
-            {accessorsMsg && <p className={styles.accessorMsg}>{accessorsMsg}</p>}
+            {accessorsMsg && (
+              <p className={`${styles.accessorMsg} ${accessorsBad ? styles.msgBad : ''}`} role={accessorsBad ? 'alert' : undefined}>
+                {accessorsMsg}
+              </p>
+            )}
           </div>
 
           <ul className={styles.accessorList}>
@@ -8830,6 +9035,14 @@ export default function DevMailPage() {
                     buttonClassName={styles.accessorRoleBtn}
                     onChange={value => changeAccessorRole(entry.email, value as 'admin' | 'member')}
                   />
+                  <button
+                    className={styles.mailboxTag}
+                    onClick={() => mintResetLink(entry.email)}
+                    title={`Copy a one-time password reset link for ${entry.email}`}
+                    type="button"
+                  >
+                    Reset link
+                  </button>
                   <button
                     className={styles.accessorRemove}
                     onClick={() => removeAccessor(entry.email)}