@anthusai/papyrus 5.44.0 → 5.46.0

package/components/newsroom-references-view.tsx

@@ -4,9 +4,9 @@ import type { PrimingPanelProps } from "cyclotron/components/priming-panel";
 import { ReferenceAddEntry } from "./reference-add-entry";
 import { ReferenceCurationControls, useReferenceImport } from "./reference-curation-controls";
 
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, LayoutGridIcon, ListIcon, PlusIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
@@ -42,6 +42,18 @@ import {
 import { normalizeReferenceCurationStatus, referenceReasonCode, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 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 { ReferenceCapturePanel } from "./reference-capture-panel";
+import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capture-client";
+import { useRatingStore, type RatingController } from "./use-reference-ratings";
+import { captureStatusesByLineage } from "../lib/reference-capture";
+import { applyFeedOrderSnapshot, partitionReferenceFeed, takeFeedOrderSnapshot, type FeedOrderSnapshot, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
+import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { chooseSyntheticRejects, withSyntheticRejects } from "../lib/local-preview-synthetic-rejects";
+import { cn } from "../lib/utils";
+import { getKanbusTheme, SITE_BRAND } from "../lib/site-brand";
+import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
 import {
   ReviewCard,
   predictionFromDecision,
@@ -120,8 +132,16 @@ type NewsroomReferencesViewProps = {
   onReview: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: ReferenceReviewOptions) => Promise<void> | void;
   referenceAttachments?: ReferenceAttachmentRecord[];
   references: ReferenceRecord[];
+  /** Saves an editor's pasted or corrected capture text and their verdict on it. Optional: without it the capture panel only reads. */
+  onCorrectCapture?: CorrectCaptureAction;
+  /** True while the References are still being read: the feed shows card skeletons instead of an empty page. */
+  loading?: boolean;
+  /** The last view this browser saved. Shown, read only, until the live read arrives. */
+  savedCopy?: { references: ReferenceRecord[]; previews: Array<[string, ReferencePreview]>; decisions: Array<[string, RelevanceDecisionView]> } | null;
 };
 
+type ReferenceView = "feed" | "list";
+
 type ReferenceListFilter = ReferenceStatusFilter | "needs_review";
 
 const NEEDS_REVIEW_FILTER: { key: ReferenceListFilter; label: string } = { key: "needs_review", label: "Needs review" };
@@ -277,6 +297,10 @@ function cardPrediction(decision: RelevanceDecisionView | undefined, predictionS
 }
 
 function ReferenceDetailPanel({
+  captureTeaserLine,
+  correctCapture,
+  ratings,
+  sectionChoices,
   countsAsTrainingLabel,
   delegated,
   decision,
@@ -292,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;
@@ -319,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;
@@ -348,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)}
@@ -378,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} />
@@ -442,7 +478,7 @@ export function NewsroomReferencesView({
   priming,
   cyclotronStatus,
   cyclotronPriming,
-  decisions,
+  decisions: liveDecisions,
   humanCuratedReferenceLineageIds,
   delegatedCurations,
   shadowAgreement = null,
@@ -461,9 +497,15 @@ export function NewsroomReferencesView({
   initialReferenceLineageId = null,
   onReview,
   referenceAttachments = [],
-  references,
+  references: liveReferences,
+  loading = false,
+  onCorrectCapture,
+  savedCopy = null,
 }: NewsroomReferencesViewProps) {
   const pathname = usePathname();
+  // The portaled mobile sheet sits outside the newsroom root, so it carries the theme attributes itself (same as useNewsroomThemeAttributes).
+  const themeMode = useResolvedPapyrusTheme();
+  const themeAttributes = { "data-kanbus-theme": getKanbusTheme(SITE_BRAND), "data-color-mode": themeMode };
   const sessionImport = useReferenceImport(disabled);
   const [importedCount, setImportedCount] = useState(0);
   const isMobileDetail = useMediaQuery("(max-width: 767px)");
@@ -473,7 +515,77 @@ export function NewsroomReferencesView({
   );
   const routeLineageId = pathname ? pathnameLineageId ?? "" : initialReferenceLineageId ?? "";
 
+  // Until the live read arrives, a saved copy of the last view fills the page. It is display only.
+  const showingSavedCopy = loading && !liveReferences.length && Boolean(savedCopy?.references.length);
+  const references = showingSavedCopy ? savedCopy!.references : liveReferences;
+  const baseDecisions = useMemo(
+    () => (showingSavedCopy && !liveDecisions?.size ? new Map(savedCopy!.decisions) : liveDecisions),
+    [liveDecisions, savedCopy, showingSavedCopy],
+  );
+  // Preview only: ?feedSynthRejects=N makes the N weakest Accept predictions into made-up Rejects (the page says so).
+  const synthRejectCount = useMemo(() => {
+    if (typeof window === "undefined" || !isLocalPreviewEnabled()) return 0;
+    const requested = Number(new URLSearchParams(window.location.search).get("feedSynthRejects"));
+    return Number.isInteger(requested) && requested > 0 ? requested : 0;
+  }, []);
+  const syntheticChoice = useRef<string[] | null>(null);
+  if (synthRejectCount && syntheticChoice.current === null && baseDecisions?.size && references.length) {
+    syntheticChoice.current = chooseSyntheticRejects(
+      baseDecisions,
+      new Set(references.filter((reference) => normalizeReferenceCurationStatus(reference.curationStatus) === "pending").map(referenceLineageId)),
+      synthRejectCount,
+    );
+  }
+  const synthetic = useMemo(
+    () => (synthRejectCount && syntheticChoice.current ? withSyntheticRejects(baseDecisions, syntheticChoice.current) : null),
+    [baseDecisions, synthRejectCount],
+  );
+  const decisions = synthetic?.decisions ?? baseDecisions;
+  const previews = useMemo(() => {
+    const live = referencePreviewsByLineage(referenceAttachments);
+    return showingSavedCopy && !live.size ? new Map(savedCopy!.previews) : live;
+  }, [referenceAttachments, savedCopy, showingSavedCopy]);
+  const [view, setView] = useState<ReferenceView>("feed");
+  const [addOpen, setAddOpen] = useState(false);
+  const [feedTab, setFeedTab] = useState<ReferenceFeedTabKey>("feed");
+  const [visitRated, setVisitRated] = useState<ReadonlySet<string>>(() => new Set());
+  const [mountedAt] = useState(() => Date.now());
+  const markVisitRated = useCallback((lineageId: string) => {
+    setVisitRated((current) => (current.has(lineageId) ? current : new Set(current).add(lineageId)));
+  }, []);
+  // Preview only: ?feedTau=<days> stands in for the learned freshness period, to review the Earlier section on a young corpus.
+  const tauDaysOverride = useMemo(() => {
+    if (typeof window === "undefined" || !isLocalPreviewEnabled()) return null;
+    const requested = Number(new URLSearchParams(window.location.search).get("feedTau"));
+    return Number.isFinite(requested) && requested > 0 ? requested : null;
+  }, []);
+
+  // Preview only: ?feedState=loading holds the page in its loading state, to review the card skeletons.
+  const previewSkeleton = useMemo(
+    () => typeof window !== "undefined" && isLocalPreviewEnabled() && new URLSearchParams(window.location.search).get("feedState") === "loading",
+    [],
+  );
+
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
+  const livePartition = useMemo(
+    () => partitionReferenceFeed(canonicalReferences, decisions, { now: mountedAt, visitRated, tauDaysOverride }),
+    [canonicalReferences, decisions, mountedAt, tauDaysOverride, visitRated],
+  );
+  // The feed's order is taken ONCE per visit, when the feed has loaded (References and predictions), and then left alone. Selecting an
+  // item, rating one, a background refresh or a cache revalidation changes cards' content, never their places. Items that arrive later
+  // wait behind a "N new items: show" pill. (The Rated tab is a live list: it is the one place a new answer is meant to appear.)
+  const orderSnapshot = useRef<FeedOrderSnapshot | null>(null);
+  const [, bumpOrder] = useState(0);
+  const orderReady = !loading && !showingSavedCopy && !previewSkeleton && predictionState !== "loading" && canonicalReferences.length > 0;
+  if (!orderSnapshot.current && orderReady) orderSnapshot.current = takeFeedOrderSnapshot(livePartition);
+  const stable = orderSnapshot.current ? applyFeedOrderSnapshot(orderSnapshot.current, livePartition) : null;
+  const partition = stable?.partition ?? livePartition;
+  const showNewItems = () => { orderSnapshot.current = takeFeedOrderSnapshot(livePartition); bumpOrder((count) => count + 1); };
+  const [scrollTarget, setScrollTarget] = useState<{ id: string; nonce: number } | null>(null);
+  const feedOrderIds = useMemo(
+    () => (feedTab === "feed" ? [...partition.feed, ...partition.earlier] : feedTab === "rated" ? partition.rated : partition.earlier).map((item) => item.lineageId),
+    [feedTab, partition],
+  );
   const statusCounts = useMemo(() => countReferencesByStatus(canonicalReferences), [canonicalReferences]);
 
   const [statusFilter, setStatusFilter] = useState<ReferenceListFilter>(routeLineageId ? "all" : "pending");
@@ -504,14 +616,14 @@ export function NewsroomReferencesView({
   // list, but keeps its place in the queue until they move on, so "3 of 29" does not jump under them.
   const queueRef = useRef<string[]>([]);
   const queue = useMemo(() => {
-    const ids = filteredReferences.map(referenceLineageId);
+    const ids = view === "feed" ? [...feedOrderIds] : filteredReferences.map(referenceLineageId);
     const open = selectedReference ? referenceLineageId(selectedReference) : "";
     if (open && !ids.includes(open)) {
       const before = queueRef.current.indexOf(open);
       if (before >= 0) ids.splice(Math.min(before, ids.length), 0, open);
     }
     return ids;
-  }, [filteredReferences, selectedReference]);
+  }, [feedOrderIds, filteredReferences, selectedReference, view]);
   useEffect(() => { queueRef.current = queue; }, [queue]);
   const [caughtUp, setCaughtUp] = useState(false);
   const selectedIndex = selectedReference ? queue.indexOf(referenceLineageId(selectedReference)) : -1;
@@ -557,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);
@@ -566,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 });
 
@@ -582,9 +694,62 @@ export function NewsroomReferencesView({
 
   const runReview = (action: ReferenceCurationAction, options?: ReferenceReviewOptions) => {
     if (!selectedReference) return;
+    if (action === "accept" || action === "reject") markVisitRated(referenceLineageId(selectedReference));
     return onReview(selectedReference, action, options);
   };
 
+  const rateFromFeed = async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => {
+    const decision = decisions?.get(referenceLineageId(reference));
+    await onReview(reference, choice, {
+      reasonCode: choice === "reject" ? reasonCode : null,
+      ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+    });
+  };
+  // One rating store for the whole view: the grid cards and the detail pane read and write the same state, so a vote or a reason
+  // entered in either shows in both. Reason then vote, or vote then reason, both end up on one decision.
+  const sectionChoices = useRef<Map<string, string | null>>(new Map());
+  const referenceById = (lineageId: string) => selectedReferenceRecordByLineage(canonicalReferences, lineageId);
+  const ratings = useRatingStore({
+    save: async (lineageId, choice, detail) => {
+      const reference = referenceById(lineageId);
+      if (!reference) throw new Error("This reference is no longer in the list.");
+      markVisitRated(lineageId);
+      const decision = decisions?.get(lineageId);
+      const sectionId = choice === "accept" ? sectionChoices.current.get(lineageId) : null;
+      await onReview(reference, choice, {
+        note: detail.note || undefined,
+        reasonCode: choice === "reject" ? detail.reasonCode : null,
+        ...(sectionId ? { sectionId } : {}),
+        ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+      });
+    },
+    saved: (lineageId) => {
+      const status = normalizeReferenceCurationStatus(referenceById(lineageId)?.curationStatus);
+      return status === "accepted" ? "accept" : status === "rejected" ? "reject" : null;
+    },
+    seed: (lineageId) => {
+      const reference = referenceById(lineageId);
+      const status = normalizeReferenceCurationStatus(reference?.curationStatus);
+      return {
+        note: reference && status !== "pending" ? reference.curationStatusReason ?? "" : "",
+        reasonCode: reviewReasons?.get(lineageId) ?? (reference ? referenceReasonCode(reference) : null) ?? null,
+      };
+    },
+  });
+  const { statuses: captureStatuses, teaserLine } = useMemo(
+    () => captureStatusesByLineage(referenceAttachments, canonicalReferences.map(referenceLineageId)),
+    [canonicalReferences, referenceAttachments],
+  );
+  // Preview only: a fixture can carry captured text inline; say so, since production stores none for monitored References.
+  const previewCapturedText = useMemo(
+    () => isLocalPreviewEnabled() && referenceAttachments.some((attachment) => attachment.role === "extracted_text" && String(attachment.storagePath ?? "").startsWith("preview://")),
+    [referenceAttachments],
+  );
+  const showCaptures = !showingSavedCopy && !loading && !previewSkeleton;
+  const feedDisabledReason = disabled
+    ? "Editor access is required to change this reference."
+    : showingSavedCopy ? "Confirming your sign-in. You can answer in a moment." : null;
+
   const caughtUpPanel = (
     <div className="space-y-2 p-6 text-center" data-review-caught-up>
       <h3 className="text-lg font-semibold">All caught up</h3>
@@ -599,30 +764,81 @@ export function NewsroomReferencesView({
     ? "No references match this filter."
     : "No private references imported yet.";
 
+  // The grid must not move when a detail opens, so in the feed the detail pane's place is reserved all the time (from the md breakpoint
+  // up): opening it changes nothing, and the grid's column count follows the width it has beside that place, never the selection. Below
+  // md the detail is a sheet over the grid. There is no overlay mode: an overlay would hide the cards Previous / Next scrolls to.
+
   return (
     <div
       className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[calc(100dvh-8.5rem)] md:flex-row"
+      data-detail-reserved={view === "feed" ? "true" : undefined}
       data-news-desk-section="references"
       data-detail-open={selectedReference || routeLineageId ? "true" : "false"}
     >
       <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 md:overflow-hidden">
-        <div className="shrink-0 space-y-1">
-          <h2 className="text-lg font-semibold tracking-tight">References</h2>
-          <p className="text-sm text-muted-foreground">
-            Review source intake before it becomes accepted evidence.
-          </p>
+        <div className="flex shrink-0 items-center justify-between gap-3" {...FEED_SURFACE_PROPS}>
+          <div className="min-w-0 space-y-0.5">
+            <h2 className="text-2xl font-bold tracking-tight">References</h2>
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {view === "feed" ? "A feed ranked by what you are most likely to accept." : "Review source intake before it becomes accepted evidence."}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              aria-controls="reference-add-panel"
+              aria-expanded={addOpen}
+              aria-label="Add a reference and prediction activity"
+              className={cn("inline-flex min-h-10 items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", addOpen ? "bg-[var(--feed-control)] text-foreground" : "bg-[var(--feed-card)] text-muted-foreground hover:text-foreground")}
+              data-reference-add-toggle
+              onClick={() => setAddOpen((open) => !open)}
+              title="Add a reference and prediction activity"
+              type="button"
+            >
+              <PlusIcon aria-hidden="true" className="size-4" />
+              <span className="hidden sm:inline">Add</span>
+            </button>
+            <div aria-label="Reference view" className="inline-flex rounded-full bg-[var(--feed-card)] p-1" role="group">
+              {([["feed", "Feed", LayoutGridIcon], ["list", "List", ListIcon]] as const).map(([key, label, Icon]) => (
+                <button
+                  aria-label={label}
+                  aria-pressed={view === key}
+                  className={cn(
+                    "inline-flex min-h-8 items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                    view === key ? "bg-[var(--feed-control)] text-foreground" : "text-muted-foreground hover:text-foreground",
+                  )}
+                  data-reference-view={key}
+                  key={key}
+                  onClick={() => { setView(key); setCaughtUp(false); }}
+                  title={label}
+                  type="button"
+                >
+                  <Icon aria-hidden="true" className="size-4" />
+                  <span className="hidden sm:inline">{label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
-        {predictionState === "loading" ? <p role="status">Loading predictions…</p> : null}
+        {synthetic?.changed ? (
+          <p className="rounded-2xl bg-[var(--feed-card)] p-3 text-sm" data-preview-synthetic role="status" {...FEED_SURFACE_PROPS}>
+            Preview only: {synthetic.changed} of these predictions are made up to show the Reject end of the feed. Real data has none yet.
+          </p>
+        ) : null}
+        {previewCapturedText ? (
+          <p className="rounded-2xl bg-[var(--feed-card)] p-3 text-sm" data-preview-captured-text role="status" {...FEED_SURFACE_PROPS}>
+            Preview only: the captured text here was fetched live for this preview. In the newsroom record none of these References has stored text yet.
+          </p>
+        ) : null}
+        {predictionState === "loading" && view === "list" ? <p role="status">Loading predictions…</p> : null}
         {predictionState === "error" ? (
-          <div role="alert" className="space-y-2 rounded-md border p-3">
+          <div role="alert" className="space-y-2 rounded-2xl bg-[var(--feed-card)] p-4" {...FEED_SURFACE_PROPS}>
             <p>Predictions unavailable. {predictionError}</p>
             <p className="text-sm">You can still review references. Existing suggestions may be out of date.</p>
             {onRetryPredictions ? <Button onClick={onRetryPredictions} size="sm" type="button" variant="outline">Retry predictions</Button> : null}
           </div>
         ) : null}
-        <details className="shrink-0 overflow-y-auto rounded-md border p-3 text-sm" style={{ maxHeight: "35dvh" }}>
-          <summary className="cursor-pointer font-semibold">Add a reference and prediction activity</summary>
-          <div className="mt-3 space-y-4">
+        <div className="shrink-0 overflow-y-auto rounded-[20px] bg-[var(--feed-card)] p-4 text-sm" data-feed-flat="" data-feed-surface="" hidden={!addOpen} id="reference-add-panel" style={{ ...FEED_SURFACE_STYLE, maxHeight: "45dvh", overflowY: "auto" }}>
+          <div className="space-y-4">
         <ReferenceLiveAgreement agreement={shadowAgreement} />
         <ReferenceAddEntry
           importOptions={disabled ? null : priming ?? sessionImport?.panel}
@@ -639,8 +855,51 @@ export function NewsroomReferencesView({
           </div>
         ) : null}
           </div>
-        </details>
+        </div>
 
+        {view === "feed" ? (
+          <div className="relative flex min-h-0 flex-1 flex-col" {...FEED_SURFACE_PROPS}>
+          {stable && stable.newCount > 0 && feedTab === "feed" ? (
+            // Floats over the top of the grid, outside the scrolling content: announcing new items never moves a card.
+            <div className="pointer-events-none absolute inset-x-0 top-2 z-20 flex justify-center">
+              <button
+                className="pointer-events-auto inline-flex min-h-9 items-center rounded-full bg-[var(--feed-control)] px-4 text-sm font-medium text-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                data-feed-new-items
+                onClick={showNewItems}
+                type="button"
+              >
+                {stable.newCount} new {stable.newCount === 1 ? "item" : "items"}: show
+              </button>
+            </div>
+          ) : null}
+          <ScrollArea className="min-h-0 flex-1 [overflow-anchor:none]" data-reference-feed-scroll>
+            <div className="pb-6 pr-1">
+              <ReferenceFeed
+                disabledReason={feedDisabledReason}
+                loading={previewSkeleton || (loading && !references.length)}
+                now={mountedAt}
+                onOpen={selectReference}
+                onRate={rateFromFeed}
+                onTabChange={(next) => { setFeedTab(next); setCaughtUp(false); }}
+                onVisitRated={markVisitRated}
+                partition={partition}
+                predictionLoading={predictionState === "loading"}
+                previews={previews}
+                captures={showCaptures ? captureStatuses : undefined}
+                groups={stable?.groups}
+                leadId={stable?.leadId}
+                scrollTarget={scrollTarget}
+                ratings={ratings}
+                selectedLineageId={selectedLineageId}
+                stale={showingSavedCopy || (loading && references.length > 0)}
+                tab={feedTab}
+                visitRated={visitRated}
+              />
+            </div>
+          </ScrollArea>
+          </div>
+        ) : (
+          <>
         <Tabs
           className="shrink-0"
           defaultValue="pending"
@@ -716,15 +975,21 @@ export function NewsroomReferencesView({
             )}
           </div>
         </ScrollArea>
+          </>
+        )}
       </div>
 
       <div
-        className="hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-card md:flex md:w-[min(100%,24rem)] lg:w-[min(100%,28rem)]"
+        className={cn(
+          "hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:flex md:w-[min(100%,24rem)] lg:w-[min(100%,28rem)]",
+        )}
         data-newsroom-list-detail-shell
         data-news-desk-section="references"
         data-detail-open={selectedReference ? "true" : "false"}
+        data-feed-flat=""
+        {...FEED_SURFACE_PROPS}
       >
-        <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2">
+        <div className="flex shrink-0 items-center justify-between gap-2 px-4 pt-3 pb-1">
           <span className="text-sm font-medium text-foreground">Detail</span>
         </div>
         <div className="flex min-h-0 flex-1 flex-col" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}>
@@ -732,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))}
@@ -766,14 +1035,18 @@ export function NewsroomReferencesView({
           }}
           open={(mobileDetailOpen && Boolean(selectedReference)) || caughtUp}
         >
-          <SheetContent className="gap-0 p-0" side="bottom">
+          <SheetContent className="gap-0 rounded-t-[24px] bg-[var(--feed-card)] p-0" data-feed-flat="" data-feed-surface="" side="bottom" {...themeAttributes}>
             <SheetHeader className="border-b border-border px-4 py-3">
               <SheetTitle className="text-left text-base">Reference</SheetTitle>
             </SheetHeader>
             {selectedReference ? (
-              <div data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}><ScrollArea className="max-h-[70dvh]">
+              <div className="min-w-0" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}><ScrollArea className="max-h-[70dvh]">
                 <ReferenceDetailPanel
                   key={referenceLineageId(selectedReference)}
+                  captureTeaserLine={teaserLine}
+              correctCapture={onCorrectCapture}
+                  ratings={ratings}
+                  sectionChoices={sectionChoices}
                   predictionState={predictionState}
               reviewReason={reviewReasons?.get(referenceLineageId(selectedReference))}
               reviewSectionId={reviewSectionIds?.get(referenceLineageId(selectedReference))}