@anthusai/papyrus 5.45.0 → 5.47.0

package/components/reference-capture-client.ts

@@ -0,0 +1,110 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import {
+  captureStatus, countWords, curationCardOf, grobidRows, primaryTextAttachment, structuredRows,
+  type CaptureAssessment as Assessment, type CaptureStatus, type CurationCard,
+} from "../lib/reference-capture";
+import { loadModelPayloadsForOwner, loadStoragePathText } from "./news-desk-taxonomy-client";
+
+export type CaptureAssessment = Assessment;
+
+export type CaptureView = {
+  status: CaptureStatus;
+  /** The stored text, once read. Null while loading, or when there is none. */
+  text: string | null;
+  loading: boolean;
+  error: string | null;
+  summary: string | null;
+  /** True when an editor replaced the text and the summary awaits the next curation run. */
+  summaryStale: boolean;
+  rows: Array<{ label: string; value: string }>;
+  /** Saves an editor's pasted or corrected text and their verdict on the capture (the `correctReferenceCapture` action). */
+  correct?: (input: { text?: string; assessment: CaptureAssessment; note?: string }) => Promise<void>;
+};
+
+function previewText(attachment: ReferenceAttachmentRecord): string | null {
+  // Local preview only: a fixture can carry the captured text inline instead of in storage.
+  if (!isLocalPreviewEnabled()) return null;
+  const raw = attachment.metadata;
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+    const text = (parsed as { previewText?: unknown } | null)?.previewText;
+    return typeof text === "string" ? text : null;
+  } catch { return null; }
+}
+
+type Payloads = { key: string; text: string | null; grobid: unknown; summary: string | null; loaded: boolean };
+
+/**
+ * Reads what the newsroom stored for one Reference. The curation card comes first (status, word count, signals, summary, GROBID fields,
+ * and the `curation-text` body its `current` points at); the older `extracted_text` attachment is the fallback.
+ */
+export type CorrectCaptureAction = (input: { referenceId: string; text?: string; assessment: CaptureAssessment; note?: string }) => Promise<unknown>;
+
+export function useReferenceCapture(reference: ReferenceRecord, attachments: readonly ReferenceAttachmentRecord[], teaserLine: number, correctAction?: CorrectCaptureAction): CaptureView {
+  const card: CurationCard | null = useMemo(() => curationCardOf(attachments), [attachments]);
+  const primary = useMemo(() => primaryTextAttachment(attachments), [attachments]);
+  const textSortKey = card?.current?.textSortKey ?? card?.capture.textSortKey ?? null;
+  const grobidSortKey = card?.current?.grobidSortKey ?? card?.grobid?.fieldsSortKey ?? null;
+  const [payloads, setPayloads] = useState<Payloads>({ key: "", text: null, grobid: null, summary: null, loaded: false });
+  const [fallback, setFallback] = useState<{ key: string; text: string | null; error: string | null; loading: boolean }>({ key: "", text: null, error: null, loading: false });
+  const [corrected, setCorrected] = useState<{ key: string; text: string; assessment: CaptureAssessment } | null>(null);
+  const referenceKey = `${reference.id}:${textSortKey ?? ""}:${grobidSortKey ?? ""}`;
+
+  // The card's bodies and the Reference's metadata.json, in one read of the Reference's ModelAttachments.
+  useEffect(() => {
+    if (isLocalPreviewEnabled()) { setPayloads({ key: referenceKey, text: null, grobid: null, summary: null, loaded: true }); return; }
+    let active = true;
+    void loadModelPayloadsForOwner("reference", reference.id, ["metadata"])
+      .then((rows) => {
+        if (!active) return;
+        const bySortKey = (key: string | null) => (key ? rows.find((row) => row.attachment.sortKey === key) : undefined);
+        const metadata = rows.find((row) => row.attachment.sortKey === "metadata")?.json as { summary?: unknown } | null | undefined;
+        setPayloads({
+          key: referenceKey,
+          text: bySortKey(textSortKey)?.text ?? null,
+          grobid: bySortKey(grobidSortKey)?.json ?? null,
+          summary: typeof metadata?.summary === "string" && metadata.summary.trim() ? metadata.summary.trim() : null,
+          loaded: true,
+        });
+      })
+      .catch(() => { if (active) setPayloads({ key: referenceKey, text: null, grobid: null, summary: null, loaded: true }); });
+    return () => { active = false; };
+  }, [reference.id, referenceKey, textSortKey, grobidSortKey]);
+
+  // Fallback: the older extracted_text attachment, when the card has no text of its own.
+  const fallbackKey = primary ? `${primary.id}:${primary.storagePath ?? ""}` : "";
+  const useFallback = Boolean(primary) && !textSortKey;
+  useEffect(() => {
+    if (!useFallback || !primary) { setFallback({ key: "", text: null, error: null, loading: false }); return; }
+    const inline = previewText(primary);
+    if (inline !== null) { setFallback({ key: fallbackKey, text: inline, error: null, loading: false }); return; }
+    let active = true;
+    setFallback({ key: fallbackKey, text: null, error: null, loading: true });
+    void loadStoragePathText(primary.storagePath)
+      .then((result) => { if (active) setFallback({ key: fallbackKey, text: result.text, error: result.error, loading: false }); })
+      .catch((error) => { if (active) setFallback({ key: fallbackKey, text: null, error: error instanceof Error ? error.message : "Could not read the stored text.", loading: false }); });
+    return () => { active = false; };
+  }, [primary, fallbackKey, useFallback]);
+
+  const current = payloads.key === referenceKey ? payloads : null;
+  const mine = corrected && corrected.key === reference.id ? corrected : null;
+  const text = mine?.text ?? (textSortKey ? current?.text ?? null : fallback.key === fallbackKey ? fallback.text : null);
+  const loading = mine ? false : textSortKey ? !(current?.loaded) : useFallback && fallback.key === fallbackKey ? fallback.loading : useFallback;
+  const error = textSortKey || mine ? null : fallback.key === fallbackKey ? fallback.error : null;
+  const loadedWords = text !== null ? countWords(text) : null;
+  const base = captureStatus(attachments, teaserLine, loadedWords);
+  const status: CaptureStatus = mine ? { ...base, state: base.state === "none" || base.state === "running" ? (loadedWords !== null && loadedWords < teaserLine ? "thin" : "full") : base.state, words: loadedWords, estimated: false, assessment: mine.assessment, summaryStale: true, ...(loadedWords !== null && loadedWords < teaserLine ? { thinBy: "length" as const } : {}) } : base;
+  const summary = card?.summary?.status === "completed" && card.summary.text ? card.summary.text : current?.summary ?? null;
+  const rows = card ? grobidRows(current?.grobid, card) : structuredRows(attachments);
+
+  const correct = useCallback(async (input: { text?: string; assessment: CaptureAssessment; note?: string }) => {
+    if (correctAction) await correctAction({ referenceId: reference.id, ...(input.text !== undefined ? { text: input.text } : {}), assessment: input.assessment, ...(input.note ? { note: input.note } : {}) });
+    setCorrected({ key: reference.id, text: input.text ?? text ?? "", assessment: input.assessment });
+  }, [reference.id, text, correctAction]);
+
+  return { status, text, loading, error, summary, summaryStale: Boolean(mine) || status.summaryStale === true, rows, correct: correctAction || isLocalPreviewEnabled() ? correct : undefined };
+}

package/components/reference-capture-panel.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { FileCheckIcon, FileClockIcon, FileWarningIcon, FileXIcon, Loader2Icon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { captureLine, type CaptureAssessment, type CaptureState, type CaptureStatus } from "../lib/reference-capture";
+import { cn } from "../lib/utils";
+import type { CaptureView } from "./reference-capture-client";
+
+const ICON = { full: FileCheckIcon, thin: FileWarningIcon, none: FileXIcon, running: FileClockIcon } as const;
+/** Colour never stands alone: each state has its own icon and words. */
+const TONE: Record<CaptureState, string> = {
+  full: "bg-emerald-600/15 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-100",
+  thin: "bg-amber-500/20 text-amber-900 dark:bg-amber-300/15 dark:text-amber-100",
+  none: "bg-red-600/15 text-red-900 dark:bg-red-400/15 dark:text-red-100",
+  running: "bg-[var(--feed-control)] text-foreground",
+};
+
+/** A small badge for a grid card, so a thin or missing capture shows before the item is opened. It follows the curation status when there is one. */
+export function CaptureBadge({ status }: { status: CaptureStatus }) {
+  const Icon = ICON[status.state];
+  const text = status.state === "none" ? "No text" : status.state === "running" ? "Capturing" : status.state === "thin" ? (status.words === null || status.thinBy === "signals" ? "Maybe cut off" : `${status.words.toLocaleString("en-US")} words`) : "Full text";
+  return (
+    <span
+      className={cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.7rem] font-medium", TONE[status.state])}
+      data-capture-badge={status.state}
+      data-capture-curation={status.curation ?? undefined}
+      data-capture-source={status.source}
+      title={captureLine(status).label}
+    >
+      <Icon aria-hidden="true" className="size-3.5" />
+      {text}
+    </span>
+  );
+}
+
+const PREVIEW_CHARACTERS = 1600;
+const ASSESSMENTS: Array<{ key: CaptureAssessment; label: string; hint: string }> = [
+  { key: "complete", label: "Complete", hint: "This is the whole item." },
+  { key: "incomplete", label: "Incomplete", hint: "Something is missing or cut off." },
+  { key: "incorrect", label: "Incorrect", hint: "This is not the right text." },
+];
+
+/** "Paste or correct the text": an editor's own text and verdict on the capture, saved with `correctReferenceCapture`. */
+function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: () => void }) {
+  const [text, setText] = useState(capture.text ?? "");
+  const [assessment, setAssessment] = useState<CaptureAssessment | null>(null);
+  const [note, setNote] = useState("");
+  const [phase, setPhase] = useState<"idle" | "saving" | "error">("idle");
+  const [message, setMessage] = useState<string | null>(null);
+  useEffect(() => { setText((current) => current || capture.text || ""); }, [capture.text]);
+  const changedText = text.trim() !== (capture.text ?? "").trim() && text.trim().length > 0;
+  const reason = !assessment ? "Say whether the capture was complete, incomplete or incorrect to save." : null;
+  async function save() {
+    if (!assessment || !capture.correct) return;
+    setPhase("saving");
+    setMessage(null);
+    try {
+      await capture.correct({ ...(changedText ? { text: text.trim() } : {}), assessment, ...(note.trim() ? { note: note.trim() } : {}) });
+      onDone();
+    } catch (failure) {
+      setPhase("error");
+      setMessage(failure instanceof Error ? failure.message : "The correction could not be saved.");
+    }
+  }
+  return (
+    <div className="space-y-3 rounded-2xl bg-[var(--feed-control)] p-3" data-capture-correction>
+      <label className="block text-sm font-medium">
+        The text
+        <textarea
+          aria-label="Captured text"
+          className="mt-1 block min-h-40 w-full rounded-2xl bg-[var(--feed-card)] p-3 text-sm font-normal"
+          data-capture-correction-text
+          onChange={(event) => setText(event.target.value)}
+          placeholder="Paste the whole article here, or fix what was captured."
+          value={text}
+        />
+      </label>
+      <div aria-label="Was the capture complete?" className="flex flex-wrap gap-2" role="group">
+        {ASSESSMENTS.map((option) => (
+          <button
+            aria-pressed={assessment === option.key}
+            className={cn("inline-flex min-h-9 items-center rounded-full px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", assessment === option.key ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--feed-card)]")}
+            data-capture-assessment={option.key}
+            key={option.key}
+            onClick={() => setAssessment(option.key)}
+            title={option.hint}
+            type="button"
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+      <label className="block text-sm font-medium">
+        Note (optional)
+        <textarea aria-label="Note about the capture (optional)" className="mt-1 block min-h-16 w-full rounded-2xl bg-[var(--feed-card)] p-3 text-sm font-normal" onChange={(event) => setNote(event.target.value)} value={note} />
+      </label>
+      {reason ? <p className="text-xs text-muted-foreground" data-capture-correction-reason>{reason}</p> : null}
+      {phase === "error" ? <p className="text-xs text-destructive" role="alert">{message}</p> : null}
+      <div className="flex gap-2">
+        <button
+          aria-disabled={reason ? true : undefined}
+          className={cn("inline-flex min-h-9 items-center gap-1.5 rounded-full bg-[var(--primary)] px-4 text-sm font-semibold text-[var(--primary-foreground)] outline-none focus-visible:ring-2 focus-visible:ring-ring", reason && "opacity-60")}
+          data-capture-correction-save
+          onClick={() => { if (!reason && phase !== "saving") void save(); }}
+          type="button"
+        >
+          {phase === "saving" ? <><Loader2Icon aria-hidden="true" className="size-4 animate-spin" />Saving…</> : changedText ? "Save the text and my verdict" : "Save my verdict"}
+        </button>
+        <button className="inline-flex min-h-9 items-center rounded-full bg-[var(--feed-card)] px-4 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={onDone} type="button">Cancel</button>
+      </div>
+    </div>
+  );
+}
+
+/** Our captured record of a Reference: what we stored of its content, said plainly, above the live source preview. */
+export function ReferenceCapturePanel({ capture }: { capture: CaptureView }) {
+  const [expanded, setExpanded] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [savedNote, setSavedNote] = useState(false);
+  const line = captureLine(capture.status);
+  const Icon = ICON[line.state];
+  const text = capture.text ?? "";
+  const long = text.length > PREVIEW_CHARACTERS;
+  return (
+    <section aria-label="Our captured record" className="space-y-3" data-capture-panel={line.state}>
+      <h3 className="text-sm font-semibold text-foreground">Our captured record</h3>
+      <div className={cn("flex items-start gap-3 rounded-2xl p-3", TONE[line.state])} data-capture-status={line.state} data-capture-source={capture.status.source}>
+        <Icon aria-hidden="true" className="mt-0.5 size-5 shrink-0" />
+        <div className="min-w-0">
+          <p className="text-sm font-semibold" data-capture-label>{line.label}</p>
+          {line.state === "full" ? null : <p className="text-xs opacity-90" data-capture-detail>{line.detail}</p>}
+          {capture.status.words !== null ? <p className="text-xs font-medium" data-capture-words>{capture.status.estimated ? "about " : ""}{capture.status.words.toLocaleString("en-US")} words</p> : null}
+          {line.state === "full" && capture.status.flags?.length ? <p className="text-xs opacity-90" data-capture-flags>{capture.status.flags.join(" ")}</p> : null}
+          {capture.status.curation === "degraded" ? <p className="text-xs opacity-90" data-capture-curation-note>Curation finished all but one stage (usually the summary).</p> : null}
+          {capture.status.assessment ? <p className="text-xs font-medium" data-capture-assessment-note>An editor marked this capture {capture.status.assessment}.</p> : null}
+        </div>
+      </div>
+      {capture.loading ? <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground" role="status"><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Reading the stored text…</p> : null}
+      {capture.error ? <p className="text-xs text-destructive" role="alert">The stored text could not be read. {capture.error}</p> : null}
+      {text ? (
+        <div className="space-y-2">
+          <div className="max-h-80 overflow-y-auto whitespace-pre-wrap rounded-2xl bg-[var(--feed-control)] p-3 text-sm leading-relaxed" data-capture-text tabIndex={0}>
+            {expanded || !long ? text : `${text.slice(0, PREVIEW_CHARACTERS)}…`}
+          </div>
+          {long ? (
+            <button className="rounded-full bg-[var(--feed-control)] px-3 py-1.5 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring" data-capture-toggle onClick={() => setExpanded((value) => !value)} type="button">
+              {expanded ? "Show less" : "Show all of the captured text"}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      {capture.summary ? (
+        <div className="space-y-1" data-capture-summary>
+          <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Summary{capture.summaryStale ? " (out of date: the text was replaced)" : ""}</h4>
+          <p className="text-sm">{capture.summary}</p>
+        </div>
+      ) : capture.summaryStale ? <p className="text-xs text-muted-foreground" data-capture-summary-stale>The summary will be rewritten from the new text on the next curation run.</p> : null}
+      {capture.rows.length ? (
+        <dl className="grid gap-2 rounded-2xl bg-[var(--feed-control)] p-3 text-sm" data-capture-structured>
+          {capture.rows.map((row) => (
+            <div key={`${row.label}:${row.value}`}>
+              <dt className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{row.label}</dt>
+              <dd className="mt-0.5">{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {capture.correct ? (
+        editing ? <CorrectionForm capture={capture} onDone={() => { setEditing(false); setSavedNote(true); }} /> : (
+          <div className="flex flex-wrap items-center gap-2">
+            <button className="inline-flex min-h-9 items-center rounded-full bg-[var(--feed-control)] px-4 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring" data-capture-correct onClick={() => { setSavedNote(false); setEditing(true); }} type="button">
+              Paste or correct the text
+            </button>
+            {savedNote ? <span className="text-xs text-muted-foreground" data-capture-correction-saved role="status">Saved. Your verdict trains the completeness check.</span> : null}
+          </div>
+        )
+      ) : null}
+    </section>
+  );
+}

package/components/reference-feed.tsx

@@ -21,6 +21,9 @@ 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 { CaptureBadge } from "./reference-capture-panel";
+import { useRatingStore, type RatingController } from "./use-reference-ratings";
+import type { CaptureStatus } from "../lib/reference-capture";
 
 /**
  * Flat surfaces, no borders: the page tone, a card tone one step away from it, a footer tone, and a control tone for chips and
@@ -45,7 +48,7 @@ const REASON_LABELS: Record<ReferenceRejectionReasonCode, string> = {
 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 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";
+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";
 
 export type ReferenceFeedProps = {
   /** Read-only reason shown in words when answering is not possible yet (for example while the session is confirmed). */
@@ -62,20 +65,33 @@ export type ReferenceFeedProps = {
   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[] }>;
+  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;
+  /** A rating store shared with the detail pane, so a vote or reason in either shows in both. Optional. */
+  ratings?: RatingController;
   /** True when the cards are a saved copy that is being refreshed. */
   stale?: boolean;
   tab: ReferenceFeedTabKey;
   visitRated: ReadonlySet<string>;
 };
 
-const GRID = "grid gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4";
+/** Columns follow the width the feed has (a container query, not the screen), so they stay put while a detail pane holds its place beside it. */
+export const FEED_GRID = "grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-5";
+const GRID = FEED_GRID;
+/** The lead spans two columns only where there are at least two to span (two 17rem columns and the gap). */
+const LEAD_SPAN = "@[36rem]:col-span-2";
 
 /** Pulsing placeholder cards: the page shell is on screen at once, with no "checking" screen in front of it. */
 export function ReferenceFeedSkeleton({ count = 6 }: { count?: number }) {
   return (
-    <div aria-busy="true" aria-label="Loading references" className={GRID} data-reference-feed-skeleton role="status" {...FEED_SURFACE_PROPS}>
+    <div aria-busy="true" aria-label="Loading references" className={cn("@container", GRID)} data-reference-feed-skeleton role="status" {...FEED_SURFACE_PROPS}>
       {Array.from({ length: count }, (_, index) => (
-        <div className={cn("overflow-hidden rounded-[20px] bg-[var(--feed-card)]", index === 0 && "sm:col-span-2")} key={index}>
+        <div className={cn("overflow-hidden rounded-[20px] bg-[var(--feed-card)]", index === 0 && LEAD_SPAN)} key={index}>
           <div className={cn("animate-pulse bg-[var(--feed-control)]", index === 0 ? "aspect-[2/1]" : "aspect-[16/10]")} />
           <div className="space-y-3 p-5">
             <div className="h-3 w-1/3 animate-pulse rounded-full bg-[var(--feed-control)]" />
@@ -100,7 +116,7 @@ function hueOf(name: string): number {
 }
 
 /** A small mark for a source: its own favicon on a light tile when it loads, else its first letter. */
-function SourceMark({ host, size = "sm" }: { host: string | null; size?: "sm" | "lg" }) {
+export function SourceMark({ host, size = "sm" }: { host: string | null; size?: "sm" | "lg" }) {
   const [failed, setFailed] = useState(false);
   const box = size === "lg" ? "size-16 rounded-2xl text-3xl" : "size-5 rounded-md text-[0.65rem]";
   const letter = (host ?? "?")[0];
@@ -134,7 +150,7 @@ function FallbackTile({ host, name }: { host: string | null; name: string }) {
  * Photos fill the frame (cover). A text card (a repository social card, or a 2:1 picture) is shown whole instead: the frame takes
  * the picture's own ratio and the picture is contained, so no words are cut off at the edges.
  */
-function FeedImage({ host, lead, name, src }: { host: string | null; lead: boolean; name: string; src: string | null }) {
+export function FeedImage({ host, lead, name, src }: { host: string | null; lead: boolean; name: string; src: string | null }) {
   const [state, setState] = useState<"loading" | "loaded" | "failed">(src ? "loading" : "failed");
   const [ratio, setRatio] = useState<number | null>(null);
   const ref = useRef<HTMLImageElement | null>(null);
@@ -145,14 +161,17 @@ function FeedImage({ host, lead, name, src }: { host: string | null; lead: boole
     const element = ref.current;
     if (element?.complete && element.naturalWidth > 0) { setState("loaded"); measure(element); }
   }, [src]);
-  const card = isCardStyleImage(src, ratio);
+  // The frame is decided before the picture loads (from its address), so loading never moves the cards around. A picture found to be
+  // a 2:1 text card afterwards is contained inside the same frame instead of changing it.
+  const hostCard = isCardStyleImage(src, null);
+  const card = hostCard || isCardStyleImage(src, ratio);
   return (
     <div
-      className={cn("relative w-full overflow-hidden bg-[var(--feed-control)]", !card && (lead ? "aspect-[16/10] sm:aspect-[2/1] xl:aspect-[21/9]" : "aspect-[16/10]"))}
+      className={cn("relative w-full overflow-hidden bg-[var(--feed-control)]", !hostCard && (lead ? "aspect-[16/10] @[36rem]:aspect-[2/1] @[60rem]:aspect-[21/9]" : "aspect-[16/10]"))}
       data-feed-image
       data-feed-image-fit={card ? "contain" : "cover"}
       data-feed-image-state={state}
-      style={card ? { aspectRatio: String(ratio ?? 2) } : undefined}
+      style={hostCard ? { aspectRatio: "2" } : undefined}
     >
       {state === "loading" ? <div aria-hidden="true" className="absolute inset-0 animate-pulse bg-[var(--feed-footer)] blur-sm" data-feed-image-placeholder /> : null}
       {src && state !== "failed" ? (
@@ -175,9 +194,8 @@ function FeedImage({ host, lead, name, src }: { host: string | null; lead: boole
   );
 }
 
-type RateState = { phase: "idle" | "saving" | "saved" | "error" | "reason"; message?: string };
-
-function FeedCard({
+export function FeedCard({
+  capture,
   decision,
   disabledReason,
   item,
@@ -187,9 +205,12 @@ function FeedCard({
   onRate,
   predictionLoading,
   preview,
+  ratings,
   selected,
   visitRated,
 }: {
+  /** Optional: the capture badge. */
+  capture?: CaptureStatus | undefined;
   decision: RelevanceDecisionView | undefined;
   disabledReason: string | null;
   item: FeedItem;
@@ -199,6 +220,8 @@ function FeedCard({
   onRate: ReferenceFeedProps["onRate"];
   predictionLoading: boolean;
   preview: ReferencePreview | undefined;
+  /** Optional: a shared rating store. Without it the card keeps its own. */
+  ratings?: RatingController | undefined;
   selected: boolean;
   visitRated: boolean;
 }) {
@@ -206,8 +229,15 @@ function FeedCard({
   const titleId = useId();
   const status = normalizeReferenceCurationStatus(reference.curationStatus);
   const answer: ReviewChoice | null = status === "accepted" ? "accept" : status === "rejected" ? "reject" : null;
-  const [rate, setRate] = useState<RateState>({ phase: "idle" });
-  const inFlight = useRef(false);
+  // Rating state lives in a store: the shared one when given (so the detail pane and this card stay in step), else a private one.
+  const local = useRatingStore({
+    save: async (_id, choice, detail) => { await onRate(reference, choice, detail.reasonCode); },
+    saved: () => answer,
+    seed: () => ({ note: "", reasonCode: null }),
+  });
+  const store = ratings ?? local;
+  const rating = store.get(item.lineageId);
+  const chosen = rating.pending ?? answer;
   const host = referenceSourceHost(reference);
   const site = preview?.siteName ?? host ?? "Unknown source";
   const title = referenceDisplayTitle(reference);
@@ -215,42 +245,26 @@ function FeedCard({
   const showDek = dekAddsInformation(title, dek, preview?.imageUrl ?? null);
   const time = referenceDisplayTime(reference);
   const age = formatFeedAge(time, now);
-
-  async function save(choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) {
-    if (disabledReason || inFlight.current) return;
-    inFlight.current = true;
-    setRate({ phase: "saving" });
-    try {
-      await onRate(reference, choice, reasonCode);
-      setRate({ phase: "saved" });
-    } catch (failure) {
-      setRate({ phase: "error", message: failure instanceof Error ? failure.message : "Your answer could not be saved. Tap it again to retry." });
-    } finally {
-      inFlight.current = false;
-    }
-  }
-
-  function choose(choice: ReviewChoice) {
-    if (disabledReason) return;
-    if (answer === choice) return; // the chosen answer never unselects itself; the other choice is the undo
-    if (choice === "reject") { setRate({ phase: "reason" }); return; }
-    void save("accept", null);
-  }
+  const feedback = rating.feedback.phase === "idle" && visitRated && answer ? { phase: "saved" as const } : rating.feedback;
+  const reasonLabel = answer === "reject" && rating.reasonCode ? REASON_LABELS[rating.reasonCode] : null;
 
   return (
     <article
       aria-labelledby={titleId}
+      aria-current={selected ? "true" : undefined}
       className={cn(
-        "flex flex-col overflow-hidden rounded-[20px] text-card-foreground",
-        selected ? "bg-[var(--feed-control)]" : "bg-[var(--feed-card)]",
-        lead && "sm:col-span-2",
+        "relative flex flex-col overflow-hidden rounded-[20px] text-card-foreground transition-[background-color,box-shadow] duration-200",
+        selected ? "bg-[var(--feed-control)] shadow-xl" : "bg-[var(--feed-card)]",
+        lead && LEAD_SPAN,
       )}
       data-feed-card={item.lineageId}
       data-feed-lead={lead || undefined}
       data-feed-rated={answer ?? undefined}
+      data-feed-selected={selected || undefined}
       data-feed-visit-rated={visitRated || undefined}
       data-newsroom-card-id={item.lineageId}
     >
+      {selected ? <span aria-hidden="true" className="absolute inset-y-0 left-0 z-10 w-1.5 bg-[var(--primary)]" data-feed-selected-bar /> : null}
       <button
         aria-label={`Open: ${title}`}
         className="flex flex-1 flex-col text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
@@ -259,42 +273,49 @@ function FeedCard({
         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 sm:p-7" : "p-5")}>
+        <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 sm:text-3xl xl:text-4xl" : "line-clamp-3 text-xl")} data-feed-title id={titleId}>
+          <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 pt-1 text-xs text-muted-foreground">
-            {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 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}
           </span>
         </span>
       </button>
 
-      <div className="space-y-2.5 bg-[var(--feed-footer)] p-3" data-feed-actions>
+      <div className="relative bg-[var(--feed-footer)] px-4 pb-4 pt-3" data-feed-actions>
         <RatingGrid
-          answer={answer}
+          answer={chosen}
+          decided={answer}
           disabled={Boolean(disabledReason)}
           disabledReason={disabledReason}
-          feedback={rate.phase === "saving" ? { phase: "saving" } : rate.phase === "error" ? { phase: "error", message: rate.message } : rate.phase === "saved" || (visitRated && rate.phase === "idle" && answer) ? { phase: "saved" } : { phase: "idle" }}
-          onChoose={choose}
+          feedback={feedback}
+          note={reasonLabel ? `Reason: ${reasonLabel}` : null}
+          onChoose={(choice) => { if (!disabledReason) store.choose(item.lineageId, choice); }}
           prediction={decision ? predictionFromDecision(decision) : predictionLoading ? { state: "loading" } : { state: "none" }}
+          statusOverlay
         />
-        {rate.phase === "reason" ? (
-          <div className="space-y-2" data-review-reasons>
+        {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={() => void save("reject", code)} type="button">
+                <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={() => setRate({ phase: "idle" })} type="button">Cancel</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}
@@ -364,7 +385,7 @@ function RankingPopover({ freshness }: { freshness: FeedFreshness }) {
   );
 }
 
-function SectionHeading({ children, id }: { children: ReactNode; id: string }) {
+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>;
 }
 
@@ -380,6 +401,11 @@ export function ReferenceFeed({
   predictionLoading = false,
   previews,
   selectedLineageId = "",
+  captures,
+  groups: stableGroups,
+  leadId: stableLeadId,
+  ratings,
+  scrollTarget = null,
   stale = false,
   tab,
   visitRated,
@@ -388,6 +414,7 @@ export function ReferenceFeed({
 
   const renderCard = (item: FeedItem, lead: boolean) => (
     <FeedCard
+      capture={captures?.get(item.lineageId)}
       decision={item.decision}
       disabledReason={disabledReason}
       item={item}
@@ -398,6 +425,7 @@ export function ReferenceFeed({
       onRate={async (reference, choice, reasonCode) => { onVisitRated(item.lineageId); await onRate(reference, choice, reasonCode); }}
       predictionLoading={predictionLoading}
       preview={previews.get(item.lineageId)}
+      ratings={ratings}
       selected={selectedLineageId === item.lineageId}
       visitRated={visitRated.has(item.lineageId)}
     />
@@ -407,12 +435,18 @@ export function ReferenceFeed({
     <div className="rounded-[20px] bg-[var(--feed-card)] p-10 text-center text-sm text-muted-foreground" data-feed-empty>{label}</div>
   );
 
-  const groups = groupFeedItems(partition.feed);
+  // Previous / Next in the detail pane scrolls the grid to the same card, smoothly. Selecting a card by clicking it never scrolls.
+  useEffect(() => {
+    if (!scrollTarget || typeof document === "undefined") return;
+    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 = groups[0]?.key !== "least" ? groups[0]?.items[0]?.lineageId : undefined;
+  const leadId = stableGroups ? stableLeadId : groups[0]?.key !== "least" ? groups[0]?.items[0]?.lineageId : undefined;
 
   return (
-    <div className="space-y-5" data-reference-feed data-feed-tab={tab} {...FEED_SURFACE_PROPS}>
+    <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) => (
@@ -448,20 +482,20 @@ export function ReferenceFeed({
               {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={GRID} data-feed-grid>{group.items.map((item) => renderCard(item, item.lineageId === leadId))}</div>
+                  <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={GRID} data-feed-grid>{partition.earlier.map((item) => renderCard(item, false))}</div>
+                  <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={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={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}
+          {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>
       )}
     </div>