@anthusai/papyrus 5.42.1 → 5.43.0-next.10

package/components/dev-sandbox-editor-sign-in.tsx

@@ -2,9 +2,9 @@
 
 import { fetchAuthSession, signIn, signOut } from "aws-amplify/auth";
 import { configureAmplifyClient } from "./amplify-client-provider";
+import { hasEditorRights } from "../lib/staff-groups";
 import type { DevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
 
-const EDITOR_GROUPS = new Set(["editor", "admin"]);
 
 function readSessionGroups(session: Awaited<ReturnType<typeof fetchAuthSession>>): string[] {
   const accessPayload = session.tokens?.accessToken?.payload ?? {};
@@ -29,7 +29,7 @@ function readSessionGroups(session: Awaited<ReturnType<typeof fetchAuthSession>>
 
 function sessionHasEditorAccess(session: Awaited<ReturnType<typeof fetchAuthSession>>): boolean {
   if (!session.tokens?.accessToken) return false;
-  return readSessionGroups(session).some((group) => EDITOR_GROUPS.has(group));
+  return hasEditorRights(readSessionGroups(session));
 }
 
 export async function ensureDevSandboxEditorSession(

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
   );
 }
 
-function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImportCandidates }: {
-  items: MonitoringEmailSummary[]; detail: MonitoringEmailDetails | null; onOpen: (receiptId: string) => void;
+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,15 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
   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 reason = reasonByReceipt[receiptKey] ?? "";
+  const busyDecision = busyDecisionByReceipt[receiptKey] ?? false;
   const selected = selectedByReceipt[receiptKey] ?? {};
   const resolved = resolvedByReceipt[receiptKey] ?? {};
   const busyIndex = busyIndexByReceipt[receiptKey] ?? null;
@@ -138,13 +174,18 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
       const result = await onResolveArticleLink(requestReceiptId, index);
       if (!isCurrentEmailSubmissionAction(activeReceiptId.current, requestReceiptId)) return;
       if (!("url" in result)) {
-        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: "The article destination could not be resolved safely. The original link remains private and unchanged." }));
+        const reason = "reason" in result && typeof result.reason === "string"
+          && /^(?: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;
       }
       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." }));
@@ -155,6 +196,34 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
     }
   };
 
+  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;
@@ -181,7 +250,7 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
       if (result.error) {
         setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: `${result.imported} of ${candidates.length} selected candidates were registered or matched. ${result.error}` }));
       } else {
-        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: `${result.imported} selected candidates are available as References. Import does not approve or publish them.` }));
+        setNoticeByReceipt((current) => ({ ...current, [requestReceiptId]: `${result.imported} selected candidates are available as References. Predictions are queued in the cloud; review them when ready. Import does not approve or publish them.` }));
       }
     } catch {
       if (isCurrentEmailSubmissionAction(activeReceiptId.current, requestReceiptId)) {
@@ -196,6 +265,12 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
   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>
@@ -207,38 +282,70 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
           <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>}
-          <button type="button" onClick={() => onOpen(item.receiptId)}>Read email and review candidate links</button>
+          {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>
+              <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.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 ? <p><Link href={getNewsroomNavHref("/newsroom/references", false)}>Review these References</Link></p> : 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}
@@ -246,8 +353,9 @@ function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImpor
   );
 }
 
-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>;
 }) {
@@ -259,8 +367,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>
@@ -297,7 +407,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
                   <strong>{feed.id}</strong>
                   <span>{feedHost(feed.sourceUrl)}</span>
                 </div>
-                <span>{feed.enabled ? "Enabled" : "Disabled"} &middot; {everyText(feed.intervalSeconds)}{feed.limit ? ` · up to ${feed.limit} items` : ""}</span>
+                <span>{feed.enabled ? "Enabled" : "Disabled"} &middot; {everyText(feed.intervalSeconds)}</span>
                 <span>Last run {formatUtc(feed.lastFinishedAt)}{feed.lastStatus ? ` (${status(feed.lastStatus)})` : ""} &middot; next {formatUtc(feed.nextDueAt)}</span>
               </li>
             ))}
@@ -318,6 +428,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) => (
@@ -330,6 +441,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">
@@ -339,6 +451,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.
@@ -368,7 +481,10 @@ export function MonitoringOverviewView({
   onEmailOpen = () => {},
   onResolveArticleLink,
   onImportCandidates,
+  onDecide,
+  paging,
 }: {
+  paging?: MonitoringPaging;
   result: MonitoringResult | null;
   canViewAll: boolean;
   mode: MonitoringMode;
@@ -378,6 +494,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) {
@@ -394,7 +511,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

@@ -1,23 +1,75 @@
 "use client";
 
 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 { MonitoringOverviewView, type MonitoringMode } from "./monitoring-overview-view";
+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;
 
-/** Administration, Monitoring: loads the overview, refreshes it each minute, and lets an admin widen it to the whole pipeline. */
-export function MonitoringPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo: boolean }) {
+/** A receipt URL mounts only the single-submission reader, never the overview. */
+export function MonitoringPanel(props: { isAdmin: boolean; isDemo: boolean }) {
+  const searchParams = useSearchParams();
+  if (searchParams.has("receipt")) {
+    return <MonitoringEmailReceipt key={searchParams.get("receipt")} receiptId={searchParams.get("receipt") ?? ""} isDemo={props.isDemo} />;
+  }
+  return <MonitoringOverviewPanel {...props} />;
+}
+
+function MonitoringEmailReceipt({ receiptId, isDemo }: { receiptId: string; isDemo: boolean }) {
+  const [detail, setDetail] = useState<MonitoringEmailDetails | null>(null);
+  useEffect(() => {
+    if (!receiptId || isDemo) return;
+    let live = true;
+    void loadMonitoringEmailSubmission(receiptId).then(
+      (next) => { if (live) setDetail(next); },
+      () => { if (live) setDetail({ state: "unavailable" }); },
+    );
+    return () => { live = false; };
+  }, [receiptId, isDemo]);
+  if (!receiptId) return <p role="alert">A receipt is required to open a submission.</p>;
+  if (isDemo) return <p role="status">Single email submissions require an editor session.</p>;
+  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}
+        onDecide={decideMonitoringEmailSubmission} />}
+  </div>;
+}
+
+/** Overview refreshes apply only when no receipt was requested. */
+function MonitoringOverviewPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo: boolean }) {
   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) {
@@ -48,13 +100,51 @@ export function MonitoringPanel({ 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) }} />;
 }

package/components/news-desk-client-provider.tsx

@@ -113,7 +113,8 @@ export function NewsDeskClientProvider({
         return;
       }
       if (isAuthorizationError(error)) {
-        setShell((current) => resolveForbidden(current, access.auth));
+        // The session already has editor rights, so the backend refusing a read is not a missing role. Say what was refused.
+        setShell((current) => resolveDashboardFailure(current, access.auth, refusedReadMessage(error)));
         return;
       }
       setShell((current) => resolveDashboardFailure(
@@ -215,9 +216,14 @@ function isAuthorizationError(error: unknown): boolean {
   return /not authorized|unauthorized|access denied|forbidden/i.test(message);
 }
 
+function refusedReadMessage(error: unknown): string {
+  const detail = error instanceof Error ? error.message : String(error ?? "");
+  return `The Newsroom backend refused a read for this signed-in account (${detail}). The account has editor or admin rights, so this is a backend authorization rule, not a missing role.`;
+}
+
 function resolvePrivateReadFailure(state: NewsDeskShellState, auth: NewsDeskShellState["auth"], error: unknown, fallback: string): NewsDeskShellState {
   if (isUnauthenticatedError(error)) return resolveSignedOut(state, { status: "signedOut", label: "Signed out" });
-  if (isAuthorizationError(error)) return resolveForbidden(state, auth);
+  if (isAuthorizationError(error)) return resolveDashboardFailure(state, auth, refusedReadMessage(error));
   return resolveDashboardFailure(state, auth, error instanceof Error ? error.message : fallback);
 }
 

package/components/news-desk-taxonomy-client.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { loadReferenceReviewDetails } from "../lib/reference-review-details";
+import { hasEditorRights } from "../lib/staff-groups";
 
 import { isEditorialWorkAssignment } from "../lib/newsroom-assignments";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
@@ -838,7 +839,7 @@ export async function loadEditorResolvedAccessState(): Promise<EditorAccessState
     if (!refreshed.hasSession || refreshed.auth.status === "signedOut") {
       return { status: "signedOut", isEditor: false, isAdmin: false, auth: refreshed.auth, error: null };
     }
-    const isEditor = refreshed.groups.some((group) => group === "editor" || group === "admin");
+    const isEditor = hasEditorRights(refreshed.groups);
     if (!isEditor) {
       return {
         status: "forbidden",

package/components/newsroom-mobile-navigation.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { BookOpen, ClipboardList, House, MessageCircle, MessagesSquare } from "lucide-react";
+
+const ICONS = { overview: House, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
+
+export function NewsroomMobileNavigation({ items, activeTab, chat, more }: {
+  items: readonly { key: string; label: string; description: string; href: string }[];
+  activeTab: string;
+  chat?: { open: boolean; onOpen: () => void };
+  more: ReactNode;
+}) {
+  return <nav className="organizer-bottom-nav" aria-label="Primary newsroom navigation"><ul>
+    {items.map(item => {
+      if (item.key === "messages" && chat) return <li key="chat"><button className="organizer-chat" type="button" aria-label="Open private chat" aria-expanded={chat.open} aria-controls="papyrus-console-panel" onClick={chat.onOpen}><MessageCircle size={18} aria-hidden="true" /><span>Chat</span></button></li>;
+      const Icon = ICONS[item.key as keyof typeof ICONS];
+      return <li key={item.key}><Link href={item.href} title={item.description} aria-label={item.label} aria-current={activeTab === item.key ? "page" : undefined}><Icon size={18} aria-hidden="true" /><span>{item.label}</span></Link></li>;
+    })}
+    <li>{more}</li>
+  </ul></nav>;
+}

package/components/newsroom-ops-overview.tsx

@@ -24,6 +24,7 @@ import {
 import { newsroomInboxRowClassName } from "../lib/newsroom-list-selection";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import { NotificationCenter } from "./notification-center";
+import { CyclotronRow, predictionFromDecision } from "./reference-review-card";
 
 type NewsroomOpsOverviewProps = {
   assignments: AssignmentRecord[];
@@ -105,9 +106,13 @@ export function NewsroomOpsOverview({
                     href={href}
                     key={lineageId}
                   >
-                    <div className="min-w-0 flex-1">
+                    <div className="min-w-0 flex-1 space-y-1">
                       <p className="truncate text-sm font-medium text-foreground">{referenceDisplayTitle(reference)}</p>
                       <p className="text-xs text-muted-foreground">Review source intake · {formatReferenceListDate(reference)}</p>
+                      <div data-needs-attention-suggestion={lineageId}>
+                        <CyclotronRow prediction={decisions.get(lineageId) ? predictionFromDecision(decisions.get(lineageId)!) : { state: "none" }} />
+                      </div>
+                      <p className="text-xs font-medium text-foreground">Open it to Accept or Reject in the review queue</p>
                     </div>
                     <Badge className="mt-0.5 shrink-0" variant="outline">Pending</Badge>
                   </Link>

package/components/newsroom-ops-shell.tsx

@@ -8,7 +8,7 @@ import { cn } from "../lib/utils";
 import { useEffect, useId, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { BookOpen, ClipboardList, House, Menu, Search, MessagesSquare, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
+import { Menu, Search, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
 import { ORGANIZER_NAV_GROUPS, ORGANIZER_PRIMARY_NAV, ORGANIZER_SETTINGS_DESTINATION } from "../lib/newsroom-organizer-nav";
 import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -20,6 +20,8 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTr
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu";
 import "./newsroom-organizer.css";
 import { NewsroomThemeFonts, useNewsroomThemeAttributes } from "./newsroom-theme";
+import { NewsroomMobileNavigation } from "./newsroom-mobile-navigation";
+import { usePapyrusConsole } from "./papyrus-console-shell";
 
 export type NewsroomNavCount = {
   count: number | null;
@@ -55,8 +57,6 @@ function OrganizerSearch({ demo }: { demo: boolean }) {
   </form>;
 }
 
-const ICONS = { overview: House, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
-
 /** Navigation is a presentation layer; existing route and server authorization still own access. */
 function Navigation({ activePath, demo, admin, surface, onNavigate }: { activePath: string; demo: boolean; admin: boolean; surface: string; onNavigate?: () => void }) {
   const id = useId();
@@ -105,6 +105,7 @@ function Account({ placement }: { placement: "sidebar" | "header" }) {
 }
 
 export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabel, children, demo = false, headerActions, pageTitle, showNavigation = true }: NewsroomOpsShellProps) {
+  const consoleState = usePapyrusConsole();
   const pathname = usePathname();
   const themeAttributes = useNewsroomThemeAttributes();
   const session = useOptionalNewsDeskClient();
@@ -166,16 +167,13 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
       </header>
       <main className="organizer-main">{demo && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
     </div>
-    {showNavigation && <nav className="organizer-bottom-nav" aria-label="Primary newsroom navigation"><ul>
-      {ORGANIZER_PRIMARY_NAV.map(item => { const Icon = ICONS[item.key as keyof typeof ICONS]; return <li key={item.key}><Link
-        href={getNewsroomNavHref(item.path, demo)} title={item.description} aria-label={item.label} aria-current={activeTab === item.key ? "page" : undefined}>
-        <Icon size={18} aria-hidden="true" /><span>{item.label}</span></Link></li>; })}
-      <li><Sheet open={menuOpen} onOpenChange={setMenuOpen}><SheetTrigger className="organizer-more" aria-label="More"><Menu size={18} aria-hidden="true" /><span>More</span></SheetTrigger>
+    {showNavigation && <NewsroomMobileNavigation activeTab={activeTab} items={ORGANIZER_PRIMARY_NAV.map(item => ({ ...item, href: getNewsroomNavHref(item.path, demo) }))}
+      chat={consoleState?.shouldOfferConsole ? { open: consoleState.open, onOpen: consoleState.openConsole } : undefined}
+      more={<Sheet open={menuOpen} onOpenChange={setMenuOpen}><SheetTrigger className="organizer-more" aria-label="More"><Menu size={18} aria-hidden="true" /><span>More</span></SheetTrigger>
         <SheetContent side="bottom" className="organizer-menu" {...themeAttributes}><SheetHeader><SheetTitle>Newsroom</SheetTitle><SheetDescription>Workspaces and administration</SheetDescription></SheetHeader>
           <Navigation activePath={activePath} demo={demo} admin={admin} surface="menu" onNavigate={() => setMenuOpen(false)} />
         </SheetContent>
-      </Sheet></li>
-    </ul></nav>}
+      </Sheet>} />}
   </div>;
 }