@anthusai/papyrus 5.45.0 → 5.47.0

package/components/notification-center.tsx

@@ -1,37 +1,64 @@
 "use client";
 
-import { CheckIcon, CircleCheckIcon, CircleDotIcon, CircleXIcon, ClockIcon, ExternalLinkIcon, FlagIcon, HourglassIcon, LockIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, CircleCheckBigIcon } from "lucide-react";
 import Link from "next/link";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Badge } from "./ui/badge";
-import { Button } from "./ui/button";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { cn } from "../lib/utils";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import { proposalReceiptMessage, stateLabel, type ProposalReceipt } from "../lib/proposals-admin";
 import type { DraftLoad, ReviewLoad } from "../lib/review-client";
-import { acceptPath, batchAnswer, cannotMoveReason, draftDecisionOf, draftsToDecide, draftView, rejectPath, undecidedDraftIds, withDecision, type DraftChoice, type DraftView } from "../lib/review-drafts";
+import { acceptPath, batchAnswer, draftView, rejectPath, undecidedDraftIds, withDecision, draftDecisionUpdate, type DraftChoice, type DraftView } from "../lib/review-drafts";
 import {
-  cyclotronAutoDecided, cyclotronHeldForReview, draftIdsOf, formatWhen, isDraftReview, isUnread, modeLabel, nextText, proposalHref, sectionReviews,
-  steeringText, subjectHref, subjectLabel, summarize, summaryText,
-  type AnswerInput, type CyclotronEntry, type DraftDecision, type ReviewRequest,
-} from "../lib/review-requests";
+  FILTER_LABELS, NOTIFICATION_FILTERS, buildNotificationItems, filterCount, previewsBySourceAddress, recentDecisions, showsSection, waitingText,
+  type NotificationFilter,
+} from "../lib/notification-feed";
+import { answerUpdate, cyclotronAutoDecided, draftIdsOf, isDraftReview, sectionReviews, type AnswerInput, type CyclotronEntry, type DraftDecision, type ReviewRequest } from "../lib/review-requests";
 import type { ReferenceRecord } from "../lib/category-repository";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
+import { partitionReferenceFeed } from "../lib/reference-feed-ranking";
+import { normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import type { ReferencePreview } from "../lib/reference-preview";
+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_REVIEW_REQUESTS } from "../lib/review-fixture";
-import { ChoiceButtons } from "./reference-review-card";
+import { DraftCard, FlagCard, NotificationSkeleton, RecentDecisions, RequestCard, type DecisionExtras } from "./notification-cards";
+import { FEED_SURFACE_PROPS, FeedCard, PILL, ReferenceFeedSkeleton } from "./reference-feed";
+import type { ReviewChoice } from "./reference-review-card";
 
 export type NotificationLoadState = "loading" | "ready" | "forbidden" | "unavailable";
 export type DraftsLoadState = "loading" | "ready" | "failed";
 export type DraftExtras = { why: string; notThisKind: boolean };
 
+/** 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][] };
+
+const GRID = "grid gap-5 sm:grid-cols-2 xl:grid-cols-3";
+/** References are shown a screenful at a time, ranked as in the References feed; the rest are one tap away. */
+const REFERENCE_PAGE = 6;
+const CONFIRMING = "Confirming your sign-in. You can answer in a moment.";
+const NO_PREVIEWS: ReadonlyMap<string, ReferencePreview> = new Map();
+const NO_VISIT: ReadonlySet<string> = new Set();
+
 type ViewProps = {
   loadState: NotificationLoadState;
   requests: ReviewRequest[];
-  readIds: ReadonlySet<string>;
-  held: CyclotronEntry[];
-  autoDecided: CyclotronEntry[];
+  /** Canonical References (any status) and the Cyclotron's decisions on them. */
+  references?: ReferenceRecord[];
+  decisions?: ReadonlyMap<string, RelevanceDecisionView>;
+  previews?: ReadonlyMap<string, ReferencePreview>;
+  referencesLoading?: boolean;
+  predictionLoading?: boolean;
+  referenceDisabledReason?: string | null;
+  /** What the Cyclotron decided on its own confidence: read only, collapsed at the foot of the page. */
+  autoDecided?: CyclotronEntry[];
+  now?: number;
+  visitRated?: ReadonlySet<string>;
   storyTitles?: Readonly<Record<string, string>>;
   deletedStories?: ReadonlySet<string>;
   demo?: boolean;
+  /** True while the cards are a saved copy that is being refreshed. */
+  stale?: boolean;
   busyId?: string | null;
   error?: string | null;
   /** The AI drafts that draft reviews are about, by proposal id, and which ids have no proposal on this site. */
@@ -41,324 +68,216 @@ type ViewProps = {
   /** Keyed `<request id>#<draft id>`. */
   draftErrors?: Readonly<Record<string, string>>;
   draftBusyId?: string | null;
+  /** Draft keys and request ids decided in this visit: their cards stay in place showing the answer. */
+  stay?: ReadonlySet<string>;
+  initialFilter?: NotificationFilter;
   onAnswer?: (request: ReviewRequest, input: AnswerInput) => void;
   onDecideDraft?: (request: ReviewRequest, draftId: string, choice: DraftChoice, extras: DraftExtras) => void;
   onRetryDrafts?: () => void;
   onMarkRead?: (requestId: string) => void;
-  onMarkAllRead?: () => void;
+  onOpenReference?: (lineageId: string) => void;
+  onRateReference?: (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => Promise<void> | void;
+  onVisitRated?: (lineageId: string) => void;
 };
 
-const CONTROL_ICON = { hard_gate: LockIcon, soft_review: ClockIcon, flag: FlagIcon } as const;
-const NOT_THIS_KIND = { request: "Not this kind of thing", draft: "Not this kind of story" } as const;
-
-function WhyBox({ busy, onChange, placeholder, value }: { busy: boolean; onChange: (value: string) => void; placeholder: string; value: string }) {
+function Section({ children, count, id, subtitle, title }: { children: ReactNode; count?: number; id: string; subtitle?: ReactNode; title: string }) {
   return (
-    <label className="block text-sm font-medium">
-      Why? (optional)
-      <textarea
-        aria-label="Why? (optional)"
-        className="mt-1 block min-h-20 w-full rounded-md border bg-background p-3 text-base font-normal"
-        onChange={(event) => onChange(event.target.value)}
-        placeholder={placeholder}
-        readOnly={busy}
-        value={value}
-      />
-    </label>
+    <section aria-labelledby={`notification-${id}`} data-notification-section={id}>
+      <h2 className="mb-1 text-3xl font-bold tracking-tight text-primary sm:text-4xl" id={`notification-${id}`}>
+        {title}{typeof count === "number" ? <span className="ml-2 text-xl font-semibold tabular-nums text-muted-foreground" data-section-count>{count}</span> : null}
+      </h2>
+      {subtitle ? <p className="mb-5 text-sm text-muted-foreground">{subtitle}</p> : <div className="mb-5" />}
+      {children}
+    </section>
   );
 }
 
-function NotThisKind({ busy, label, onToggle, pressed }: { busy: boolean; label: string; onToggle: () => void; pressed: boolean }) {
-  return (
-    <div className="space-y-1" data-review-reasons>
-      <p className="text-sm font-medium">If you reject it</p>
-      <Button aria-disabled={busy || undefined} aria-pressed={pressed} className="min-h-10" data-review-reason="not_this_kind" onClick={() => { if (!busy) onToggle(); }} type="button" variant={pressed ? "default" : "outline"}>
-        {pressed ? <CheckIcon aria-hidden="true" className="size-4" /> : null}
-        {label}
-      </Button>
-    </div>
-  );
+function Note({ children, ...rest }: { children: ReactNode } & Record<string, unknown>) {
+  return <div className="rounded-[20px] bg-[var(--feed-card)] p-6 text-sm text-muted-foreground" {...rest}>{children}</div>;
 }
 
-/** Accept or Reject on the request itself: a hard gate, a soft review without drafts, or a draft review whose drafts could not be loaded. */
-function RequestControls({ request, busy, unread, onAnswer, onMarkRead }: { request: ReviewRequest; busy: boolean; unread: boolean; onAnswer?: ViewProps["onAnswer"]; onMarkRead?: ViewProps["onMarkRead"] }) {
-  const [note, setNote] = useState("");
-  const [notThisKind, setNotThisKind] = useState(false);
-  const flag = request.mode === "flag";
-  const act = (input: AnswerInput) => { if (!busy) onAnswer?.(request, { ...input, feedback: note.trim() || null }); };
-  return (
-    <div className="space-y-3" data-review-controls>
-      {flag ? (
-        <Button aria-disabled={busy || undefined} className="min-h-12 w-full text-base" onClick={() => act({ decision: "acknowledge" })} type="button" variant="outline">Acknowledge</Button>
-      ) : (
-        <ChoiceButtons chosen={null} disabled={busy} onChoose={(choice) => act(choice === "accept" ? { decision: "approve" } : { decision: "reject", steer: notThisKind ? "not_this_kind" : null })} />
-      )}
-      <div aria-live="polite" className="min-h-5 text-sm" role="status">{busy ? "Saving…" : ""}</div>
-      <WhyBox busy={busy} onChange={setNote} placeholder={flag ? "Optional. Tell the step what to do differently." : "Optional. Write it before you tap Accept or Reject; it is saved with your answer."} value={note} />
-      {flag ? null : <NotThisKind busy={busy} label={NOT_THIS_KIND.request} onToggle={() => setNotThisKind((current) => !current)} pressed={notThisKind} />}
-      {unread ? <Button aria-disabled={busy || undefined} onClick={() => { if (!busy) onMarkRead?.(request.id); }} size="sm" variant="ghost">Mark read</Button> : null}
-    </div>
-  );
-}
+/** The CMS console home. It answers one question, "What needs me?": cards for AI drafts, References and anything else, one tap to decide each. */
+export function NotificationCenterView({
+  loadState, requests, references = [], decisions, previews = NO_PREVIEWS, referencesLoading = false, predictionLoading = false, referenceDisabledReason = null,
+  autoDecided = [], now = 0, visitRated = NO_VISIT, demo = false, stale = false, storyTitles = {}, deletedStories = new Set<string>(), busyId = null, error = null,
+  drafts = {}, missingDrafts = new Set<string>(), draftsState = "ready", draftErrors = {}, draftBusyId = null, stay = new Set<string>(), initialFilter = "all",
+  onAnswer, onDecideDraft, onRetryDrafts, onMarkRead, onOpenReference, onRateReference, onVisitRated,
+}: ViewProps) {
+  const [filter, setFilter] = useState<NotificationFilter>(initialFilter);
+  const [shown, setShown] = useState(REFERENCE_PAGE);
+  const session = stale ? CONFIRMING : null;
 
-function DecidedLine({ choice, notThisKind, why }: { choice: "accept" | "reject"; notThisKind?: boolean; why?: string | null }) {
-  const Icon = choice === "accept" ? CircleCheckIcon : CircleXIcon;
-  return (
-    <p className="flex items-start gap-1.5 text-sm font-medium" data-draft-decided={choice}>
-      <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
-      <span className="break-words">
-        {choice === "accept" ? "Accepted" : "Rejected"}{choice === "reject" && notThisKind ? " as not this kind of story" : ""}
-        {why ? <span className="font-normal text-muted-foreground">: {why}</span> : null}
-      </span>
-    </p>
+  const partition = useMemo(() => partitionReferenceFeed(references, decisions, { now, visitRated }), [references, decisions, now, visitRated]);
+  const referenceItems = partition.feed;
+  const waitingReferences = useMemo(() => referenceItems.filter((item) => normalizeReferenceCurationStatus(item.reference.curationStatus) === "pending").length, [referenceItems]);
+  const items = useMemo(
+    () => buildNotificationItems({ requests, drafts, missingDrafts, draftsState, stay, referenceCount: waitingReferences }),
+    [requests, drafts, missingDrafts, draftsState, stay, waitingReferences],
   );
-}
+  const bySource = useMemo(() => previewsBySourceAddress(references, previews), [references, previews]);
+  const recent = useMemo(() => recentDecisions(requests, references, demo), [requests, references, demo]);
+  const openDraftRequests = useMemo(() => sectionReviews(requests).draftBatches, [requests]);
+  const missingCount = openDraftRequests.reduce((total, request) => total + draftIdsOf(request).filter((id) => missingDrafts.has(id)).length, 0);
+
+  if (loadState === "loading") return <NotificationSkeleton />;
+  if (loadState === "forbidden") return <div data-notification-state="forbidden" role="alert"><strong>The Notification Center is for editors and admins</strong></div>;
+  if (loadState === "unavailable") return <div data-notification-state="unavailable" role="alert"><strong>Review requests could not be read right now</strong><p>Try again in a minute. The current request state is unknown.</p></div>;
+
+  const counts = items.counts;
+  const nothing = counts.drafts + counts.references + counts.other === 0;
+  const waitingText_ = waitingText(counts);
+  const anyCards = items.drafts.length + items.reviews.length + items.flags.length + referenceItems.length > 0;
+  const visibleReferences = referenceItems.slice(0, shown);
+  const moreReferences = referenceItems.length - visibleReferences.length;
+  const sectionGrid = (children: ReactNode, grid = GRID) => <div className={grid} data-notification-grid>{children}</div>;
+
+  const draftCards = items.drafts.map((item) => (
+    <DraftCard
+      busy={draftBusyId === item.key} error={draftErrors[item.key] ?? null} item={item} key={item.key} previews={bySource} session={session}
+      onDecide={(draftId, choice, extras) => onDecideDraft?.(item.request, draftId, choice, extras)}
+    />
+  ));
+  const requestAnswer = (request: ReviewRequest, choice: DraftChoice, extras: DecisionExtras) =>
+    onAnswer?.(request, choice === "accept" ? { decision: "approve", feedback: extras.why || null } : { decision: "reject", feedback: extras.why || null, steer: extras.notThisKind ? "not_this_kind" : null });
 
-/** One AI draft, shown so it can be judged in place: headline, dek, section, evidence, sources and the way to the full draft. */
-function DraftCard({ id, view, request, busy, error, onDecide }: {
-  id: string; view: DraftView | undefined; request: ReviewRequest; busy: boolean; error: string | null;
-  onDecide?: (draftId: string, choice: DraftChoice, extras: { why: string; notThisKind: boolean }) => void;
-}) {
-  const [why, setWhy] = useState("");
-  const [notThisKind, setNotThisKind] = useState(false);
-  const link = request.links.find((entry) => entry.id === id);
-  const decision = draftDecisionOf(link, view, { by: "", at: "" });
-  const hold = view ? cannotMoveReason(view) : null;
-  if (!view) {
-    return (
-      <li className="rounded-lg border p-3 text-sm" data-review-draft={id} data-draft-state="loading" role="status">
-        <p className="font-medium">{link?.label ?? "Draft"}</p>
-        <p className="text-muted-foreground">Loading the draft…</p>
-      </li>
-    );
-  }
   return (
-    <li className="space-y-3 rounded-lg border p-3" data-review-draft={id} data-draft-state={decision ? "decided" : "open"}>
-      <header className="space-y-1">
-        <h3 className="break-words text-base font-semibold leading-snug">{view.headline}</h3>
-        <p className="text-xs text-muted-foreground">
-          {view.kindLabel}{view.section ? ` · Section: ${view.section}` : ""} · Proposed by AI · {stateLabel(view.state, false)}
+    <div className="space-y-10" data-notification-center {...FEED_SURFACE_PROPS}>
+      <header className="space-y-4">
+        <div className="space-y-1.5">
+          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl" data-notification-title>What needs me?</h1>
+          <p className="text-lg text-muted-foreground" data-notification-summary role="status">{waitingText_}</p>
+        </div>
+        <div aria-label="Show" className="flex flex-wrap gap-1" data-notification-filters role="group">
+          <div className="inline-flex max-w-full rounded-full bg-[var(--feed-card)] p-1">
+            {NOTIFICATION_FILTERS.map((key) => {
+              const on = filter === key;
+              return (
+                <button
+                  aria-pressed={on}
+                  className={cn(PILL, "min-h-9 gap-1 px-2 text-[0.8rem] sm:gap-1.5 sm:px-3.5 sm:text-sm", on ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "text-muted-foreground hover:text-foreground")}
+                  data-notification-filter={key}
+                  key={key}
+                  onClick={() => setFilter(key)}
+                  type="button"
+                >
+                  {on ? <CheckIcon aria-hidden="true" className="hidden size-3.5 sm:block" /> : null}
+                  {FILTER_LABELS[key]}
+                  <span className="text-xs tabular-nums opacity-70" data-notification-filter-count>{filterCount(key, counts)}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <p className="max-w-3xl text-sm text-muted-foreground" data-notification-ignore>
+          Decide what you like and leave the rest. A draft you leave alone stays in Proposals, and nothing is published without an editor. Only a hard gate waits for you.
         </p>
+        {stale ? <p className="text-xs text-muted-foreground" data-notification-stale role="status">Showing your last view while it updates.</p> : null}
+        {demo ? <p className="text-xs text-muted-foreground" data-notification-demo>Preview: what you decide here is not saved.</p> : null}
+        {error ? <p className="text-sm text-destructive" data-notification-error role="alert">{error}</p> : null}
       </header>
-      {view.dek ? <p className="break-words text-sm" data-draft-dek>{view.dek}</p> : null}
-      {view.evidence.length ? (
-        <ul aria-label="Evidence" className="space-y-0.5 text-sm" data-draft-evidence>
-          {view.evidence.map((line) => <li className="break-words" key={line}><span className="font-medium">Evidence:</span> {line}</li>)}
-        </ul>
-      ) : null}
-      {view.sources.length ? (
-        <div className="space-y-1">
-          <p className="text-sm font-medium">Sources</p>
-          <ul aria-label="Sources" className="space-y-0.5 text-sm" data-draft-sources>
-            {view.sources.map((source, index) => (
-              <li className="break-words" key={`${source.title}-${index}`}>
-                {source.url ? (
-                  <a className="inline-flex max-w-full items-center gap-1 text-primary underline underline-offset-4" href={source.url} rel="noreferrer" target="_blank">
-                    <span className="break-words">{source.title}</span><ExternalLinkIcon aria-hidden="true" className="size-3.5 shrink-0" />
-                  </a>
-                ) : source.title}
-                {source.date ? <span className="text-muted-foreground"> ({source.date})</span> : null}
-              </li>
-            ))}
-            {view.moreSources ? <li className="text-muted-foreground">and {view.moreSources} more in the full draft</li> : null}
-          </ul>
+
+      {nothing && !anyCards && !referencesLoading ? (
+        <div className="flex flex-col items-center gap-2 rounded-[20px] bg-[var(--feed-card)] px-6 py-12 text-center" data-notification-caught-up>
+          <CircleCheckBigIcon aria-hidden="true" className="size-10 text-primary" />
+          <h2 className="text-2xl font-bold tracking-tight">All caught up</h2>
+          <p className="max-w-md text-sm text-muted-foreground">Nothing needs you right now. New drafts, references and reviews will appear here as they arrive.</p>
         </div>
       ) : null}
-      <Link className="inline-flex items-center gap-1 text-sm text-primary underline underline-offset-4" data-draft-open href={view.href}>
-        Open the full draft in Proposals<ExternalLinkIcon aria-hidden="true" className="size-3.5 shrink-0" />
-      </Link>
-      {decision ? (
-        <DecidedLine choice={decision.choice} notThisKind={decision.notThisKind} why={decision.why} />
-      ) : (
-        <div className="space-y-3" data-review-controls>
-          <ChoiceButtons chosen={null} disabled={busy || Boolean(hold)} onChoose={(choice) => { if (!busy && !hold) onDecide?.(id, choice, { why: why.trim(), notThisKind }); }} />
-          <div aria-live="polite" className="min-h-5 text-sm" role="status">{busy ? "Saving…" : ""}</div>
-          {hold ? <p className="text-sm" data-review-disabled-reason>{hold}</p> : null}
-          {error ? <p className="text-sm text-destructive" role="alert">{error}</p> : null}
-          <WhyBox busy={busy} onChange={setWhy} placeholder="Optional. Write it before you tap Accept or Reject; it is saved with your answer and teaches the AI." value={why} />
-          <NotThisKind busy={busy} label={NOT_THIS_KIND.draft} onToggle={() => setNotThisKind((current) => !current)} pressed={notThisKind} />
-        </div>
-      )}
-    </li>
-  );
-}
 
-function Entry({ request, unread, demo, busy, titles, deleted, drafts, missingDrafts, draftsState, draftErrors, draftBusyId, onAnswer, onMarkRead, onDecideDraft, onRetryDrafts }: {
-  request: ReviewRequest; unread: boolean; demo: boolean; busy: boolean; titles: Readonly<Record<string, string>>; deleted: ReadonlySet<string>;
-  drafts: Readonly<Record<string, DraftView>>; missingDrafts: ReadonlySet<string>; draftsState: DraftsLoadState; draftErrors: Readonly<Record<string, string>>; draftBusyId: string | null;
-  onAnswer?: ViewProps["onAnswer"]; onMarkRead?: ViewProps["onMarkRead"]; onDecideDraft?: ViewProps["onDecideDraft"]; onRetryDrafts?: () => void;
-}) {
-  const href = subjectHref(request.subject, demo);
-  const open = request.state === "open";
-  const steering = steeringText(request);
-  const draftIds = draftIdsOf(request);
-  const draftReview = isDraftReview(request);
-  const available = draftIds.filter((id) => !missingDrafts.has(id));
-  const Icon = CONTROL_ICON[request.mode];
-  // A draft review is decided draft by draft. Only when none of its drafts can be opened here (an idea kept outside Proposals) does the request itself take Accept or Reject.
-  const requestLevel = open && (!draftReview || (draftsState === "ready" && available.length === 0));
-  const recorded = request.answer?.drafts ?? [];
-  return (
-    <li className="space-y-3 rounded-lg border p-3" 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"><Icon aria-hidden="true" className="mr-1 size-3" />{modeLabel(request.mode)}</Badge>
-        {unread ? <Badge variant="default"><CircleDotIcon aria-hidden="true" className="mr-1 size-3" />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)}
-        {draftReview ? null : <>{" · "}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 && !draftReview ? <p className="text-sm">{request.ask}</p> : null}
-      {!draftReview && 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}
-      {draftReview && open ? (
-        <div className="space-y-2">
-          <p className="text-sm">Accept or Reject each draft. An accepted draft is approved in Proposals; a rejected one is declined there. Nothing is published by this page.</p>
+      {showsSection(filter, "drafts") && (items.drafts.length || draftsState === "failed" || missingCount > 0) ? (
+        <Section count={counts.drafts} id="drafts" subtitle="AI story drafts. Accept sends one on to an editor in Proposals; Reject declines it." title="Drafts">
           {draftsState === "failed" ? (
-            <div className="space-y-2" role="alert">
-              <p className="text-sm">The drafts could not be loaded right now.</p>
-              <Button onClick={onRetryDrafts} size="sm" type="button" variant="outline">Try again</Button>
-            </div>
-          ) : null}
-          <ul aria-label="Drafts in this request" className="space-y-3" data-review-drafts>
-            {draftsState === "failed" ? null : available.map((id) => (
-              <DraftCard
-                busy={draftBusyId === `${request.id}#${id}`} error={draftErrors[`${request.id}#${id}`] ?? null} id={id} key={id} request={request}
-                onDecide={(draftId, choice, extras) => onDecideDraft?.(request, draftId, choice, extras)} view={drafts[id]}
-              />
-            ))}
-          </ul>
-          {draftIds.length > available.length ? <p className="text-sm text-muted-foreground">{draftIds.length - available.length} of these drafts are not in Proposals on this site, so they cannot be opened here.</p> : null}
-        </div>
+            <Note role="alert">
+              <p>The drafts could not be loaded right now.</p>
+              <button className={cn(PILL, "mt-3 bg-[var(--feed-control)] text-foreground")} onClick={onRetryDrafts} type="button">Try again</button>
+            </Note>
+          ) : sectionGrid(draftCards)}
+          {missingCount ? <p className="mt-4 text-sm text-muted-foreground">{missingCount} of these drafts {missingCount === 1 ? "is" : "are"} not in Proposals on this site, so they cannot be opened here.</p> : null}
+        </Section>
       ) : null}
-      {!open && recorded.length ? (
-        <ul aria-label="What you decided" className="space-y-1" data-review-decisions>
-          {recorded.map((entry) => (
-            <li key={entry.id}>
-              <DecidedLine choice={entry.choice} notThisKind={entry.notThisKind} why={entry.why} />
-              <Link className="ml-5 text-xs text-primary underline underline-offset-4" href={proposalHref(entry.id, demo)}>{entry.title ?? entry.id}</Link>
-            </li>
-          ))}
-        </ul>
+
+      {showsSection(filter, "references") && (referenceItems.length || referencesLoading) ? (
+        <Section count={referencesLoading ? undefined : waitingReferences} id="references" subtitle="Sources the Cyclotron wants a person to rate. The same cards as the References feed, best bets first." title="References">
+          {referencesLoading ? <ReferenceFeedSkeleton count={3} /> : (
+            <>
+              <div className={GRID} data-notification-grid data-notification-references>
+                {visibleReferences.map((item) => (
+                  <FeedCard
+                    decision={item.decision} disabledReason={referenceDisabledReason} item={item} key={item.lineageId} lead={false} now={now}
+                    onOpen={() => onOpenReference?.(item.lineageId)}
+                    onRate={async (reference, choice, reasonCode) => { onVisitRated?.(item.lineageId); await onRateReference?.(reference, choice, reasonCode); }}
+                    predictionLoading={predictionLoading} preview={previews.get(item.lineageId)} selected={false} visitRated={visitRated.has(item.lineageId)}
+                  />
+                ))}
+              </div>
+              <div className="mt-5 flex flex-wrap items-center gap-2">
+                {moreReferences > 0 ? (
+                  <button className={cn(PILL, "bg-[var(--feed-control)] text-foreground")} data-notification-more-references onClick={() => setShown((current) => current + REFERENCE_PAGE)} type="button">
+                    Show {Math.min(moreReferences, REFERENCE_PAGE)} more
+                  </button>
+                ) : null}
+                <Link className={cn(PILL, "text-muted-foreground hover:text-foreground")} href={getNewsroomNavHref("/newsroom/references", demo)}>
+                  {partition.earlier.length ? `Open the References feed (${partition.earlier.length} earlier)` : "Open the References feed"}
+                </Link>
+              </div>
+            </>
+          )}
+        </Section>
       ) : null}
-      <p className="text-sm" data-review-next>{nextText(request)}</p>
-      {steering ? <p className="text-sm" data-review-steering>{steering}</p> : null}
-      {requestLevel ? (
-        <RequestControls busy={busy} onAnswer={onAnswer} onMarkRead={onMarkRead} request={request} unread={unread} />
-      ) : open ? (
-        unread ? <Button aria-disabled={busy || undefined} onClick={() => { if (!busy) onMarkRead?.(request.id); }} size="sm" variant="ghost">Mark read</Button> : null
-      ) : unread ? (
-        <Button aria-disabled={busy || undefined} onClick={() => { if (!busy) onMarkRead?.(request.id); }} size="sm" variant="ghost">Mark read</Button>
+
+      {showsSection(filter, "other") && items.reviews.length ? (
+        <Section count={items.reviews.filter((item) => item.request.state === "open").length} id="reviews" subtitle="Reviews that are about more than one draft or one source." title="Reviews">
+          {sectionGrid(items.reviews.map((item) => (
+            <RequestCard
+              busy={busyId === item.request.id} deleted={deletedStories} demo={demo} error={null} item={item} key={item.key}
+              onAnswer={requestAnswer} onOpen={onMarkRead} session={session} titles={storyTitles}
+            />
+          )))}
+        </Section>
       ) : 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">{held ? <HourglassIcon aria-hidden="true" className="mr-1 size-3" /> : <CircleCheckIcon aria-hidden="true" className="mr-1 size-3" />}{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>
-  );
-}
+      {showsSection(filter, "other") && items.flags.length ? (
+        <Section count={items.flags.filter((item) => item.request.state === "open").length} id="flags" subtitle="Nothing is waiting on these. Acknowledge them to clear them." title="For your information">
+          {sectionGrid(items.flags.map((item) => (
+            <FlagCard
+              busy={busyId === item.request.id} deleted={deletedStories} demo={demo} error={null} item={item} key={item.key} onOpen={onMarkRead} session={session} titles={storyTitles}
+              onAcknowledge={(request, note) => onAnswer?.(request, { decision: "acknowledge", feedback: note || null })}
+            />
+          )))}
+        </Section>
+      ) : null}
 
-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>
-  );
-}
+      {!nothing && filter !== "all" && filterCount(filter, counts) === 0 && !referencesLoading ? (
+        <Note data-filter-empty>Nothing in {FILTER_LABELS[filter]} needs you right now.</Note>
+      ) : null}
 
-/** The CMS console home: what needs a person, what will close 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,
-  drafts = {}, missingDrafts = new Set<string>(), draftsState = "ready", draftErrors = {}, draftBusyId = null,
-  onAnswer, onDecideDraft, onRetryDrafts, 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, draftsToDecide(sections.draftBatches, drafts, missingDrafts));
-  const entry = (request: ReviewRequest) => (
-    <Entry
-      busy={busyId === request.id} demo={demo} deleted={deletedStories} draftBusyId={draftBusyId} draftErrors={draftErrors} drafts={drafts} draftsState={draftsState}
-      key={request.id} missingDrafts={missingDrafts} onAnswer={onAnswer} onDecideDraft={onDecideDraft} onMarkRead={onMarkRead} onRetryDrafts={onRetryDrafts}
-      request={request} titles={storyTitles} 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">
-          Accept or Reject what you want to decide, and ignore the rest. An AI draft you leave alone stays in Proposals and nothing is published without an editor. A review with a deadline closes when the deadline passes, 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>
+      {autoDecided.length ? (
+        <details className="group rounded-[20px] bg-[var(--feed-card)] p-4" data-notification-section="auto-decided">
+          <summary className="flex min-h-9 cursor-pointer list-none items-center gap-2 text-sm font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <ChevronDownIcon aria-hidden="true" className="size-4 transition-transform group-open:rotate-180" />
+            Decided automatically ({autoDecided.length})
+          </summary>
+          <p className="mt-2 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>
+          <ul className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+            {autoDecided.map((entry) => (
+              <li data-cyclotron-entry={entry.lineageId} key={entry.lineageId}>
+                <Link className="block rounded-[16px] bg-[var(--feed-control)] p-3 text-sm outline-none hover:bg-[var(--feed-control)]/70 focus-visible:ring-2 focus-visible:ring-ring" href={entry.href}>
+                  <span className="block break-words font-medium leading-snug">{entry.title}</span>
+                  <span className="block text-xs text-muted-foreground">
+                    Classified as {entry.label} · {entry.confidence === null ? "confidence not recorded" : `confidence ${Math.round(entry.confidence * 100)}%`}{entry.reviewedByPerson ? " · reviewed by a person" : ""}
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </details>
+      ) : null}
 
-      <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.draftBatches.length} empty="No AI drafts are waiting for review." id="drafts" title="AI drafts to review">
-        <ul className="space-y-3">{sections.draftBatches.map(entry)}</ul>
-      </Section>
-      <Section count={sections.softReviews.length} empty="No other reviews are open." id="soft-reviews" title="Other 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>
+      {recent.length ? (
+        <Section id="decided" subtitle="The last few things you decided." title="Recently decided">
+          <RecentDecisions entries={recent} />
+        </Section>
+      ) : null}
     </div>
   );
 }
@@ -384,21 +303,56 @@ const liveApi: NotificationApi = {
   transitionProposalPath: async (proposalId, path) => (await import("../lib/proposals-client")).transitionProposalPath(proposalId, path),
 };
 
+/** 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" }),
+};
+
 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;
+  onOpenReference?: (lineageId: string) => void;
+  onRateReference?: (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => Promise<void> | void;
   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, api = liveApi }: ContainerProps) {
+/** Preview only: ?ncState=loading holds the skeleton, caught-up shows the empty state, sample swaps in the invented hard gate, flags and batches. */
+function previewState(): "loading" | "caught-up" | "sample" | 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 : null;
+}
+
+export function NotificationCenter({
+  references, decisions, humanCuratedReferenceLineageIds = NO_VISIT, previews, referencesLoading, predictionLoading, referenceDisabledReason, onOpenReference, onRateReference, 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);
@@ -409,7 +363,18 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
   const [draftsState, setDraftsState] = useState<DraftsLoadState>("loading");
   const [draftErrors, setDraftErrors] = useState<Record<string, string>>({});
   const [draftBusyId, setDraftBusyId] = useState<string | null>(null);
+  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 };
+    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);
@@ -418,47 +383,65 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
       return;
     }
     if (demo) {
-      setDrafts(Object.fromEntries(FIXTURE_DRAFTS.map((row) => [row.id, draftView(row, true)])));
-      setMissingDrafts(new Set(ids.filter((id) => !FIXTURE_DRAFTS.some((row) => row.id === id))));
+      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(loaded.drafts);
+      setDrafts((current) => ({ ...current, ...loaded.drafts }));
       setMissingDrafts(new Set(loaded.missing));
       setDraftsState(loaded.failed.length ? "failed" : "ready");
     } catch {
       setDraftsState("failed");
     }
-  }, [api, demo]);
+  }, [api, demo, sample]);
+
+  // 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(FIXTURE_REVIEW_REQUESTS);
+      void loadDraftsFor(sample.requests);
       return;
     }
     try {
       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");
       void loadDraftsFor(loaded.requests);
       const stories = await api.loadStoryTitles(loaded.requests.filter((request) => request.subject.type === "story").map((request) => request.subject.id)).catch(() => ({ titles: {}, deleted: [] as string[] }));
       setStoryTitles(stories.titles);
       setDeletedStories(new Set(stories.deleted));
     } catch {
+      setStale(false);
       setLoadState("unavailable");
     }
-  }, [api, demo, loadDraftsFor]);
+  }, [api, demo, loadDraftsFor, sample]);
 
   useEffect(() => {
     void refresh();
@@ -466,11 +449,14 @@ 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;
     await api.markReviewRead(userKey, requestId).catch(() => undefined);
   }, [api, demo, userKey]);
@@ -479,8 +465,8 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
     setError(null);
     setBusyId(request.id);
     try {
-      if (demo) throw new Error("This is a demo: answers are not saved.");
       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);
     } catch (failure) {
@@ -488,7 +474,7 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
     } finally {
       setBusyId(null);
     }
-  }, [actorLabel, api, demo, markRead]);
+  }, [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: DraftExtras) => {
@@ -497,7 +483,6 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
     setDraftBusyId(key);
     resolving.current.add(request.id);
     try {
-      if (demo) throw new Error("This is a demo: decisions are not saved.");
       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);
@@ -507,6 +492,7 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
       const decided: DraftView = { ...view, state: choice === "accept" ? "approved" : "declined", decided: choice };
       const nextDrafts = { ...drafts, [draftId]: decided };
       setDrafts(nextDrafts);
+      keep(key);
       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 });
@@ -524,11 +510,11 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
       resolving.current.delete(request.id);
       setDraftBusyId(null);
     }
-  }, [actorLabel, api, demo, drafts, loadDraftsFor, markRead]);
+  }, [actorLabel, api, demo, drafts, keep, loadDraftsFor, markRead]);
 
   // Drafts decided in Proposals (not here) still close their request.
   useEffect(() => {
-    if (demo || draftsState !== "ready") return;
+    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;
@@ -546,18 +532,20 @@ export function NotificationCenter({ references, decisions, humanCuratedReferenc
         }
       })();
     }
-  }, [api, demo, drafts, draftsState, requests]);
-
-  const markAllRead = useCallback(() => {
-    for (const request of requests) if (isUnread(request, readIds)) void markRead(request.id);
-  }, [markRead, readIds, requests]);
+  }, [api, demo, drafts, draftsState, requests, stale]);
 
+  // Preview only: caught-up hides what is still pending; loading holds the skeleton.
+  const autoDecided = useMemo(() => cyclotronAutoDecided(references, decisions, humanCuratedReferenceLineageIds, demo), [references, decisions, humanCuratedReferenceLineageIds, demo]);
+  const shownReferences = preview === "caught-up" ? references.filter((reference) => normalizeReferenceCurationStatus(reference.curationStatus) !== "pending") : references;
   return (
     <NotificationCenterView
-      autoDecided={autoDecided} busyId={busyId} storyTitles={storyTitles} deletedStories={deletedStories} demo={demo} draftBusyId={draftBusyId} draftErrors={draftErrors}
-      drafts={drafts} draftsState={draftsState} error={error} held={held} loadState={loadState} missingDrafts={missingDrafts}
-      onAnswer={answer} onDecideDraft={(request, draftId, choice, extras) => void decideDraft(request, draftId, choice, extras)}
-      onMarkAllRead={markAllRead} onMarkRead={markRead} onRetryDrafts={() => void loadDraftsFor(requests)} readIds={readIds} requests={requests}
+      autoDecided={autoDecided} busyId={busyId} decisions={decisions} deletedStories={deletedStories} demo={demo} draftBusyId={draftBusyId} draftErrors={draftErrors} drafts={drafts} draftsState={draftsState}
+      error={error} loadState={preview === "loading" ? "loading" : loadState} missingDrafts={missingDrafts} now={now} onAnswer={(request, input) => void answer(request, input)}
+      onDecideDraft={(request, draftId, choice, extras) => void decideDraft(request, draftId, choice, extras)} onMarkRead={(requestId) => void markRead(requestId)}
+      onOpenReference={onOpenReference} onRateReference={onRateReference} onRetryDrafts={() => void loadDraftsFor(requests)}
+      onVisitRated={(lineageId) => setVisitRated((current) => (current.has(lineageId) ? current : new Set(current).add(lineageId)))}
+      predictionLoading={predictionLoading} previews={previews} referenceDisabledReason={referenceDisabledReason} references={shownReferences} referencesLoading={referencesLoading}
+      requests={requests} stale={stale} stay={stay} storyTitles={storyTitles} visitRated={visitRated}
     />
   );
 }