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

package/components/newsroom-references-view.tsx

@@ -4,9 +4,9 @@ import type { PrimingPanelProps } from "cyclotron/components/priming-panel";
 import { ReferenceAddEntry } from "./reference-add-entry";
 import { ReferenceCurationControls, useReferenceImport } from "./reference-curation-controls";
 
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, LayoutGridIcon, ListIcon, PlusIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
@@ -42,8 +42,23 @@ import {
 import { normalizeReferenceCurationStatus, referenceReasonCode, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
+import { useReferencePreviewAttachments } from "./use-reference-preview-attachments";
+import { useMediaQuery } from "./use-media-query";
+import { FEED_SURFACE_PROPS, FEED_SURFACE_STYLE, ReferenceFeed } from "./reference-feed";
+import { ReferenceCapturePanel } from "./reference-capture-panel";
+import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capture-client";
+import { useRatingStore, type RatingController } from "./use-reference-ratings";
+import { captureStatusesByLineage } from "../lib/reference-capture";
+import { applyFeedOrderSnapshot, partitionReferenceFeed, takeFeedOrderSnapshot, type FeedOrderSnapshot, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
+import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { chooseSyntheticRejects, withSyntheticRejects } from "../lib/local-preview-synthetic-rejects";
+import { cn } from "../lib/utils";
+import { getKanbusTheme, SITE_BRAND } from "../lib/site-brand";
+import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
 import {
   ReviewCard,
+  predictionFromDecision,
   ReviewQueueBar,
   useQueueGestures,
   type CardPrediction,
@@ -75,10 +90,6 @@ import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyc
 import type { PrimingRequestView } from "../lib/relevance-status";
 import type { CyclotronStatus } from "cyclotron/cyclotron-status";
 import { awaitsEditorReview, type RelevanceCuration, type RelevanceDecisionView } from "../lib/relevance-decisions";
-import {
-  loadReferenceAttachmentsForLineageId,
-  loadStoragePathUrl,
-} from "./news-desk-taxonomy-client";
 
 type NewsroomReferencesViewProps = {
   /** Present only when the host has configured optional example priming. */
@@ -119,8 +130,16 @@ type NewsroomReferencesViewProps = {
   onReview: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: ReferenceReviewOptions) => Promise<void> | void;
   referenceAttachments?: ReferenceAttachmentRecord[];
   references: ReferenceRecord[];
+  /** Saves an editor's pasted or corrected capture text and their verdict on it. Optional: without it the capture panel only reads. */
+  onCorrectCapture?: CorrectCaptureAction;
+  /** True while the References are still being read: the feed shows card skeletons instead of an empty page. */
+  loading?: boolean;
+  /** The last view this browser saved. Shown, read only, until the live read arrives. */
+  savedCopy?: { references: ReferenceRecord[]; previews: Array<[string, ReferencePreview]>; decisions: Array<[string, RelevanceDecisionView]> } | null;
 };
 
+type ReferenceView = "feed" | "list";
+
 type ReferenceListFilter = ReferenceStatusFilter | "needs_review";
 
 const NEEDS_REVIEW_FILTER: { key: ReferenceListFilter; label: string } = { key: "needs_review", label: "Needs review" };
@@ -133,18 +152,6 @@ const STATUS_FILTERS: Array<{ key: ReferenceListFilter; label: string }> = [
   { key: "archived", label: "Archived" },
 ];
 
-function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    const update = () => setMatches(mediaQuery.matches);
-    update();
-    mediaQuery.addEventListener("change", update);
-    return () => mediaQuery.removeEventListener("change", update);
-  }, [query]);
-  return matches;
-}
-
 function buildReferenceDetailPath(lineageId: string, demo?: boolean): string {
   return getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo);
 }
@@ -156,100 +163,6 @@ function referenceUrl(reference: ReferenceRecord): string | null {
   return null;
 }
 
-function normalizeReferenceDetailHttpUri(value: string | null | undefined): string | null {
-  const trimmed = value?.trim();
-  if (!trimmed) return null;
-  if (/^https?:\/\//i.test(trimmed)) return trimmed;
-  return null;
-}
-
-function useReferencePreviewAttachments(
-  reference: ReferenceRecord | null,
-  referenceAttachments: ReferenceAttachmentRecord[],
-) {
-  const lineageId = reference ? referenceLineageId(reference) : "";
-  const seededAttachments = useMemo(
-    () => referenceAttachments.filter((attachment) => attachment.referenceLineageId === lineageId),
-    [lineageId, referenceAttachments],
-  );
-  const [attachments, setAttachments] = useState<ReferenceAttachmentRecord[]>(seededAttachments);
-  const [attachmentLinksById, setAttachmentLinksById] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    setAttachments(seededAttachments);
-  }, [seededAttachments]);
-
-  useEffect(() => {
-    if (!lineageId) return;
-    if (seededAttachments.length > 0) return;
-    let active = true;
-    void loadReferenceAttachmentsForLineageId(lineageId)
-      .then((loaded) => {
-        if (!active || !loaded.length) return;
-        setAttachments(loaded);
-      })
-      .catch(() => undefined);
-    return () => {
-      active = false;
-    };
-  }, [lineageId, seededAttachments.length]);
-
-  useEffect(() => {
-    if (!attachments.length) {
-      setAttachmentLinksById({});
-      return;
-    }
-    let active = true;
-    const staticLinks = new Map<string, string>();
-    const storageLookups: Array<{ id: string; storagePath: string }> = [];
-
-    for (const attachment of attachments) {
-      if (attachment.storagePath) {
-        storageLookups.push({ id: attachment.id, storagePath: attachment.storagePath });
-        continue;
-      }
-      const sourceHref = normalizeReferenceDetailHttpUri(attachment.sourceUri);
-      if (sourceHref) staticLinks.set(attachment.id, sourceHref);
-    }
-
-    if (!storageLookups.length) {
-      setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-      return () => {
-        active = false;
-      };
-    }
-
-    setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-    void Promise.all(storageLookups.map(async (lookup) => {
-      const result = await loadStoragePathUrl(lookup.storagePath);
-      return { id: lookup.id, url: result.url };
-    }))
-      .then((resolved) => {
-        if (!active) return;
-        const nextLinks = Object.fromEntries(staticLinks.entries());
-        for (const entry of resolved) {
-          if (entry.url) nextLinks[entry.id] = entry.url;
-        }
-        setAttachmentLinksById(nextLinks);
-      })
-      .catch(() => undefined);
-
-    return () => {
-      active = false;
-    };
-  }, [attachments]);
-
-  const previewAttachments = useMemo(
-    () => attachments.map((attachment) => ({
-      ...attachment,
-      sourceUri: attachmentLinksById[attachment.id] ?? attachment.sourceUri,
-    })),
-    [attachmentLinksById, attachments],
-  );
-
-  return previewAttachments;
-}
-
 function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
   return awaitsEditorReview(reference.curationStatus, decision);
 }
@@ -269,16 +182,17 @@ function summaryOf(reference: ReferenceRecord): string | null {
 }
 
 function cardPrediction(decision: RelevanceDecisionView | undefined, predictionState: PredictionState): CardPrediction {
-  if (decision) {
-    const positive = decision.positiveLabel ?? "include";
-    return { state: "ready", choice: decision.label === positive ? "accept" : "reject", confidence: decision.confidence };
-  }
+  if (decision) return predictionFromDecision(decision);
   if (predictionState === "loading") return { state: "loading" };
   if (predictionState === "error") return { state: "error" };
   return { state: "none" };
 }
 
 function ReferenceDetailPanel({
+  captureTeaserLine,
+  correctCapture,
+  ratings,
+  sectionChoices,
   countsAsTrainingLabel,
   delegated,
   decision,
@@ -294,6 +208,13 @@ function ReferenceDetailPanel({
   sectionSuggestion,
   sections = [],
 }: {
+  captureTeaserLine: number;
+  /** Saves a pasted or corrected capture (the `correctReferenceCapture` action). Without it the panel has no edit action. */
+  correctCapture?: CorrectCaptureAction;
+  /** The rating store shared with the grid cards. */
+  ratings?: RatingController;
+  /** Where this panel records the Section chosen for an accept, so the shared store's save can include it. */
+  sectionChoices?: MutableRefObject<Map<string, string | null>>;
   countsAsTrainingLabel?: boolean;
   delegated?: DelegatedCuration;
   decision?: RelevanceDecisionView;
@@ -321,6 +242,8 @@ function ReferenceDetailPanel({
     if (!sectionEdited.current) setChosenSectionId(reviewSectionId ?? null);
   }, [reviewSectionId]);
   const url = referenceUrl(reference);
+  useEffect(() => { sectionChoices?.current.set(lineageId, chosenSectionId); }, [chosenSectionId, lineageId, sectionChoices]);
+  const capture = useReferenceCapture(reference, previewAttachments, captureTeaserLine, correctCapture);
 
   async function decide(choice: ReviewChoice, review: ReviewCardDecision) {
     const action: ReferenceCurationAction = choice;
@@ -350,6 +273,7 @@ function ReferenceDetailPanel({
           initialNote={sourceNote}
           initialReason={sourceReason}
           itemId={lineageId}
+          ratings={ratings}
           onArchive={status === "archived" ? undefined : async () => { await onReview("archive"); }}
           onDecide={decide}
           prediction={cardPrediction(decision, predictionState)}
@@ -380,6 +304,8 @@ function ReferenceDetailPanel({
 
         <Separator />
 
+        <ReferenceCapturePanel capture={capture} />
+
         <section aria-label="Source preview" className="space-y-2">
           <h3 className="text-sm font-medium text-foreground">Source preview</h3>
           <ReferenceSourcePreview attachments={previewAttachments} sourceUri={reference.sourceUri} />
@@ -444,7 +370,7 @@ export function NewsroomReferencesView({
   priming,
   cyclotronStatus,
   cyclotronPriming,
-  decisions,
+  decisions: liveDecisions,
   humanCuratedReferenceLineageIds,
   delegatedCurations,
   shadowAgreement = null,
@@ -463,9 +389,15 @@ export function NewsroomReferencesView({
   initialReferenceLineageId = null,
   onReview,
   referenceAttachments = [],
-  references,
+  references: liveReferences,
+  loading = false,
+  onCorrectCapture,
+  savedCopy = null,
 }: NewsroomReferencesViewProps) {
   const pathname = usePathname();
+  // The portaled mobile sheet sits outside the newsroom root, so it carries the theme attributes itself (same as useNewsroomThemeAttributes).
+  const themeMode = useResolvedPapyrusTheme();
+  const themeAttributes = { "data-kanbus-theme": getKanbusTheme(SITE_BRAND), "data-color-mode": themeMode };
   const sessionImport = useReferenceImport(disabled);
   const [importedCount, setImportedCount] = useState(0);
   const isMobileDetail = useMediaQuery("(max-width: 767px)");
@@ -475,7 +407,77 @@ export function NewsroomReferencesView({
   );
   const routeLineageId = pathname ? pathnameLineageId ?? "" : initialReferenceLineageId ?? "";
 
+  // Until the live read arrives, a saved copy of the last view fills the page. It is display only.
+  const showingSavedCopy = loading && !liveReferences.length && Boolean(savedCopy?.references.length);
+  const references = showingSavedCopy ? savedCopy!.references : liveReferences;
+  const baseDecisions = useMemo(
+    () => (showingSavedCopy && !liveDecisions?.size ? new Map(savedCopy!.decisions) : liveDecisions),
+    [liveDecisions, savedCopy, showingSavedCopy],
+  );
+  // Preview only: ?feedSynthRejects=N makes the N weakest Accept predictions into made-up Rejects (the page says so).
+  const synthRejectCount = useMemo(() => {
+    if (typeof window === "undefined" || !isLocalPreviewEnabled()) return 0;
+    const requested = Number(new URLSearchParams(window.location.search).get("feedSynthRejects"));
+    return Number.isInteger(requested) && requested > 0 ? requested : 0;
+  }, []);
+  const syntheticChoice = useRef<string[] | null>(null);
+  if (synthRejectCount && syntheticChoice.current === null && baseDecisions?.size && references.length) {
+    syntheticChoice.current = chooseSyntheticRejects(
+      baseDecisions,
+      new Set(references.filter((reference) => normalizeReferenceCurationStatus(reference.curationStatus) === "pending").map(referenceLineageId)),
+      synthRejectCount,
+    );
+  }
+  const synthetic = useMemo(
+    () => (synthRejectCount && syntheticChoice.current ? withSyntheticRejects(baseDecisions, syntheticChoice.current) : null),
+    [baseDecisions, synthRejectCount],
+  );
+  const decisions = synthetic?.decisions ?? baseDecisions;
+  const previews = useMemo(() => {
+    const live = referencePreviewsByLineage(referenceAttachments);
+    return showingSavedCopy && !live.size ? new Map(savedCopy!.previews) : live;
+  }, [referenceAttachments, savedCopy, showingSavedCopy]);
+  const [view, setView] = useState<ReferenceView>("feed");
+  const [addOpen, setAddOpen] = useState(false);
+  const [feedTab, setFeedTab] = useState<ReferenceFeedTabKey>("feed");
+  const [visitRated, setVisitRated] = useState<ReadonlySet<string>>(() => new Set());
+  const [mountedAt] = useState(() => Date.now());
+  const markVisitRated = useCallback((lineageId: string) => {
+    setVisitRated((current) => (current.has(lineageId) ? current : new Set(current).add(lineageId)));
+  }, []);
+  // Preview only: ?feedTau=<days> stands in for the learned freshness period, to review the Earlier section on a young corpus.
+  const tauDaysOverride = useMemo(() => {
+    if (typeof window === "undefined" || !isLocalPreviewEnabled()) return null;
+    const requested = Number(new URLSearchParams(window.location.search).get("feedTau"));
+    return Number.isFinite(requested) && requested > 0 ? requested : null;
+  }, []);
+
+  // Preview only: ?feedState=loading holds the page in its loading state, to review the card skeletons.
+  const previewSkeleton = useMemo(
+    () => typeof window !== "undefined" && isLocalPreviewEnabled() && new URLSearchParams(window.location.search).get("feedState") === "loading",
+    [],
+  );
+
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
+  const livePartition = useMemo(
+    () => partitionReferenceFeed(canonicalReferences, decisions, { now: mountedAt, visitRated, tauDaysOverride }),
+    [canonicalReferences, decisions, mountedAt, tauDaysOverride, visitRated],
+  );
+  // The feed's order is taken ONCE per visit, when the feed has loaded (References and predictions), and then left alone. Selecting an
+  // item, rating one, a background refresh or a cache revalidation changes cards' content, never their places. Items that arrive later
+  // wait behind a "N new items: show" pill. (The Rated tab is a live list: it is the one place a new answer is meant to appear.)
+  const orderSnapshot = useRef<FeedOrderSnapshot | null>(null);
+  const [, bumpOrder] = useState(0);
+  const orderReady = !loading && !showingSavedCopy && !previewSkeleton && predictionState !== "loading" && canonicalReferences.length > 0;
+  if (!orderSnapshot.current && orderReady) orderSnapshot.current = takeFeedOrderSnapshot(livePartition);
+  const stable = orderSnapshot.current ? applyFeedOrderSnapshot(orderSnapshot.current, livePartition) : null;
+  const partition = stable?.partition ?? livePartition;
+  const showNewItems = () => { orderSnapshot.current = takeFeedOrderSnapshot(livePartition); bumpOrder((count) => count + 1); };
+  const [scrollTarget, setScrollTarget] = useState<{ id: string; nonce: number } | null>(null);
+  const feedOrderIds = useMemo(
+    () => (feedTab === "feed" ? [...partition.feed, ...partition.earlier] : feedTab === "rated" ? partition.rated : partition.earlier).map((item) => item.lineageId),
+    [feedTab, partition],
+  );
   const statusCounts = useMemo(() => countReferencesByStatus(canonicalReferences), [canonicalReferences]);
 
   const [statusFilter, setStatusFilter] = useState<ReferenceListFilter>(routeLineageId ? "all" : "pending");
@@ -506,14 +508,14 @@ export function NewsroomReferencesView({
   // list, but keeps its place in the queue until they move on, so "3 of 29" does not jump under them.
   const queueRef = useRef<string[]>([]);
   const queue = useMemo(() => {
-    const ids = filteredReferences.map(referenceLineageId);
+    const ids = view === "feed" ? [...feedOrderIds] : filteredReferences.map(referenceLineageId);
     const open = selectedReference ? referenceLineageId(selectedReference) : "";
     if (open && !ids.includes(open)) {
       const before = queueRef.current.indexOf(open);
       if (before >= 0) ids.splice(Math.min(before, ids.length), 0, open);
     }
     return ids;
-  }, [filteredReferences, selectedReference]);
+  }, [feedOrderIds, filteredReferences, selectedReference, view]);
   useEffect(() => { queueRef.current = queue; }, [queue]);
   const [caughtUp, setCaughtUp] = useState(false);
   const selectedIndex = selectedReference ? queue.indexOf(referenceLineageId(selectedReference)) : -1;
@@ -559,7 +561,7 @@ export function NewsroomReferencesView({
   };
 
   const goNext = () => {
-    if (nextLineageId) selectReference(nextLineageId);
+    if (nextLineageId) { selectReference(nextLineageId); setScrollTarget({ id: nextLineageId, nonce: Date.now() }); }
     else if (queue.length && !caughtUp) {
       // Past the last item: say so, rather than showing an empty page.
       setCaughtUp(true);
@@ -568,7 +570,7 @@ export function NewsroomReferencesView({
     } else if (!queue.length) setCaughtUp(true);
   };
   const goPrevious = () => {
-    if (previousLineageId) selectReference(previousLineageId);
+    if (previousLineageId) { selectReference(previousLineageId); setScrollTarget({ id: previousLineageId, nonce: Date.now() }); }
   };
   const gestures = useQueueGestures({ onNext: goNext, onPrevious: goPrevious });
 
@@ -584,9 +586,62 @@ export function NewsroomReferencesView({
 
   const runReview = (action: ReferenceCurationAction, options?: ReferenceReviewOptions) => {
     if (!selectedReference) return;
+    if (action === "accept" || action === "reject") markVisitRated(referenceLineageId(selectedReference));
     return onReview(selectedReference, action, options);
   };
 
+  const rateFromFeed = async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => {
+    const decision = decisions?.get(referenceLineageId(reference));
+    await onReview(reference, choice, {
+      reasonCode: choice === "reject" ? reasonCode : null,
+      ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+    });
+  };
+  // One rating store for the whole view: the grid cards and the detail pane read and write the same state, so a vote or a reason
+  // entered in either shows in both. Reason then vote, or vote then reason, both end up on one decision.
+  const sectionChoices = useRef<Map<string, string | null>>(new Map());
+  const referenceById = (lineageId: string) => selectedReferenceRecordByLineage(canonicalReferences, lineageId);
+  const ratings = useRatingStore({
+    save: async (lineageId, choice, detail) => {
+      const reference = referenceById(lineageId);
+      if (!reference) throw new Error("This reference is no longer in the list.");
+      markVisitRated(lineageId);
+      const decision = decisions?.get(lineageId);
+      const sectionId = choice === "accept" ? sectionChoices.current.get(lineageId) : null;
+      await onReview(reference, choice, {
+        note: detail.note || undefined,
+        reasonCode: choice === "reject" ? detail.reasonCode : null,
+        ...(sectionId ? { sectionId } : {}),
+        ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+      });
+    },
+    saved: (lineageId) => {
+      const status = normalizeReferenceCurationStatus(referenceById(lineageId)?.curationStatus);
+      return status === "accepted" ? "accept" : status === "rejected" ? "reject" : null;
+    },
+    seed: (lineageId) => {
+      const reference = referenceById(lineageId);
+      const status = normalizeReferenceCurationStatus(reference?.curationStatus);
+      return {
+        note: reference && status !== "pending" ? reference.curationStatusReason ?? "" : "",
+        reasonCode: reviewReasons?.get(lineageId) ?? (reference ? referenceReasonCode(reference) : null) ?? null,
+      };
+    },
+  });
+  const { statuses: captureStatuses, teaserLine } = useMemo(
+    () => captureStatusesByLineage(referenceAttachments, canonicalReferences.map(referenceLineageId)),
+    [canonicalReferences, referenceAttachments],
+  );
+  // Preview only: a fixture can carry captured text inline; say so, since production stores none for monitored References.
+  const previewCapturedText = useMemo(
+    () => isLocalPreviewEnabled() && referenceAttachments.some((attachment) => attachment.role === "extracted_text" && String(attachment.storagePath ?? "").startsWith("preview://")),
+    [referenceAttachments],
+  );
+  const showCaptures = !showingSavedCopy && !loading && !previewSkeleton;
+  const feedDisabledReason = disabled
+    ? "Editor access is required to change this reference."
+    : showingSavedCopy ? "Confirming your sign-in. You can answer in a moment." : null;
+
   const caughtUpPanel = (
     <div className="space-y-2 p-6 text-center" data-review-caught-up>
       <h3 className="text-lg font-semibold">All caught up</h3>
@@ -601,30 +656,81 @@ export function NewsroomReferencesView({
     ? "No references match this filter."
     : "No private references imported yet.";
 
+  // The grid must not move when a detail opens, so in the feed the detail pane's place is reserved all the time (from the md breakpoint
+  // up): opening it changes nothing, and the grid's column count follows the width it has beside that place, never the selection. Below
+  // md the detail is a sheet over the grid. There is no overlay mode: an overlay would hide the cards Previous / Next scrolls to.
+
   return (
     <div
-      className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[calc(100dvh-8.5rem)] md:flex-row"
+      className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[100dvh] md:flex-row"
+      data-detail-reserved={view === "feed" ? "true" : undefined}
       data-news-desk-section="references"
       data-detail-open={selectedReference || routeLineageId ? "true" : "false"}
     >
       <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 md:overflow-hidden">
-        <div className="shrink-0 space-y-1">
-          <h2 className="text-lg font-semibold tracking-tight">References</h2>
-          <p className="text-sm text-muted-foreground">
-            Review source intake before it becomes accepted evidence.
-          </p>
+        <div className="flex shrink-0 items-center justify-between gap-3" {...FEED_SURFACE_PROPS}>
+          <div className="min-w-0 space-y-0.5">
+            <h2 className="text-2xl font-bold tracking-tight">References</h2>
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {view === "feed" ? "A feed ranked by what you are most likely to accept." : "Review source intake before it becomes accepted evidence."}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              aria-controls="reference-add-panel"
+              aria-expanded={addOpen}
+              aria-label="Add a reference and prediction activity"
+              className={cn("inline-flex min-h-10 items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", addOpen ? "bg-[var(--feed-control)] text-foreground" : "bg-[var(--feed-card)] text-muted-foreground hover:text-foreground")}
+              data-reference-add-toggle
+              onClick={() => setAddOpen((open) => !open)}
+              title="Add a reference and prediction activity"
+              type="button"
+            >
+              <PlusIcon aria-hidden="true" className="size-4" />
+              <span className="hidden sm:inline">Add</span>
+            </button>
+            <div aria-label="Reference view" className="inline-flex rounded-full bg-[var(--feed-card)] p-1" role="group">
+              {([["feed", "Feed", LayoutGridIcon], ["list", "List", ListIcon]] as const).map(([key, label, Icon]) => (
+                <button
+                  aria-label={label}
+                  aria-pressed={view === key}
+                  className={cn(
+                    "inline-flex min-h-8 items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                    view === key ? "bg-[var(--feed-control)] text-foreground" : "text-muted-foreground hover:text-foreground",
+                  )}
+                  data-reference-view={key}
+                  key={key}
+                  onClick={() => { setView(key); setCaughtUp(false); }}
+                  title={label}
+                  type="button"
+                >
+                  <Icon aria-hidden="true" className="size-4" />
+                  <span className="hidden sm:inline">{label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
-        {predictionState === "loading" ? <p role="status">Loading predictions…</p> : null}
+        {synthetic?.changed ? (
+          <p className="rounded-2xl bg-[var(--feed-card)] p-3 text-sm" data-preview-synthetic role="status" {...FEED_SURFACE_PROPS}>
+            Preview only: {synthetic.changed} of these predictions are made up to show the Reject end of the feed. Real data has none yet.
+          </p>
+        ) : null}
+        {previewCapturedText ? (
+          <p className="rounded-2xl bg-[var(--feed-card)] p-3 text-sm" data-preview-captured-text role="status" {...FEED_SURFACE_PROPS}>
+            Preview only: the captured text here was fetched live for this preview. In the newsroom record none of these References has stored text yet.
+          </p>
+        ) : null}
+        {predictionState === "loading" && view === "list" ? <p role="status">Loading predictions…</p> : null}
         {predictionState === "error" ? (
-          <div role="alert" className="space-y-2 rounded-md border p-3">
+          <div role="alert" className="space-y-2 rounded-2xl bg-[var(--feed-card)] p-4" {...FEED_SURFACE_PROPS}>
             <p>Predictions unavailable. {predictionError}</p>
             <p className="text-sm">You can still review references. Existing suggestions may be out of date.</p>
             {onRetryPredictions ? <Button onClick={onRetryPredictions} size="sm" type="button" variant="outline">Retry predictions</Button> : null}
           </div>
         ) : null}
-        <details className="shrink-0 overflow-y-auto rounded-md border p-3 text-sm" style={{ maxHeight: "35dvh" }}>
-          <summary className="cursor-pointer font-semibold">Add a reference and prediction activity</summary>
-          <div className="mt-3 space-y-4">
+        <div className="shrink-0 overflow-y-auto rounded-[20px] bg-[var(--feed-card)] p-4 text-sm" data-feed-flat="" data-feed-surface="" hidden={!addOpen} id="reference-add-panel" style={{ ...FEED_SURFACE_STYLE, maxHeight: "45dvh", overflowY: "auto" }}>
+          <div className="space-y-4">
         <ReferenceLiveAgreement agreement={shadowAgreement} />
         <ReferenceAddEntry
           importOptions={disabled ? null : priming ?? sessionImport?.panel}
@@ -641,8 +747,51 @@ export function NewsroomReferencesView({
           </div>
         ) : null}
           </div>
-        </details>
+        </div>
 
+        {view === "feed" ? (
+          <div className="relative flex min-h-0 flex-1 flex-col" {...FEED_SURFACE_PROPS}>
+          {stable && stable.newCount > 0 && feedTab === "feed" ? (
+            // Floats over the top of the grid, outside the scrolling content: announcing new items never moves a card.
+            <div className="pointer-events-none absolute inset-x-0 top-2 z-20 flex justify-center">
+              <button
+                className="pointer-events-auto inline-flex min-h-9 items-center rounded-full bg-[var(--feed-control)] px-4 text-sm font-medium text-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                data-feed-new-items
+                onClick={showNewItems}
+                type="button"
+              >
+                {stable.newCount} new {stable.newCount === 1 ? "item" : "items"}: show
+              </button>
+            </div>
+          ) : null}
+          <ScrollArea className="min-h-0 flex-1 [overflow-anchor:none]" data-reference-feed-scroll>
+            <div className="pb-6 pr-1">
+              <ReferenceFeed
+                disabledReason={feedDisabledReason}
+                loading={previewSkeleton || (loading && !references.length)}
+                now={mountedAt}
+                onOpen={selectReference}
+                onRate={rateFromFeed}
+                onTabChange={(next) => { setFeedTab(next); setCaughtUp(false); }}
+                onVisitRated={markVisitRated}
+                partition={partition}
+                predictionLoading={predictionState === "loading"}
+                previews={previews}
+                captures={showCaptures ? captureStatuses : undefined}
+                groups={stable?.groups}
+                leadId={stable?.leadId}
+                scrollTarget={scrollTarget}
+                ratings={ratings}
+                selectedLineageId={selectedLineageId}
+                stale={showingSavedCopy || (loading && references.length > 0)}
+                tab={feedTab}
+                visitRated={visitRated}
+              />
+            </div>
+          </ScrollArea>
+          </div>
+        ) : (
+          <>
         <Tabs
           className="shrink-0"
           defaultValue="pending"
@@ -718,15 +867,21 @@ export function NewsroomReferencesView({
             )}
           </div>
         </ScrollArea>
+          </>
+        )}
       </div>
 
       <div
-        className="hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-card md:flex md:w-[min(100%,24rem)] lg:w-[min(100%,28rem)]"
+        className={cn(
+          "hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:flex md:w-[min(100%,24rem)] lg:w-[min(100%,28rem)]",
+        )}
         data-newsroom-list-detail-shell
         data-news-desk-section="references"
         data-detail-open={selectedReference ? "true" : "false"}
+        data-feed-flat=""
+        {...FEED_SURFACE_PROPS}
       >
-        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2">
+        <div className="flex shrink-0 items-center justify-between gap-2 px-4 pt-3 pb-1">
           <span className="text-sm font-medium text-foreground">Detail</span>
         </div>
         <div className="flex min-h-0 flex-1 flex-col" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}>
@@ -734,6 +889,10 @@ export function NewsroomReferencesView({
           {selectedReference ? (
             <ReferenceDetailPanel
               key={referenceLineageId(selectedReference)}
+              captureTeaserLine={teaserLine}
+              correctCapture={onCorrectCapture}
+              ratings={ratings}
+              sectionChoices={sectionChoices}
               predictionState={predictionState}
               reviewReason={reviewReasons?.get(referenceLineageId(selectedReference))}
               reviewSectionId={reviewSectionIds?.get(referenceLineageId(selectedReference))}
@@ -768,14 +927,18 @@ export function NewsroomReferencesView({
           }}
           open={(mobileDetailOpen && Boolean(selectedReference)) || caughtUp}
         >
-          <SheetContent className="gap-0 p-0" side="bottom">
+          <SheetContent className="gap-0 rounded-t-[24px] bg-[var(--feed-card)] p-0" data-feed-flat="" data-feed-surface="" side="bottom" {...themeAttributes}>
             <SheetHeader className="border-b border-border px-4 py-3">
               <SheetTitle className="text-left text-base">Reference</SheetTitle>
             </SheetHeader>
             {selectedReference ? (
-              <div data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}><ScrollArea className="max-h-[70dvh]">
+              <div className="min-w-0" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}><ScrollArea className="max-h-[70dvh]">
                 <ReferenceDetailPanel
                   key={referenceLineageId(selectedReference)}
+                  captureTeaserLine={teaserLine}
+              correctCapture={onCorrectCapture}
+                  ratings={ratings}
+                  sectionChoices={sectionChoices}
                   predictionState={predictionState}
               reviewReason={reviewReasons?.get(referenceLineageId(selectedReference))}
               reviewSectionId={reviewSectionIds?.get(referenceLineageId(selectedReference))}