@anthusai/papyrus 5.48.0 → 5.50.0

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>
@@ -649,7 +647,7 @@ export function NewsroomReferencesView({
     </div>
   );
   const queueBar = queue.length || caughtUp ? (
-    <ReviewQueueBar caughtUp={caughtUp} onNext={goNext} onPrevious={goPrevious} position={queuePosition} total={queue.length} />
+    <ReviewQueueBar anchored caughtUp={caughtUp} onNext={goNext} onPrevious={goPrevious} position={queuePosition} total={queue.length} />
   ) : null;
 
   const emptyLabel = canonicalReferences.length
@@ -873,7 +871,7 @@ 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)]",
+          "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)] md:pb-16 lg:w-[min(100%,28rem)]",
         )}
         data-newsroom-list-detail-shell
         data-news-desk-section="references"
@@ -927,7 +925,7 @@ export function NewsroomReferencesView({
           }}
           open={(mobileDetailOpen && Boolean(selectedReference)) || caughtUp}
         >
-          <SheetContent className="gap-0 rounded-t-[24px] bg-[var(--feed-card)] p-0" data-feed-flat="" data-feed-surface="" side="bottom" {...themeAttributes}>
+          <SheetContent className="gap-0 rounded-t-[length:var(--feed-radius-xl)] 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>

package/components/notification-center.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
 import type { EmailDecisionResult, MonitoringEmailDetails, MonitoringEmailSummary } from "../lib/monitoring-overview";
 import { proposalReceiptMessage, stateLabel, type ProposalReceipt } from "../lib/proposals-admin";
 import type { DraftLoad, ReviewLoad } from "../lib/review-client";
-import { acceptPath, batchAnswer, draftView, rejectPath, undecidedDraftIds, withDecision, draftDecisionUpdate, type DraftChoice, type DraftView } from "../lib/review-drafts";
+import { acceptPath, batchAnswer, draftDecisionOf, draftReasonUpdate, draftView, rejectPath, undecidedDraftIds, withDecision, draftDecisionUpdate, type DraftChoice, type DraftView } from "../lib/review-drafts";
 import { previewsBySourceAddress, recentDecisions } from "../lib/notification-feed";
-import { answerUpdate, cyclotronAutoDecided, draftIdsOf, isDraftReview, sectionReviews, type AnswerInput, type DraftDecision, type ReviewRequest } from "../lib/review-requests";
+import { answerReasonUpdate, answerUpdate, applyReviewUpdate, cyclotronAutoDecided, draftIdsOf, isDraftReview, sectionReviews, type AnswerInput, type DraftDecision, type ReviewRequest } from "../lib/review-requests";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import { learnFreshness } from "../lib/reference-feed-ranking";
 import { learnConfidenceThreshold, shapingThisWeek } from "../lib/needs-me-ranking";
@@ -42,6 +42,8 @@ export type NotificationApi = {
   loadStoryTitles: (ids: string[]) => Promise<{ titles: Record<string, string>; deleted: string[]; excerpts?: Record<string, string> }>;
   answerReviewRequest: (request: ReviewRequest, input: AnswerInput, by: string) => Promise<ReviewRequest>;
   saveDraftDecision: (request: ReviewRequest, draftId: string, decision: DraftDecision) => Promise<ReviewRequest>;
+  /** Changes only the Why of a draft or request that is already decided (`draftReasonUpdate`, `answerReasonUpdate`). Returns the saved request. */
+  saveReviewReason: (request: ReviewRequest, update: Record<string, unknown>) => Promise<ReviewRequest>;
   markReviewRead: (userKey: string, requestId: string) => Promise<void>;
   transitionProposalPath: (proposalId: string, path: readonly string[]) => Promise<ProposalReceipt>;
   /** Email submissions held for review (Monitoring's own read). Optional: a site without monitoring has none. */
@@ -56,6 +58,7 @@ const liveApi: NotificationApi = {
   loadStoryTitles: async (ids) => (await import("../lib/review-client")).loadStoryTitles(ids),
   answerReviewRequest: async (request, input, by) => (await import("../lib/review-client")).answerReviewRequest(request, input, by),
   saveDraftDecision: async (request, draftId, decision) => (await import("../lib/review-client")).saveDraftDecision(request, draftId, decision),
+  saveReviewReason: async (request, update) => (await import("../lib/review-client")).saveReviewReason(request, update),
   markReviewRead: async (userKey, requestId) => (await import("../lib/review-client")).markReviewRead(userKey, requestId),
   transitionProposalPath: async (proposalId, path) => (await import("../lib/proposals-client")).transitionProposalPath(proposalId, path),
   loadHeldEmails: async () => {
@@ -87,6 +90,7 @@ const demoApi: NotificationApi = {
     const update = draftDecisionUpdate(request, draftId, decision);
     return { ...request, links: JSON.parse(String(update.links)), history: JSON.parse(String(update.history)), updatedAt: String(update.updatedAt) };
   },
+  saveReviewReason: async (request, update) => applyReviewUpdate(request, update),
   markReviewRead: async () => undefined,
   transitionProposalPath: async () => ({ status: "ok" }),
   loadHeldEmails: async () => FIXTURE_HELD_EMAILS,
@@ -112,6 +116,8 @@ type ContainerProps = {
   /** A real-data preview (see scripts/export-notification-center-fixture.py); the invented sample otherwise. */
   fixture?: NotificationFixture | null;
   api?: NotificationApi;
+  /** Other page sections, shown at the end of the feed's own scroll. */
+  below?: ReactNode;
 };
 
 const REFRESH_MILLISECONDS = 60_000;
@@ -126,6 +132,7 @@ function previewState(): "loading" | "caught-up" | "sample" | "mixed" | null {
 const EMAIL_REFUSALS: Record<string, string> = {
   forbidden: "Your session cannot decide held email.",
   bad_request: "That email could not be decided from here.",
+  already_applied: "This email was already queued, so its reason can no longer be changed here.",
   already_decided: "Someone already decided this email. Refresh to see what they chose.",
   not_quarantined: "This email is no longer held.",
   expired: "This email expired and can no longer be accepted.",
@@ -133,7 +140,7 @@ const EMAIL_REFUSALS: Record<string, string> = {
 
 export function NotificationCenter({
   references, decisions, humanCuratedReferenceLineageIds = NO_VISIT, previews = NO_PREVIEWS, referencesLoading = false, predictionLoading = false, referenceDisabledReason = null,
-  onRateReference, referenceAttachments = NO_ATTACHMENTS, onCorrectCapture, actorLabel, demo, fixture = null, api: liveOverride = liveApi,
+  onRateReference, referenceAttachments = NO_ATTACHMENTS, onCorrectCapture, actorLabel, demo, fixture = null, api: liveOverride = liveApi, below,
 }: ContainerProps) {
   const api = demo ? demoApi : liveOverride;
   const [loadState, setLoadState] = useState<NotificationLoadState>("loading");
@@ -332,6 +339,54 @@ export function NotificationCenter({
     }
   }, [api, demo, drafts, draftsState, requests, stale]);
 
+  /** Accept or Reject a held email, or (the same choice again) correct the reason it was given. The reason shown is what the server recorded. */
+  const sendEmailDecision = useCallback(async (summary: MonitoringEmailSummary, choice: "accept" | "reject", why: string, editing = false) => {
+    const result = await api.decideEmail?.(summary.receiptId, choice, why);
+    if (!result) throw new Error("Held email cannot be decided from here.");
+    if (!("ok" in result)) throw new Error("error" in result ? EMAIL_REFUSALS[result.error] ?? "The decision could not be saved." : "The decision could not be saved right now. Try again in a minute.");
+    const plain = (text: string) => text.replace(/\s+/g, " ").trim().slice(0, 500);
+    const recorded = result.quarantine?.decision;
+    // The server keeps the first reason once it has queued the email; say so in words rather than showing a reason that was not kept.
+    if (editing && recorded && plain(recorded.reason) !== plain(why)) throw new Error(EMAIL_REFUSALS.already_applied);
+    const kept = recorded?.reason ?? plain(why);
+    setEmailsDecided((current) => new Map(current).set(summary.receiptId, choice));
+    setEmails((current) => current.map((entry) => (entry.receiptId === summary.receiptId
+      ? { ...entry, quarantine: { state: entry.quarantine?.state ?? "quarantined", failure: entry.quarantine?.failure ?? null, decision: { action: choice, by: recorded?.by || actorLabel, at: recorded?.at ?? new Date().toISOString(), reason: kept, viaGroup: recorded?.viaGroup } } }
+      : entry)));
+  }, [actorLabel, api]);
+
+  /**
+   * Changes only the Why of an item that is already decided, onto the decision that exists:
+   *   AI draft          the request's link for the draft (and, once the request has closed, its answer's drafts and feedback)
+   *   review request    the request's answer note (a hard gate, a stage review, an acknowledged flag)
+   *   held email        the same decision again with the new reason, so the Monitoring view updates the recorded reason
+   * A Proposal's own transitions carry only public reasons, so a private note is never written there.
+   */
+  const latest = useRef({ requests, drafts, emails, emailsDecided });
+  latest.current = { requests, drafts, emails, emailsDecided };
+  const editReason = useCallback(async (item: NeedsMeEntry, why: string) => {
+    const { payload } = item;
+    const now = new Date();
+    const store = (saved: ReviewRequest) => {
+      latest.current.requests = latest.current.requests.map((entry) => (entry.id === saved.id ? saved : entry));
+      setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
+    };
+    if (payload.kind === "draft") {
+      const request = latest.current.requests.find((entry) => entry.id === payload.item.request.id) ?? payload.item.request;
+      const view = latest.current.drafts[payload.item.draftId];
+      const decision = draftDecisionOf(request.links.find((link) => link.id === payload.item.draftId), view, { by: actorLabel, at: now.toISOString() });
+      if (!decision) throw new Error("This draft has not been decided yet.");
+      store(await api.saveReviewReason(request, draftReasonUpdate(request, payload.item.draftId, { ...decision, title: decision.title ?? view?.headline, why }, actorLabel, now)));
+    } else if (payload.kind === "request") {
+      const request = latest.current.requests.find((entry) => entry.id === payload.request.id) ?? payload.request;
+      store(await api.saveReviewReason(request, answerReasonUpdate(request, why, actorLabel, now)));
+    } else if (payload.kind === "email") {
+      const choice = latest.current.emailsDecided.get(payload.summary.receiptId) ?? payload.summary.quarantine?.decision?.action;
+      if (!choice) throw new Error("This email has not been decided yet.");
+      await sendEmailDecision(payload.summary, choice, why, true);
+    }
+  }, [actorLabel, api, sendEmailDecision]);
+
   /** One decision, whatever the type: it goes to the action that already owns that kind of thing. */
   const decide = useCallback(async (item: NeedsMeEntry, decision: NeedsMeDecision) => {
     const { payload } = item;
@@ -346,12 +401,9 @@ export function NotificationCenter({
       else if (decision.choice === "accept") await answer(request, { decision: "approve", feedback: decision.why || null });
       else await answer(request, { decision: "reject", feedback: decision.why || null, steer: decision.notThisKind ? "not_this_kind" : null });
     } else if (payload.kind === "email") {
-      const result = await api.decideEmail?.(payload.summary.receiptId, decision.choice, decision.why);
-      if (!result) throw new Error("Held email cannot be decided from here.");
-      if (!("ok" in result)) throw new Error("error" in result ? EMAIL_REFUSALS[result.error] ?? "The decision could not be saved." : "The decision could not be saved right now. Try again in a minute.");
-      setEmailsDecided((current) => new Map(current).set(payload.summary.receiptId, decision.choice));
+      await sendEmailDecision(payload.summary, decision.choice, decision.why);
     }
-  }, [answer, api, decideDraft, onRateReference]);
+  }, [answer, decideDraft, onRateReference, sendEmailDecision]);
 
   const shownReferences = preview === "caught-up" ? references.filter((reference) => normalizeReferenceCurationStatus(reference.curationStatus) !== "pending") : references;
   const bySource = useMemo(() => previewsBySourceAddress(shownReferences, previews), [shownReferences, previews]);
@@ -383,8 +435,8 @@ export function NotificationCenter({
 
   return (
     <NeedsMeView
-      captureTeaserLine={teaserLine} demo={demo} draftsFailed={draftsState === "failed"} entries={entries} error={error} freshness={freshness} legacyAuto={legacyAuto}
-      loadEmail={api.loadEmail} loadState={preview === "loading" ? "loading" : loadState} missingDraftCount={missingCount} now={now} onCorrectCapture={onCorrectCapture} onDecide={decide}
+      below={below} captureTeaserLine={teaserLine} demo={demo} draftsFailed={draftsState === "failed"} entries={entries} error={error} freshness={freshness} legacyAuto={legacyAuto}
+      loadEmail={api.loadEmail} loadState={preview === "loading" ? "loading" : loadState} missingDraftCount={missingCount} now={now} onCorrectCapture={onCorrectCapture} onDecide={decide} onEditReason={editReason}
       onRetryDrafts={() => void loadDraftsFor(requests)} predictionLoading={predictionLoading} recent={recent} referenceAttachments={referenceAttachments}
       referenceDisabledReason={referenceDisabledReason} referencesLoading={referencesLoading} settled={settled} shaping={shaping} stale={stale} threshold={threshold}
     />

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}
 
@@ -270,7 +288,10 @@ export function ReviewQueueBar({
   onPrevious,
   position,
   total,
+  anchored = false,
 }: {
+  /** On a wide screen, pin the bar to the bottom-right corner of the viewport (the detail column's width), whatever scrolls. A sheet's own bar is not anchored. */
+  anchored?: boolean;
   caughtUp?: boolean;
   onNext: () => void;
   onPrevious: () => void;
@@ -282,7 +303,8 @@ export function ReviewQueueBar({
   return (
     <nav
       aria-label="Review queue"
-      className="sticky bottom-0 z-10 flex shrink-0 items-center gap-2 border-t border-border bg-card px-3 py-2"
+      className={cn("sticky bottom-0 z-10 flex shrink-0 items-center gap-2 bg-[var(--feed-card)] px-3 py-2", anchored && "md:fixed md:bottom-0 md:right-0 md:w-[calc(24rem+1rem)] md:pr-7 lg:w-[calc(28rem+1rem)]")}
+      data-review-queue-anchored={anchored || undefined}
       data-review-queue-bar
     >
       <Button

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