@anthusai/papyrus 5.57.0 → 5.59.0

package/components/reference-feed.tsx

@@ -1,26 +1,21 @@
 "use client";
 
-import { InfoIcon, Loader2Icon, MessageSquareIcon } from "lucide-react";
-import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { CheckCheckIcon, CircleDashedIcon, ClockIcon, InfoIcon, Loader2Icon, MessageSquareIcon, SparklesIcon } from "lucide-react";
+import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
 import type { ReferenceRecord } from "../lib/category-repository";
 import { REFERENCE_REJECTION_REASON_CODES, isAutoAccepted, normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import {
   referenceDisplayTime,
-  groupFeedItems,
-  EARLIER_AFTER_TAUS,
-  MINIMUM_FRESHNESS_EXAMPLES,
-  type FeedGroupKey,
   type FeedItem,
-  type FeedFreshness,
-  type ReferenceFeedPartition,
-  type ReferenceFeedTabKey,
+  type FeedShow,
+  type FeedSort,
 } from "../lib/reference-feed-ranking";
 import { dekAddsInformation, isCardStyleImage, referenceDek, referenceSourceHost, formatFeedAge, type ReferencePreview } from "../lib/reference-preview";
 import { referenceDisplayTitle } from "../lib/newsroom-references";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import { cn } from "../lib/utils";
 import { predictionFromDecision, type ReviewChoice } from "./reference-review-card";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { CaptureBadge } from "./reference-capture-panel";
 import { AutoAcceptedBadge } from "./auto-accepted-badge";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
@@ -47,8 +42,14 @@ export const REASON_LABELS: Record<ReferenceRejectionReasonCode, string> = {
   other: "Other",
 };
 
-const TAB_LABELS: Record<ReferenceFeedTabKey, string> = { feed: "Feed", rated: "Rated", earlier: "Earlier" };
-const GROUP_HEADINGS: Record<FeedGroupKey, string> = { top: "Top predictions", more: "More for you", least: "Least likely" };
+const SORTS: Array<{ key: FeedSort; label: string; Icon: typeof SparklesIcon }> = [
+  { key: "best", label: "Best bets", Icon: SparklesIcon },
+  { key: "newest", label: "Newest", Icon: ClockIcon },
+];
+const SHOWS: Array<{ key: FeedShow; label: string; Icon: typeof SparklesIcon }> = [
+  { key: "unrated", label: "Unrated only", Icon: CircleDashedIcon },
+  { key: "all", label: "Include rated", Icon: CheckCheckIcon },
+];
 
 export const PILL = "inline-flex min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring";
 
@@ -63,16 +64,20 @@ export type ReferenceFeedProps = {
   onOpen: (lineageId: string) => void;
   onRate: (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => Promise<void> | void;
   onVisitRated: (lineageId: string) => void;
-  onTabChange: (tab: ReferenceFeedTabKey) => void;
-  /** The ranked tabs, from `partitionReferenceFeed`. */
-  partition: ReferenceFeedPartition;
+  onSortChange: (sort: FeedSort) => void;
+  onShowChange: (show: FeedShow) => void;
+  /** The visible list, already ordered by the chosen sort and filtered by the chosen Show. */
+  items: FeedItem[];
+  /** How many References already have an answer, for the empty text. */
+  ratedCount: number;
+  sort: FeedSort;
+  show: FeedShow;
   predictionLoading?: boolean;
   previews: ReadonlyMap<string, ReferencePreview>;
   selectedLineageId?: string;
   /** Capture status per Reference lineage, for the small badge on each card. Optional. */
   captures?: ReadonlyMap<string, CaptureStatus>;
-  /** The sections and lead, when the caller keeps the order stable (a snapshot). Without them the feed groups its own partition. */
-  groups?: Array<{ key: FeedGroupKey; items: FeedItem[] }>;
+  /** The large lead card, if any. */
   leadId?: string;
   /** Scrolls the grid to a card, deliberately (Previous / Next). A new nonce is a new request; selecting alone never scrolls. */
   scrollTarget?: { id: string; nonce: number } | null;
@@ -80,7 +85,6 @@ export type ReferenceFeedProps = {
   ratings?: RatingController;
   /** True when the cards are a saved copy that is being refreshed. */
   stale?: boolean;
-  tab: ReferenceFeedTabKey;
   visitRated: ReadonlySet<string>;
 };
 
@@ -202,6 +206,58 @@ export function FeedImage({ host, lead, name, src }: { host: string | null; lead
   );
 }
 
+/**
+ * The standard Reference header: its picture, source, headline, dek and age. The feed card wraps it in the button that opens the
+ * Reference, and the Messages page shows it under a conversation as the thing the conversation is about. No decision controls.
+ */
+export function ReferenceCardHeader({ capture, lead = false, messageCount = 0, now, preview, reference, titleId }: {
+  capture?: CaptureStatus | undefined;
+  lead?: boolean;
+  messageCount?: number;
+  now: number;
+  preview: ReferencePreview | undefined;
+  reference: ReferenceRecord;
+  titleId?: string;
+}) {
+  const host = referenceSourceHost(reference);
+  const site = preview?.siteName ?? host ?? "Unknown source";
+  const title = referenceDisplayTitle(reference);
+  const dek = referenceDek(reference, preview);
+  const showDek = dekAddsInformation(title, dek, preview?.imageUrl ?? null);
+  const time = referenceDisplayTime(reference);
+  const age = formatFeedAge(time, now);
+  return (
+    <>
+        <FeedImage host={host} lead={lead} name={site} src={preview?.imageUrl ?? null} />
+        <span className={cn("flex flex-1 flex-col gap-2.5", lead ? "p-5 @[36rem]:p-7" : "p-5")}>
+          <span className="flex items-center gap-2 text-xs font-medium text-muted-foreground" data-feed-source>
+            <SourceMark host={host} />
+            <span className="truncate">{site}</span>
+          </span>
+          <span className={cn("font-bold leading-[1.15] tracking-tight text-foreground", lead ? "line-clamp-3 text-2xl @[36rem]:text-3xl @[60rem]:text-4xl" : "line-clamp-3 text-xl")} data-feed-title id={titleId}>
+            {title}
+          </span>
+          {showDek ? <span className={cn("text-muted-foreground", lead ? "line-clamp-3 text-base" : "line-clamp-2 text-sm")} data-feed-dek>{dek}</span> : null}
+          <span className="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-1 text-xs text-muted-foreground">
+            <span>
+              {age ? <time dateTime={new Date(time ?? now).toISOString()} title={new Date(time ?? now).toLocaleString()}>{age}</time> : null}
+              {age && host ? <span aria-hidden="true"> · </span> : null}
+              {host}
+            </span>
+            {capture ? <CaptureBadge status={capture} /> : null}
+            {messageCount > 0 ? (
+              <span aria-label={messageCountLabel(messageCount)} className="inline-flex items-center gap-1 tabular-nums" data-feed-message-count={messageCount} role="img">
+                <MessageSquareIcon aria-hidden="true" className="size-3.5" />
+                {messageCount}
+              </span>
+            ) : null}
+            {isAutoAccepted(reference) ? <AutoAcceptedBadge actor={reference.curationStatusUpdatedBy} reason={reference.curationStatusReason} /> : null}
+          </span>
+        </span>
+    </>
+  );
+}
+
 export function FeedCard({
   capture,
   messageCount = 0,
@@ -283,72 +339,33 @@ export function FeedCard({
         onClick={onOpen}
         type="button"
       >
-        <FeedImage host={host} lead={lead} name={site} src={preview?.imageUrl ?? null} />
-        <span className={cn("flex flex-1 flex-col gap-2.5", lead ? "p-5 @[36rem]:p-7" : "p-5")}>
-          <span className="flex items-center gap-2 text-xs font-medium text-muted-foreground" data-feed-source>
-            <SourceMark host={host} />
-            <span className="truncate">{site}</span>
-          </span>
-          <span className={cn("font-bold leading-[1.15] tracking-tight text-foreground", lead ? "line-clamp-3 text-2xl @[36rem]:text-3xl @[60rem]:text-4xl" : "line-clamp-3 text-xl")} data-feed-title id={titleId}>
-            {title}
-          </span>
-          {showDek ? <span className={cn("text-muted-foreground", lead ? "line-clamp-3 text-base" : "line-clamp-2 text-sm")} data-feed-dek>{dek}</span> : null}
-          <span className="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-1 text-xs text-muted-foreground">
-            <span>
-              {age ? <time dateTime={new Date(time ?? now).toISOString()} title={new Date(time ?? now).toLocaleString()}>{age}</time> : null}
-              {age && host ? <span aria-hidden="true"> · </span> : null}
-              {host}
-            </span>
-            {capture ? <CaptureBadge status={capture} /> : null}
-            {messageCount > 0 ? (
-              <span aria-label={messageCountLabel(messageCount)} className="inline-flex items-center gap-1 tabular-nums" data-feed-message-count={messageCount} role="img">
-                <MessageSquareIcon aria-hidden="true" className="size-3.5" />
-                {messageCount}
-              </span>
-            ) : null}
-            {isAutoAccepted(reference) ? <AutoAcceptedBadge actor={reference.curationStatusUpdatedBy} reason={reference.curationStatusReason} /> : null}
-          </span>
-        </span>
+        <ReferenceCardHeader capture={capture} lead={lead} messageCount={messageCount} now={now} preview={preview} reference={reference} titleId={titleId} />
       </button>
 
       <div className="relative bg-[var(--feed-footer)] px-4 pb-4 pt-3" data-feed-actions>
-        <RatingGrid
+        <DecisionControl
           answer={chosen}
           decided={answer}
           disabled={Boolean(disabledReason)}
           disabledReason={disabledReason}
           feedback={feedback}
+          needsReason={rating.askReason}
           note={reasonLabel ? `Reason: ${reasonLabel}` : null}
           onChoose={(choice) => { if (!disabledReason) store.choose(item.lineageId, choice); }}
+          onReasonChange={(text) => store.setNote(item.lineageId, text)}
+          onReasonCommit={() => { if (!disabledReason) store.commitNote(item.lineageId); }}
           prediction={decision ? predictionFromDecision(decision) : predictionLoading ? { state: "loading" } : { state: "none" }}
+          reason={rating.note ?? ""}
+          reasonRequiredFor="reject"
           statusOverlay
         />
-        {rating.askReason ? (
-          // Covers the footer rather than adding to it, so asking for a reason never pushes the cards below it down.
-          <div className="absolute inset-0 z-10 flex flex-col justify-center space-y-2 bg-[var(--feed-footer)] p-3" data-review-reasons>
-            <p className="text-xs font-medium">Reason for rejecting. Choose one to save your Reject.</p>
-            <div className="flex flex-wrap gap-1.5">
-              {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-                <button className={cn(PILL, "min-h-8 bg-[var(--feed-control)] px-3 text-xs")} data-review-reason={code} key={code} onClick={() => store.setReason(item.lineageId, code)} type="button">
-                  {REASON_LABELS[code]}
-                </button>
-              ))}
-              <button className={cn(PILL, "min-h-8 px-3 text-xs text-muted-foreground")} onClick={() => store.cancelReason(item.lineageId)} type="button">Cancel</button>
-            </div>
-          </div>
-        ) : null}
       </div>
     </article>
   );
 }
 
-function plainDays(days: number): string {
-  if (days < 1) return `${Math.max(1, Math.round(days * 24))} hours`;
-  return `${days < 10 ? days.toFixed(1).replace(/\.0$/, "") : Math.round(days)} days`;
-}
-
-/** The plain-words recipe, with this site's learned numbers in it. */
-function RankingPopover({ freshness }: { freshness: FeedFreshness }) {
+/** The plain-words recipe. */
+function RankingPopover() {
   const [open, setOpen] = useState(false);
   const panelId = useId();
   const root = useRef<HTMLDivElement | null>(null);
@@ -387,15 +404,10 @@ function RankingPopover({ freshness }: { freshness: FeedFreshness }) {
         >
           <p className="text-base font-bold">A feed run by algorithms you control</p>
           <ol className="list-decimal space-y-2.5 pl-5">
-            <li><strong>Best bets first.</strong> The Cyclotron predicts Accept or Reject and how sure it is. The items it expects you to Accept most surely come first. The ones it expects you to Reject most surely come last. Items with no prediction sit in the middle.</li>
-            <li><strong>Confidence counts.</strong> An Accept at 90% ranks above an Accept at 60%.</li>
-            <li><strong>Age fades a prediction toward &ldquo;not sure&rdquo;.</strong> Older items drift toward the middle, never to the bottom. {freshness.tauDays !== null && freshness.medianAgeDays !== null
-              ? <>A prediction loses half its pull every {plainDays(freshness.medianAgeDays)}, the typical age of the {freshness.examples} items you accepted.</>
-              : <>Age does not change the order yet. The pace is learned from the items you accept, and so far there are {freshness.examples} of the {MINIMUM_FRESHNESS_EXAMPLES} needed.</>}</li>
-            <li><strong>Earlier.</strong> {freshness.tauDays !== null
-              ? <>Unrated items older than {plainDays(freshness.tauDays * EARLIER_AFTER_TAUS)} move to Earlier at the bottom. You can still rate them. Nothing is deleted.</>
-              : <>Once the pace is learned, unrated items past three times that pace move to Earlier at the bottom. Nothing is deleted.</>}</li>
-            <li><strong>Your answers stay put.</strong> A card you rate stays where it is for this visit. Next time it is under Rated.</li>
+            <li><strong>Best bets</strong> puts the items the Cyclotron is most sure you will Accept first. It goes by confidence alone: an Accept at 90% ranks above an Accept at 60%, and the ones it expects you to Reject most surely come last. Items with no prediction sit in the middle. Age does not change this order.</li>
+            <li><strong>Newest</strong> puts the items that arrived most recently first.</li>
+            <li><strong>Unrated only</strong> shows items nobody has answered yet. <strong>Include rated</strong> adds the ones you have already accepted or rejected to the same list, showing your answer, in the same sort. Nothing is hidden because it is old.</li>
+            <li><strong>Your answers stay put.</strong> A card you rate stays where it is for this visit, and new items wait behind a button until you ask for them.</li>
           </ol>
         </div>
       ) : null}
@@ -403,10 +415,6 @@ function RankingPopover({ freshness }: { freshness: FeedFreshness }) {
   );
 }
 
-export function SectionHeading({ children, id }: { children: ReactNode; id: string }) {
-  return <h3 className="mb-5 mt-10 text-3xl font-bold tracking-tight text-primary first:mt-2 sm:mt-12 sm:text-4xl" id={id}>{children}</h3>;
-}
-
 export function ReferenceFeed({
   disabledReason = null,
   loading = false,
@@ -414,22 +422,23 @@ export function ReferenceFeed({
   now,
   onOpen,
   onRate,
-  onTabChange,
+  onShowChange,
+  onSortChange,
   onVisitRated,
-  partition,
+  items,
+  ratedCount,
   predictionLoading = false,
   previews,
   selectedLineageId = "",
   captures,
-  groups: stableGroups,
-  leadId: stableLeadId,
+  leadId,
   ratings,
   scrollTarget = null,
+  show,
+  sort,
   stale = false,
-  tab,
   visitRated,
 }: ReferenceFeedProps) {
-  const counts: Record<ReferenceFeedTabKey, number> = { feed: partition.feed.length, rated: partition.rated.length, earlier: partition.earlier.length };
 
   const renderCard = (item: FeedItem, lead: boolean) => (
     <FeedCard
@@ -461,28 +470,39 @@ export function ReferenceFeed({
     document.querySelector(`[data-feed-card="${CSS.escape(scrollTarget.id)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [scrollTarget]);
 
-  const groups = stableGroups ?? groupFeedItems(partition.feed);
-  const headings = groups.length > 1;
-  const leadId = stableGroups ? stableLeadId : groups[0]?.key !== "least" ? groups[0]?.items[0]?.lineageId : undefined;
 
   return (
-    <div className="@container space-y-5" data-reference-feed data-feed-tab={tab} {...FEED_SURFACE_PROPS}>
-      <div className="flex items-center justify-between gap-2">
-        <div aria-label="Feed sections" className="inline-flex rounded-full bg-[var(--feed-card)] p-1" role="tablist">
-          {(Object.keys(TAB_LABELS) as ReferenceFeedTabKey[]).map((key) => (
-            <button
-              aria-selected={tab === key}
-              className={cn(PILL, "min-h-9 gap-1.5 px-3.5", tab === key ? "bg-[var(--feed-control)] text-foreground" : "text-muted-foreground hover:text-foreground")}
-              data-feed-tab-button={key}
-              key={key}
-              onClick={() => onTabChange(key)}
-              role="tab"
-              type="button"
-            >
-              {TAB_LABELS[key]}
-              <span className="text-xs tabular-nums opacity-70" data-feed-tab-count>{counts[key]}</span>
-            </button>
-          ))}
+    <div className="@container space-y-5" data-reference-feed data-feed-sort={sort} data-feed-show={show} {...FEED_SURFACE_PROPS}>
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <div aria-label="Sort" className="inline-flex rounded-full bg-[var(--feed-card)] p-1" data-feed-control="sort" role="group">
+            {SORTS.map(({ key, label, Icon }) => (
+              <button
+                aria-pressed={sort === key}
+                className={cn(PILL, "px-3.5", sort === key ? "bg-[var(--feed-control)] text-foreground" : "text-muted-foreground hover:text-foreground")}
+                data-feed-sort-button={key}
+                key={key}
+                onClick={() => onSortChange(key)}
+                type="button"
+              >
+                <Icon aria-hidden="true" className="size-4" />{label}
+              </button>
+            ))}
+          </div>
+          <div aria-label="Show" className="inline-flex rounded-full bg-[var(--feed-card)] p-1" data-feed-control="show" role="group">
+            {SHOWS.map(({ key, label, Icon }) => (
+              <button
+                aria-pressed={show === key}
+                className={cn(PILL, "px-3.5", show === key ? "bg-[var(--feed-control)] text-foreground" : "text-muted-foreground hover:text-foreground")}
+                data-feed-show-button={key}
+                key={key}
+                onClick={() => onShowChange(key)}
+                type="button"
+              >
+                <Icon aria-hidden="true" className="size-4" />{label}
+              </button>
+            ))}
+          </div>
         </div>
         <div className="flex items-center gap-2">
           {stale ? (
@@ -490,33 +510,15 @@ export function ReferenceFeed({
               <Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Showing your last view while it updates
             </span>
           ) : null}
-          <RankingPopover freshness={partition.freshness} />
+          <RankingPopover />
         </div>
       </div>
       {stale ? <p className="text-xs text-muted-foreground sm:hidden" role="status"><Loader2Icon aria-hidden="true" className="mr-1 inline size-3.5 animate-spin" />Showing your last view while it updates</p> : null}
 
       {loading ? <ReferenceFeedSkeleton /> : (
-        <div role="tabpanel">
-          {tab === "feed" ? (
-            <div>
-              {groups.length ? groups.map((group) => (
-                <section aria-labelledby={headings ? `feed-group-${group.key}` : undefined} data-feed-group={group.key} key={group.key}>
-                  {headings ? <SectionHeading id={`feed-group-${group.key}`}>{GROUP_HEADINGS[group.key]}</SectionHeading> : null}
-                  <div className={FEED_GRID} data-feed-grid>{group.items.map((item) => renderCard(item, item.lineageId === leadId))}</div>
-                </section>
-              )) : empty(counts.rated || counts.earlier ? "You are all caught up. Check Earlier and Rated." : "No references yet.")}
-              {partition.earlier.length ? (
-                <section aria-labelledby="feed-earlier-heading" data-feed-earlier>
-                  <SectionHeading id="feed-earlier-heading">Earlier</SectionHeading>
-                  <p className="-mt-3 mb-5 text-sm text-muted-foreground">Unrated and past their freshness. Still yours to rate.</p>
-                  <div className={FEED_GRID} data-feed-grid>{partition.earlier.map((item) => renderCard(item, false))}</div>
-                </section>
-              ) : null}
-            </div>
-          ) : null}
-          {tab === "rated" ? (partition.rated.length ? <div className={FEED_GRID} data-feed-grid>{partition.rated.map((item) => renderCard(item, false))}</div> : empty("Nothing rated yet. Your Accepts and Rejects collect here, newest first.")) : null}
-          {tab === "earlier" ? (partition.earlier.length ? <div className={FEED_GRID} data-feed-grid>{partition.earlier.map((item) => renderCard(item, false))}</div> : empty("Nothing has aged out. Unrated items that fall past their freshness collect here.")) : null}
-        </div>
+        items.length ? (
+          <div className={FEED_GRID} data-feed-grid>{items.map((item) => renderCard(item, item.lineageId === leadId))}</div>
+        ) : empty(ratedCount && show === "unrated" ? "You are all caught up. Choose Include rated to see your answers." : "No references yet.")
       )}
     </div>
   );

package/components/reference-review-card.tsx

@@ -2,20 +2,16 @@
 
 import {
   ArchiveIcon,
-  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  CircleCheckIcon,
-  CircleXIcon,
   ExternalLinkIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
 import { Button } from "./ui/button";
-import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { cn } from "../lib/utils";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
-import { REFERENCE_REJECTION_REASON_CODES, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 
 export type ReviewChoice = "accept" | "reject";
 
@@ -31,96 +27,6 @@ export type ReviewCardDecision = {
   reasonCode: ReferenceRejectionReasonCode | null;
 };
 
-const REASON_LABELS: Record<ReferenceRejectionReasonCode, string> = {
-  out_of_scope: "Out of scope",
-  policy_exclusion: "Policy exclusion",
-  duplicate: "Duplicate",
-  low_quality: "Low quality",
-  unavailable: "Unavailable",
-  provenance: "Provenance",
-  other: "Other",
-};
-
-const CHOICE_LABEL: Record<ReviewChoice, string> = { accept: "Accept", reject: "Reject" };
-
-function percent(confidence: number | null): string | null {
-  return confidence === null ? null : `${Math.round(confidence * 100)}%`;
-}
-
-/**
- * The Cyclotron's read-only row: its Accept or Reject highlighted with its confidence, and a check or cross once a person has answered.
- * Shared by the review card and by every list that shows a suggestion before a decision.
- */
-export function CyclotronRow({ decided = null, prediction }: { decided?: ReviewChoice | null; prediction: CardPrediction }) {
-  const matched = decided && prediction.state === "ready" ? prediction.choice === decided : null;
-  return (
-    <div className="space-y-2" data-review-row="cyclotron">
-      <div className="flex items-center gap-3">
-        <span className="w-20 shrink-0 text-sm font-semibold">Cyclotron</span>
-        {prediction.state === "ready" ? (
-          <div className="flex flex-1 gap-2">
-            {(["accept", "reject"] as const).map((choice) => {
-              const predicted = prediction.state === "ready" && prediction.choice === choice;
-              const verdict = predicted && matched !== null ? (matched ? "match" : "miss") : null;
-              return (
-                <span
-                  className={cn(
-                    "inline-flex min-h-10 flex-1 items-center justify-center gap-1.5 rounded-md border px-3 text-sm",
-                    predicted ? "border-foreground bg-muted font-semibold" : "border-dashed text-muted-foreground",
-                    verdict === "match" && "border-green-700 bg-green-100 text-green-950",
-                    verdict === "miss" && "border-red-700 bg-red-100 text-red-950",
-                  )}
-                  data-cyclotron-choice={choice}
-                  data-predicted={predicted || undefined}
-                  data-verdict={verdict ?? undefined}
-                  key={choice}
-                >
-                  {verdict === "match" ? <CircleCheckIcon aria-hidden="true" className="size-4" /> : null}
-                  {verdict === "miss" ? <CircleXIcon aria-hidden="true" className="size-4" /> : null}
-                  {CHOICE_LABEL[choice]}
-                  {predicted && percent(prediction.confidence) ? <small className="text-xs font-normal">{percent(prediction.confidence)}</small> : null}
-                  {verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
-                </span>
-              );
-            })}
-          </div>
-        ) : (
-          <p className="text-sm text-muted-foreground" data-cyclotron-state={prediction.state}>
-            {prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** The two answers, large enough to tap: Accept and Reject, the chosen one filled and checked (never colour alone). */
-export function ChoiceButtons({ chosen, disabled = false, onChoose }: { chosen: ReviewChoice | null; disabled?: boolean; onChoose: (choice: ReviewChoice) => void }) {
-  return (
-    <div className="flex flex-1 gap-2">
-      {(["accept", "reject"] as const).map((choice) => {
-        const on = chosen === choice;
-        return (
-          <Button
-            aria-disabled={disabled ? true : undefined}
-            aria-pressed={on}
-            className="min-h-14 flex-1 text-base"
-            data-review-choice={choice}
-            key={choice}
-            onClick={() => onChoose(choice)}
-            type="button"
-            variant={on ? (choice === "accept" ? "default" : "destructive") : "outline"}
-          >
-            {on ? <CheckIcon aria-hidden="true" className="size-5" /> : null}
-            {CHOICE_LABEL[choice]}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-/** A reference's relevance decision in the card's own vocabulary. */
 export function predictionFromDecision(decision: { label: string; positiveLabel: string | null; confidence: number | null }): CardPrediction {
   return { state: "ready", choice: decision.label === (decision.positiveLabel ?? "include") ? "accept" : "reject", confidence: decision.confidence };
 }
@@ -181,10 +87,8 @@ export function ReviewCard({
   const store = ratings ?? local;
   const item = store.get(itemId);
   const note = item.note ?? initialNote;
-  const reason = item.reasonCode !== undefined ? item.reasonCode : initialReason;
   const chosen = item.pending ?? decided;
   const choose = (choice: ReviewChoice) => { if (!disabledReason) store.choose(itemId, choice); };
-  const chooseReason = (code: ReferenceRejectionReasonCode) => { if (!disabledReason) store.setReason(itemId, code); };
   const commitNote = () => { if (!disabledReason) store.commitNote(itemId); };
 
   // Desktop shortcuts: A accepts, R rejects. Never while typing.
@@ -222,53 +126,23 @@ export function ReviewCard({
         ) : null}
       </header>
 
-      <RatingGrid
+      <DecisionControl
         answer={chosen}
         decided={decided}
         disabled={Boolean(disabledReason)}
         disabledReason={disabledReason}
         feedback={item.feedback}
+        needsReason={item.askReason}
         onChoose={choose}
+        onReasonChange={(text) => store.setNote(itemId, text)}
+        onReasonCommit={commitNote}
         prediction={prediction}
+        reason={note}
+        reasonRequiredFor="reject"
         size="large"
         surface="card"
       />
 
-      <label className="block text-sm font-medium">
-        Why? (optional)
-        <AutoGrowTextarea
-          aria-label="Why? (optional)"
-          className="mt-1 block min-h-20 w-full rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-base font-normal outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
-          onBlur={commitNote}
-          onChange={(event) => store.setNote(itemId, event.target.value)}
-          placeholder="Say what made this an easy yes or a clear no. Your note teaches the Cyclotron."
-          value={note}
-        />
-      </label>
-
-      {chosen === "reject" ? (
-        <div className="space-y-2" data-review-reasons>
-          <p className="text-sm font-medium">Reason for rejecting</p>
-          <div className="flex flex-wrap gap-2">
-            {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-              <button
-                aria-disabled={disabledReason ? true : undefined}
-                aria-pressed={reason === code}
-                className={cn("inline-flex min-h-10 items-center gap-1.5 rounded-[var(--feed-radius-pill,8px)] px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", reason === code ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)]")}
-                data-review-reason={code}
-                key={code}
-                onClick={() => chooseReason(code)}
-                type="button"
-              >
-                {reason === code ? <CheckIcon aria-hidden="true" className="size-4" /> : null}
-                {REASON_LABELS[code]}
-              </button>
-            ))}
-          </div>
-          {!reason && !note.trim() ? <p className="text-sm text-muted-foreground">Choose a reason, or say why above, to save your Reject.</p> : null}
-        </div>
-      ) : null}
-
       {children}
 
       {onArchive ? (
@@ -303,7 +177,7 @@ export function ReviewQueueBar({
   return (
     <nav
       aria-label="Review queue"
-      className={cn("sticky bottom-0 z-10 flex shrink-0 items-center gap-2 bg-[var(--feed-card)] px-3 py-2", anchored && "md:fixed md:bottom-0 md:right-0 md:w-[calc(24rem+1rem)] md:pr-7 lg:w-[calc(28rem+1rem)]")}
+      className={cn("sticky bottom-0 z-10 flex shrink-0 items-center gap-2 bg-[var(--feed-card)] px-3 py-2", anchored && "lg:fixed lg:bottom-0 lg:right-0 lg:w-[calc(24rem+1rem)] lg:pr-7 xl:w-[calc(28rem+1rem)]")}
       data-review-queue-anchored={anchored || undefined}
       data-review-queue-bar
     >

package/components/references-page-loading.tsx

@@ -4,9 +4,10 @@ import { useEffect, useMemo, useState } from "react";
 import { LoaderIcon } from "lucide-react";
 import { SITE_BRAND } from "../lib/site-brand";
 import { loadFeedSnapshot, type FeedSnapshot } from "../lib/reference-feed-cache";
-import { partitionReferenceFeed, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
+import { buildFeedItems, feedLeadId, visibleFeedItems } from "../lib/reference-feed-ranking";
 import { selectCanonicalReferenceRecords } from "../lib/newsroom-references";
 import { ReferenceFeed, ReferenceFeedSkeleton } from "./reference-feed";
+import { useFeedPreferences } from "./use-feed-preferences";
 
 /**
  * What the References page shows while the session and the first reads are still resolving: the real page header at once,
@@ -16,7 +17,7 @@ import { ReferenceFeed, ReferenceFeedSkeleton } from "./reference-feed";
 export function ReferencesPageLoading() {
   const [snapshot, setSnapshot] = useState<FeedSnapshot | null>(null);
   const [checked, setChecked] = useState(false);
-  const [tab, setTab] = useState<ReferenceFeedTabKey>("feed");
+  const { sort, setSort, show, setShow } = useFeedPreferences();
   const [note, setNote] = useState<string | null>(null);
   const [now] = useState(() => Date.now());
   useEffect(() => {
@@ -26,8 +27,9 @@ export function ReferencesPageLoading() {
   const references = useMemo(() => selectCanonicalReferenceRecords(snapshot?.references ?? []), [snapshot]);
   const decisions = useMemo(() => new Map(snapshot?.decisions ?? []), [snapshot]);
   const previews = useMemo(() => new Map(snapshot?.previews ?? []), [snapshot]);
-  const partition = useMemo(() => partitionReferenceFeed(references, decisions, { now }), [references, decisions, now]);
   const noVisitRated = useMemo(() => new Set<string>(), []);
+  const allItems = useMemo(() => buildFeedItems(references, decisions), [references, decisions]);
+  const items = useMemo(() => visibleFeedItems(allItems, sort, show, noVisitRated), [allItems, sort, show, noVisitRated]);
 
   return (
     <div className="space-y-4" data-references-page-loading>
@@ -42,12 +44,16 @@ export function ReferencesPageLoading() {
           now={now}
           onOpen={() => setNote("Opening a reference is available in a moment, once your sign-in is confirmed.")}
           onRate={() => undefined}
-          onTabChange={setTab}
+          onShowChange={setShow}
+          onSortChange={setSort}
           onVisitRated={() => undefined}
-          partition={partition}
+          items={items}
+          leadId={feedLeadId(items)}
+          ratedCount={allItems.filter((item) => item.rated).length}
           previews={previews}
+          show={show}
+          sort={sort}
           stale
-          tab={tab}
           visitRated={noVisitRated}
         />
       ) : (