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

package/components/notification-center.tsx

@@ -1,240 +1,254 @@
 "use client";
 
-import Link from "next/link";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Badge } from "./ui/badge";
-import { Button } from "./ui/button";
-import { getNewsroomNavHref } from "../lib/newsroom-nav";
-import {
-  cyclotronAutoDecided, cyclotronHeldForReview, formatWhen, isUnread, modeLabel, modeMark, nextText, sectionReviews,
-  steeringText, subjectHref, subjectLabel, summarize, summaryText,
-  type AnswerInput, type CyclotronEntry, type ReviewRequest,
-} from "../lib/review-requests";
-import type { ReferenceRecord } from "../lib/category-repository";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
+import type { EmailDecisionResult, MonitoringEmailDetails, MonitoringEmailSummary } from "../lib/monitoring-overview";
+import { proposalReceiptMessage, stateLabel, type ProposalReceipt } from "../lib/proposals-admin";
+import type { DraftLoad, ReviewLoad } from "../lib/review-client";
+import { acceptPath, batchAnswer, draftView, rejectPath, undecidedDraftIds, withDecision, draftDecisionUpdate, type DraftChoice, type DraftView } from "../lib/review-drafts";
+import { previewsBySourceAddress, recentDecisions } from "../lib/notification-feed";
+import { answerUpdate, cyclotronAutoDecided, draftIdsOf, isDraftReview, sectionReviews, type AnswerInput, type DraftDecision, type ReviewRequest } from "../lib/review-requests";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
-import { FIXTURE_REVIEW_REQUESTS } from "../lib/review-fixture";
+import { learnFreshness } from "../lib/reference-feed-ranking";
+import { learnConfidenceThreshold, shapingThisWeek } from "../lib/needs-me-ranking";
+import { buildNeedsMeItems } from "../lib/needs-me-items";
+import { captureStatusesByLineage } from "../lib/reference-capture";
+import { normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import type { ReferencePreview } from "../lib/reference-preview";
+import { referenceLineageId } from "../lib/newsroom-references";
+import { loadNotificationSnapshot, saveNotificationSnapshot } from "../lib/reference-feed-cache";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { SITE_BRAND } from "../lib/site-brand";
+import { FIXTURE_DRAFTS, FIXTURE_EMAIL_DETAILS, FIXTURE_HELD_EMAILS, FIXTURE_REVIEW_REQUESTS } from "../lib/review-fixture";
+import { NeedsMeView, type NeedsMeDecision } from "./needs-me-feed";
+import type { NeedsMeEntry } from "../lib/needs-me-items";
+import type { CorrectCaptureAction } from "./reference-capture-client";
+import type { ReviewChoice } from "./reference-review-card";
 
 export type NotificationLoadState = "loading" | "ready" | "forbidden" | "unavailable";
+export type DraftsLoadState = "loading" | "ready" | "failed";
 
-type ViewProps = {
-  loadState: NotificationLoadState;
-  requests: ReviewRequest[];
-  readIds: ReadonlySet<string>;
-  held: CyclotronEntry[];
-  autoDecided: CyclotronEntry[];
-  storyTitles?: Readonly<Record<string, string>>;
-  deletedStories?: ReadonlySet<string>;
-  demo?: boolean;
-  busyId?: string | null;
-  error?: string | null;
-  onAnswer?: (request: ReviewRequest, input: AnswerInput) => void;
-  onMarkRead?: (requestId: string) => void;
-  onMarkAllRead?: () => void;
-};
+/** What a real-data preview shows instead of the invented sample (scripts/export-notification-center-fixture.py). */
+export type NotificationFixture = { requests: ReviewRequest[]; drafts: Parameters<typeof draftView>[0][]; emails?: MonitoringEmailSummary[] };
 
-function Entry({ request, unread, demo, busy, titles, deleted, onAnswer, onMarkRead }: {
-  request: ReviewRequest; unread: boolean; demo: boolean; busy: boolean; titles: Readonly<Record<string, string>>; deleted: ReadonlySet<string>;
-  onAnswer?: ViewProps["onAnswer"]; onMarkRead?: ViewProps["onMarkRead"];
-}) {
-  const [note, setNote] = useState("");
-  const href = subjectHref(request.subject, demo);
-  const open = request.state === "open";
-  const steering = steeringText(request);
-  const act = (input: AnswerInput) => onAnswer?.(request, { ...input, feedback: input.feedback ?? (note.trim() || null) });
-  return (
-    <li className="rounded-lg border p-3 space-y-2" data-review-request={request.id} data-review-mode={request.mode} data-review-state={request.state} data-review-unread={unread || undefined}>
-      <div className="flex flex-wrap items-center gap-2">
-        <Badge variant="outline"><span aria-hidden="true">{modeMark(request.mode)} </span>{modeLabel(request.mode)}</Badge>
-        {unread ? <Badge variant="default"><span aria-hidden="true">● </span>New</Badge> : <span className="text-xs text-muted-foreground">Read</span>}
-        <strong className="text-sm">{request.reason}</strong>
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Raised by {request.raisedBy} on {formatWhen(request.raisedAt)}
-        {" · "}About: {href ? <Link href={href} onClick={() => onMarkRead?.(request.id)}>{subjectLabel(request.subject, titles, deleted)}</Link> : <span>{subjectLabel(request.subject, titles, deleted)}</span>}
-      </p>
-      {request.ask ? <p className="text-sm">{request.ask}</p> : null}
-      {request.links.length ? (
-        <ul className="text-xs space-y-0.5" aria-label="Items in this request">
-          {request.links.slice(0, 10).map((link, index) => {
-            const target = link.url ?? (link.type ? subjectHref({ type: link.type, id: link.id ?? "" }, demo) : null);
-            return <li key={`${link.id ?? link.url}-${index}`}>{target ? <Link href={target}>{link.label ?? link.id ?? link.url}</Link> : (link.label ?? link.id)}</li>;
-          })}
-          {request.links.length > 10 ? <li>and {request.links.length - 10} more</li> : null}
-        </ul>
-      ) : null}
-      <p className="text-sm" data-review-next>{nextText(request)}</p>
-      {steering ? <p className="text-sm" data-review-steering>{steering}</p> : null}
-      {open ? (
-        <div className="space-y-2" data-review-controls>
-          <label className="block text-xs text-muted-foreground">
-            Steering note (optional)
-            <textarea
-              className="mt-1 block w-full rounded-md border bg-background p-2 text-sm"
-              disabled={busy}
-              onChange={(event) => setNote(event.target.value)}
-              placeholder={request.mode === "flag" ? "Tell the step what to do differently" : "What should change, or what did you want instead?"}
-              rows={2}
-              value={note}
-            />
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {request.mode === "flag" ? (
-              <Button disabled={busy} onClick={() => act({ decision: "acknowledge" })} size="sm" variant="outline">Acknowledge</Button>
-            ) : (
-              <>
-                <Button disabled={busy} onClick={() => act({ decision: "approve" })} size="sm" variant="outline">Approve</Button>
-                <Button disabled={busy} onClick={() => act({ decision: "reject" })} size="sm" variant="outline">Reject</Button>
-              </>
-            )}
-            <Button disabled={busy || !note.trim()} onClick={() => act({ decision: "feedback", steer: "adjust" })} size="sm" variant="outline">Steer with this note</Button>
-            <Button disabled={busy} onClick={() => act({ decision: "feedback", steer: "not_this_kind" })} size="sm" variant="outline">Not this kind of thing</Button>
-            {unread ? <Button disabled={busy} onClick={() => onMarkRead?.(request.id)} size="sm" variant="ghost">Mark read</Button> : null}
-          </div>
-        </div>
-      ) : unread ? (
-        <Button disabled={busy} onClick={() => onMarkRead?.(request.id)} size="sm" variant="ghost">Mark read</Button>
-      ) : null}
-    </li>
-  );
-}
-
-function CyclotronLine({ entry, held }: { entry: CyclotronEntry; held: boolean }) {
-  const confidence = entry.confidence === null ? "confidence not recorded" : `confidence ${Math.round(entry.confidence * 100)}%`;
-  return (
-    <li className="rounded-lg border p-3 space-y-1" data-cyclotron-entry={entry.lineageId} data-cyclotron-held={held || undefined}>
-      <div className="flex flex-wrap items-center gap-2">
-        <Badge variant="outline"><span aria-hidden="true">{held ? "◔" : "✓"} </span>{held ? "Held for review" : "Decided by the system"}</Badge>
-        <strong className="text-sm">{entry.title}</strong>
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Classified as {entry.label} · {confidence}{entry.decidedAt ? ` · ${formatWhen(entry.decidedAt)}` : ""}
-        {entry.reviewedByPerson ? " · reviewed by a person" : ""}
-      </p>
-      {held ? <p className="text-sm">{entry.reviewDetail ? `${entry.reviewDetail}. ` : ""}Held for review: it stays pending until someone decides.</p> : null}
-      <Link className="text-sm" href={entry.href}>{held ? "Review it in References" : "Open it in References to correct it"}</Link>
-    </li>
-  );
-}
+const NO_VISIT: ReadonlySet<string> = new Set();
+const NO_PREVIEWS: ReadonlyMap<string, ReferencePreview> = new Map();
+const NO_ATTACHMENTS: ReferenceAttachmentRecord[] = [];
 
-function Section({ id, title, count, children, empty }: { id: string; title: string; count: number; children: React.ReactNode; empty: string }) {
-  return (
-    <section aria-labelledby={`notification-${id}`} className="space-y-2" data-notification-section={id}>
-      <h2 className="text-sm font-medium" id={`notification-${id}`}>{title} ({count})</h2>
-      {count ? children : <p className="text-sm text-muted-foreground">{empty}</p>}
-    </section>
-  );
-}
+/** Everything the container reads and writes. The live one talks to the site's data API; tests pass a fake. */
+export type NotificationApi = {
+  loadReviews: () => Promise<ReviewLoad>;
+  loadDrafts: (ids: string[]) => Promise<DraftLoad>;
+  loadStoryTitles: (ids: string[]) => Promise<{ titles: Record<string, string>; deleted: string[]; excerpts?: Record<string, string> }>;
+  answerReviewRequest: (request: ReviewRequest, input: AnswerInput, by: string) => Promise<ReviewRequest>;
+  saveDraftDecision: (request: ReviewRequest, draftId: string, decision: DraftDecision) => Promise<ReviewRequest>;
+  markReviewRead: (userKey: string, requestId: string) => Promise<void>;
+  transitionProposalPath: (proposalId: string, path: readonly string[]) => Promise<ProposalReceipt>;
+  /** Email submissions held for review (Monitoring's own read). Optional: a site without monitoring has none. */
+  loadHeldEmails?: () => Promise<MonitoringEmailSummary[]>;
+  loadEmail?: (receiptId: string) => Promise<MonitoringEmailDetails>;
+  decideEmail?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
+};
 
-/** The CMS console home: what needs a person, what will proceed on its own, and what the system decided. Ignore-safe by design. */
-export function NotificationCenterView({ loadState, requests, readIds, held, autoDecided, demo = false, storyTitles = {}, deletedStories = new Set<string>(), busyId = null, error = null, onAnswer, onMarkRead, onMarkAllRead }: ViewProps) {
-  const sections = useMemo(() => sectionReviews(requests), [requests]);
-  const unreadCount = requests.filter((request) => isUnread(request, readIds)).length;
-  const summary = summarize(sections, held, autoDecided, unreadCount);
-  const entry = (request: ReviewRequest) => (
-    <Entry busy={busyId === request.id} demo={demo} key={request.id} titles={storyTitles} deleted={deletedStories} onAnswer={onAnswer} onMarkRead={onMarkRead} request={request} unread={isUnread(request, readIds)} />
-  );
-  if (loadState === "loading") return (
-    <section aria-label="Loading Notification Center" className="space-y-4" data-notification-state="loading" role="status">
-      <div className="h-6 w-48 rounded bg-muted" />
-      <div className="h-4 w-3/4 max-w-xl rounded bg-muted" />
-      <div className="h-4 w-2/3 max-w-lg rounded bg-muted" />
-      <div className="grid gap-3 sm:grid-cols-2">
-        {Array.from({ length: 4 }, (_, index) => <div className="h-28 rounded-xl border bg-card p-4" key={index}>
-          <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
-        </div>)}
-      </div>
-    </section>
-  );
-  if (loadState === "forbidden") return <div role="alert" data-notification-state="forbidden"><strong>The Notification Center is for editors and admins</strong></div>;
-  if (loadState === "unavailable") return <div role="alert" data-notification-state="unavailable"><strong>Review requests could not be read right now</strong><p>Try again in a minute. The current request state is unknown.</p></div>;
-  return (
-    <div className="space-y-6" data-notification-center>
-      <header className="space-y-1">
-        <h1 className="text-lg font-semibold">Notification Center</h1>
-        <p className="text-sm" data-notification-summary>{summaryText(summary)}</p>
-        <p className="text-xs text-muted-foreground">
-          Look, or steer. Anything you ignore keeps going: a soft review with a deadline proceeds at it, one without stays open until handled, and flags never wait. Only a hard gate waits for you.
-        </p>
-        <p className="text-xs text-muted-foreground" data-notification-unread>
-          {unreadCount ? `${unreadCount} unread` : "Nothing unread"}
-          {unreadCount ? <Button className="ml-2" onClick={onMarkAllRead} size="sm" variant="ghost">Mark all read</Button> : null}
-        </p>
-        {error ? <p role="alert" className="text-sm" data-notification-error>{error}</p> : null}
-      </header>
+const liveApi: NotificationApi = {
+  loadReviews: async () => (await import("../lib/review-client")).loadReviews(),
+  loadDrafts: async (ids) => (await import("../lib/review-client")).loadDrafts(ids),
+  loadStoryTitles: async (ids) => (await import("../lib/review-client")).loadStoryTitles(ids),
+  answerReviewRequest: async (request, input, by) => (await import("../lib/review-client")).answerReviewRequest(request, input, by),
+  saveDraftDecision: async (request, draftId, decision) => (await import("../lib/review-client")).saveDraftDecision(request, draftId, decision),
+  markReviewRead: async (userKey, requestId) => (await import("../lib/review-client")).markReviewRead(userKey, requestId),
+  transitionProposalPath: async (proposalId, path) => (await import("../lib/proposals-client")).transitionProposalPath(proposalId, path),
+  loadHeldEmails: async () => {
+    const { loadMonitoringPage } = await import("../lib/monitoring-client");
+    const rows: MonitoringEmailSummary[] = [];
+    let cursor: string | null = null;
+    do {
+      const page = await loadMonitoringPage("emailSubmissions", cursor, "publication", true);
+      if (!("rows" in page)) return rows;
+      rows.push(...(page.rows as MonitoringEmailSummary[]));
+      cursor = page.cursor;
+    } while (cursor);
+    return rows;
+  },
+  loadEmail: async (receiptId) => (await import("../lib/monitoring-client")).loadMonitoringEmailSubmission(receiptId),
+  decideEmail: async (receiptId, decision, reason) => (await import("../lib/monitoring-client")).decideMonitoringEmailSubmission(receiptId, decision, reason),
+};
 
-      <Section count={sections.hardGates.length} empty="No hard gates. Nothing is blocked on you." id="hard-gates" title="Waiting for you: hard gates">
-        <ul className="space-y-2">{sections.hardGates.map(entry)}</ul>
-      </Section>
-      <Section count={sections.softReviews.length} empty="No soft reviews are running." id="soft-reviews" title="Proceeding soon: soft reviews, soonest deadline first">
-        <ul className="space-y-2">{sections.softReviews.map(entry)}</ul>
-      </Section>
-      <Section count={held.length} empty="No Cyclotron items are held for review." id="cyclotron" title="Cyclotron items routed to a person (low confidence)">
-        <ul className="space-y-2">{held.slice(0, 10).map((item) => <CyclotronLine entry={item} held key={item.lineageId} />)}</ul>
-        {held.length > 10 ? <p className="text-sm">and {held.length - 10} more. <Link href={getNewsroomNavHref("/newsroom/references", demo)}>See all in References</Link></p> : null}
-      </Section>
-      <Section count={sections.flags.length} empty="No flags." id="flags" title="Flags: for your information">
-        <ul className="space-y-2">{sections.flags.map(entry)}</ul>
-      </Section>
-      <Section count={sections.decided.length} empty="Nothing answered or proceeded yet." id="decided" title="Answered, and what became of it">
-        <ul className="space-y-2">{sections.decided.slice(0, 20).map(entry)}</ul>
-      </Section>
-      <details data-notification-section="auto-decided">
-        <summary className="cursor-pointer text-sm font-medium">Recently decided by the system ({autoDecided.length})</summary>
-        <div className="mt-2 space-y-2">
-          <p className="text-xs text-muted-foreground">Read only. The Cyclotron was confident enough to decide these without you. To correct one, open it in References.</p>
-          {autoDecided.length ? <ul className="space-y-2">{autoDecided.map((item) => <CyclotronLine entry={item} held={false} key={item.lineageId} />)}</ul> : <p className="text-sm text-muted-foreground">No automatic decisions yet.</p>}
-        </div>
-      </details>
-    </div>
-  );
-}
+/** The demo and the real-data preview answer in memory with the same rules as the live data API; nothing leaves the page. */
+const demoApi: NotificationApi = {
+  loadReviews: async () => ({ state: "unavailable" }),
+  loadDrafts: async () => ({ drafts: {}, missing: [], failed: [] }),
+  loadStoryTitles: async () => ({ titles: {}, deleted: [] }),
+  answerReviewRequest: async (request, input, by) => {
+    const update = answerUpdate(request, input, by, new Date());
+    return { ...request, state: "answered", answer: JSON.parse(String(update.answer)), links: update.links ? JSON.parse(String(update.links)) : request.links, history: JSON.parse(String(update.history)), updatedAt: String(update.updatedAt) };
+  },
+  saveDraftDecision: async (request, draftId, decision) => {
+    const update = draftDecisionUpdate(request, draftId, decision);
+    return { ...request, links: JSON.parse(String(update.links)), history: JSON.parse(String(update.history)), updatedAt: String(update.updatedAt) };
+  },
+  markReviewRead: async () => undefined,
+  transitionProposalPath: async () => ({ status: "ok" }),
+  loadHeldEmails: async () => FIXTURE_HELD_EMAILS,
+  loadEmail: async (receiptId) => FIXTURE_EMAIL_DETAILS[receiptId] ?? { state: "unavailable" },
+  decideEmail: async (_receiptId, decision) => ({ ok: true, already: false, quarantine: { state: decision === "accept" ? "released" : "discarded", decision: null, failure: null } }),
+};
 
 type ContainerProps = {
   references: ReferenceRecord[];
   decisions: ReadonlyMap<string, RelevanceDecisionView>;
-  humanCuratedReferenceLineageIds: ReadonlySet<string>;
+  humanCuratedReferenceLineageIds?: ReadonlySet<string>;
+  previews?: ReadonlyMap<string, ReferencePreview>;
+  referencesLoading?: boolean;
+  predictionLoading?: boolean;
+  referenceDisabledReason?: string | null;
+  onRateReference?: (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null, note?: string) => Promise<void> | void;
+  /** The Reference attachments (previews, captured text), for the cards' pictures and the capture checks. */
+  referenceAttachments?: ReferenceAttachmentRecord[];
+  /** Saves a pasted or corrected capture. Without it the capture panel has no edit action. */
+  onCorrectCapture?: CorrectCaptureAction;
   actorLabel: string;
   demo: boolean;
+  /** A real-data preview (see scripts/export-notification-center-fixture.py); the invented sample otherwise. */
+  fixture?: NotificationFixture | null;
+  api?: NotificationApi;
 };
 
 const REFRESH_MILLISECONDS = 60_000;
 
-export function NotificationCenter({ references, decisions, humanCuratedReferenceLineageIds, actorLabel, demo }: ContainerProps) {
+/** Preview only: ?ncState=loading holds the skeleton, caught-up shows the empty state, sample swaps in the invented hard gate, flags, batches and held email, mixed adds the invented hard gate, flag and held email to the real data. */
+function previewState(): "loading" | "caught-up" | "sample" | "mixed" | null {
+  if (typeof window === "undefined" || !isLocalPreviewEnabled()) return null;
+  const requested = new URLSearchParams(window.location.search).get("ncState");
+  return requested === "loading" || requested === "caught-up" || requested === "sample" || requested === "mixed" ? requested : null;
+}
+
+const EMAIL_REFUSALS: Record<string, string> = {
+  forbidden: "Your session cannot decide held email.",
+  bad_request: "That email could not be decided from here.",
+  already_decided: "Someone already decided this email. Refresh to see what they chose.",
+  not_quarantined: "This email is no longer held.",
+  expired: "This email expired and can no longer be accepted.",
+};
+
+export function NotificationCenter({
+  references, decisions, humanCuratedReferenceLineageIds = NO_VISIT, previews = NO_PREVIEWS, referencesLoading = false, predictionLoading = false, referenceDisabledReason = null,
+  onRateReference, referenceAttachments = NO_ATTACHMENTS, onCorrectCapture, actorLabel, demo, fixture = null, api: liveOverride = liveApi,
+}: ContainerProps) {
+  const api = demo ? demoApi : liveOverride;
   const [loadState, setLoadState] = useState<NotificationLoadState>("loading");
+  const [stale, setStale] = useState(false);
   const [requests, setRequests] = useState<ReviewRequest[]>([]);
-  const [readIds, setReadIds] = useState<Set<string>>(new Set());
   const [userKey, setUserKey] = useState<string | null>(null);
-  const [busyId, setBusyId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [storyTitles, setStoryTitles] = useState<Record<string, string>>({});
+  const [storyExcerpts, setStoryExcerpts] = useState<Record<string, string>>({});
   const [deletedStories, setDeletedStories] = useState<ReadonlySet<string>>(new Set());
+  const [drafts, setDrafts] = useState<Record<string, DraftView>>({});
+  const [missingDrafts, setMissingDrafts] = useState<ReadonlySet<string>>(new Set());
+  const [draftsState, setDraftsState] = useState<DraftsLoadState>("loading");
+  const [emails, setEmails] = useState<MonitoringEmailSummary[]>([]);
+  const [emailsState, setEmailsState] = useState<"loading" | "ready">("loading");
+  const [emailsDecided, setEmailsDecided] = useState<ReadonlyMap<string, "accept" | "reject">>(new Map());
+  const [stay, setStay] = useState<ReadonlySet<string>>(new Set());
+  const [visitRated, setVisitRated] = useState<ReadonlySet<string>>(new Set());
+  const [now] = useState(() => Date.now());
+  const resolving = useRef(new Set<string>());
+  const demoStarted = useRef(false);
+  const preview = useMemo(() => previewState(), []);
+  const sample = useMemo(() => {
+    if (preview === "sample" || !fixture) return { requests: FIXTURE_REVIEW_REQUESTS, drafts: FIXTURE_DRAFTS };
+    if (preview === "mixed") {
+      const invented = FIXTURE_REVIEW_REQUESTS.filter((request) => request.id === "rr-hard-1" || request.id === "rr-flag-1");
+      return { requests: [...invented, ...fixture.requests], drafts: fixture.drafts };
+    }
+    return { requests: preview === "caught-up" ? [] : fixture.requests, drafts: fixture.drafts };
+  }, [fixture, preview]);
+
+  const keep = useCallback((key: string) => setStay((current) => (current.has(key) ? current : new Set(current).add(key))), []);
+
+  const loadDraftsFor = useCallback(async (list: ReviewRequest[]) => {
+    const ids = list.filter((request) => request.state === "open" && isDraftReview(request)).flatMap(draftIdsOf);
+    if (!ids.length) {
+      setDraftsState("ready");
+      return;
+    }
+    if (demo) {
+      const known = sample.drafts.filter((row) => ids.includes(row.id));
+      setDrafts((current) => ({ ...current, ...Object.fromEntries(known.map((row) => [row.id, draftView(row, true)])) }));
+      setMissingDrafts(new Set(ids.filter((id) => !known.some((row) => row.id === id))));
+      setDraftsState("ready");
+      return;
+    }
+    try {
+      const loaded = await api.loadDrafts(ids);
+      setDrafts((current) => ({ ...current, ...loaded.drafts }));
+      setMissingDrafts(new Set(loaded.missing));
+      setDraftsState(loaded.failed.length ? "failed" : "ready");
+    } catch {
+      setDraftsState("failed");
+    }
+  }, [api, demo, sample]);
+
+  // Email held for review is read on its own: a site without monitoring, or an editor who may not read it, simply has none.
+  const loadEmailsNow = useCallback(async () => {
+    if (preview === "caught-up") { setEmails([]); setEmailsState("ready"); return; }
+    // The real-data preview has no held email of its own; only the sample and mixed previews show the invented one.
+    if (demo && fixture && preview !== "sample" && preview !== "mixed") { setEmails(fixture.emails ?? []); setEmailsState("ready"); return; }
+    try {
+      setEmails((await api.loadHeldEmails?.()) ?? []);
+    } catch {
+      // Held email is one source among several; the others still show.
+    }
+    setEmailsState("ready");
+  }, [api, demo, fixture, preview]);
+
+  // A return visit paints the last view at once, marked as such, while the real reads run.
+  useEffect(() => {
+    if (demo) return;
+    const snapshot = loadNotificationSnapshot(SITE_BRAND.id);
+    if (!snapshot) return;
+    setRequests(snapshot.requests);
+    setDrafts(snapshot.drafts);
+    setMissingDrafts(new Set(snapshot.missing));
+    setDraftsState("ready");
+    setStale(true);
+    setLoadState((current) => (current === "loading" ? "ready" : current));
+  }, [demo]);
 
   const refresh = useCallback(async () => {
     if (demo) {
-      setRequests(FIXTURE_REVIEW_REQUESTS);
-      setReadIds(new Set(["rr-flag-1"]));
+      // The sample is read once: answering in the preview must not be undone by the next refresh.
+      if (demoStarted.current) return;
+      demoStarted.current = true;
+      setRequests(sample.requests);
       setLoadState("ready");
+      void loadDraftsFor(sample.requests);
+      void loadEmailsNow();
       return;
     }
     try {
-      const { loadReviews } = await import("../lib/review-client");
-      const loaded = await loadReviews();
+      const loaded = await api.loadReviews();
       if (loaded.state !== "ready") {
+        setStale(false);
         setLoadState(loaded.state);
         return;
       }
       setRequests(loaded.requests);
-      setReadIds(new Set(loaded.readIds));
       setUserKey(loaded.userKey);
+      setStale(false);
       setLoadState("ready");
-      const { loadStoryTitles } = await import("../lib/review-client");
-      const stories = await loadStoryTitles(loaded.requests.filter((request) => request.subject.type === "story").map((request) => request.subject.id)).catch(() => ({ titles: {}, deleted: [] as string[] }));
+      void loadDraftsFor(loaded.requests);
+      void loadEmailsNow();
+      const stories = await api.loadStoryTitles(loaded.requests.filter((request) => request.subject.type === "story").map((request) => request.subject.id)).catch(() => ({ titles: {}, deleted: [] as string[], excerpts: {} }));
       setStoryTitles(stories.titles);
+      setStoryExcerpts(stories.excerpts ?? {});
       setDeletedStories(new Set(stories.deleted));
     } catch {
+      setStale(false);
       setLoadState("unavailable");
     }
-  }, [demo]);
+  }, [api, demo, loadDraftsFor, loadEmailsNow, sample]);
 
   useEffect(() => {
     void refresh();
@@ -242,40 +256,137 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
     return () => window.clearInterval(timer);
   }, [refresh]);
 
-  const held = useMemo(() => cyclotronHeldForReview(references, decisions, demo), [references, decisions, demo]);
-  const autoDecided = useMemo(() => cyclotronAutoDecided(references, decisions, humanCuratedReferenceLineageIds, demo), [references, decisions, humanCuratedReferenceLineageIds, demo]);
+  // Keep a display copy for the next visit once the live read and its drafts have arrived.
+  useEffect(() => {
+    if (demo || stale || loadState !== "ready" || draftsState !== "ready") return;
+    const timer = window.setTimeout(() => saveNotificationSnapshot(SITE_BRAND.id, { requests, drafts, missing: missingDrafts }), 800);
+    return () => window.clearTimeout(timer);
+  }, [demo, draftsState, drafts, loadState, missingDrafts, requests, stale]);
 
   const markRead = useCallback(async (requestId: string) => {
-    setReadIds((current) => new Set(current).add(requestId));
     if (demo || !userKey) return;
-    const { markReviewRead } = await import("../lib/review-client");
-    await markReviewRead(userKey, requestId).catch(() => undefined);
-  }, [demo, userKey]);
+    await api.markReviewRead(userKey, requestId).catch(() => undefined);
+  }, [api, demo, userKey]);
 
+  /** Answers a whole request. Throws a sentence for the card when it cannot be saved. */
   const answer = useCallback(async (request: ReviewRequest, input: AnswerInput) => {
     setError(null);
-    setBusyId(request.id);
+    const saved = await api.answerReviewRequest(request, input, actorLabel);
+    keep(request.id);
+    setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
+    await markRead(request.id);
+  }, [actorLabel, api, keep, markRead]);
+
+  /** Accept or Reject one draft: the Proposal moves to approved or declined, the decision is recorded on the request, and the request closes once every draft is decided. */
+  const decideDraft = useCallback(async (request: ReviewRequest, draftId: string, choice: DraftChoice, extras: { why: string; notThisKind: boolean }) => {
+    setError(null);
+    resolving.current.add(request.id);
     try {
-      if (demo) throw new Error("This is a demo: answers are not saved.");
-      const { answerReviewRequest } = await import("../lib/review-client");
-      const saved = await answerReviewRequest(request, input, actorLabel);
-      setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
-      await markRead(request.id);
+      const view = drafts[draftId];
+      if (!view) throw new Error("This draft has not loaded yet.");
+      const path = choice === "accept" ? acceptPath(view.state) : rejectPath(view.state);
+      if (!path) throw new Error(`This draft is ${stateLabel(view.state, false).toLowerCase()} and cannot be ${choice === "accept" ? "accepted" : "rejected"} from here. Open it in Proposals.`);
+      const receipt = await api.transitionProposalPath(draftId, path);
+      if (receipt.status !== "ok") throw new Error(proposalReceiptMessage(receipt));
+      const decided: DraftView = { ...view, state: choice === "accept" ? "approved" : "declined", decided: choice };
+      const nextDrafts = { ...drafts, [draftId]: decided };
+      setDrafts(nextDrafts);
+      keep(`${request.id}#${draftId}`);
+      const decision: DraftDecision = { choice, title: view.headline, why: extras.why || null, notThisKind: choice === "reject" && extras.notThisKind, by: actorLabel, at: new Date().toISOString() };
+      const withDecisionRequest = { ...request, links: withDecision(request, draftId, decision) };
+      const closing = batchAnswer(withDecisionRequest, nextDrafts, { by: actorLabel, at: decision.at });
+      try {
+        const saved = closing ? await api.answerReviewRequest(request, closing, actorLabel) : await api.saveDraftDecision(request, draftId, decision);
+        setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
+        if (closing) await markRead(request.id);
+      } catch (failure) {
+        throw new Error(`The draft was ${choice === "accept" ? "accepted" : "rejected"} in Proposals, but this request could not record it. ${failure instanceof Error ? failure.message : ""}`.trim());
+      }
     } catch (failure) {
-      setError(failure instanceof Error ? failure.message : "Could not save the answer.");
+      if (!demo) void loadDraftsFor([request]);
+      throw failure;
     } finally {
-      setBusyId(null);
+      resolving.current.delete(request.id);
+    }
+  }, [actorLabel, api, demo, drafts, keep, loadDraftsFor, markRead]);
+
+  // Drafts decided in Proposals (not here) still close their request.
+  useEffect(() => {
+    if (demo || draftsState !== "ready" || stale) return;
+    for (const request of requests) {
+      if (request.state !== "open" || !isDraftReview(request) || resolving.current.has(request.id)) continue;
+      if (undecidedDraftIds(request, drafts).length) continue;
+      const closing = batchAnswer(request, drafts, { by: "an editor in Proposals", at: new Date().toISOString() });
+      if (!closing) continue;
+      resolving.current.add(request.id);
+      void (async () => {
+        try {
+          const saved = await api.answerReviewRequest(request, closing, "an editor in Proposals");
+          setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
+        } catch {
+          // The next refresh shows what became of it.
+        } finally {
+          resolving.current.delete(request.id);
+        }
+      })();
     }
-  }, [actorLabel, demo, markRead]);
+  }, [api, demo, drafts, draftsState, requests, stale]);
 
-  const markAllRead = useCallback(() => {
-    for (const request of requests) if (isUnread(request, readIds)) void markRead(request.id);
-  }, [markRead, readIds, requests]);
+  /** One decision, whatever the type: it goes to the action that already owns that kind of thing. */
+  const decide = useCallback(async (item: NeedsMeEntry, decision: NeedsMeDecision) => {
+    const { payload } = item;
+    if (payload.kind === "reference") {
+      setVisitRated((current) => (current.has(payload.lineageId) ? current : new Set(current).add(payload.lineageId)));
+      await onRateReference?.(payload.reference, decision.choice, decision.choice === "reject" ? decision.reasonCode : null, decision.why || undefined);
+    } else if (payload.kind === "draft") {
+      await decideDraft(payload.item.request, payload.item.draftId, decision.choice, { why: decision.why, notThisKind: decision.notThisKind });
+    } else if (payload.kind === "request") {
+      const { request } = payload;
+      if (request.mode === "flag") await answer(request, { decision: "acknowledge", feedback: decision.why || null });
+      else if (decision.choice === "accept") await answer(request, { decision: "approve", feedback: decision.why || null });
+      else await answer(request, { decision: "reject", feedback: decision.why || null, steer: decision.notThisKind ? "not_this_kind" : null });
+    } else if (payload.kind === "email") {
+      const result = await api.decideEmail?.(payload.summary.receiptId, decision.choice, decision.why);
+      if (!result) throw new Error("Held email cannot be decided from here.");
+      if (!("ok" in result)) throw new Error("error" in result ? EMAIL_REFUSALS[result.error] ?? "The decision could not be saved." : "The decision could not be saved right now. Try again in a minute.");
+      setEmailsDecided((current) => new Map(current).set(payload.summary.receiptId, decision.choice));
+    }
+  }, [answer, api, decideDraft, onRateReference]);
+
+  const shownReferences = preview === "caught-up" ? references.filter((reference) => normalizeReferenceCurationStatus(reference.curationStatus) !== "pending") : references;
+  const bySource = useMemo(() => previewsBySourceAddress(shownReferences, previews), [shownReferences, previews]);
+  const lineageIds = useMemo(() => shownReferences.map(referenceLineageId), [shownReferences]);
+  const { statuses: captures, teaserLine } = useMemo(() => captureStatusesByLineage(referenceAttachments, lineageIds), [lineageIds, referenceAttachments]);
+
+  const entries = useMemo(
+    () => buildNeedsMeItems({
+      references: shownReferences, decisions, previews, captures, visitRated, requests, drafts, missingDrafts, draftsState, stay, bySource,
+      storyTitles, storyExcerpts, deletedStories, emails, emailsDecided,
+    }),
+    [shownReferences, decisions, previews, captures, visitRated, requests, drafts, missingDrafts, draftsState, stay, bySource, storyTitles, storyExcerpts, deletedStories, emails, emailsDecided],
+  );
+  const freshness = useMemo(() => learnFreshness(shownReferences, visitRated), [shownReferences, visitRated]);
+  const threshold = useMemo(() => learnConfidenceThreshold(shownReferences, decisions, visitRated), [shownReferences, decisions, visitRated]);
+  const recent = useMemo(() => recentDecisions(requests, references, demo), [requests, references, demo]);
+  const shaping = useMemo(
+    () => shapingThisWeek({ decidedAt: recentDecisions(requests, references, demo, Number.MAX_SAFE_INTEGER).map((entry) => entry.at), references, decisions, now }),
+    [requests, references, demo, decisions, now],
+  );
+  const shownIds = useMemo(() => new Set(entries.map((item) => item.id)), [entries]);
+  const legacyAuto = useMemo(
+    () => cyclotronAutoDecided(shownReferences, decisions, humanCuratedReferenceLineageIds, demo).filter((entry) => !shownIds.has(entry.lineageId)),
+    [shownReferences, decisions, humanCuratedReferenceLineageIds, demo, shownIds],
+  );
+  const openDraftRequests = useMemo(() => sectionReviews(requests).draftBatches, [requests]);
+  const missingCount = openDraftRequests.reduce((total, request) => total + draftIdsOf(request).filter((id) => missingDrafts.has(id)).length, 0);
+  const settled = !stale && loadState === "ready" && draftsState !== "loading" && emailsState === "ready" && !referencesLoading && !predictionLoading;
 
   return (
-    <NotificationCenterView
-      autoDecided={autoDecided} busyId={busyId} storyTitles={storyTitles} deletedStories={deletedStories} demo={demo} error={error} held={held} loadState={loadState}
-      onAnswer={answer} onMarkAllRead={markAllRead} onMarkRead={markRead} readIds={readIds} requests={requests}
+    <NeedsMeView
+      captureTeaserLine={teaserLine} demo={demo} draftsFailed={draftsState === "failed"} entries={entries} error={error} freshness={freshness} legacyAuto={legacyAuto}
+      loadEmail={api.loadEmail} loadState={preview === "loading" ? "loading" : loadState} missingDraftCount={missingCount} now={now} onCorrectCapture={onCorrectCapture} onDecide={decide}
+      onRetryDrafts={() => void loadDraftsFor(requests)} predictionLoading={predictionLoading} recent={recent} referenceAttachments={referenceAttachments}
+      referenceDisabledReason={referenceDisabledReason} referencesLoading={referencesLoading} settled={settled} shaping={shaping} stale={stale} threshold={threshold}
     />
   );
 }