Let users email personal reports on demand

frontend/app/admin/recaps/page.tsx

@@ -123,7 +123,7 @@ export default function EmailRecapsAdminPage() {
         </div>
         {preview && <section className="admin-panel recap-panel recap-preview"><div className="recap-section-heading"><div><span className="recap-eyebrow">Email preview</span><h2>{preview.subject}</h2><p>For {preview.email || 'your profile email'} · Preview links use your saved public address.</p></div><div className="recap-mode-buttons"><button type="button" aria-pressed={previewMode === 'html'} onClick={() => setPreviewMode('html')}>Email design</button><button type="button" aria-pressed={previewMode === 'text'} onClick={() => setPreviewMode('text')}>Plain text</button></div></div>{previewMode === 'html' ? <iframe title="Monthly recap email preview" sandbox="" referrerPolicy="no-referrer" srcDoc={preview.body_html} /> : <pre className="recap-plain-preview">{preview.body_text}</pre>}</section>}
         <section className="admin-panel recap-panel"><div className="recap-section-heading"><div><span className="recap-eyebrow">From queue to inbox</span><h2>Delivery history</h2><p>Server acceptance is recorded here. Inbox placement depends on your mail provider.</p></div><button type="button" className="ghost-button" disabled={!!busy} onClick={() => { setError(''); setRevision((value) => value + 1) }}>Refresh history</button></div>
-          {data.deliveries.length ? <><div className="recap-history-scroll"><table className="recap-history"><thead><tr><th scope="col">Recipient</th><th scope="col">Report</th><th scope="col">Delivery</th><th scope="col">Updated</th></tr></thead><tbody>{data.deliveries.map((delivery) => <tr key={delivery.id}><td><strong>{delivery.username || 'Removed account'}</strong><small>{delivery.email}</small></td><td>{monthLabel(delivery.month)}<small>{delivery.kind === 'test' ? 'Test email' : 'Scheduled recap'}</small></td><td><span className={`recap-pill ${delivery.state === 'sent' ? 'is-enabled' : ['failed', 'unknown'].includes(delivery.state) ? 'is-attention' : ''}`}>{stateLabels[delivery.state] || delivery.state}</span><small>{delivery.attempts} {delivery.attempts === 1 ? 'attempt' : 'attempts'} · {delivery.detail || 'Waiting for the next worker check.'}</small>{delivery.state === 'retry' && <small>Next attempt {dateLabel(delivery.next_attempt_at)}</small>}{delivery.state === 'unknown' && <small>Automatic retries are stopped to avoid a duplicate email.</small>}</td><td>{dateLabel(delivery.updated_at)}</td></tr>)}</tbody></table></div><div className="recap-pagination"><span>{offset + 1}–{Math.min(offset + 50, data.total)} of {data.total}</span><div className="recap-actions"><button className="ghost-button" type="button" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 50))}>Previous</button><button className="ghost-button" type="button" disabled={offset + 50 >= data.total} onClick={() => setOffset(offset + 50)}>Next</button></div></div></> : <div className="recap-empty"><span aria-hidden="true">✉</span><h3>Your first recap starts here</h3><p>Preview your email, send yourself a test, then start the monthly schedule. Delivery results will appear here.</p></div>}
+          {data.deliveries.length ? <><div className="recap-history-scroll"><table className="recap-history"><thead><tr><th scope="col">Recipient</th><th scope="col">Report</th><th scope="col">Delivery</th><th scope="col">Updated</th></tr></thead><tbody>{data.deliveries.map((delivery) => <tr key={delivery.id}><td><strong>{delivery.username || 'Removed account'}</strong><small>{delivery.email}</small></td><td>{monthLabel(delivery.month)}<small>{delivery.kind === 'test' ? 'Test email' : delivery.kind === 'on_demand' ? 'Requested by user' : 'Scheduled recap'}</small></td><td><span className={`recap-pill ${delivery.state === 'sent' ? 'is-enabled' : ['failed', 'unknown'].includes(delivery.state) ? 'is-attention' : ''}`}>{stateLabels[delivery.state] || delivery.state}</span><small>{delivery.attempts} {delivery.attempts === 1 ? 'attempt' : 'attempts'} · {delivery.detail || 'Waiting for the next worker check.'}</small>{delivery.state === 'retry' && <small>Next attempt {dateLabel(delivery.next_attempt_at)}</small>}{delivery.state === 'unknown' && <small>Automatic retries are stopped to avoid a duplicate email.</small>}</td><td>{dateLabel(delivery.updated_at)}</td></tr>)}</tbody></table></div><div className="recap-pagination"><span>{offset + 1}–{Math.min(offset + 50, data.total)} of {data.total}</span><div className="recap-actions"><button className="ghost-button" type="button" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 50))}>Previous</button><button className="ghost-button" type="button" disabled={offset + 50 >= data.total} onClick={() => setOffset(offset + 50)}>Next</button></div></div></> : <div className="recap-empty"><span aria-hidden="true">✉</span><h3>Your first recap starts here</h3><p>Preview your email, send yourself a test, then start the monthly schedule. Delivery results will appear here.</p></div>}
         </section>
       </>}
     </div>

frontend/app/email-recaps/page.tsx

@@ -55,9 +55,9 @@ export default function EmailRecapLinkPage() {
 
   const done = state === 'enabled' || state === 'off'
   return <main className="recap-link-page"><a className="recap-brand" href="/login"><BrandingLogo className="brand-logo" /><span>Magent</span></a><section className="account-panel">
-    <span className="recap-eyebrow">Personal monthly recaps</span>
+    <span className="recap-eyebrow">Personal viewing reports</span>
     <h1>{state === 'enabled' ? 'You’re on the list.' : state === 'off' ? 'Recaps are turned off.' : state === 'loading' ? 'Checking your email link' : state === 'error' ? 'This link needs another look' : link?.action === 'unsubscribe' ? 'Unsubscribe from recaps?' : 'Your month, delivered.'}</h1>
-    <p>{state === 'enabled' ? 'Your email is confirmed. You’ll receive your personal viewing recap when the monthly schedule runs.' : state === 'off' ? 'You won’t receive further monthly recaps. You can turn them back on in Profile.' : state === 'ready' && link?.action === 'unsubscribe' ? 'This turns off your monthly viewing emails. You can still explore all your reports in Magent.' : state === 'ready' ? 'Confirm to receive your minutes, movies, episodes, longest run and requests each month.' : ''}</p>
+    <p>{state === 'enabled' ? 'Your email is confirmed. You’ll receive your personal viewing recap when the monthly schedule runs.' : state === 'off' ? 'You won’t receive further monthly recaps. You can turn them back on in Profile.' : state === 'ready' && link?.action === 'unsubscribe' ? 'This turns off all personal viewing report emails. You can still explore all your reports in Magent.' : state === 'ready' ? 'Confirm to email yourself your minutes, movies, episodes, longest run and requests. Manage automatic monthly delivery separately in Profile.' : ''}</p>
     {error && <p className="account-notice is-error" role="alert">{error}</p>}
     {state === 'ready' && <button type="button" className="account-primary" disabled={busy} onClick={() => void apply()}>{busy ? 'Updating…' : link?.action === 'unsubscribe' ? 'Unsubscribe from recaps' : 'Confirm email recaps'}</button>}
     {(done || state === 'error') && <a className="recap-text-link" href="/profile#monthly-recaps">Manage email preferences ↗</a>}

frontend/app/email-recaps/recaps.css

@@ -76,3 +76,6 @@
   .recap-link-page .account-panel { padding: 26px 22px; }
   .recap-pagination { flex-wrap: wrap; }
 }
+
+.recap-delivery-choice { display: grid; gap: 8px; margin-block: 16px; }
+.recap-delivery-choice select { width: 100%; min-width: 0; }

frontend/app/insights/reports/EmailReportControl.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { authFetch, getApiBase } from '../../lib/auth'
+
+type Delivery = { id: string; month: string; state: string; detail: string }
+type Preference = { email: string | null; can_send: boolean; state: string; detail: string; deliveries: Delivery[] }
+
+export default function EmailReportControl({ month }: { month: string }) {
+  const [data, setData] = useState<Preference | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState('')
+  const [error, setError] = useState('')
+  const [revision, setRevision] = useState(0)
+  const request = useRef<{ month: string; id: string } | null>(null)
+  const pending = data?.deliveries.some((item) => ['queued', 'preparing', 'sending', 'retry'].includes(item.state)) ?? false
+
+  useEffect(() => {
+    const abort = new AbortController()
+    void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal }).then(async (response) => {
+      if (!response.ok) throw new Error('Could not load your report email preferences. Refresh to try again.')
+      const result = await response.json()
+      if (!abort.signal.aborted) setData(result)
+    }).catch((err: Error) => { if (!abort.signal.aborted) setError(err.message) })
+    return () => abort.abort()
+  }, [revision])
+
+  useEffect(() => {
+    if (!pending) return
+    const timer = window.setInterval(() => setRevision((value) => value + 1), 10000)
+    return () => window.clearInterval(timer)
+  }, [pending])
+
+  const send = async () => {
+    if (busy || !data?.can_send) return
+    setBusy(true); setError(''); setNotice('')
+    if (request.current?.month !== month) request.current = { month, id: crypto.randomUUID() }
+    try {
+      const response = await authFetch(`${getApiBase()}/profile/email-recaps/send`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ month, request_id: request.current.id }),
+      })
+      const result = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(typeof result.detail === 'string' ? result.detail : 'Could not queue your report. Try again.')
+      setNotice(result.message); request.current = null
+      setRevision((value) => value + 1)
+    } catch (err) { setError(err instanceof Error ? err.message : 'Could not queue your report.') }
+    finally { setBusy(false) }
+  }
+
+  return <section className="stats-panel report-email-panel" aria-label="Email your report">
+    <div className="stats-panel-heading"><h2>Email yourself this report</h2><a href="/profile#monthly-recaps">Email preferences</a></div>
+    <p>Choose a month above, including the current month so far, then send its viewing and request summary to your confirmed profile email.</p>
+    {data?.can_send ? <p><strong>{data.email}</strong> · One report email every five minutes.</p> : data && <p>{data.state === 'enabled' ? data.detail : 'Confirm your profile email in Email preferences first. You can choose on-demand delivery without automatic monthly emails.'}</p>}
+    <button type="button" disabled={busy || !data?.can_send} onClick={() => void send()}>{busy ? 'Queueing report…' : 'Email this report'}</button>
+    {notice && <p role="status">{notice}</p>}
+    {error && <p role="alert">{error}</p>}
+    {!!data?.deliveries.length && <details><summary>Recent report emails</summary><ul>{data.deliveries.map((item) => <li key={item.id}><strong>{item.month}</strong> · {item.state === 'sent' ? 'Accepted by mail server' : item.state} — {item.detail || 'Waiting for delivery'}</li>)}</ul></details>}
+  </section>
+}

frontend/app/insights/reports/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import EmailReportControl from './EmailReportControl'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, getApiBase } from '../../lib/auth'
@@ -124,6 +126,7 @@ export default function MonthlyReportsPage() {
       <p className="stats-source"><span className={data?.state === 'ready' ? 'stats-source-dot is-ready' : 'stats-source-dot'} />From Jellystat · UTC</p>
     </div>
     {downloadError && <p className="stats-notice" role="alert">{downloadError}</p>}
+    {data?.state === 'ready' && !busy && <EmailReportControl month={data.month} />}
     {busy && <div className="stats-state" role="status"><span className="stats-state-symbol" aria-hidden="true">◷</span><h2>Putting your month together</h2><p>Gathering your viewing history and the previous month’s comparison.</p></div>}
     {error && <div className="stats-state" role="alert"><h2>Report couldn’t load</h2><p>{error}</p><button type="button" className="ghost-button" onClick={() => setRevision((value) => value + 1)}>Try again</button>{month && <button type="button" className="ghost-button" onClick={() => setMonth('')}>Latest complete month</button>}</div>}
     {data?.state === 'not_configured' && <section className="stats-state"><h2>Your monthly story starts here</h2><p>{data.is_admin ? 'Connect Jellystat to bring your monthly viewing reports into Magent.' : 'Monthly reports will appear once your administrator connects Jellystat.'}</p>{data.is_admin && <a className="stats-action" href="/admin/jellystat">Connect Jellystat</a>}</section>}

frontend/app/insights/reports/reports.css

@@ -24,3 +24,7 @@
   .report-month-picker { width: 100%; }
   .report-month-picker label { flex: 1; }
 }
+
+.report-email-panel { display: grid; gap: 12px; }
+.report-email-panel > button { justify-self: start; }
+.report-email-panel p, .report-email-panel li { overflow-wrap: anywhere; }

frontend/app/profile/MonthlyRecapPreference.tsx

@@ -5,12 +5,13 @@ import { useRouter } from 'next/navigation'
 import { authFetch, getApiBase } from '../lib/auth'
 import '../email-recaps/recaps.css'
 
-type Preference = { state: 'off' | 'pending' | 'expired' | 'enabled'; email: string | null; can_subscribe: boolean; detail: string; schedule_enabled: boolean; next_send_at: number | null; day: number; hour: number; resend_after: number | null }
+type Preference = { automatic_monthly: boolean; state: 'off' | 'pending' | 'expired' | 'enabled'; email: string | null; can_subscribe: boolean; detail: string; schedule_enabled: boolean; next_send_at: number | null; day: number; hour: number; resend_after: number | null }
 const scheduled = (value: number) => `${new Date(value * 1000).toLocaleString(undefined, { dateStyle: 'long', timeStyle: 'short', timeZone: 'UTC' })} UTC`
 
 export default function MonthlyRecapPreference() {
   const router = useRouter()
   const [data, setData] = useState<Preference | null>(null)
+  const [automatic, setAutomatic] = useState(false)
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState('')
   const [notice, setNotice] = useState('')
@@ -24,7 +25,7 @@ export default function MonthlyRecapPreference() {
       if (response.status === 401) { router.replace('/login?next=%2Fprofile'); return }
       if (!response.ok) throw new Error('Could not load your email preference. Please try again.')
       const result = await response.json() as Preference
-      if (!abort.signal.aborted) setData(result)
+      if (!abort.signal.aborted) { setData(result); setAutomatic(result.automatic_monthly) }
     }).catch((err: Error) => { if (!abort.signal.aborted) setError(err.message) })
     return () => abort.abort()
   }, [revision, router])
@@ -35,38 +36,43 @@ export default function MonthlyRecapPreference() {
     return () => window.clearInterval(timer)
   }, [data?.resend_after, data?.state])
 
-  const save = async (enabled: boolean) => {
+  const save = async (enabled: boolean, monthly = automatic) => {
     if (busy) return
     setBusy(true); setError(''); setNotice('')
     try {
       const response = await authFetch(`${getApiBase()}/profile/email-recaps`, {
-        method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ enabled }),
+        method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ enabled, automatic_monthly: monthly }),
       })
       if (response.status === 401) { router.replace('/login?next=%2Fprofile'); return }
       const result = await response.json().catch(() => ({}))
       if (!response.ok) throw new Error(typeof result.detail === 'string' ? result.detail : 'Could not update your email preference.')
-      setData(result); setNow(Date.now())
-      setNotice(result.message || (enabled ? 'Monthly recaps are on.' : 'Monthly recaps are off.'))
+      setData(result); setAutomatic(result.automatic_monthly); setNow(Date.now())
+      setNotice(result.message || (enabled ? 'Personal report emails are enabled.' : 'Personal report emails are off.'))
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Could not update your email preference.')
       // A confirmation may be pending even if SMTP could not confirm delivery.
       const response = await authFetch(`${getApiBase()}/profile/email-recaps`).catch(() => null)
-      if (response?.ok) { setData(await response.json()); setNow(Date.now()) }
+      if (response?.ok) { const fresh = await response.json(); setData(fresh); setAutomatic(fresh.automatic_monthly); setNow(Date.now()) }
     } finally { setBusy(false) }
   }
 
   const cooldown = data?.resend_after ? Math.max(0, Math.ceil(data.resend_after - now / 1000)) : 0
   return <section className="recap-preference" id="monthly-recaps" aria-labelledby="recap-preference-title">
-    <div className="recap-section-heading"><div><span className="recap-eyebrow">A little look back</span><h2 id="recap-preference-title">Your month, delivered.</h2></div>{data && <span className={`recap-pill ${data.state === 'enabled' ? 'is-enabled' : ''}`}>{({ off: 'Off', pending: 'Check your inbox', expired: 'Confirmation expired', enabled: 'Subscribed' })[data.state]}</span>}</div>
-    <p>Your minutes, movies, episodes, longest run and requests, in one personal monthly email. <a href="/insights/reports">Explore your latest report ↗</a></p>
+    <div className="recap-section-heading"><div><span className="recap-eyebrow">A little look back</span><h2 id="recap-preference-title">Your reports, your choice.</h2></div>{data && <span className={`recap-pill ${data.state === 'enabled' ? 'is-enabled' : ''}`}>{({ off: 'Off', pending: 'Check your inbox', expired: 'Confirmation expired', enabled: 'Email confirmed' })[data.state]}</span>}</div>
+    <p>Email yourself your viewing report whenever you want. Choose a previous month or the current month so far, and decide whether you also want automatic monthly emails. <a href="/insights/reports">Explore your latest report ↗</a></p>
     {!data && !error && <p role="status">Loading your email preference…</p>}
     {data && <>
-      {data.state === 'enabled' ? <p className="recap-delivery-address">Recaps will go to <strong>{data.email}</strong>. {data.schedule_enabled && data.next_send_at ? `Next scheduled send: ${scheduled(data.next_send_at)}.` : 'The administrator has paused scheduled delivery.'}</p> : <p>{data.state === 'pending' ? `Check ${data.email} for a confirmation link. It expires after 24 hours. No viewing history is emailed until you confirm.` : data.state === 'expired' ? 'Request a new confirmation link to turn on your recaps.' : 'Confirm your profile email to turn this on. You can unsubscribe from any recap or here in Profile.'}</p>}
+      {data.state === 'enabled' ? <p className="recap-delivery-address">Recaps will go to <strong>{data.email}</strong>. {!data.automatic_monthly ? 'On demand only: choose a month in Reports and email it whenever you want.' : data.schedule_enabled && data.next_send_at ? `Next scheduled send: ${scheduled(data.next_send_at)}.` : 'The administrator has paused scheduled delivery.'}</p> : <p>{data.state === 'pending' ? `Check ${data.email} for a confirmation link. It expires after 24 hours. No viewing history is emailed until you confirm.` : data.state === 'expired' ? 'Request a new confirmation link to turn on your recaps.' : 'Confirm your profile email to turn this on. You can unsubscribe from any recap or here in Profile.'}</p>}
       {!data.can_subscribe && data.state !== 'enabled' && <p className="recap-muted">{data.detail}</p>}
-      {data.state !== 'enabled' && data.can_subscribe && !data.schedule_enabled && <p className="recap-muted">You can subscribe now. Monthly sends will begin when your administrator starts the schedule.</p>}
+      {data.state !== 'enabled' && data.can_subscribe && automatic && !data.schedule_enabled && <p className="recap-muted">You can subscribe now. Monthly sends will begin when your administrator starts the schedule.</p>}
+      <label className="recap-delivery-choice">Delivery preference<select value={automatic ? 'monthly' : 'manual'} disabled={busy || data.state === 'pending'} onChange={(event) => {
+        const monthly = event.target.value === 'monthly'
+        setAutomatic(monthly)
+        if (data.state === 'enabled') void save(true, monthly)
+      }}><option value="manual">On demand only</option><option value="monthly">On demand + automatic monthly emails</option></select></label>
       <div className="recap-actions">
-        {data.state !== 'enabled' && <button type="button" className="account-primary" disabled={busy || !data.can_subscribe || cooldown > 0} onClick={() => void save(true)}>{busy ? 'Sending confirmation…' : data.state === 'off' ? 'Email me my monthly recap' : 'Send a new confirmation'}</button>}
-        {data.state !== 'off' && <button type="button" className="account-secondary" disabled={busy} onClick={() => void save(false)}>{busy ? 'Updating…' : data.state === 'enabled' ? 'Turn off recaps' : 'Cancel subscription'}</button>}
+        {data.state !== 'enabled' && <button type="button" className="account-primary" disabled={busy || !data.can_subscribe || cooldown > 0} onClick={() => void save(true)}>{busy ? 'Sending confirmation…' : data.state === 'off' ? 'Confirm my email for reports' : 'Send a new confirmation'}</button>}
+        {data.state !== 'off' && <button type="button" className="account-secondary" disabled={busy} onClick={() => void save(false)}>{busy ? 'Updating…' : data.state === 'enabled' ? 'Turn off report emails' : 'Cancel subscription'}</button>}
         <button type="button" className="account-secondary" disabled={busy} onClick={() => { setNotice(''); setRevision((value) => value + 1) }}>Refresh preference</button>
       </div>
       {cooldown > 0 && data.state !== 'enabled' && <p className="recap-muted">Another confirmation can be requested in {Math.ceil(cooldown / 60)} {Math.ceil(cooldown / 60) === 1 ? 'minute' : 'minutes'}.</p>}