@anthusai/papyrus 5.48.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";
@@ -14,11 +15,11 @@ import { DecidedLine } from "./notification-cards";
 import { SourceMark } from "./reference-feed";
 import { RatingGrid } from "./review-rating-grid";
 import type { RatingController } from "./use-reference-ratings";
-import { FlagFooter, decidedChoiceOf } from "./needs-me-shared";
+import { FlagFooter, decidedChoiceOf, recordedAnswer } from "./needs-me-shared";
 
 import type { CorrectCaptureAction } from "./reference-capture-client";
-/** What the editor typed before deciding an item that is not a Reference: the optional why, and the one steering chip. */
-export type DecisionExtras = { why: string; notThisKind: boolean };
+/** What the editor chose before deciding an item that is not a Reference: the one steering chip. (The Why lives in the rating store, so it can be typed before or after.) */
+export type DecisionExtras = { notThisKind: boolean };
 
 const CHIP = "inline-flex min-h-8 max-w-full items-center gap-1.5 rounded-full bg-[var(--feed-control)] px-2.5 text-xs font-medium text-foreground outline-none transition-colors hover:bg-[var(--feed-control)]/70 focus-visible:ring-2 focus-visible:ring-ring";
 const PILL_TOGGLE = "inline-flex min-h-8 items-center justify-center gap-1.5 rounded-full px-3 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring";
@@ -47,20 +48,27 @@ export function Heading({ item }: { item: NeedsMeEntry }) {
   );
 }
 
-/** What was recorded when the item was decided, for the line under the buttons. */
-function recordedAnswer(item: NeedsMeEntry): { why: string | null; notThisKind: boolean } {
-  const { payload } = item;
-  if (payload.kind === "draft") return { why: payload.item.decision?.why ?? null, notThisKind: Boolean(payload.item.decision?.notThisKind) };
-  if (payload.kind === "request") return { why: payload.request.answer?.feedback ?? null, notThisKind: payload.request.answer?.steer === "not_this_kind" };
-  if (payload.kind === "email") return { why: payload.summary.quarantine?.decision?.reason || null, notThisKind: false };
-  return { why: null, notThisKind: false };
-}
-
 function chipLabel(item: NeedsMeEntry): string | null {
   return item.type === "draft" ? "Not this kind of story" : item.type === "stage_review" ? "Not this kind of thing" : null;
 }
 
-/** Accept / Reject for everything that is not a Reference: an optional why (read when you tap), one steering chip on Reject, then the shared grid. */
+/** The save state of a Why edited after the decision, in words and a tick: never colour alone. */
+function ReasonStatus({ feedback, unsaved, hasReason }: { feedback: { phase: string; message?: string }; unsaved: boolean; hasReason: boolean }) {
+  return (
+    <div aria-live="polite" className="min-h-5 text-xs text-muted-foreground" data-reason-status={feedback.phase}>
+      {feedback.phase === "saving" ? <span className="inline-flex items-center gap-1"><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Saving…</span> : null}
+      {(feedback.phase === "saved" || (feedback.phase === "idle" && hasReason)) && !unsaved ? <span className="inline-flex items-center gap-1" data-reason-saved><CheckIcon aria-hidden="true" className="size-3.5" />Saved</span> : null}
+      {feedback.phase === "idle" && unsaved ? <span data-reason-unsaved>Not saved yet. It saves when you pause or tap away.</span> : null}
+      {feedback.phase === "error" ? <span className="text-destructive" role="alert">{feedback.message}</span> : null}
+    </div>
+  );
+}
+
+/**
+ * Accept / Reject for everything that is not a Reference. The Why box is always there, and the label and the explanation can come in either
+ * order: a Why typed first goes with the vote; a Why typed after the vote is saved onto that decision (when you pause or tap away), and
+ * it can be changed again whenever the item is reopened. A decided item keeps its Accept or Reject; only its Why stays editable.
+ */
 export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason, lockedNote }: Pick<DetailProps, "item" | "ratings" | "extras" | "onExtras" | "disabledReason"> & { lockedNote?: ReactNode }) {
   const rating = ratings.get(item.id);
   const decided = decidedChoiceOf(item);
@@ -69,6 +77,8 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
   const flag = item.type === "flag";
   const chip = chipLabel(item);
   const recorded = recordedAnswer(item);
+  const note = rating.note ?? "";
+  const unsaved = note.trim() !== (recorded.why ?? "").trim();
 
   // Desktop shortcuts: A accepts, R rejects. Never while typing, and never once decided.
   useEffect(() => {
@@ -86,25 +96,26 @@ 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": "" })}>
+      <AutoGrowTextarea
+        aria-label="Why? (optional)"
+        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)}
+        placeholder={flag ? "Why? Optional. Tell the step what to do differently." : "Why? Optional. Your note teaches the AI."}
+        value={note}
+      />
+      {locked ? <ReasonStatus feedback={rating.feedback} hasReason={Boolean(recorded.why)} unsaved={unsaved} /> : null}
       {locked ? (
         <>
           {item.decisionState === "acknowledged"
-            ? <p className="flex items-center gap-1.5 text-sm font-medium" data-flag-acknowledged><CircleCheckIcon aria-hidden="true" className="size-4" />Acknowledged{recorded.why ? <span className="font-normal text-muted-foreground">: {recorded.why}</span> : null}</p>
-            : <DecidedLine choice={decided ?? "accept"} notThisKind={recorded.notThisKind} why={recorded.why} />}
-          {flag ? null : <RatingGrid answer={decided} disabled feedback={{ phase: "saved" }} onChoose={() => undefined} prediction={{ state: "none" }} showPrediction={false} size="large" surface="footer" />}
+            ? <p className="flex items-center gap-1.5 text-sm font-medium" data-flag-acknowledged><CircleCheckIcon aria-hidden="true" className="size-4" />Acknowledged</p>
+            : <DecidedLine choice={decided ?? "accept"} notThisKind={recorded.notThisKind} />}
+          {flag ? null : <RatingGrid answer={decided} disabled feedback={{ phase: "idle" }} onChoose={() => undefined} prediction={{ state: "none" }} showPrediction={false} size="large" surface="footer" />}
           {lockedNote ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{lockedNote}</p> : null}
         </>
       ) : (
         <>
-          <textarea
-            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"
-            data-needs-me-why
-            onChange={(event) => onExtras({ ...extras, why: event.target.value })}
-            placeholder={flag ? "Why? Optional. Tell the step what to do differently." : "Why? Optional. Your note teaches the AI."}
-            readOnly={busy}
-            value={extras.why}
-          />
           {chip && !flag ? (
             <div className="flex flex-wrap items-center gap-2" data-review-reasons>
               <button

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-feed.tsx

@@ -24,7 +24,7 @@ import type { FeedFreshness } from "../lib/reference-feed-ranking";
 import type { RecentDecision } from "../lib/notification-feed";
 import { getKanbusTheme, SITE_BRAND } from "../lib/site-brand";
 import { NeedsMeDetail, type DecisionExtras } from "./needs-me-detail";
-import { FlagFooter, decidedChoiceOf, isReferenceLike } from "./needs-me-shared";
+import { FlagFooter, decidedChoiceOf, isReferenceLike, recordedAnswer } from "./needs-me-shared";
 import { NotificationSkeleton, RecentDecisions } from "./notification-cards";
 import { FEED_GRID, FEED_SURFACE_PROPS, FeedImage, PILL, REASON_LABELS, SourceMark } from "./reference-feed";
 import { predictionFromDecision, ReviewQueueBar, useQueueGestures, type CardPrediction, type ReviewChoice } from "./reference-review-card";
@@ -102,6 +102,9 @@ export function NeedsMeCard({ item, now, onOpen, predictionLoading, ratings, sel
   const feedback = rating.feedback.phase === "idle" && decided ? { phase: "saved" as const } : rating.feedback;
   const reason = item.payload.kind === "reference" ? rating.reasonCode : null;
   const reasonLabel = decided === "reject" && reason ? REASON_LABELS[reason] : null;
+  // A decided item shows the Why it was given (clipped; the whole text is edited in the detail pane).
+  const why = !refLike && locked ? rating.note?.trim() ?? "" : "";
+  const whyLine = why ? `Why: ${why.length > 90 ? `${why.slice(0, 89).trimEnd()}\u2026` : why}` : null;
   const time = item.payload.kind === "reference" ? item.payload.displayTime ?? item.createdAt : item.createdAt;
   const age = formatFeedAge(time, now);
   const picture = item.image || item.host ? <FeedImage host={item.host} lead={false} name={item.source} src={item.image} /> : <TypeTile type={item.type} />;
@@ -169,7 +172,7 @@ export function NeedsMeCard({ item, now, onOpen, predictionLoading, ratings, sel
             disabled={Boolean(disabledReason) || locked}
             disabledReason={disabledReason}
             feedback={feedback}
-            note={reasonLabel ? `Reason: ${reasonLabel}` : locked ? "Decided here." : null}
+            note={reasonLabel ? `Reason: ${reasonLabel}` : locked ? whyLine ?? "Decided here." : null}
             onChoose={(choice) => { if (!disabledReason && !locked) ratings.choose(item.id, choice); }}
             prediction={cardPrediction(item, predictionLoading)}
             showPrediction={refLike}
@@ -247,7 +250,7 @@ export function NeedsMeRecipe({ freshness, threshold }: { freshness: FeedFreshne
 // --- the view -----------------------------------------------------------------------------------------------------------
 
 export type NeedsMeLoadState = "loading" | "ready" | "forbidden" | "unavailable";
-const NO_EXTRAS: DecisionExtras = { why: "", notThisKind: false };
+const NO_EXTRAS: DecisionExtras = { notThisKind: false };
 const NO_ATTACHMENTS: ReferenceAttachmentRecord[] = [];
 
 export type NeedsMeViewProps = {
@@ -276,9 +279,13 @@ export type NeedsMeViewProps = {
   captureTeaserLine?: number;
   onCorrectCapture?: CorrectCaptureAction;
   onDecide: (item: NeedsMeEntry, decision: NeedsMeDecision) => Promise<void>;
+  /** Changes only the Why of an item that is already decided (an AI draft, a review request, a held email). Throws a sentence when it cannot. */
+  onEditReason?: (item: NeedsMeEntry, why: string) => Promise<void>;
   onRetryDrafts?: () => void;
   onOpened?: (item: NeedsMeEntry) => void;
   loadEmail?: (receiptId: string) => Promise<MonitoringEmailDetails>;
+  /** Other sections of the page (open assignments, sections). They scroll inside the feed, below the cards, so the feed and the detail keep the viewport's full height. */
+  below?: ReactNode;
 };
 
 function Note({ children, ...rest }: { children: ReactNode } & Record<string, unknown>) {
@@ -288,7 +295,7 @@ function Note({ children, ...rest }: { children: ReactNode } & Record<string, un
 /** The CMS console home: one feed that mixes everything that may need a person, with the References feed's cards and detail pane. */
 export function NeedsMeView({
   loadState, entries, freshness, threshold, now, shaping, recent, legacyAuto = [], settled, demo = false, stale = false, error = null, referencesLoading = false, predictionLoading = false,
-  referenceDisabledReason = null, draftsFailed = false, missingDraftCount = 0, initialFilter = "all", referenceAttachments = NO_ATTACHMENTS, captureTeaserLine, onCorrectCapture, onDecide, onRetryDrafts, onOpened, loadEmail,
+  referenceDisabledReason = null, draftsFailed = false, missingDraftCount = 0, initialFilter = "all", referenceAttachments = NO_ATTACHMENTS, captureTeaserLine, onCorrectCapture, onDecide, onEditReason, onRetryDrafts, onOpened, loadEmail, below,
 }: NeedsMeViewProps) {
   const themeMode = useResolvedPapyrusTheme();
   const themeAttributes = { "data-kanbus-theme": getKanbusTheme(SITE_BRAND), "data-color-mode": themeMode };
@@ -319,13 +326,22 @@ export function NeedsMeView({
       const item = latest.current.byId.get(id);
       if (!item) throw new Error("This item is no longer in the list.");
       const typed = latest.current.extras[id] ?? NO_EXTRAS;
-      const referenceLike = isReferenceLike(item);
-      await onDecide(item, { choice, reasonCode: detail.reasonCode, why: referenceLike ? detail.note : typed.why.trim(), notThisKind: choice === "reject" && typed.notThisKind });
+      await onDecide(item, { choice, reasonCode: detail.reasonCode, why: detail.note, notThisKind: choice === "reject" && typed.notThisKind });
     },
-    saved: (id) => { const item = latest.current.byId.get(id); return item ? decidedChoiceOf(item) : null; },
+    // The Why of an AI draft, a review request or a held email is typed in either order and edited after the decision, onto that decision.
+    sticky: (id) => { const item = latest.current.byId.get(id); return item ? !isReferenceLike(item) : false; },
+    saveNote: async (id, note) => {
+      const item = latest.current.byId.get(id);
+      if (!item) throw new Error("This item is no longer in the list.");
+      if (!onEditReason) throw new Error("A reason cannot be changed here.");
+      await onEditReason(item, note);
+    },
+    // An acknowledged flag counts as an Accept: it is decided, and only its note can change.
+    saved: (id) => { const item = latest.current.byId.get(id); return item ? decidedChoiceOf(item) ?? (item.decisionState === "acknowledged" ? "accept" : null) : null; },
     seed: (id) => {
       const item = latest.current.byId.get(id);
-      if (!item || item.payload.kind !== "reference") return { note: "", reasonCode: null };
+      if (!item) return { note: "", reasonCode: null };
+      if (item.payload.kind !== "reference") return { note: recordedAnswer(item).why ?? "", reasonCode: null };
       const { reference } = item.payload;
       const pending = normalizeReferenceCurationStatus(reference.curationStatus) === "pending";
       return { note: pending ? "" : reference.curationStatusReason ?? "", reasonCode: referenceReasonCode(reference) ?? null };
@@ -384,12 +400,12 @@ export function NeedsMeView({
     </div>
   );
   const queueBar = queue.length || caughtUp ? (
-    <ReviewQueueBar caughtUp={caughtUp} onNext={goNext} onPrevious={goPrevious} position={selectedIndex >= 0 ? selectedIndex + 1 : null} total={queue.length} />
+    <ReviewQueueBar anchored caughtUp={caughtUp} onNext={goNext} onPrevious={goPrevious} position={selectedIndex >= 0 ? selectedIndex + 1 : null} total={queue.length} />
   ) : null;
 
   return (
-    <div className="@container flex flex-col gap-5 md:h-full md:flex-row md:items-stretch" data-detail-reserved="true" data-notification-center {...FEED_SURFACE_PROPS}>
-      <div className="min-w-0 flex-1 space-y-6 pb-6 md:min-h-0 md:overflow-y-auto md:pr-1" data-needs-me-main data-needs-me-scroll>
+    <div className="flex flex-col gap-5 md:h-full md:flex-row md:items-stretch" data-detail-reserved="true" data-notification-center {...FEED_SURFACE_PROPS}>
+      <div className="@container min-w-0 flex-1 space-y-6 pb-6 md:min-h-0 md:overflow-y-auto md:pr-1" data-needs-me-main data-needs-me-scroll>
         <header className="space-y-4">
           <div className="space-y-1.5">
             <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl" data-notification-title>What needs me?</h1>
@@ -523,11 +539,12 @@ export function NeedsMeView({
             <RecentDecisions entries={recent} />
           </section>
         ) : null}
+        {below}
       </div>
 
       <aside
         aria-label="Detail"
-        className="hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:flex md:h-full md:w-[min(100%,24rem)] lg:w-[min(100%,28rem)]"
+        className="hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:flex md:h-full md:w-[min(100%,24rem)] md:pb-16 lg:w-[min(100%,28rem)]"
         data-feed-flat=""
         data-needs-me-detail-shell
         data-detail-open={selected ? "true" : "false"}
@@ -545,7 +562,7 @@ export function NeedsMeView({
 
       {isMobile ? (
         <Sheet onOpenChange={(open) => { if (!open) closeDetail(); else setSheetOpen(true); }} open={(sheetOpen && Boolean(selected)) || caughtUp}>
-          <SheetContent className="gap-0 rounded-t-[24px] bg-[var(--feed-card)] p-0" data-feed-flat="" data-feed-surface="" initialFocus={false} 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="" initialFocus={false} side="bottom" {...themeAttributes}>
             <SheetHeader className="px-4 py-3"><SheetTitle className="text-left text-base">{selected ? NEEDS_ME_TYPE_LABELS[selected.type] : "Detail"}</SheetTitle></SheetHeader>
             {selected ? (
               <div className="min-w-0" data-review-gestures onPointerDown={gestures.onPointerDown} onPointerUp={gestures.onPointerUp} style={gestures.style}>

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/needs-me-shared.tsx

@@ -14,6 +14,15 @@ export function decidedChoiceOf(item: Pick<NeedsMeEntry, "decisionState">): Revi
   return item.decisionState === "accepted" ? "accept" : item.decisionState === "rejected" ? "reject" : null;
 }
 
+/** What was recorded when a non-Reference item was decided: its Why, and whether it was rejected as "not this kind". Shown again whenever the item is reopened. */
+export function recordedAnswer(item: NeedsMeEntry): { why: string | null; notThisKind: boolean } {
+  const { payload } = item;
+  if (payload.kind === "draft") return { why: payload.item.decision?.why ?? null, notThisKind: Boolean(payload.item.decision?.notThisKind) };
+  if (payload.kind === "request") return { why: payload.request.answer?.feedback ?? null, notThisKind: payload.request.answer?.steer === "not_this_kind" };
+  if (payload.kind === "email") return { why: payload.summary.quarantine?.decision?.reason || null, notThisKind: false };
+  return { why: null, notThisKind: false };
+}
+
 /** A flag is information, not a question: one Acknowledge button in the footer's own tone. */
 export function FlagFooter({ busy, disabledReason, done, error, onAcknowledge }: { busy: boolean; disabledReason: string | null; done: boolean; error: string | null; onAcknowledge: () => void }) {
   return (

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-ops-overview.tsx

@@ -3,7 +3,6 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import { Badge } from "./ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
 import type { AssignmentRecord, NewsroomSectionRecord, ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
@@ -15,7 +14,8 @@ import {
   newsroomDeskKind,
   sortNewsroomSections,
 } from "../lib/newsroom-sections";
-import { newsroomInboxRowClassName } from "../lib/newsroom-list-selection";
+import { cn } from "../lib/utils";
+import { FEED_SURFACE_PROPS } from "./reference-feed";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
@@ -100,30 +100,8 @@ export function NewsroomOpsOverview({
   const rotatingDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "rotating"), [desks]);
   const rateDisabled = disabledReason ?? (showingSavedCopy ? "Confirming your sign-in. You can answer in a moment." : null);
 
-  return (
-    <div
-      className="space-y-12 font-sans"
-      data-news-desk-section="overview"
-      data-newsroom-ops-home="true"
-    >
-      <div className="space-y-12" data-newsroom-overview-feeds>
-        <div data-newsroom-overview-notifications>
-          <NotificationCenter
-            actorLabel={actorLabel}
-            decisions={shownDecisions}
-            demo={demo}
-            fixture={notificationFixture}
-            humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
-            onCorrectCapture={onCorrectCapture}
-            onRateReference={rateReference}
-            referenceAttachments={referenceAttachments}
-            predictionLoading={predictionState === "loading"}
-            previews={previews}
-            referenceDisabledReason={rateDisabled}
-            references={canonicalReferences}
-            referencesLoading={loading && !canonicalReferences.length}
-          />
-        </div>
+  const below = (
+    <div className="space-y-12 pt-6" data-newsroom-overview-below {...FEED_SURFACE_PROPS}>
         {attentionAssignments.length ? (
           <section aria-label="Open assignments" className="space-y-3">
             <h2 className="text-sm font-medium text-muted-foreground">Open assignments</h2>
@@ -134,7 +112,7 @@ export function NewsroomOpsOverview({
                 return (
                   <Link
                     aria-current={active ? "true" : undefined}
-                    className={newsroomInboxRowClassName(active)}
+                    className={cn("flex items-start gap-3 rounded-[16px] bg-[var(--feed-card)] p-3 text-foreground outline-none transition-colors hover:bg-[var(--feed-control)] focus-visible:ring-2 focus-visible:ring-ring", active && "bg-[var(--feed-control)]")}
                     data-newsroom-inbox-item="assignment"
                     data-newsroom-list-row
                     data-selected={active || undefined}
@@ -145,7 +123,7 @@ export function NewsroomOpsOverview({
                       <p className="truncate text-sm font-medium text-foreground">{assignment.title}</p>
                       <p className="text-xs text-muted-foreground">Assignment · {assignment.assignmentTypeKey}</p>
                     </div>
-                    <Badge className="mt-0.5 shrink-0" variant="secondary">{assignment.status}</Badge>
+                    <span className="mt-0.5 shrink-0 rounded-full bg-[var(--feed-control)] px-2 py-0.5 text-xs font-medium">{assignment.status}</span>
                   </Link>
                 );
               })}
@@ -165,7 +143,7 @@ export function NewsroomOpsOverview({
                   href={buildNewsroomSectionHref(section.id, demo)}
                   key={section.id}
                 >
-                  <Card className="h-full transition-colors hover:border-primary/30">
+                  <Card className="h-full rounded-[20px] border-0 bg-[var(--feed-card)] shadow-none ring-0 transition-colors hover:bg-[var(--feed-control)]">
                     <CardHeader className="p-4">
                       <CardTitle className="text-base font-semibold">{section.title}</CardTitle>
                       <CardDescription className="uppercase tracking-wide text-[0.65rem]">
@@ -185,7 +163,7 @@ export function NewsroomOpsOverview({
                   href={buildNewsroomSectionHref(section.id, demo)}
                   key={section.id}
                 >
-                  <Card className="h-full transition-colors hover:border-primary/30">
+                  <Card className="h-full rounded-[20px] border-0 bg-[var(--feed-card)] shadow-none ring-0 transition-colors hover:bg-[var(--feed-control)]">
                     <CardHeader className="p-4">
                       <CardTitle className="text-base font-semibold">{section.title}</CardTitle>
                       <CardDescription className="uppercase tracking-wide text-[0.65rem]">
@@ -198,6 +176,34 @@ export function NewsroomOpsOverview({
             </div> : null}
           </section>
         ) : null}
+    </div>
+  );
+
+  return (
+    <div
+      className="h-full font-sans"
+      data-news-desk-section="overview"
+      data-newsroom-ops-home="true"
+    >
+      <div className="h-full" data-newsroom-overview-feeds>
+        <div className="h-full" data-newsroom-overview-notifications>
+          <NotificationCenter
+            below={below}
+            actorLabel={actorLabel}
+            decisions={shownDecisions}
+            demo={demo}
+            fixture={notificationFixture}
+            humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
+            onCorrectCapture={onCorrectCapture}
+            onRateReference={rateReference}
+            referenceAttachments={referenceAttachments}
+            predictionLoading={predictionState === "loading"}
+            previews={previews}
+            referenceDisabledReason={rateDisabled}
+            references={canonicalReferences}
+            referencesLoading={loading && !canonicalReferences.length}
+          />
+        </div>
       </div>
     </div>
   );

package/components/newsroom-ops-shell.tsx

@@ -210,10 +210,10 @@ export function NewsroomOpsStatusBanner({
   return (
     <div
       className={cn(
-        "mb-4 rounded-xl border px-3 py-2 text-sm",
-        tone === "error" && "border-destructive/30 bg-destructive/10 text-destructive",
-        tone === "ok" && "border-primary/20 bg-primary/10 text-foreground",
-        tone === "info" && "border-border bg-muted/40 text-foreground",
+        // A success is announced to screen readers and never drawn: it would push the page down. Errors and notes are flat fills, no outlines.
+        tone === "ok" ? "sr-only" : "mb-4 rounded-lg px-3 py-2 text-sm",
+        tone === "error" && "bg-destructive/10 text-destructive",
+        tone === "info" && "bg-muted/60 text-foreground",
       )}
       role="status"
     >

package/components/newsroom-organizer.css

@@ -16,7 +16,7 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-destinations a[aria-current=page]{color:var(--org-ink);box-shadow:inset 3px 0 0 var(--org-accent)}
 .newsroom-organizer :is(a,button):focus-visible,.organizer-menu :is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:-3px}
 .organizer-workspace{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;padding:0 16px}
-.organizer-topbar{height:48px;min-height:48px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--org-line)}
+.organizer-topbar{height:48px;min-height:48px;display:flex;align-items:center;gap:16px}
 .organizer-masthead{font:900 28px var(--font-wordmark),Georgia,serif;white-space:nowrap;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
 .organizer-masthead-logo{display:block;height:24px;width:auto;max-width:36vw;overflow:visible}
 .organizer-topbar h1{font:400 12px var(--kb-theme-ui-font);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
@@ -362,15 +362,21 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
    The newsroom chrome squares every "rounded" class above; inside a [data-feed-surface] the rounded classes mean what they say.
    The repeated attribute raises specificity over the squaring rules without !important escalation. */
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-full"],
-.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-full"] { border-radius: 9999px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-full"] { border-radius: var(--feed-radius-pill) !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[20px]"],
-.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: 20px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: var(--feed-radius-lg) !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-2xl"],
-.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: var(--feed-radius-md) !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[16px]"],
-.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: var(--feed-radius-md) !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-3xl"],
-.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: 24px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: var(--feed-radius-xl) !important; }
+
+/* The mobile sheet is portaled outside .newsroom-organizer; it carries the theme attributes itself, so the same radii apply inside it. */
+[data-kanbus-theme][data-feed-surface] [class*="rounded-full"] { border-radius: var(--feed-radius-pill) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-[20px]"] { border-radius: var(--feed-radius-lg) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-2xl"], [data-kanbus-theme][data-feed-surface] [class*="rounded-[16px]"] { border-radius: var(--feed-radius-md) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-3xl"] { border-radius: var(--feed-radius-xl) !important; }
 
 /* Feed tones. Light: cards a touch lighter than the page, footers between, controls a touch darker. Dark: each step lifts toward the ink.
    Also set on the portaled mobile sheet, which carries the theme attributes itself. */
@@ -378,6 +384,12 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
   --feed-card: color-mix(in oklab, var(--kb-theme-paper) 35%, white);
   --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 70%, white);
   --feed-control: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+  /* Corner radii of the whole feed layer, in one place (Ryan, 2026-10-27: half of the first design). lg: cards and the detail pane;
+     md: rating cells, buttons, textareas; xl: sheets; pill: chips, filters and toggles (a rounded rectangle, not a capsule). */
+  --feed-radius-xl: 12px;
+  --feed-radius-lg: 10px;
+  --feed-radius-md: 8px;
+  --feed-radius-pill: 8px;
 }
 [data-kanbus-theme][data-color-mode="dark"] [data-feed-surface], [data-kanbus-theme][data-color-mode="dark"][data-feed-surface] {
   --feed-card: color-mix(in oklab, var(--kb-theme-paper) 94%, var(--kb-theme-ink));
@@ -392,16 +404,16 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] *:not(:focus-visible) { box-shadow: none; }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is([data-slot=separator], hr) { display: none !important; }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button], [data-slot=badge]):not([aria-pressed=true]):not([data-slot=sheet-close]):not([class*="hover:bg-muted"]) {
-  background: var(--feed-control) !important; border-radius: 9999px !important; color: var(--foreground, inherit);
+  background: var(--feed-control) !important; border-radius: var(--feed-radius-pill) !important; color: var(--foreground, inherit);
 }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true]:not([class*="destructive"]) {
-  background: var(--primary) !important; color: var(--primary-foreground) !important; border-radius: 9999px !important;
+  background: var(--primary) !important; color: var(--primary-foreground) !important; border-radius: var(--feed-radius-pill) !important;
 }
-[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true][class*="destructive"] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true][class*="destructive"] { border-radius: var(--feed-radius-pill) !important; }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(textarea, input:not([type=radio]):not([type=checkbox]), select, details, [data-cyclotron-choice]:not([data-predicted])) {
   background: var(--feed-control) !important; border-radius: 16px !important;
 }
-[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: var(--feed-radius-pill) !important; }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-review-queue-bar] { background: var(--feed-footer) !important; }
 /* The rating grid keeps its own rounded rectangles in the borderless panes (not the pill shape the flat rules give other buttons). */
-[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: 16px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: var(--feed-radius-md) !important; }