@anthusai/papyrus 5.49.0 → 5.50.0

package/app/api/newsroom/source-frameable/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { checkSourceFrameable } from "../../../../lib/source-frameable";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/** GET ?url=<source page> -> { frameable }: whether the newsroom can show that page's live preview. Cached for a day. */
+export async function GET(request: Request) {
+  const url = new URL(request.url).searchParams.get("url") ?? "";
+  const frameable = url ? await checkSourceFrameable(url) : false;
+  return NextResponse.json({ frameable }, { headers: { "cache-control": "public, max-age=86400" } });
+}

package/components/needs-me-bodies.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { CheckIcon, CircleCheckIcon, CircleXIcon, ExternalLinkIcon, FileSearchIcon, Loader2Icon, LockIcon, MailIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState, type ReactNode } from "react";
@@ -95,9 +96,9 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
 
   return (
     <section aria-label="Your decision" className="space-y-3 rounded-[20px] bg-[var(--feed-footer)] p-3" data-needs-me-decision {...(locked ? {} : { "data-review-controls": "" })}>
-      <textarea
+      <AutoGrowTextarea
         aria-label="Why? (optional)"
-        className="block min-h-20 w-full resize-y rounded-[16px] bg-[var(--feed-control)] p-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        className="block min-h-20 w-full rounded-[16px] bg-[var(--feed-control)] p-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
         data-needs-me-why
         onBlur={() => { if (!disabledReason) ratings.commitNote(item.id); }}
         onChange={(event) => ratings.setNote(item.id, event.target.value)}

package/components/needs-me-detail.tsx

@@ -12,7 +12,8 @@ export function NeedsMeDetail(props: DetailProps) {
   const { payload } = item;
   return (
     <div className="flex flex-col gap-4 p-4 font-sans" data-needs-me-detail={item.id} data-needs-me-detail-type={item.type}>
-      <Heading item={item} />
+      {/* A Reference puts its title first and carries these badges under it. */}
+      {payload.kind === "reference" ? null : <Heading item={item} />}
       {payload.kind === "reference" && isReferenceLike(item) ? <ReferenceBody {...props} payload={payload} /> : null}
       {payload.kind === "draft" ? <DraftBody {...props} payload={payload} /> : null}
       {payload.kind === "request" ? <RequestBody {...props} payload={payload} /> : null}

package/components/needs-me-reference-detail.tsx

@@ -2,11 +2,12 @@
 
 import { referenceDisplayTitle, referenceLineageId, formatReferenceListDate } from "../lib/newsroom-references";
 import { referenceMetadataField } from "../lib/reference-display";
+import { referenceDek, referencePreviewsByLineage } from "../lib/reference-preview";
 import { DEFAULT_TEASER_WORDS } from "../lib/reference-capture";
 import { referenceReasonCode, normalizeReferenceCurationStatus } from "../lib/reference-policy";
 import type { ReferenceRecord } from "../lib/category-repository";
 import type { NeedsMeEntry } from "../lib/needs-me-items";
-import { DefaultOutcome, type DetailProps } from "./needs-me-bodies";
+import { DefaultOutcome, Heading, type DetailProps } from "./needs-me-bodies";
 import { decidedChoiceOf } from "./needs-me-shared";
 import { predictionFromDecision, ReviewCard, type CardPrediction } from "./reference-review-card";
 import { ReferenceCapturePanel } from "./reference-capture-panel";
@@ -20,7 +21,10 @@ function cardPrediction(item: NeedsMeEntry, predictionLoading: boolean): CardPre
   return predictionLoading ? { state: "loading" } : { state: "none" };
 }
 
-/** A Reference, or a Reference whose capture may be cut off: the References detail's own pieces, in the same order. */
+/**
+ * A Reference, or a Reference whose capture may be cut off: the References detail's own pieces, in the same order. What the item is
+ * comes first (title, blurb, link, badges, summary), then the rating, then what was captured and how well.
+ */
 export function ReferenceBody(props: DetailProps & { payload: Extract<NeedsMeEntry["payload"], { kind: "reference" }> }) {
   const { item, payload, ratings, disabledReason, attachments, captureTeaserLine = DEFAULT_TEASER_WORDS, onCorrectCapture, predictionLoading } = props;
   const reference: ReferenceRecord = payload.reference;
@@ -29,26 +33,23 @@ export function ReferenceBody(props: DetailProps & { payload: Extract<NeedsMeEnt
   const previewAttachments = useReferencePreviewAttachments(reference, attachments);
   const capture = useReferenceCapture(reference, previewAttachments, captureTeaserLine, onCorrectCapture);
   const url = reference.sourceUri?.trim() && /^https?:\/\//i.test(reference.sourceUri.trim()) ? reference.sourceUri.trim() : null;
-  const summary = referenceMetadataField(null, reference.metadata, "summary");
+  const summary = capture.summary ?? referenceMetadataField(null, reference.metadata, "summary");
+  const dek = referenceDek(reference, referencePreviewsByLineage(previewAttachments).get(lineageId));
   const incomplete = item.type === "incomplete_capture";
-  const capturePanel = <ReferenceCapturePanel capture={capture} startEditing={incomplete} />;
   return (
     <div className="space-y-4" data-reference-curation-status={status} data-news-desk-reference-detail={lineageId}>
-      {incomplete ? (
-        <div className="space-y-2" data-needs-me-capture-first>
-          <p className="text-sm text-muted-foreground">The captured text looks cut off or missing. Paste the full text below and say whether the capture was complete, or rate the Reference as it is.</p>
-          {capturePanel}
-        </div>
-      ) : null}
       <ReviewCard
         decided={decidedChoiceOf(item)}
         disabledReason={disabledReason}
         initialNote={status === "pending" ? "" : reference.curationStatusReason ?? ""}
         initialReason={referenceReasonCode(reference) ?? null}
+        dek={dek}
         itemId={item.id}
+        meta={<Heading item={item} />}
         onDecide={async () => undefined}
         prediction={cardPrediction(item, predictionLoading)}
         ratings={ratings}
+        sourcePreview={<ReferenceSourcePreview attachments={previewAttachments} sourceUri={reference.sourceUri} />}
         summary={summary}
         title={referenceDisplayTitle(reference)}
         titleHref={url}
@@ -56,11 +57,8 @@ export function ReferenceBody(props: DetailProps & { payload: Extract<NeedsMeEnt
         {payload.decision ? <div data-reference-relevance-decision={lineageId}><ReferenceSuggestionProvenance decision={payload.decision} /></div> : null}
       </ReviewCard>
       <DefaultOutcome item={item} />
-      {incomplete ? null : capturePanel}
-      <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} />
-      </section>
+      {incomplete ? <p className="text-sm text-muted-foreground" data-needs-me-capture-note>The captured text looks cut off or missing. Read it below. If it is incomplete, choose Paste or correct the text and say whether the capture was complete, or rate the Reference as it is.</p> : null}
+      <ReferenceCapturePanel capture={capture} showSummary={false} />
       <dl className="grid grid-cols-2 gap-3 text-sm">
         <div>
           <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Imported</dt>

package/components/newsroom-access-gate.tsx

@@ -6,7 +6,7 @@ import { SITE_BRAND } from "../lib/site-brand";
 import type { NewsDeskShellState } from "../lib/news-desk-session";
 import { cn } from "../lib/utils";
 import { NewsroomOpsShell } from "./newsroom-ops-shell";
-import { NewsroomOverviewSkeleton } from "./newsroom-overview-skeleton";
+import { NotificationSkeleton } from "./notification-cards";
 import { ReaderAuthControl } from "./reader-auth-control";
 import { buttonVariants } from "./ui/button";
 import { ReferencesPageLoading } from "./references-page-loading";
@@ -28,19 +28,10 @@ export function NewsDeskAccessGate({ initialTab, shell, showSectionTabs = false
       pageTitle={referencesPage ? "References" : showSectionTabs ? "Notification Center" : "Newsroom"}
       showNavigation={showSectionTabs || referencesPage}
     >
-      {pending && referencesPage ? <ReferencesPageLoading /> : pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
-        <div aria-label="Loading newsroom" className="space-y-4" data-newsroom-page-skeleton role="status">
-          <div className="h-6 w-48 rounded bg-muted" />
-          <div className="h-4 w-3/4 rounded bg-muted" />
-          <div className="grid gap-3 sm:grid-cols-2">
-            {Array.from({ length: 4 }, (_, index) => <div className="h-32 rounded-xl border bg-card p-4" key={index}>
-              <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
-            </div>)}
-          </div>
-        </div>
-      )) : (
+      {/* The loading state is the feed's own skeleton, so what loads replaces it in place. */}
+      {pending && referencesPage ? <ReferencesPageLoading /> : pending ? <NotificationSkeleton bare={!showSectionTabs} count={4} /> : (
       <section aria-live="polite" data-news-desk-access={accessPhase} data-news-desk-access-phase={accessPhase}>
-        <div className="space-y-3 rounded-xl border border-border bg-card p-6">
+        <div className="space-y-3 rounded-xl bg-card p-6">
           <p className="m-0 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Access</p>
           <h2 className="m-0 font-sans text-xl font-semibold tracking-tight">{formatAccessTitle(shell)}</h2>
           <p className="m-0 text-sm text-muted-foreground">{formatAccessDetail(shell)}</p>

package/components/newsroom-references-view.tsx

@@ -50,7 +50,7 @@ import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capt
 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 { referenceDek, 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";
@@ -262,28 +262,31 @@ function ReferenceDetailPanel({
       data-news-desk-reference-detail={lineageId}
     >
       <div className="space-y-4 p-4" data-reference-curation-status={status}>
-        <div className="flex flex-wrap items-center gap-2">
-          <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
-          {reference.corpusId ? <Badge variant="outline">{reference.corpusId}</Badge> : null}
-        </div>
-
         <ReviewCard
           decided={status === "accepted" ? "accept" : status === "rejected" ? "reject" : null}
+          dek={referenceDek(reference, referencePreviewsByLineage(previewAttachments).get(lineageId))}
           disabledReason={disabled ? "Editor access is required to change this reference." : null}
           initialNote={sourceNote}
           initialReason={sourceReason}
           itemId={lineageId}
+          meta={(
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
+              {reference.corpusId ? <Badge variant="secondary">{reference.corpusId}</Badge> : null}
+            </div>
+          )}
           ratings={ratings}
           onArchive={status === "archived" ? undefined : async () => { await onReview("archive"); }}
           onDecide={decide}
           prediction={cardPrediction(decision, predictionState)}
-          summary={summaryOf(reference)}
+          sourcePreview={<ReferenceSourcePreview attachments={previewAttachments} sourceUri={reference.sourceUri} />}
+          summary={capture.summary ?? summaryOf(reference)}
           title={referenceDisplayTitle(reference)}
           titleHref={url}
         >
           {decision ? <div data-reference-relevance-decision={lineageId}><ReferenceSuggestionProvenance decision={decision} /></div> : null}
           {sectionSuggestion || ((status === "pending" || status === "accepted") && sections.length) ? (
-            <details className="rounded-md border p-3 text-sm">
+            <details className="rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-sm">
               <summary className="cursor-pointer font-semibold">Section placement (optional)</summary>
               <div className="mt-3 space-y-3">
                 {sectionSuggestion ? <SectionSuggestionBlock agreement={sectionAgreement} referenceLineageId={lineageId} sections={sections} suggestion={sectionSuggestion} /> : null}
@@ -304,12 +307,7 @@ 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} />
-        </section>
+        <ReferenceCapturePanel capture={capture} showSummary={false} />
 
         <dl className="grid gap-3 text-sm">
           <div>

package/components/reference-capture-panel.tsx

@@ -4,6 +4,7 @@ import { FileCheckIcon, FileClockIcon, FileWarningIcon, FileXIcon, Loader2Icon }
 import { useEffect, useState } from "react";
 import { captureLine, type CaptureAssessment, type CaptureState, type CaptureStatus } from "../lib/reference-capture";
 import { cn } from "../lib/utils";
+import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import type { CaptureView } from "./reference-capture-client";
 
 const ICON = { full: FileCheckIcon, thin: FileWarningIcon, none: FileXIcon, running: FileClockIcon } as const;
@@ -66,7 +67,7 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
     <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
+        <AutoGrowTextarea
           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
@@ -92,7 +93,7 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
       </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} />
+        <AutoGrowTextarea 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}
@@ -113,7 +114,12 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
 }
 
 /** Our captured record of a Reference: what we stored of its content, said plainly, above the live source preview. */
-export function ReferenceCapturePanel({ capture, startEditing = false }: { capture: CaptureView; startEditing?: boolean }) {
+export function ReferenceCapturePanel({ capture, showSummary = true, startEditing = false }: {
+  capture: CaptureView;
+  /** False where the summary is already shown above the rating, with the title. */
+  showSummary?: boolean;
+  startEditing?: boolean;
+}) {
   const [expanded, setExpanded] = useState(false);
   const [editing, setEditing] = useState(startEditing && Boolean(capture.correct));
   const [savedNote, setSavedNote] = useState(false);
@@ -137,9 +143,11 @@ export function ReferenceCapturePanel({ capture, startEditing = false }: { captu
       </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 ? (
+      {/* While the editor is open it holds the text, so the read-only copy steps aside: the text is never shown twice. */}
+      {text && !editing ? (
         <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}>
+          {/* No scroll box of its own: on a phone a swipe here scrolls the page. "Show all" grows it in place. */}
+          <div className="whitespace-pre-wrap rounded-2xl bg-[var(--feed-control)] p-3 text-sm leading-relaxed" data-capture-text>
             {expanded || !long ? text : `${text.slice(0, PREVIEW_CHARACTERS)}…`}
           </div>
           {long ? (
@@ -149,7 +157,7 @@ export function ReferenceCapturePanel({ capture, startEditing = false }: { captu
           ) : null}
         </div>
       ) : null}
-      {capture.summary ? (
+      {showSummary && 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>

package/components/reference-review-card.tsx

@@ -11,6 +11,7 @@ import {
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
 import { Button } from "./ui/button";
+import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { cn } from "../lib/utils";
 import { RatingGrid } from "./review-rating-grid";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
@@ -132,11 +133,14 @@ export function predictionFromDecision(decision: { label: string; positiveLabel:
 export function ReviewCard({
   children,
   decided,
+  dek,
   disabledReason,
   initialNote = "",
   initialReason = null,
   itemId,
+  meta,
   onArchive,
+  sourcePreview,
   onDecide,
   prediction,
   summary,
@@ -149,14 +153,20 @@ export function ReviewCard({
   ratings?: RatingController;
   /** The saved human answer, or null while the item is undecided. */
   decided: ReviewChoice | null;
+  /** The source's own subtitle or blurb, shown under the title. */
+  dek?: string | null;
   /** When set, the controls explain in words why they cannot change anything. */
   disabledReason?: string | null;
   initialNote?: string;
   initialReason?: ReferenceRejectionReasonCode | null;
   itemId: string;
+  /** Badges (type, status) shown under the title and link. */
+  meta?: ReactNode;
   onArchive?: () => Promise<void> | void;
   onDecide: (choice: ReviewChoice, decision: ReviewCardDecision) => Promise<void> | void;
   prediction: CardPrediction;
+  /** The live preview of the source, shown under its link. It renders nothing when there is none. */
+  sourcePreview?: ReactNode;
   summary?: string | null;
   title: string;
   titleHref?: string | null;
@@ -192,15 +202,24 @@ export function ReviewCard({
 
   return (
     <section aria-label="Review" className="space-y-4" data-review-card={itemId}>
-      <header className="space-y-1">
+      {/* Title, blurb, link, badges, summary: what the item is, read top to bottom before the rating. */}
+      <header className="space-y-2">
         <h2 className="text-lg font-semibold leading-snug text-foreground">{title}</h2>
+        {dek && dek.trim() !== title.trim() ? <p className="text-base text-muted-foreground" data-review-dek>{dek}</p> : null}
         {titleHref ? (
           <a className="inline-flex max-w-full items-center gap-1 truncate text-sm text-primary underline-offset-4 hover:underline" href={titleHref} rel="noreferrer" target="_blank">
             <span className="truncate">{titleHref}</span>
             <ExternalLinkIcon aria-hidden="true" className="size-3.5 shrink-0" />
           </a>
         ) : null}
-        {summary ? <p className="text-sm text-muted-foreground">{summary}</p> : null}
+        {sourcePreview}
+        {meta}
+        {summary ? (
+          <div className="space-y-1 pt-1" data-review-summary>
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Summary</h3>
+            <p className="text-sm leading-relaxed text-foreground">{summary}</p>
+          </div>
+        ) : null}
       </header>
 
       <RatingGrid
@@ -217,9 +236,9 @@ export function ReviewCard({
 
       <label className="block text-sm font-medium">
         Why? (optional)
-        <textarea
+        <AutoGrowTextarea
           aria-label="Why? (optional)"
-          className="mt-1 block min-h-24 w-full rounded-md border bg-background p-3 text-base font-normal"
+          className="mt-1 block min-h-20 w-full rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-base font-normal outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
           onBlur={commitNote}
           onChange={(event) => store.setNote(itemId, event.target.value)}
           placeholder="Say what made this an easy yes or a clear no. Your note teaches the Cyclotron."
@@ -232,22 +251,21 @@ export function ReviewCard({
           <p className="text-sm font-medium">Reason for rejecting</p>
           <div className="flex flex-wrap gap-2">
             {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-              <Button
+              <button
                 aria-disabled={disabledReason ? true : undefined}
                 aria-pressed={reason === code}
-                className="min-h-10"
+                className={cn("inline-flex min-h-10 items-center gap-1.5 rounded-[var(--feed-radius-pill,8px)] px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", reason === code ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)]")}
                 data-review-reason={code}
                 key={code}
                 onClick={() => chooseReason(code)}
                 type="button"
-                variant={reason === code ? "default" : "outline"}
               >
                 {reason === code ? <CheckIcon aria-hidden="true" className="size-4" /> : null}
                 {REASON_LABELS[code]}
-              </Button>
+              </button>
             ))}
           </div>
-          {!reason ? <p className="text-sm text-muted-foreground">Choose a reason to save your Reject.</p> : null}
+          {!reason && !note.trim() ? <p className="text-sm text-muted-foreground">Choose a reason, or say why above, to save your Reject.</p> : null}
         </div>
       ) : null}
 

package/components/reference-source-preview.tsx

@@ -87,6 +87,31 @@ function PdfSourcePreview({ preview }: { preview: Extract<ReferenceSourcePreview
   );
 }
 
+/** Session memory of the server's answers, so reopening an item does not ask again. */
+const frameableAnswers = new Map<string, boolean>();
+
+/** Whether the page allows being shown in a frame: null while asking. A refused frame would be an empty box, so it is not shown. */
+function useFrameable(href: string | null): boolean | null {
+  const [answer, setAnswer] = useState<boolean | null>(() => (href ? frameableAnswers.get(href) ?? null : null));
+  useEffect(() => {
+    if (!href) return undefined;
+    const known = frameableAnswers.get(href);
+    if (known !== undefined) { setAnswer(known); return undefined; }
+    setAnswer(null);
+    let active = true;
+    fetch(`/api/newsroom/source-frameable?url=${encodeURIComponent(href)}`)
+      .then((response) => (response.ok ? response.json() : { frameable: false }))
+      .then((body: { frameable?: unknown }) => { frameableAnswers.set(href, body.frameable === true); if (active) setAnswer(body.frameable === true); })
+      .catch(() => { if (active) setAnswer(false); });
+    return () => { active = false; };
+  }, [href]);
+  return answer;
+}
+
+/**
+ * The live preview of the source, or nothing at all: a YouTube video or a PDF always has one; a web page only when the page allows
+ * being framed (asked of the server first). It sits under the link to the original, with no heading of its own.
+ */
 export function ReferenceSourcePreview({
   attachments = [],
   sourceUri,
@@ -95,6 +120,7 @@ export function ReferenceSourcePreview({
   sourceUri?: string | null;
 }) {
   const preview = resolveReferenceSourcePreview(sourceUri, attachments);
+  const frameable = useFrameable(preview?.kind === "html" ? preview.href : null);
   const pendingPdfPreview = !preview && attachments.some(
     (attachment) => isPdfAttachment(attachment) && Boolean(attachment.storagePath),
   );
@@ -139,6 +165,7 @@ export function ReferenceSourcePreview({
     return <PdfSourcePreview preview={preview} />;
   }
 
+  if (frameable !== true) return null;
   return (
     <div
       className="news-desk-reference-source-preview news-desk-reference-source-preview--html"
@@ -153,11 +180,6 @@ export function ReferenceSourcePreview({
           title={preview.label}
         />
       </div>
-      <p className="news-desk-reference-source-preview__actions">
-        <a href={preview.href} rel="noopener noreferrer" target="_blank">
-          {preview.label}
-        </a>
-      </p>
     </div>
   );
 }

package/components/review-rating-grid.tsx

@@ -13,6 +13,8 @@ import type { CardPrediction, ReviewChoice } from "./reference-review-card";
  * Feedback is never colour alone: before you answer the predicted cell is neutral-accent with a check or cross; after, it turns
  * green with a CircleCheck (Match) or red with a CircleX (Miss), and the confidence bar tints the same way. Your chosen button is
  * filled. Flat tones and rounded shapes only, no borders.
+ * The grid sizes itself to its own width (a container query), not the window's: on a narrow card the label column shrinks to its
+ * word, the padding tightens, and the confidence wraps under "Accept" instead of spilling out of its cell.
  */
 
 export type RatingFeedback = { phase: "idle" | "saving" | "saved" | "error"; message?: string };
@@ -81,9 +83,8 @@ export function RatingGrid({
   return (
     <div
       className={cn(
-        "grid gap-x-2 gap-y-2",
-        showPrediction ? "grid-cols-[4.5rem_minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-2",
-        showPrediction && size === "large" && "grid-cols-[5rem_minmax(0,1fr)_minmax(0,1fr)]",
+        "@container/rating grid gap-x-2 gap-y-2",
+        showPrediction ? "grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] @max-[17rem]/rating:gap-x-1.5" : "grid-cols-2",
       )}
       data-rating-grid
     >
@@ -95,7 +96,7 @@ export function RatingGrid({
           return (
             <span
               className={cn(
-                "flex flex-col items-center justify-center rounded-[16px] px-2 py-1.5 text-center",
+                "flex min-w-0 flex-col items-center justify-center rounded-[16px] px-2 py-1.5 text-center @max-[17rem]/rating:px-1",
                 cell,
                 !predicted && "bg-[var(--feed-control)]/45 text-muted-foreground",
                 predicted && !verdict && "bg-[var(--feed-control)] font-semibold text-[var(--primary)]",
@@ -106,12 +107,21 @@ export function RatingGrid({
               data-verdict={predicted && verdict ? verdict : undefined}
               key={choice}
             >
-              <span className="inline-flex items-center gap-1.5">
-                {Icon ? <Icon aria-hidden="true" className="size-4 shrink-0" /> : null}
-                {WORD[choice]}
-                {predicted && confidenceText ? <small className="text-xs font-normal opacity-80">{confidenceText}</small> : null}
+              {/* Wraps rather than overflows: when the cell is narrow, the confidence moves onto its own line. */}
+              <span className="flex max-w-full flex-wrap items-center justify-center gap-x-1.5 leading-tight">
+                <span className="inline-flex items-center gap-1">
+                  {Icon ? <Icon aria-hidden="true" className="size-4 shrink-0" /> : null}
+                  {WORD[choice]}
+                </span>
+                {/* The confidence and the verdict share one line, so a vote never makes the cell (or the card) taller. */}
+                {predicted && (confidenceText || verdict) ? (
+                  <small className="inline-flex items-center gap-1 whitespace-nowrap text-xs">
+                    {confidenceText ? <span className="font-normal opacity-80" data-cyclotron-confidence>{confidenceText}</span> : null}
+                    {confidenceText && verdict ? <span aria-hidden="true" className="opacity-60">·</span> : null}
+                    {verdict ? <span className="font-medium" data-verdict-word>{verdict === "match" ? "Match" : "Miss"}</span> : null}
+                  </small>
+                ) : null}
               </span>
-              {predicted && verdict ? <small className="text-xs font-medium" data-verdict-word>{verdict === "match" ? "Match" : "Miss"}</small> : null}
               {predicted && verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
             </span>
           );
@@ -151,7 +161,7 @@ export function RatingGrid({
               aria-disabled={disabled ? true : undefined}
               aria-pressed={on}
               className={cn(
-                "inline-flex items-center justify-center gap-1.5 rounded-[16px] px-2 font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                "inline-flex min-w-0 items-center justify-center gap-1.5 rounded-[16px] px-2 font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring @max-[17rem]/rating:gap-1 @max-[17rem]/rating:px-1",
                 cell,
                 on ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)] text-foreground hover:bg-[var(--feed-control)]/70",
                 disabled && !on && "opacity-60",

package/components/ui/auto-grow-textarea.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useLayoutEffect, useRef, type TextareaHTMLAttributes } from "react";
+
+/**
+ * A textarea as tall as its text. It never scrolls inside itself, so on a phone a swipe over it scrolls the page instead of
+ * getting caught in the box. (CSS `field-sizing: content` does the same where supported; the height is set here for the rest.)
+ */
+export function AutoGrowTextarea({ className, style, value, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    element.style.height = "auto";
+    element.style.height = `${element.scrollHeight}px`;
+  }, [value]);
+  return <textarea {...props} className={className} ref={ref} rows={props.rows ?? 2} style={{ ...style, overflow: "hidden", resize: "none" }} value={value} />;
+}

package/components/use-reference-ratings.ts

@@ -110,7 +110,9 @@ export function useRatingStore({ save, saved, seed, needsReason, sticky, saveNot
 
   const commit = useCallback(async (id: string, choice: ReviewChoice) => {
     if (finalDecision(id)) { void saveNoteOnly(id); return; }
-    const { note, reasonCode } = values(id);
+    const { note, reasonCode: chosenCode } = values(id);
+    // A typed reason is a reason: a Reject with words but no reason button is filed under "other" rather than left waiting.
+    const reasonCode = chosenCode ?? (choice === "reject" && note.trim() ? "other" : null);
     if (choice === "reject" && !reasonCode && (latest.current.needsReason?.(id) ?? true)) { patch(id, { pending: "reject", askReason: true }); return; }
     if (inFlight.current.has(id)) { dirty.current.add(id); return; }
     inFlight.current.add(id);
@@ -120,16 +122,19 @@ export function useRatingStore({ save, saved, seed, needsReason, sticky, saveNot
     try {
       await latest.current.save(id, choice, { note: note.trim(), reasonCode: choice === "reject" ? reasonCode : null });
       if (latest.current.sticky?.(id)) decidedHere.current.add(id);
-      // What was saved now follows the record again (another editor's update shows); anything typed meanwhile is kept.
+      // What was saved now follows the record again (another editor's update shows); anything typed meanwhile is kept. While another
+      // save is due (changed mid-save), the store keeps everything: the record may not show this save yet, and the next one sends it.
       const now = itemsRef.current[id] ?? EMPTY;
-      patch(id, { pending: null, feedback: { phase: "saved" }, ...(now.note === started.note ? { note: undefined } : {}), ...(now.reasonCode === started.reasonCode ? { reasonCode: undefined } : {}) });
+      const follow = !dirty.current.has(id);
+      patch(id, { pending: null, feedback: { phase: "saved" }, ...(follow && now.note === started.note ? { note: undefined } : {}), ...(follow && now.reasonCode === started.reasonCode ? { reasonCode: undefined } : {}) });
     } catch (failure) {
       // The typed reason stays in the store; only the vote is undone.
       patch(id, { pending: null, feedback: { phase: "error", message: failure instanceof Error ? failure.message : "Your answer could not be saved. Tap it again to retry." } });
     } finally {
       inFlight.current.delete(id);
     }
-    if (dirty.current.has(id)) { dirty.current.delete(id); const again = itemsRef.current[id]?.pending ?? latest.current.saved(id); if (again) void commit(id, again); }
+    // Changed while saving (a reason chip tapped mid-save): save again. The record may not show the vote yet, so fall back to it.
+    if (dirty.current.has(id)) { dirty.current.delete(id); const again = itemsRef.current[id]?.pending ?? latest.current.saved(id) ?? choice; if (again) void commit(id, again); }
   }, [patch, saveNoteOnly]);
 
   const effective = (id: string): ReviewChoice | null => itemsRef.current[id]?.pending ?? latest.current.saved(id);

package/lib/source-frameable.ts

@@ -0,0 +1,69 @@
+import { lookup } from "node:dns/promises";
+import { isIP } from "node:net";
+
+/**
+ * Whether a source page lets another site show it in a frame. Most news sites refuse (X-Frame-Options or a CSP frame-ancestors
+ * rule), and a refused frame is just an empty box, which the browser cannot detect from outside. So the newsroom asks here,
+ * on the server, before it shows a web page's live preview.
+ */
+
+/** True when the response headers allow framing by any site. A rule naming specific origins is treated as a refusal. */
+export function frameableFromHeaders(headers: Headers): boolean {
+  const xfo = headers.get("x-frame-options")?.trim().toLowerCase();
+  if (xfo && (xfo.includes("deny") || xfo.includes("sameorigin") || xfo.startsWith("allow-from"))) return false;
+  const csp = headers.get("content-security-policy");
+  if (csp) {
+    for (const directive of csp.split(";")) {
+      const [name, ...sources] = directive.trim().split(/\s+/);
+      if (name?.toLowerCase() !== "frame-ancestors") continue;
+      if (!sources.some((source) => source === "*" || source === "https:" || source === "http:")) return false;
+    }
+  }
+  return true;
+}
+
+/** Loopback, private, link-local and other non-public addresses, which the server must never be made to fetch. */
+export function isPrivateAddress(address: string): boolean {
+  const v4 = address.startsWith("::ffff:") ? address.slice(7) : address;
+  if (isIP(v4) === 4) {
+    const [a, b] = v4.split(".").map(Number);
+    return a === 0 || a === 10 || a === 127 || (a === 100 && b >= 64 && b <= 127) || (a === 169 && b === 254)
+      || (a === 172 && b >= 16 && b <= 31) || (a === 192 && b === 168) || a >= 224;
+  }
+  const v6 = address.toLowerCase();
+  return v6 === "::" || v6 === "::1" || v6.startsWith("fc") || v6.startsWith("fd") || v6.startsWith("fe80");
+}
+
+/** A plain public http(s) address on the default port whose host resolves only to public addresses, else null. */
+export async function publicHttpUrl(raw: string): Promise<URL | null> {
+  let url: URL;
+  try { url = new URL(raw); } catch { return null; }
+  if ((url.protocol !== "https:" && url.protocol !== "http:") || url.port || url.username || url.password) return null;
+  try {
+    const addresses = isIP(url.hostname) ? [{ address: url.hostname }] : await lookup(url.hostname, { all: true });
+    return addresses.length && addresses.every(({ address }) => !isPrivateAddress(address)) ? url : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Asks the page itself. Anything that fails (bad address, error status, timeout, too many redirects) counts as not frameable. */
+export async function checkSourceFrameable(raw: string, { timeoutMs = 5000, maxRedirects = 4 } = {}): Promise<boolean> {
+  let next = await publicHttpUrl(raw);
+  for (let hop = 0; next && hop <= maxRedirects; hop += 1) {
+    let response: Response;
+    try {
+      response = await fetch(next, { method: "GET", redirect: "manual", signal: AbortSignal.timeout(timeoutMs), headers: { accept: "text/html" } });
+    } catch {
+      return false;
+    }
+    void response.body?.cancel();
+    const location = response.headers.get("location");
+    if (response.status >= 300 && response.status < 400 && location) {
+      next = await publicHttpUrl(new URL(location, next).toString());
+      continue;
+    }
+    return response.ok && frameableFromHeaders(response.headers);
+  }
+  return false;
+}

package/package.json

@@ -114,7 +114,6 @@
     "./components/newsroom-mobile-navigation": "./components/newsroom-mobile-navigation.tsx",
     "./components/newsroom-ops-overview": "./components/newsroom-ops-overview.tsx",
     "./components/newsroom-ops-shell": "./components/newsroom-ops-shell.tsx",
-    "./components/newsroom-overview-skeleton": "./components/newsroom-overview-skeleton.tsx",
     "./components/newsroom-references-view": "./components/newsroom-references-view.tsx",
     "./components/newsroom-theme-fonts/broadsheet-green": "./components/newsroom-theme-fonts/broadsheet-green.tsx",
     "./components/newsroom-theme-fonts/newspaper-gothic": "./components/newsroom-theme-fonts/newspaper-gothic.tsx",
@@ -164,6 +163,7 @@
     "./components/story-reporting-trail-client": "./components/story-reporting-trail-client.ts",
     "./components/story-reporting-trail": "./components/story-reporting-trail.tsx",
     "./components/topic-steering-workspace": "./components/topic-steering-workspace.tsx",
+    "./components/ui/auto-grow-textarea": "./components/ui/auto-grow-textarea.tsx",
     "./components/ui/badge": "./components/ui/badge.tsx",
     "./components/ui/button-group": "./components/ui/button-group.tsx",
     "./components/ui/button": "./components/ui/button.tsx",
@@ -368,6 +368,7 @@
     "./lib/site-renderer": "./lib/site-renderer.ts",
     "./lib/site-section-suggestions": "./lib/site-section-suggestions.ts",
     "./lib/site-stack": "./lib/site-stack.ts",
+    "./lib/source-frameable": "./lib/source-frameable.ts",
     "./lib/staff-groups": "./lib/staff-groups.ts",
     "./lib/staging-gate": "./lib/staging-gate.ts",
     "./lib/staging-gated-path": "./lib/staging-gated-path.ts",
@@ -419,6 +420,7 @@
     "./app/api/newsroom/curation/context/route": "./app/api/newsroom/curation/context/route.ts",
     "./app/api/newsroom/curation/priming/route": "./app/api/newsroom/curation/priming/route.ts",
     "./app/api/newsroom/curation/publication/route": "./app/api/newsroom/curation/publication/route.ts",
+    "./app/api/newsroom/source-frameable/route": "./app/api/newsroom/source-frameable/route.ts",
     "./app/api/reader/comment/delete/route": "./app/api/reader/comment/delete/route.ts",
     "./app/api/reader/comment/edit/route": "./app/api/reader/comment/edit/route.ts",
     "./app/api/reader/comment/route": "./app/api/reader/comment/route.ts",
@@ -495,7 +497,7 @@
       "optional": true
     }
   },
-  "version": "5.49.0",
+  "version": "5.50.0",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-crypto/sha256-js": "5.2.0",

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.49.0",
+  "version": "5.50.0",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",
@@ -285,6 +285,17 @@
         "runtime": "\"nodejs\""
       }
     },
+    {
+      "file": "app/api/newsroom/source-frameable/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\"",
+        "runtime": "\"nodejs\""
+      }
+    },
     {
       "file": "app/api/reader/comment/delete/route.ts",
       "hasDefault": false,

package/components/newsroom-overview-skeleton.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-/** Placeholder geometry for the overview while private records or access are unresolved. */
-export function NewsroomOverviewSkeleton() {
-  return (
-    <div aria-label="Loading newsroom overview" className="space-y-8 font-sans" data-newsroom-overview-skeleton role="status">
-      <section className="newsroom-overview-feed-frame space-y-4 overflow-hidden rounded-xl border bg-card p-4" aria-label="Notification Center">
-        <div className="h-6 w-48 rounded bg-muted" />
-        <div className="h-4 w-3/4 max-w-xl rounded bg-muted" />
-        <div className="h-4 w-2/3 max-w-lg rounded bg-muted" />
-        <div className="grid gap-3 sm:grid-cols-2">
-          {Array.from({ length: 4 }, (_, index) => <div className="h-28 rounded-xl border bg-card p-4" key={index}>
-            <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
-          </div>)}
-        </div>
-      </section>
-      <section aria-label="Needs attention" className="space-y-3">
-        <div className="h-4 w-32 rounded bg-muted" />
-        <div className="h-16 rounded-xl border bg-card p-4"><div className="h-4 w-1/2 rounded bg-muted" /><div className="mt-2 h-3 w-1/3 rounded bg-muted" /></div>
-      </section>
-    </div>
-  );
-}