@anthusai/papyrus 5.43.0-next.2 → 5.43.0-next.21

package/components/monitoring-overview-view.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { CheckIcon, XIcon } from "lucide-react";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import {
   confidenceText,
@@ -12,7 +13,12 @@ import {
   beginEmailSubmissionAction,
   endEmailSubmissionAction,
   isCurrentEmailSubmissionAction,
+  emailSubmissionAccepted,
+  QUARANTINE_LABELS,
+  type EmailDecisionResult,
+  type EmailQuarantine,
   type MonitoringItem,
+  type MonitoringListName,
   type MonitoringEmailDetails,
   type MonitoringEmailArticleResolution,
   type EmailReferenceImportItem,
@@ -25,6 +31,27 @@ import {
 
 export type MonitoringMode = "publication" | "all";
 
+/** How a paged list loads more: the page owns the cursors and the requests, the view only shows the button. */
+export type MonitoringPaging = {
+  /** Loads the next page of a list; the page appends it. */
+  onLoadMore?: (list: MonitoringListName) => void;
+  /** The list whose next page is being fetched. */
+  loadingList?: MonitoringListName | null;
+  /** Show only email submissions held for review (restarts the email list from its newest held message). */
+  heldOnly?: boolean;
+  onHeldOnlyChange?: (heldOnly: boolean) => void;
+};
+
+function LoadMore({ list, cursor, paging }: { list: MonitoringListName; cursor: string | null | undefined; paging?: MonitoringPaging }) {
+  if (!cursor || !paging?.onLoadMore) return null;
+  const loading = paging.loadingList === list;
+  return (
+    <button type="button" data-monitoring-load-more={list} disabled={loading} onClick={() => paging.onLoadMore?.(list)}>
+      {loading ? "Loading…" : "Load more"}
+    </button>
+  );
+}
+
 const STATUS_WORDS: Record<string, string> = { complete: "Complete", partial: "Partial", stopped: "Stopped", failed: "Failed", error: "Error" };
 const status = (value: string) => STATUS_WORDS[value] ?? value;
 const STOP_WORDS: Record<string, string> = {
@@ -97,8 +124,10 @@ function QueueItem({ item, ownId, demo }: { item: MonitoringItem; ownId: string
   );
 }
 
-export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImportCandidates }: {
+export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImportCandidates, onDecide, cursor, paging }: {
   items: MonitoringEmailSummary[]; detail: MonitoringEmailDetails | null; onOpen?: (receiptId: string) => void;
+  cursor?: string | null; paging?: MonitoringPaging;
+  onDecide?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
   onResolveArticleLink?: (receiptId: string, candidateIndex: number) => Promise<MonitoringEmailArticleResolution>;
   onImportCandidates?: (receiptId: string, items: EmailReferenceImportItem[]) => Promise<EmailReferenceImportOutcome>;
 }) {
@@ -108,8 +137,16 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   const [busyImportByReceipt, setBusyImportByReceipt] = useState<Record<string, boolean>>({});
   const [noticeByReceipt, setNoticeByReceipt] = useState<Record<string, string>>({});
   const [importedByReceipt, setImportedByReceipt] = useState<Record<string, EmailReferenceImportOutcome["references"]>>({});
+  const [decidedByReceipt, setDecidedByReceipt] = useState<Record<string, EmailQuarantine>>({});
+  const [reasonByReceipt, setReasonByReceipt] = useState<Record<string, string>>({});
+  const [busyDecisionByReceipt, setBusyDecisionByReceipt] = useState<Record<string, boolean>>({});
   const receiptId = detail && "submission" in detail ? detail.submission.receiptId : null;
   const receiptKey = receiptId ?? "";
+  const quarantine = (detail && "submission" in detail ? decidedByReceipt[receiptKey] ?? detail.submission.quarantine : null);
+  const accepted = emailSubmissionAccepted(quarantine);
+  const groupInfo = detail && "submission" in detail ? items.find((item) => item.receiptId === detail.submission.receiptId)?.group : undefined;
+  const reason = reasonByReceipt[receiptKey] ?? "";
+  const busyDecision = busyDecisionByReceipt[receiptKey] ?? false;
   const selected = selectedByReceipt[receiptKey] ?? {};
   const resolved = resolvedByReceipt[receiptKey] ?? {};
   const busyIndex = busyIndexByReceipt[receiptKey] ?? null;
@@ -139,7 +176,7 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
       if (!isCurrentEmailSubmissionAction(activeReceiptId.current, requestReceiptId)) return;
       if (!("url" in result)) {
         const reason = "reason" in result && typeof result.reason === "string"
-          && /^(?:redirect_[a-z_]+|resolution_record_invalid|resolution_not_recorded)$/.test(result.reason)
+          && /^(?:redirect_[a-z_]+|resolution_record_invalid|resolution_not_recorded|invalid_url|not_public|dns|timeout|connection|tls|loop|http_4xx|http_5xx|blocked|too_large|unreadable|unsafe_destination|no_query|search_unavailable|search_error|no_match)$/.test(result.reason)
           ? ` (${result.reason})` : "";
         setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: `The article destination could not be resolved safely${reason}. The original link remains private and unchanged.` }));
         return;
@@ -147,7 +184,9 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
       const candidate = detail && "submission" in detail ? detail.candidateLinks[index] : null;
       setResolvedByReceipt((current) => ({ ...current, [requestReceiptId]: { ...current[requestReceiptId], [index]: { url: result.url, title: result.title || candidate?.title || "Article" } } }));
       setSelectedByReceipt((current) => ({ ...current, [requestReceiptId]: { ...current[requestReceiptId], [index]: true } }));
-      setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "Resolved. This request may be recorded as a click by the newsletter sender." }));
+      setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: result.foundVia === "search"
+        ? `The newsletter link could not be followed, so this article was found by searching the headline (match ${Math.round((result.search?.matchScore ?? 0) * 100)}%). Check that it is the right article before importing it.`
+        : "Resolved. This request may be recorded as a click by the newsletter sender." }));
     } catch {
       if (isCurrentEmailSubmissionAction(activeReceiptId.current, requestReceiptId)) {
         setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "The article destination could not be resolved. Try again later." }));
@@ -158,6 +197,34 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
     }
   };
 
+  const decide = async (decision: "accept" | "reject") => {
+    if (!receiptId || !onDecide) return;
+    const requestReceiptId = receiptId;
+    const actionKey = `decide:${requestReceiptId}`;
+    if (!beginEmailSubmissionAction(inFlightActions.current, actionKey)) return;
+    setBusyDecisionByReceipt((current) => ({ ...current, [requestReceiptId]: true }));
+    setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "" }));
+    try {
+      const result = await onDecide(requestReceiptId, decision, reason.trim());
+      if ("ok" in result) {
+        setDecidedByReceipt((current) => ({ ...current, [requestReceiptId]: result.quarantine }));
+        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: decision === "accept"
+          ? "Accepted. The receiver queues it within a minute; the links can be added to References once it is queued."
+          : "Rejected. The message is closed and kept privately until it expires." }));
+      } else if ("error" in result && result.quarantine) {
+        setDecidedByReceipt((current) => ({ ...current, [requestReceiptId]: result.quarantine as EmailQuarantine }));
+        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "Another decision was already recorded for this message; it cannot be changed." }));
+      } else {
+        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "The decision was not recorded. Check your editor access and try again." }));
+      }
+    } catch {
+      setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "The decision was not recorded. It is safe to try again." }));
+    } finally {
+      endEmailSubmissionAction(inFlightActions.current, actionKey);
+      setBusyDecisionByReceipt((current) => ({ ...current, [requestReceiptId]: false }));
+    }
+  };
+
   const importSelected = async () => {
     if (!receiptId || !detail || !("submission" in detail) || !onImportCandidates) return;
     const requestReceiptId = receiptId;
@@ -199,9 +266,23 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   return (
     <article className="news-desk-doctrine-card" data-monitoring-section="email-submissions">
       <div className="news-desk-doctrine-card__header"><div><h3>Email submissions</h3><span>Untrusted source material held privately for editor review</span></div></div>
+      {paging?.onHeldOnlyChange ? (
+        <div className="news-desk-monitoring__scope" role="group" aria-label="Filter email submissions">
+          <button type="button" aria-pressed={!paging.heldOnly} data-email-filter="all" onClick={() => paging.onHeldOnlyChange?.(false)}>All</button>
+          <button type="button" aria-pressed={paging.heldOnly === true} data-email-filter="held" onClick={() => paging.onHeldOnlyChange?.(true)}>Held for review</button>
+        </div>
+      ) : null}
       {items.length ? <ul className="news-desk-monitoring__list">
         {items.map((item) => <li key={item.receiptId} data-email-submission={item.receiptId}>
           <strong>{item.subject || "(no subject)"}</strong>
+          {item.group ? <details data-email-group={item.group.fingerprint}>
+            <summary>Received {item.group.count} times · latest {formatUtc(item.observedAt)}</summary>
+            <ol>
+              {item.group.copies.map((copy) => <li key={copy.receiptId} data-email-copy={copy.receiptId}>
+                {formatUtc(copy.observedAt)} · {copy.quarantine ? QUARANTINE_LABELS[copy.quarantine.state] : copy.status}
+              </li>)}
+            </ol>
+          </details> : null}
           <span>{formatUtc(item.observedAt)} · {item.linkCount} candidate links · {item.reviewRequired
             ? `${item.linkCount} await editor import` : `${item.processedCount} queued`}</span>
           {item.reviewRequired ? <span>Authentication warnings: private review required; nothing was routed automatically.</span> : null}
@@ -210,40 +291,71 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
           <span>SES signals — SPF {item.verdicts.spf}, DKIM {item.verdicts.dkim}, DMARC {item.verdicts.dmarc}; spam {item.verdicts.spam}, virus {item.verdicts.virus}</span>
           {item.warnings.length ? <span>Warnings: {item.warnings.join(", ")}</span> : null}
           {item.errorCode ? <span>State: {item.status} ({item.errorCode})</span> : <span>State: {item.status}</span>}
+          {item.quarantine ? <span data-email-quarantine-state={item.quarantine.state}>{QUARANTINE_LABELS[item.quarantine.state]}</span> : null}
           {onOpen ? <button type="button" onClick={() => onOpen(item.receiptId)}>Read email and review candidate links</button> : null}
         </li>)}
-      </ul> : <p>No email submissions are available for this publication.</p>}
+      </ul> : <p>{paging?.heldOnly ? "No email submissions are held for review." : "No email submissions are available for this publication."}</p>}
+      <LoadMore list="emailSubmissions" cursor={cursor} paging={paging} />
       {detail && "submission" in detail ? (
         <section aria-label="Email submission details" data-email-submission-details={detail.submission.receiptId}>
           <h4>{detail.submission.subject || "Submitted email"}</h4>
           <p>Original content is shown as inert text. Sender and message content are untrusted; no instructions are executed.</p>
           <pre style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{detail.safeBodyText}</pre>
+          {quarantine ? <section aria-label="Held for review" data-email-quarantine={quarantine.state}>
+            <h5>{QUARANTINE_LABELS[quarantine.state]}</h5>
+            {quarantine.state === "quarantined" ? <>
+              <p>This message was held privately and nothing was routed. Accept it to queue its links as if it had been accepted, or Reject it to close it. Sender identity and authentication signals never grant access; the decision is yours and is recorded.</p>
+              {groupInfo ? <p data-email-group-note>One decision applies to all {groupInfo.count} copies of this email.</p> : null}
+              <label>Why? (optional)
+                <textarea value={reason} rows={3} maxLength={500} style={{ display: "block", width: "100%" }}
+                  onChange={(event) => setReasonByReceipt((current) => ({ ...current, [receiptKey]: event.target.value }))} />
+              </label>
+              <button type="button" data-email-decision="accept" disabled={busyDecision || !onDecide} onClick={() => void decide("accept")}>
+                <CheckIcon aria-hidden="true" size={16} /> Accept
+              </button>
+              <button type="button" data-email-decision="reject" disabled={busyDecision || !onDecide} onClick={() => void decide("reject")}>
+                <XIcon aria-hidden="true" size={16} /> Reject
+              </button>
+            </> : null}
+            {quarantine.decision ? <p data-email-decision-record>
+              {quarantine.decision.action === "accept" ? "Accepted" : "Rejected"}{quarantine.decision.viaGroup ? " (one decision for every copy of this email)" : ""}
+              {quarantine.decision.by ? ` by ${quarantine.decision.by}` : ""}{quarantine.decision.at ? ` on ${formatUtc(quarantine.decision.at)}` : ""}
+              {quarantine.decision.reason ? `. Why: ${quarantine.decision.reason}` : "."}
+            </p> : null}
+            {quarantine.failure ? <p role="alert">The decision could not be applied ({quarantine.failure}).</p> : null}
+            {quarantine.state === "expired" ? <p>This message expired and can no longer be accepted.</p> : null}
+            {notice && !accepted ? <p role="status" data-email-decision-result>{notice}</p> : null}
+          </section> : null}
           <h5>Candidate references ({detail.candidateLinks.length})</h5>
           <ul>{detail.candidateLinks.map((link, index) => <li key={`${link.url}-${index}`}>
-            {link.resolutionStatus === "unresolved" && !resolved[index]
+            {!accepted
+              ? <span>{link.title || "Source link"} <code>{link.url}</code></span>
+              : link.resolutionStatus === "unresolved" && !resolved[index]
               ? <span>{link.title || "Newsletter article link"} (tracking redirect not opened)</span>
               : <a href={(resolved[index]?.url ?? link.url)} target="_blank" rel="noreferrer noopener">{resolved[index]?.title ?? (link.title || "Source link")}</a>}
-            <label>
+            {accepted ? <label>
               <input type="checkbox" checked={selected[index] ?? false}
                 disabled={link.resolutionStatus === "unresolved" && !resolved[index]}
                 onChange={(event) => setSelectedByReceipt((current) => ({ ...current, [receiptKey]: { ...current[receiptKey], [index]: event.target.checked } }))} />
               Add as pending Reference
-            </label>
-            {link.resolutionStatus === "unresolved" && !resolved[index] ? (
+            </label> : null}
+            {accepted && link.resolutionStatus === "unresolved" && !resolved[index] ? (
               <button type="button" disabled={busyIndex !== null || !onResolveArticleLink} onClick={() => void resolveLink(index)}>
                 {busyIndex === index ? "Resolving…" : "Resolve article redirect (may register a click)"}
               </button>
             ) : null}
           </li>)}</ul>
-          <p>Adding links creates or reuses pending References. It does not approve, label, classify, or publish them.</p>
-          <button type="button" disabled={busyImport || !onImportCandidates || !detail.submission.corpusId}
-            onClick={() => void importSelected()}>
-            {busyImport ? "Adding References…" : "Add selected links to References"}
-          </button>
-          {notice ? <p role="status" data-email-import-result>{notice}</p> : null}
-          {importedReferences.length ? <ul>{importedReferences.map((reference, index) => (
-            <li key={`${reference.id}-${index}`}><Link href={getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(reference.lineageId)}`, false)}>Review imported Reference {index + 1}</Link></li>
-          ))}</ul> : null}
+          {accepted ? <>
+            <p>Adding links creates or reuses pending References. It does not approve, label, classify, or publish them.</p>
+            <button type="button" disabled={busyImport || !onImportCandidates || !detail.submission.corpusId}
+              onClick={() => void importSelected()}>
+              {busyImport ? "Adding References…" : "Add selected links to References"}
+            </button>
+            {notice ? <p role="status" data-email-import-result>{notice}</p> : null}
+            {importedReferences.length ? <ul>{importedReferences.map((reference, index) => (
+              <li key={`${reference.id}-${index}`}><Link href={getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(reference.lineageId)}`, false)}>Review imported Reference {index + 1}</Link></li>
+            ))}</ul> : null}
+          </> : <p>Links stay inert text, and nothing can be added to References, until this message is accepted.</p>}
         </section>
       ) : detail && "error" in detail ? <p role="alert">You cannot read this submission.</p>
         : detail && "state" in detail ? <p role="alert">Submission details are unavailable.</p> : null}
@@ -251,8 +363,9 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   );
 }
 
-function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onImportCandidates }: {
-  data: MonitoringOverview; demo: boolean; emailDetail: MonitoringEmailDetails | null; onEmailOpen: (id: string) => void;
+function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onImportCandidates, onDecide, paging }: {
+  data: MonitoringOverview; demo: boolean; paging?: MonitoringPaging; emailDetail: MonitoringEmailDetails | null; onEmailOpen: (id: string) => void;
+  onDecide?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
   onResolveArticleLink?: (receiptId: string, candidateIndex: number) => Promise<MonitoringEmailArticleResolution>;
   onImportCandidates?: (receiptId: string, items: EmailReferenceImportItem[]) => Promise<EmailReferenceImportOutcome>;
 }) {
@@ -264,8 +377,10 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
       ) : null}
 
       <EmailSubmissions items={data.emailSubmissions ?? []} detail={emailDetail} onOpen={onEmailOpen}
+        cursor={data.cursors?.emailSubmissions} paging={paging}
         onResolveArticleLink={demo ? undefined : onResolveArticleLink}
-        onImportCandidates={demo ? undefined : onImportCandidates} />
+        onImportCandidates={demo ? undefined : onImportCandidates}
+        onDecide={demo ? undefined : onDecide} />
 
       <article className="news-desk-doctrine-card" data-monitoring-section="router">
         <div className="news-desk-doctrine-card__header"><div><h3>Router</h3><span>Sends collected items to the shared Cyclotron and delivers relevant ones to References</span></div></div>
@@ -323,6 +438,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             ))}
           </ul>
         ) : <p>No collector runs recorded yet.</p>}
+        <LoadMore list="runs" cursor={data.cursors?.runs} paging={paging} />
         {data.routerRuns.length ? (
           <ul className="news-desk-monitoring__list" data-monitoring-router-runs>
             {data.routerRuns.map((run) => (
@@ -335,6 +451,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             ))}
           </ul>
         ) : null}
+        <LoadMore list="routerRuns" cursor={data.cursors?.routerRuns} paging={paging} />
       </article>
 
       <article className="news-desk-doctrine-card" data-monitoring-section="queue">
@@ -344,6 +461,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             {data.items.map((item) => <QueueItem key={`${item.monitorId ?? ""}-${item.sourceId}-${item.revision}`} item={item} ownId={data.scope.publicationId} demo={demo} />)}
           </ul>
         ) : <p>No items in the queue.</p>}
+        <LoadMore list="items" cursor={data.cursors?.items} paging={paging} />
         {data.hiddenNotRelevant > 0 ? (
           <p className="news-desk-delegation-note" data-monitoring-hidden>
             {data.hiddenNotRelevant} {data.hiddenNotRelevant === 1 ? "item" : "items"} judged not relevant to this publication {data.hiddenNotRelevant === 1 ? "is" : "are"} not listed.
@@ -373,7 +491,10 @@ export function MonitoringOverviewView({
   onEmailOpen = () => {},
   onResolveArticleLink,
   onImportCandidates,
+  onDecide,
+  paging,
 }: {
+  paging?: MonitoringPaging;
   result: MonitoringResult | null;
   canViewAll: boolean;
   mode: MonitoringMode;
@@ -383,6 +504,7 @@ export function MonitoringOverviewView({
   onEmailOpen?: (receiptId: string) => void;
   onResolveArticleLink?: (receiptId: string, candidateIndex: number) => Promise<MonitoringEmailArticleResolution>;
   onImportCandidates?: (receiptId: string, items: EmailReferenceImportItem[]) => Promise<EmailReferenceImportOutcome>;
+  onDecide?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
 }) {
   let body: React.ReactNode;
   if (result === null) {
@@ -399,7 +521,7 @@ export function MonitoringOverviewView({
     body = <Message kind="empty" title="Nothing has been collected yet">No feed is configured and no run has been recorded. Items appear here after the collector&apos;s first run.</Message>;
   } else {
     body = <Ready data={result} demo={demo} emailDetail={emailDetail} onEmailOpen={onEmailOpen}
-      onResolveArticleLink={onResolveArticleLink} onImportCandidates={onImportCandidates} />;
+      onResolveArticleLink={onResolveArticleLink} onImportCandidates={onImportCandidates} onDecide={onDecide} paging={paging} />;
   }
   const scopeLine = result && "scope" in result
     ? (result.scope.mode === "all" ? "Showing the whole shared pipeline, every publication." : `Showing what is relevant to ${result.scope.publicationId ?? "this publication"}.`)

package/components/monitoring-panel.tsx

@@ -3,13 +3,22 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import {
+  decideMonitoringEmailSubmission,
   importMonitoringEmailCandidates,
   loadMonitoringEmailSubmission,
   loadMonitoringOverview,
+  loadMonitoringPage,
   resolveMonitoringEmailArticleLink,
 } from "../lib/monitoring-client";
 import { FIXTURE_ALL_PIPELINE_OVERVIEW, FIXTURE_MONITORING_OVERVIEW } from "../lib/monitoring-overview-fixture";
-import type { EmailReferenceImportItem, MonitoringEmailDetails, MonitoringResult } from "../lib/monitoring-overview";
+import { withLoadedPages } from "../lib/monitoring-paging";
+import type {
+  EmailReferenceImportItem,
+  MonitoringEmailDetails,
+  MonitoringListName,
+  MonitoringResult,
+} from "../lib/monitoring-overview";
+import type { MonitoringLoadedPages } from "../lib/monitoring-paging";
 import { EmailSubmissions, MonitoringOverviewView, type MonitoringMode } from "./monitoring-overview-view";
 
 const REFRESH_MILLISECONDS = 60_000;
@@ -39,7 +48,8 @@ function MonitoringEmailReceipt({ receiptId, isDemo }: { receiptId: string; isDe
   return <div data-news-desk-admin-panel="monitoring">
     {detail === null ? <p role="status">Loading email submission…</p> :
       <EmailSubmissions items={"submission" in detail ? [detail.submission] : []} detail={detail}
-        onResolveArticleLink={resolveMonitoringEmailArticleLink} onImportCandidates={importMonitoringEmailCandidates} />}
+        onResolveArticleLink={resolveMonitoringEmailArticleLink} onImportCandidates={importMonitoringEmailCandidates}
+        onDecide={decideMonitoringEmailSubmission} />}
   </div>;
 }
 
@@ -48,6 +58,18 @@ function MonitoringOverviewPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo
   const [mode, setMode] = useState<MonitoringMode>("publication");
   const [result, setResult] = useState<MonitoringResult | null>(null);
   const [emailDetail, setEmailDetail] = useState<MonitoringEmailDetails | null>(null);
+  // Pages the editor loaded beyond the newest page of each list. The 60 second refresh re-reads only the newest
+  // page, so what was loaded stays on screen.
+  const [loaded, setLoaded] = useState<MonitoringLoadedPages>({});
+  const [heldOnly, setHeldOnly] = useState(false);
+  const [held, setHeld] = useState<MonitoringLoadedPages["emailSubmissions"] | null>(null);
+  const [loadingList, setLoadingList] = useState<MonitoringListName | null>(null);
+
+  useEffect(() => {
+    setLoaded({});
+    setHeldOnly(false);
+    setHeld(null);
+  }, [mode]);
 
   useEffect(() => {
     if (isDemo) {
@@ -78,13 +100,51 @@ function MonitoringOverviewPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo
     setEmailDetail(next);
   };
 
+  // Appends the next page of a list, or (held filter) the next page of held messages.
+  const loadMore = async (list: MonitoringListName) => {
+    if (isDemo || !result || !("scope" in result) || loadingList) return;
+    const current = withLoadedPages(result as never, loaded, heldOnly ? held : null);
+    const cursor = current.cursors?.[list];
+    if (!cursor) return;
+    setLoadingList(list);
+    try {
+      const page = await loadMonitoringPage(list, cursor, mode, heldOnly && list === "emailSubmissions");
+      if (!("rows" in page)) return;
+      if (heldOnly && list === "emailSubmissions") {
+        setHeld((existing) => ({ rows: [...(existing?.rows ?? []), ...page.rows] as never, cursor: page.cursor }));
+      } else {
+        setLoaded((existing) => ({ ...existing, [list]: { rows: [...(existing[list]?.rows ?? []), ...page.rows], cursor: page.cursor } }) as MonitoringLoadedPages);
+      }
+    } finally {
+      setLoadingList(null);
+    }
+  };
+
+  // Held for review restarts the email list at its newest held message, however old.
+  const changeHeldOnly = async (next: boolean) => {
+    setHeldOnly(next);
+    setHeld(null);
+    if (!next || isDemo) return;
+    setLoadingList("emailSubmissions");
+    try {
+      const page = await loadMonitoringPage("emailSubmissions", null, mode, true);
+      if ("rows" in page) setHeld({ rows: page.rows as never, cursor: page.cursor });
+      else setHeldOnly(false);
+    } finally {
+      setLoadingList(null);
+    }
+  };
+
+  const shown = result && "scope" in result ? withLoadedPages(result as never, loaded, heldOnly ? held ?? { rows: [], cursor: null } : null) : result;
+
   const resolveEmailArticleLink = (receiptId: string, candidateIndex: number) =>
     resolveMonitoringEmailArticleLink(receiptId, candidateIndex);
 
   const importEmailCandidates = (receiptId: string, candidates: EmailReferenceImportItem[]) =>
     importMonitoringEmailCandidates(receiptId, candidates);
 
-  return <MonitoringOverviewView result={result} canViewAll={isAdmin} mode={mode} onModeChange={setMode} demo={isDemo}
+  return <MonitoringOverviewView result={shown} canViewAll={isAdmin} mode={mode} onModeChange={setMode} demo={isDemo}
     emailDetail={emailDetail} onEmailOpen={isDemo ? () => {} : openEmail} onResolveArticleLink={isDemo ? undefined : resolveEmailArticleLink}
-    onImportCandidates={importEmailCandidates} />;
+    onImportCandidates={importEmailCandidates} onDecide={isDemo ? undefined : decideMonitoringEmailSubmission}
+    paging={isDemo ? undefined : { onLoadMore: (list) => void loadMore(list), loadingList, heldOnly, onHeldOnlyChange: (next) => void changeHeldOnly(next) }} />;
 }