@anthusai/papyrus 5.43.0-next.16 → 5.43.0-next.17

package/components/newsroom-references-view.tsx

@@ -6,7 +6,7 @@ import { ReferenceCurationControls, useReferenceImport } from "./reference-curat
 
 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";
@@ -43,7 +43,11 @@ import { normalizeReferenceCurationStatus, referenceReasonCode, type ReferenceRe
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
 import { FEED_SURFACE_PROPS, FEED_SURFACE_STYLE, ReferenceFeed } from "./reference-feed";
-import { partitionReferenceFeed, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
+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";
@@ -128,6 +132,8 @@ 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. */
@@ -291,6 +297,10 @@ function cardPrediction(decision: RelevanceDecisionView | undefined, predictionS
 }
 
 function ReferenceDetailPanel({
+  captureTeaserLine,
+  correctCapture,
+  ratings,
+  sectionChoices,
   countsAsTrainingLabel,
   delegated,
   decision,
@@ -306,6 +316,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;
@@ -333,6 +350,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;
@@ -362,6 +381,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)}
@@ -392,6 +412,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} />
@@ -477,6 +499,7 @@ export function NewsroomReferencesView({
   referenceAttachments = [],
   references: liveReferences,
   loading = false,
+  onCorrectCapture,
   savedCopy = null,
 }: NewsroomReferencesViewProps) {
   const pathname = usePathname();
@@ -544,10 +567,21 @@ export function NewsroomReferencesView({
   );
 
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
-  const partition = useMemo(
+  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],
@@ -635,7 +669,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);
@@ -644,7 +678,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 });
 
@@ -671,6 +705,47 @@ export function NewsroomReferencesView({
       ...(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;
@@ -689,9 +764,14 @@ 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"
+      data-detail-reserved={view === "feed" ? "true" : undefined}
       data-news-desk-section="references"
       data-detail-open={selectedReference || routeLineageId ? "true" : "false"}
     >
@@ -744,6 +824,11 @@ export function NewsroomReferencesView({
             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-2xl bg-[var(--feed-card)] p-4" {...FEED_SURFACE_PROPS}>
@@ -773,7 +858,21 @@ export function NewsroomReferencesView({
         </div>
 
         {view === "feed" ? (
-          <ScrollArea className="min-h-0 flex-1" data-reference-feed-scroll>
+          <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}
@@ -786,6 +885,11 @@ export function NewsroomReferencesView({
                 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}
@@ -793,6 +897,7 @@ export function NewsroomReferencesView({
               />
             </div>
           </ScrollArea>
+          </div>
         ) : (
           <>
         <Tabs
@@ -877,7 +982,6 @@ export function NewsroomReferencesView({
       <div
         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)]",
-          view === "feed" && !selectedReference && "md:hidden",
         )}
         data-newsroom-list-detail-shell
         data-news-desk-section="references"
@@ -893,6 +997,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))}
@@ -935,6 +1043,10 @@ export function NewsroomReferencesView({
               <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))}

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>
+  );
+}