Add student account self-service security features and discoverability fixes; v2.1.0

Adds forgot/reset password, signup email verification, sign-out-of-all-devices,
note-usage and certificate display in account settings, and password-changed
security emails. Fixes study sessions being lost on server restart by
persisting them to disk, and fixes sanitizeStudyUsers silently dropping the
new pending-token fields on load. Also surfaces the lesson discussion board
in the main site nav, trims the sign-in page for returning users, and renames
colossiansStudy.tsx/colossiansStudyData.ts to studyPages.tsx/legacyColossiansData.ts
now that the study system covers more than Colossians.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/AdminPage.tsx

@@ -481,6 +481,24 @@ function EmailTemplatesPanel({
         fieldKeys={['emailChangeSubject','emailChangeBody','emailChangeCtaLabel']}
         openKey="email-change" />
 
+      <EmailTemplateCard type="transactional" icon="✅" title="Account Security — Verify Email Address"
+        trigger="A student creates a study account (sent alongside the welcome email)"
+        autoVars="Student's display name, button links to a one-time verification URL (auto-generated, expires in 7 days, not editable)"
+        fieldKeys={['emailVerifySubject','emailVerifyBody','emailVerifyCtaLabel']}
+        openKey="email-verify" />
+
+      <EmailTemplateCard type="transactional" icon="🔑" title="Account Security — Password Reset"
+        trigger="A student requests a password reset from the sign-in page"
+        autoVars="Student's display name, button links to a one-time reset URL (auto-generated, expires in 1 hour, not editable)"
+        fieldKeys={['passwordResetSubject','passwordResetBody','passwordResetCtaLabel']}
+        openKey="password-reset" />
+
+      <EmailTemplateCard type="transactional" icon="🛡️" title="Account Security — Password Changed"
+        trigger="A student's password is changed (self-service reset, in-account change, or admin reset) — confirms the change and that other sessions were signed out"
+        autoVars="Student's display name, link to account settings"
+        fieldKeys={['passwordChangedSubject','passwordChangedBody']}
+        openKey="password-changed" />
+
       <EmailTemplateCard type="transactional" icon="📟" title="Two-Factor Auth — Email Sign-In Code"
         trigger="A student with email-based 2FA signs in, or requests a resend during login"
         autoVars="The 6-digit code is auto-generated and inserted between the body text and expiry note — not editable"
@@ -1004,6 +1022,14 @@ const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; sect
   { key: 'emailChangeSubject', label: 'Subject Line', section: 'email-templates' },
   { key: 'emailChangeBody', label: 'Body Text', multiline: true, section: 'email-templates' },
   { key: 'emailChangeCtaLabel', label: 'Button Label', section: 'email-templates' },
+  { key: 'emailVerifySubject', label: 'Subject Line', section: 'email-templates' },
+  { key: 'emailVerifyBody', label: 'Body Text', multiline: true, section: 'email-templates' },
+  { key: 'emailVerifyCtaLabel', label: 'Button Label', section: 'email-templates' },
+  { key: 'passwordResetSubject', label: 'Subject Line', section: 'email-templates' },
+  { key: 'passwordResetBody', label: 'Body Text', multiline: true, section: 'email-templates' },
+  { key: 'passwordResetCtaLabel', label: 'Button Label', section: 'email-templates' },
+  { key: 'passwordChangedSubject', label: 'Subject Line', section: 'email-templates' },
+  { key: 'passwordChangedBody', label: 'Body Text', multiline: true, section: 'email-templates' },
   { key: 'twoFaOtpEmailSubject', label: 'Subject Line', section: 'email-templates' },
   { key: 'twoFaOtpEmailBody', label: 'Body Text (shown above the code)', multiline: true, section: 'email-templates' },
   { key: 'twoFaOtpEmailExpiry', label: 'Expiry / Security Note (shown below the code)', multiline: true, section: 'email-templates' },

src/App.tsx

@@ -4,7 +4,7 @@ import { Link, NavLink, Routes, Route, useLocation, useNavigate, useParams } fro
 import AdminPage from './AdminPage'
 import QASection from './components/QASection'
 import ContactForm from './components/ContactForm'
-import { ColossiansStudyIndexPage, ColossiansStudyNotesPage, ColossiansStudySectionPage, StudyLandingPage, StudySignupPage, StudyAccountPage, StudyCommunityPage, StudyQuizPage } from './colossiansStudy'
+import { ColossiansStudyIndexPage, ColossiansStudyNotesPage, ColossiansStudySectionPage, StudyLandingPage, StudySignupPage, StudyAccountPage, StudyCommunityPage, StudyQuizPage, StudyResetPasswordPage, StudyVerifyEmailPage } from './studyPages'
 import { SpotifyIcon } from './icons'
 import type { SiteContent, StudyProgram, Testimonial } from './content'
 import { DEFAULTS } from './content'
@@ -386,6 +386,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
   const location = useLocation()
   const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished') || location.pathname.startsWith('/nuggets')
   const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
+  const communityStudy = getHomepageFeaturedStudy(content)
 
   useEffect(() => {
     function handleOutsideClick(e: MouseEvent) {
@@ -444,6 +445,9 @@ function SiteHeader({ content }: { content: SiteContent }) {
             <div className="nav-dropdown-menu">
               <div className="nav-dropdown-menu-inner">
                 <NavLink to="/study" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>All Studies</NavLink>
+                {communityStudy && (
+                  <NavLink to={`/study/${communityStudy.slug}/community`} className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Discussion</NavLink>
+                )}
                 <NavLink to="/scripture" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Scripture Index</NavLink>
               </div>
             </div>
@@ -3209,6 +3213,8 @@ export default function App() {
       <Route path="/start-here" element={<StartHerePage content={content} />} />
         <Route path="/study" element={<StudyRouteFrame content={content} child={<StudyLandingPage content={content} />} />} />
           <Route path="/study/signup" element={<StudyRouteFrame content={content} child={<StudySignupPage />} />} />
+        <Route path="/study/reset-password" element={<StudyRouteFrame content={content} child={<StudyResetPasswordPage />} />} />
+        <Route path="/study/verify-email" element={<StudyRouteFrame content={content} child={<StudyVerifyEmailPage />} />} />
         <Route path="/study/account" element={<StudyRouteFrame content={content} child={<StudyAccountPage />} />} />
         <Route path="/study/:studySlug" element={<StudyRouteFrame content={content} child={<ColossiansStudyIndexPage content={content} />} />} />
         <Route path="/study/:studySlug/community" element={<StudyRouteFrame content={content} child={<StudyCommunityPage content={content} />} />} />

src/content.ts

@@ -1,5 +1,5 @@
-import { DEFAULT_COLOSSIANS_STUDY_SECTIONS } from './colossiansStudyData'
-import type { ColossiansStudySection as ColossiansStudySectionData } from './colossiansStudyData'
+import { DEFAULT_COLOSSIANS_STUDY_SECTIONS } from './legacyColossiansData'
+import type { ColossiansStudySection as ColossiansStudySectionData } from './legacyColossiansData'
 
 export type ColossiansStudySection = ColossiansStudySectionData
 export type StudySection = ColossiansStudySectionData
@@ -296,6 +296,17 @@ export interface SiteContent {
   emailChangeSubject: string
   emailChangeBody: string
   emailChangeCtaLabel: string
+  // ── Verify Email Address (signup) ──
+  emailVerifySubject: string
+  emailVerifyBody: string
+  emailVerifyCtaLabel: string
+  // ── Password Reset ──
+  passwordResetSubject: string
+  passwordResetBody: string
+  passwordResetCtaLabel: string
+  // ── Password Changed Confirmation ──
+  passwordChangedSubject: string
+  passwordChangedBody: string
   // ── 2FA Email OTP ──
   twoFaOtpEmailSubject: string
   twoFaOtpEmailBody: string
@@ -548,6 +559,14 @@ export const DEFAULTS: SiteContent = {
   emailChangeSubject: 'Confirm your new email address',
   emailChangeBody: 'Click the link below to confirm your new account email. If you did not request this change, ignore this message.',
   emailChangeCtaLabel: 'Confirm Email Change',
+  emailVerifySubject: 'Verify your email address',
+  emailVerifyBody: 'Please confirm this is your email address so we can keep your study account secure and deliver reminders you opt into.',
+  emailVerifyCtaLabel: 'Verify Email Address',
+  passwordResetSubject: 'Reset your password',
+  passwordResetBody: 'We received a request to reset the password on your study account. Click below to choose a new password. This link expires in 1 hour.',
+  passwordResetCtaLabel: 'Reset Password',
+  passwordChangedSubject: 'Your password was changed',
+  passwordChangedBody: 'This confirms the password on your study account was just changed. All other active sessions have been signed out. If this wasn’t you, please contact us right away.',
   twoFaOtpEmailSubject: 'Your sign-in code — Verse by Verse with Nate',
   twoFaOtpEmailBody: 'Your two-factor sign-in code is below. Enter it to complete sign-in.',
   twoFaOtpEmailExpiry: 'This code expires in 10 minutes. If you did not request this, you can ignore this message.',

src/studyPages.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import type { SiteContent, StudyProgram, StudySection } from './content'
-import { DEFAULT_COLOSSIANS_STUDY_SECTIONS } from './colossiansStudyData'
+import { DEFAULT_COLOSSIANS_STUDY_SECTIONS } from './legacyColossiansData'
 import { usePageMeta } from './hooks/usePageMeta'
 import { Breadcrumbs } from './components/Breadcrumbs'
 import { StudyCertificate } from './components/StudyCertificate'
@@ -23,6 +23,7 @@ type StudyAuthState = {
   totpEnabled?: boolean
   twoFaMethod?: 'app' | 'email' | null
   totpRecoveryCodesRemaining?: number
+  emailVerified?: boolean
 }
 
 type StudyAuthStatusResponse = {
@@ -36,6 +37,7 @@ type StudyAuthStatusResponse = {
   totpEnabled?: boolean
   twoFaMethod?: 'app' | 'email' | null
   totpRecoveryCodesRemaining?: number
+  emailVerified?: boolean
 }
 
 type StudyAccountOverview = {
@@ -47,9 +49,12 @@ type StudyAccountOverview = {
     reminderFrequency?: string
     remindersPausedUntil?: string | null
     avatarUrl?: string
+    emailVerified?: boolean
   }
   stats: {
     noteCount: number
+    noteLimit: number
+    noteCharLimit: number
     memberSince: string
     lastLoginAt: string | null
     currentStreak: number
@@ -65,6 +70,12 @@ type StudyAccountOverview = {
     completedLessons: number
     noteCount: number
   }>
+  certificates: Array<{
+    studySlug: string
+    studyTitle: string
+    issuedAt: string
+    url: string
+  }>
 }
 
 type StudyNotesMap = Record<string, string>
@@ -1038,7 +1049,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9._%+\-]{1,64}@[a-zA-Z0-9.\-]{1,253}\.[a-zA-Z]{2,
 
 export function StudySignupPage() {
   const navigate = useNavigate()
-  const [mode, setMode] = useState<'signup' | 'login'>('login')
+  const [mode, setMode] = useState<'signup' | 'login' | 'forgot'>('login')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [subscribeNewsletter, setSubscribeNewsletter] = useState(true)
@@ -1052,6 +1063,8 @@ export function StudySignupPage() {
   const [totpCode, setTotpCode] = useState('')
   const [totpMethod, setTotpMethod] = useState<'app' | 'email' | null>(null)
   const [resendStatus, setResendStatus] = useState<'idle' | 'sending' | 'sent'>('idle')
+  // Forgot-password state
+  const [forgotSent, setForgotSent] = useState(false)
 
   useEffect(() => {
     readJson<StudyAuthStatusResponse>('/api/study-auth/status')
@@ -1116,11 +1129,32 @@ export function StudySignupPage() {
     }
   }, [totpPendingToken, totpCode, email])
 
+  const submitForgot = useCallback(async () => {
+    if (!email.trim() || !EMAIL_REGEX.test(email.trim())) {
+      setMessage('Please enter a valid email address.')
+      return
+    }
+    setBusy(true)
+    setMessage('')
+    try {
+      await readJson<{ ok: boolean }>('/api/study-auth/forgot-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: email }),
+      })
+      setForgotSent(true)
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : 'Something went wrong. Please try again.')
+    } finally {
+      setBusy(false)
+    }
+  }, [email])
+
   return (
-    <main className="thanks-page" aria-label={mode === 'signup' ? 'Create account' : 'Sign in'}>
+    <main className="thanks-page" aria-label={mode === 'signup' ? 'Create account' : mode === 'forgot' ? 'Reset password' : 'Sign in'}>
       <div className="thanks-card study-signup-page-card">
         <p className="eyebrow">Free Student Account</p>
-        <h1>{mode === 'signup' ? 'Create Your Account' : 'Welcome Back'}</h1>
+        <h1>{mode === 'signup' ? 'Create Your Account' : mode === 'forgot' ? 'Reset Your Password' : 'Welcome Back'}</h1>
 
         {done ? (
           <>
@@ -1131,6 +1165,41 @@ export function StudySignupPage() {
               <Link to="/study/account" className="btn-secondary" style={{ justifyContent: 'center' }}>My Account</Link>
             </div>
           </>
+        ) : mode === 'forgot' ? (
+          <div className="study-signup-form">
+            {forgotSent ? (
+              <>
+                <p className="study-signup-success">If that email has an account, a reset link is on its way.</p>
+                <p style={{ color: '#b09e79', marginBottom: '1.5rem', fontSize: '0.95rem' }}>Check your inbox and follow the link to choose a new password. The link expires in 1 hour.</p>
+              </>
+            ) : (
+              <>
+                <p style={{ color: '#a89a6a', marginBottom: '1.25rem', fontSize: '0.95rem' }}>
+                  Enter the email address on your account and we'll send you a link to reset your password.
+                </p>
+                <label htmlFor="forgot-email">Email</label>
+                <input
+                  id="forgot-email"
+                  type="email"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  placeholder="your@email.com"
+                  autoComplete="email"
+                  autoFocus
+                  onKeyDown={e => e.key === 'Enter' && submitForgot()}
+                />
+                {message && <p className="study-signup-error">{message}</p>}
+                <div className="study-signup-actions">
+                  <button type="button" className="btn-primary" disabled={busy} onClick={submitForgot}>
+                    {busy ? 'Sending…' : 'Send Reset Link'}
+                  </button>
+                </div>
+              </>
+            )}
+            <div className="study-signup-actions" style={{ marginTop: '1rem' }}>
+              <button type="button" className="btn-secondary" onClick={() => { setMode('login'); setMessage(''); setForgotSent(false) }}>Back to Sign In</button>
+            </div>
+          </div>
         ) : totpPendingToken ? (
           <div className="study-signup-form">
             {totpMethod === 'email' ? (
@@ -1220,6 +1289,11 @@ export function StudySignupPage() {
                 onKeyDown={e => e.key === 'Enter' && submit()}
               />
               {fieldErrors.password && <p className="study-signup-field-error">{fieldErrors.password}</p>}
+              {mode === 'login' && (
+                <button type="button" onClick={() => { setMode('forgot'); setMessage(''); setForgotSent(false) }} style={{ background: 'none', border: 'none', color: '#c9a84c', cursor: 'pointer', fontSize: '0.85rem', textDecoration: 'underline', padding: 0, textAlign: 'left', marginTop: '0.5rem', alignSelf: 'flex-start' }}>
+                  Forgot password?
+                </button>
+              )}
               {mode === 'signup' && (
                 <label className="contact-consent" style={{ marginTop: '0.75rem' }}>
                   <input
@@ -1250,28 +1324,30 @@ export function StudySignupPage() {
               </div>
             </div>
 
-            <div className="study-signup-why-grid" style={{ marginTop: '2rem' }}>
-              <article className="study-signup-why-card">
-                <p className="study-signup-why-icon" aria-hidden="true">📝</p>
-                <h3>Notes on Every Lesson</h3>
-                <p>Save your own notes per lesson — up to 500 notes across all tracks.</p>
-              </article>
-              <article className="study-signup-why-card">
-                <p className="study-signup-why-icon" aria-hidden="true">📖</p>
-                <h3>Space to Go Deep</h3>
-                <p>Each note holds ~2,000 words so you can write as much as you need.</p>
-              </article>
-              <article className="study-signup-why-card">
-                <p className="study-signup-why-icon" aria-hidden="true">🔒</p>
-                <h3>Private to You</h3>
-                <p>Your notes are tied to your account. Nobody else can read them.</p>
-              </article>
-              <article className="study-signup-why-card">
-                <p className="study-signup-why-icon" aria-hidden="true">⚡</p>
-                <h3>Free Forever</h3>
-                <p>Just an email and password. No charge, no ads. Stay signed in 30 days.</p>
-              </article>
-            </div>
+            {mode === 'signup' && (
+              <div className="study-signup-why-grid" style={{ marginTop: '2rem' }}>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">📝</p>
+                  <h3>Notes on Every Lesson</h3>
+                  <p>Save your own notes per lesson — up to 500 notes across all tracks.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">📖</p>
+                  <h3>Space to Go Deep</h3>
+                  <p>Each note holds ~2,000 words so you can write as much as you need.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">🔒</p>
+                  <h3>Private to You</h3>
+                  <p>Your notes are tied to your account. Nobody else can read them.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">⚡</p>
+                  <h3>Free Forever</h3>
+                  <p>Just an email and password. No charge, no ads. Stay signed in 30 days.</p>
+                </article>
+              </div>
+            )}
           </>
         )}
 
@@ -1284,6 +1360,134 @@ export function StudySignupPage() {
   )
 }
 
+export function StudyResetPasswordPage() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const token = useMemo(() => new URLSearchParams(location.search).get('token') ?? '', [location.search])
+
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState('')
+  const [done, setDone] = useState(false)
+
+  const submit = useCallback(async () => {
+    if (!token) { setMessage('This reset link is missing its token.'); return }
+    if (newPassword.length < 8) { setMessage('New password must be at least 8 characters.'); return }
+    if (newPassword !== confirmPassword) { setMessage('Passwords do not match.'); return }
+    setBusy(true)
+    setMessage('')
+    try {
+      await readJson<{ ok: boolean }>('/api/study-auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, newPassword }),
+      })
+      setDone(true)
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : 'Unable to reset password. Please request a new link.')
+    } finally {
+      setBusy(false)
+    }
+  }, [token, newPassword, confirmPassword])
+
+  return (
+    <main className="thanks-page" aria-label="Reset password">
+      <div className="thanks-card study-signup-page-card">
+        <p className="eyebrow">Free Student Account</p>
+        <h1>Reset Your Password</h1>
+
+        {!token ? (
+          <p className="study-signup-error">This link is missing its token. Please use the link from your email, or request a new one.</p>
+        ) : done ? (
+          <>
+            <p className="study-signup-success">Your password has been reset.</p>
+            <p style={{ color: '#b09e79', marginBottom: '1.5rem', fontSize: '0.95rem' }}>You've been signed out of all devices for security. Sign in below with your new password.</p>
+            <button type="button" className="btn-primary" onClick={() => navigate('/study/signup')}>Sign In</button>
+          </>
+        ) : (
+          <div className="study-signup-form">
+            <label htmlFor="reset-new-password">New Password</label>
+            <input
+              id="reset-new-password"
+              type="password"
+              value={newPassword}
+              onChange={e => setNewPassword(e.target.value)}
+              placeholder="At least 8 characters"
+              autoComplete="new-password"
+              autoFocus
+            />
+            <label htmlFor="reset-confirm-password">Confirm New Password</label>
+            <input
+              id="reset-confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              placeholder="Re-enter new password"
+              autoComplete="new-password"
+              onKeyDown={e => e.key === 'Enter' && submit()}
+            />
+            {message && <p className="study-signup-error">{message}</p>}
+            <div className="study-signup-actions">
+              <button type="button" className="btn-primary" disabled={busy} onClick={submit}>
+                {busy ? 'Resetting…' : 'Reset Password'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="study-signup-actions" style={{ marginTop: '1.5rem' }}>
+          <Link to="/study/signup" className="btn-secondary">Back to Sign In</Link>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export function StudyVerifyEmailPage() {
+  const location = useLocation()
+  const token = useMemo(() => new URLSearchParams(location.search).get('token') ?? '', [location.search])
+  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>(token ? 'checking' : 'error')
+  const [message, setMessage] = useState(token ? '' : 'This link is missing its token.')
+
+  useEffect(() => {
+    if (!token) return
+    readJson<{ ok: boolean }>('/api/study-auth/verify-email', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token }),
+    })
+      .then(() => setStatus('ok'))
+      .catch(err => {
+        setStatus('error')
+        setMessage(err instanceof Error ? err.message : 'Unable to verify this link.')
+      })
+  }, [token])
+
+  return (
+    <main className="thanks-page" aria-label="Verify email">
+      <div className="thanks-card study-signup-page-card">
+        <p className="eyebrow">Free Student Account</p>
+        <h1>Verify Your Email</h1>
+
+        {status === 'checking' && <p style={{ color: '#b09e79' }}>Verifying…</p>}
+        {status === 'ok' && (
+          <>
+            <p className="study-signup-success">Your email address is verified.</p>
+            <p style={{ color: '#b09e79', marginBottom: '1.5rem', fontSize: '0.95rem' }}>Thanks for confirming — you're all set.</p>
+          </>
+        )}
+        {status === 'error' && <p className="study-signup-error">{message}</p>}
+
+        <div className="study-signup-actions" style={{ marginTop: '1.5rem' }}>
+          <Link to="/study/account" className="btn-secondary">My Account</Link>
+          <Link to="/study" className="btn-secondary">Back to Studies</Link>
+        </div>
+      </div>
+    </main>
+  )
+}
+
 export function ColossiansStudyIndexPage({ content }: Props) {
   const { studySlug } = useParams<{ studySlug?: string }>()
   const studies = getStudies(content)
@@ -2589,6 +2793,11 @@ export function StudyAccountPage() {
   const [pwSuccess, setPwSuccess] = useState(false)
 
   const [signOutBusy, setSignOutBusy] = useState(false)
+  const [signOutAllBusy, setSignOutAllBusy] = useState(false)
+  const [signOutAllMessage, setSignOutAllMessage] = useState('')
+
+  const [resendVerifyBusy, setResendVerifyBusy] = useState(false)
+  const [resendVerifyMessage, setResendVerifyMessage] = useState('')
 
   const [deleteStep, setDeleteStep] = useState<'idle' | 'warn1' | 'warn2'>('idle')
   const [deleteConfirmInput, setDeleteConfirmInput] = useState('')
@@ -2611,6 +2820,7 @@ export function StudyAccountPage() {
           totpEnabled: data.totpEnabled === true,
           twoFaMethod: data.twoFaMethod ?? null,
           totpRecoveryCodesRemaining: data.totpRecoveryCodesRemaining ?? 0,
+          emailVerified: data.emailVerified === true,
         })
       })
       .catch(() => setAuth({ checked: true, authenticated: false, username: '', enrolledStudySlugs: [], displayName: '', subscribeNewsletter: true }))
@@ -2847,6 +3057,32 @@ export function StudyAccountPage() {
     }
   }
 
+  async function handleSignOutAllDevices() {
+    setSignOutAllBusy(true)
+    setSignOutAllMessage('')
+    try {
+      await readJson<{ ok: boolean }>('/api/study-auth/logout-all', { method: 'POST' })
+      setSignOutAllMessage('Every other device has been signed out. This device stays signed in.')
+    } catch (err) {
+      setSignOutAllMessage(err instanceof Error ? err.message : 'Unable to sign out other devices.')
+    } finally {
+      setSignOutAllBusy(false)
+    }
+  }
+
+  async function handleResendVerification() {
+    setResendVerifyBusy(true)
+    setResendVerifyMessage('')
+    try {
+      const data = await readJson<{ ok: boolean; alreadyVerified?: boolean }>('/api/study-auth/resend-verification', { method: 'POST' })
+      setResendVerifyMessage(data.alreadyVerified ? 'Your email is already verified.' : 'Verification email sent. Check your inbox.')
+    } catch (err) {
+      setResendVerifyMessage(err instanceof Error ? err.message : 'Unable to send verification email.')
+    } finally {
+      setResendVerifyBusy(false)
+    }
+  }
+
   async function handleDeleteAccount() {
     setDeleteBusy(true)
     setDeleteMessage('')
@@ -2918,6 +3154,18 @@ export function StudyAccountPage() {
           </div>
         </div>
 
+        {auth.emailVerified === false && (
+          <div style={{ marginBottom: '1.5rem', background: 'rgba(201,168,76,0.07)', border: '1px solid rgba(201,168,76,0.2)', borderRadius: '8px', padding: '0.75rem 1rem', fontSize: '0.85rem', color: '#a89a6a', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
+            <span><strong style={{ color: '#c9a84c' }}>Verify your email.</strong> We sent a link to {auth.username} — click it to confirm this address.</span>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+              {resendVerifyMessage && <span style={{ fontSize: '0.8rem' }}>{resendVerifyMessage}</span>}
+              <button type="button" className="btn-secondary" style={{ fontSize: '0.82rem', padding: '0.3rem 0.75rem' }} disabled={resendVerifyBusy} onClick={handleResendVerification}>
+                {resendVerifyBusy ? 'Sending…' : 'Resend Email'}
+              </button>
+            </div>
+          </div>
+        )}
+
         {overview?.stats && (
           <>
             <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
@@ -2957,6 +3205,31 @@ export function StudyAccountPage() {
                 })}
               </div>
             )}
+            {overview.stats.noteLimit > 0 && (
+              <div style={{ marginBottom: '1.5rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', marginBottom: '0.3rem', color: '#7a7060' }}>
+                  <span style={{ textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Note Usage</span>
+                  <span>{overview.stats.noteCount}/{overview.stats.noteLimit} notes · up to {overview.stats.noteCharLimit.toLocaleString()} characters each</span>
+                </div>
+                <div style={{ height: '6px', background: '#2a2518', borderRadius: '3px', overflow: 'hidden' }}>
+                  <div style={{ height: '100%', width: `${Math.min(100, Math.round((overview.stats.noteCount / overview.stats.noteLimit) * 100))}%`, background: '#c9a84c', borderRadius: '3px', transition: 'width 0.4s ease' }} />
+                </div>
+              </div>
+            )}
+            {overview.certificates.length > 0 && (
+              <div style={{ marginBottom: '1.5rem' }}>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#7a7060' }}>Certificates</p>
+                {overview.certificates.map(cert => (
+                  <div key={cert.studySlug} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '0.6rem', fontSize: '0.88rem' }}>
+                    <span>🏅 {cert.studyTitle} <span style={{ color: '#7a7060', fontSize: '0.82rem' }}>— {new Date(cert.issuedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span></span>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <a href={cert.url} target="_blank" rel="noopener noreferrer" className="btn-admin-ghost" style={{ fontSize: '0.78rem', padding: '0.2rem 0.6rem' }}>View</a>
+                      <button type="button" className="btn-admin-ghost" style={{ fontSize: '0.78rem', padding: '0.2rem 0.6rem' }} onClick={() => { navigator.clipboard?.writeText(cert.url).catch(() => {}) }}>Copy Link</button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
             {divider}
           </>
         )}
@@ -3451,9 +3724,15 @@ export function StudyAccountPage() {
 
         <section style={{ marginBottom: '2rem' }}>
           <h2 style={{ marginTop: 0 }}>Sign Out</h2>
-          <button type="button" className="btn-secondary" disabled={signOutBusy} onClick={handleSignOut}>
-            {signOutBusy ? 'Signing out...' : 'Sign Out'}
-          </button>
+          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
+            <button type="button" className="btn-secondary" disabled={signOutBusy} onClick={handleSignOut}>
+              {signOutBusy ? 'Signing out...' : 'Sign Out'}
+            </button>
+            <button type="button" className="btn-secondary" disabled={signOutAllBusy} onClick={handleSignOutAllDevices}>
+              {signOutAllBusy ? 'Signing out other devices…' : 'Sign Out of All Other Devices'}
+            </button>
+          </div>
+          {signOutAllMessage && <p className="study-note-status" style={{ marginTop: '0.75rem' }}>{signOutAllMessage}</p>}
         </section>
 
         {divider}