@anthusai/papyrus 5.48.0 → 5.49.0

package/components/needs-me-bodies.tsx

@@ -14,11 +14,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 +47,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 +76,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 +95,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": "" })}>
+      <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
+        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-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-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-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; }

package/components/newsroom-references-view.tsx

@@ -649,7 +649,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 +873,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 +927,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-review-card.tsx

@@ -270,7 +270,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 +285,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/use-reference-ratings.ts

@@ -41,20 +41,29 @@ export type RatingController = {
  * A Reject needs a reason code (the backend refuses one without), so it waits as `pending` until one is chosen; a typed reason is
  * kept in the store until it is saved and is never dropped by a failed save.
  */
-export function useRatingStore({ save, saved, seed, needsReason }: {
+export function useRatingStore({ save, saved, seed, needsReason, sticky, saveNote }: {
   save: RatingSave;
   saved: (id: string) => ReviewChoice | null;
   seed: (id: string) => { note: string; reasonCode: ReferenceRejectionReasonCode | null };
   /** Whether a Reject on this item must wait for a reason code. Default yes (a Reference); an AI draft or an email asks nothing. */
   needsReason?: (id: string) => boolean;
+  /**
+   * True for an item whose decision, once made, cannot be sent again (an AI draft moves its Proposal, a review request closes, a held email is
+   * queued). A reason typed after such a decision goes to `saveNote` instead, onto the decision that exists.
+   */
+  sticky?: (id: string) => boolean;
+  /** Saves the reason of an item that is already decided and sticky. Throws a sentence when it cannot. */
+  saveNote?: (id: string, note: string) => Promise<void>;
 }): RatingController {
   const [items, setItems] = useState<Record<string, ItemRating>>({});
   const itemsRef = useRef(items);
-  const latest = useRef({ save, saved, seed, needsReason });
-  latest.current = { save, saved, seed, needsReason };
+  const latest = useRef({ save, saved, seed, needsReason, sticky, saveNote });
+  latest.current = { save, saved, seed, needsReason, sticky, saveNote };
   const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
   const inFlight = useRef<Set<string>>(new Set());
   const dirty = useRef<Set<string>>(new Set());
+  const decidedHere = useRef<Set<string>>(new Set());
+  const noteInFlight = useRef<Set<string>>(new Set());
 
   const patch = useCallback((id: string, change: Partial<ItemRating>) => {
     const next = { ...itemsRef.current, [id]: { ...(itemsRef.current[id] ?? EMPTY), ...change } };
@@ -75,7 +84,32 @@ export function useRatingStore({ save, saved, seed, needsReason }: {
     return { note: item.note ?? seeded.note, reasonCode: item.reasonCode !== undefined ? item.reasonCode : seeded.reasonCode };
   };
 
+  /** True once a sticky item has its decision: from then on only its reason can change. */
+  const finalDecision = (id: string) => Boolean(latest.current.sticky?.(id) && latest.current.saveNote && (decidedHere.current.has(id) || latest.current.saved(id)));
+
+  /** A reason typed after the decision: saved onto it. The text stays in the store until it is saved, and a failed save never drops it. */
+  const saveNoteOnly = useCallback(async (id: string): Promise<void> => {
+    if (noteInFlight.current.has(id)) { dirty.current.add(`note:${id}`); return; }
+    noteInFlight.current.add(id);
+    dirty.current.delete(`note:${id}`);
+    const started = itemsRef.current[id]?.note;
+    const { note } = values(id);
+    patch(id, { feedback: { phase: "saving" } });
+    try {
+      await latest.current.saveNote!(id, note.trim());
+      const now = itemsRef.current[id];
+      patch(id, { feedback: { phase: "saved" }, ...(now?.note === started ? { note: undefined } : {}) });
+    } catch (failure) {
+      dirty.current.add(`note:${id}`); // still unsaved: tapping away, or the next pause, tries again
+      patch(id, { feedback: { phase: "error", message: failure instanceof Error ? failure.message : "Your note could not be saved. It is kept here; keep typing or tap away to try again." } });
+    } finally {
+      noteInFlight.current.delete(id);
+    }
+    if (itemsRef.current[id]?.feedback.phase !== "error" && dirty.current.delete(`note:${id}`)) void saveNoteOnly(id);
+  }, [patch]);
+
   const commit = useCallback(async (id: string, choice: ReviewChoice) => {
+    if (finalDecision(id)) { void saveNoteOnly(id); return; }
     const { note, reasonCode } = values(id);
     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; }
@@ -85,6 +119,7 @@ export function useRatingStore({ save, saved, seed, needsReason }: {
     patch(id, { pending: choice, askReason: false, feedback: { phase: "saving" } });
     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.
       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 } : {}) });
@@ -95,11 +130,12 @@ export function useRatingStore({ save, saved, seed, needsReason }: {
       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); }
-  }, [patch]);
+  }, [patch, saveNoteOnly]);
 
   const effective = (id: string): ReviewChoice | null => itemsRef.current[id]?.pending ?? latest.current.saved(id);
 
   const choose = useCallback((id: string, choice: ReviewChoice) => {
+    if (finalDecision(id)) return; // a decision that cannot be sent again is only ever given a reason, never a second vote
     if (effective(id) === choice && !itemsRef.current[id]?.askReason) return; // the chosen answer never unselects itself
     void commit(id, choice);
   }, [commit]);
@@ -128,7 +164,20 @@ export function useRatingStore({ save, saved, seed, needsReason }: {
 
   const cancelReason = useCallback((id: string) => patch(id, { pending: null, askReason: false }), [patch]);
 
-  useEffect(() => () => { for (const timer of Object.values(timers.current)) clearTimeout(timer); }, []);
+  // Leaving the page (or closing the view) saves what was typed and not yet saved, rather than dropping it.
+  const leaving = useRef<() => void>(() => undefined);
+  leaving.current = () => {
+    for (const key of [...dirty.current]) {
+      if (!key.startsWith("note:")) continue;
+      const id = key.slice(5);
+      const choice = effective(id);
+      if (choice && dirty.current.delete(key)) void commit(id, choice);
+    }
+  };
+  useEffect(() => () => {
+    for (const timer of Object.values(timers.current)) clearTimeout(timer);
+    leaving.current();
+  }, []);
 
   return { get, choose, setReason, setNote, commitNote, cancelReason };
 }

package/lib/review-client.ts

@@ -149,6 +149,22 @@ export async function saveDraftDecision(request: ReviewRequest, draftId: string,
   return normalizeReviewRow(result.data.updateReviewRequest);
 }
 
+/**
+ * Changes only the Why of an already decided draft or answered request (see `draftReasonUpdate` and `answerReasonUpdate`). The condition is that the
+ * request is still in the state it was read in, so a change cannot overwrite a request that closed or timed out meanwhile.
+ */
+export async function saveReviewReason(request: ReviewRequest, update: Record<string, unknown>): Promise<ReviewRequest> {
+  const result = await run(
+    `mutation Reason($input: UpdateReviewRequestInput!, $condition: ModelReviewRequestConditionInput) { updateReviewRequest(input: $input, condition: $condition) { ${FIELDS} } }`,
+    { input: update, condition: { state: { eq: request.state } } },
+  );
+  if (result.errors?.some((entry) => /conditional/i.test(`${entry.errorType ?? ""} ${entry.message ?? ""}`))) {
+    throw new Error("This request changed while you were writing. Your note is kept here; refresh, then save it again.");
+  }
+  if (result.errors?.length || !result.data?.updateReviewRequest) throw new Error("Your note could not be saved. It is kept here; keep typing or tap away to try again.");
+  return normalizeReviewRow(result.data.updateReviewRequest);
+}
+
 export type DraftLoad = { drafts: Record<string, DraftView>; missing: string[]; failed: string[] };
 
 /**

package/lib/review-drafts.ts

@@ -215,6 +215,38 @@ function quote(text: string): string {
   return `"${text.replace(/"/g, "'")}"`;
 }
 
+/** The words of an answer that covers several drafts: each rejection and each Why in a sentence, the plain Accepts of a mixed batch in one more. */
+export function draftFeedback(decisions: readonly (DraftDecision & { id: string })[]): string | null {
+  const rejected = decisions.filter((decision) => decision.choice === "reject");
+  const lines = decisions
+    .filter((decision) => decision.choice === "reject" || decision.why)
+    .map((decision) => `${decision.choice === "accept" ? "Accepted" : "Rejected"} ${quote(decision.title ?? decision.id)}${decision.notThisKind ? " as not this kind of story" : ""}${decision.why ? `: ${decision.why}` : ""}.`);
+  if (rejected.length > 0 && rejected.length < decisions.length) {
+    const kept = decisions.filter((decision) => decision.choice === "accept" && !decision.why).map((decision) => quote(decision.title ?? decision.id));
+    if (kept.length) lines.push(`Accepted ${kept.join(", ")}.`);
+  }
+  return lines.join(" ") || null;
+}
+
+/**
+ * The update that changes only the Why of a draft that is already decided. The Why is stored where the decision is: on the request's link
+ * for the draft and, once the request has closed, in its answer (`drafts` and the `feedback` sentence the idea pipeline reads back).
+ * The choice, the steering chip, who decided and when stay as they were. Applied with the condition that the state is unchanged.
+ */
+export function draftReasonUpdate(request: ReviewRequest, draftId: string, decision: DraftDecision, editor: string, now: Date): Record<string, unknown> {
+  const at = now.toISOString();
+  const why = decision.why?.trim() || null;
+  const next: DraftDecision = { ...decision, why };
+  const history = [...request.history, { at, event: "reason_edited", by: editor, note: `${decision.choice} ${draftId}` }].slice(-50);
+  const update: Record<string, unknown> = { id: request.id, links: JSON.stringify(withDecision(request, draftId, next)), updatedAt: at, history: JSON.stringify(history) };
+  if (request.answer?.drafts?.length && request.state === "answered") {
+    const known = request.answer.drafts;
+    const drafts = known.some((entry) => entry.id === draftId) ? known.map((entry) => (entry.id === draftId ? { ...entry, why } : entry)) : [...known, { ...next, id: draftId }];
+    update.answer = JSON.stringify({ ...request.answer, drafts, feedback: draftFeedback(drafts) });
+  }
+  return update;
+}
+
 /**
  * The answer that closes a request once every draft that can be decided has been: Accept on all is an approval, Reject on all a rejection,
  * a mix is an answer with a note naming each draft. A draft rejected as the wrong kind of story makes the answer a "not this kind" steer, which
@@ -230,21 +262,14 @@ export function batchAnswer(request: ReviewRequest, drafts: DraftLookup, fallbac
     decisions.push({ ...decision, title: decision.title ?? drafts[id]?.headline, id });
   }
   const rejected = decisions.filter((decision) => decision.choice === "reject");
-  const lines = decisions
-    .filter((decision) => decision.choice === "reject" || decision.why)
-    .map((decision) => `${decision.choice === "accept" ? "Accepted" : "Rejected"} ${quote(decision.title ?? decision.id)}${decision.notThisKind ? " as not this kind of story" : ""}${decision.why ? `: ${decision.why}` : ""}.`);
   const mixed = rejected.length > 0 && rejected.length < decisions.length;
-  if (mixed) {
-    const kept = decisions.filter((decision) => decision.choice === "accept" && !decision.why).map((decision) => quote(decision.title ?? decision.id));
-    if (kept.length) lines.push(`Accepted ${kept.join(", ")}.`);
-  }
   const links = request.links.some((link) => link.type === "proposal") ? request.links.map((link) => {
     const decision = decisions.find((entry) => entry.id === link.id);
     return decision ? { ...link, decision } : link;
   }) : [...request.links, ...decisions.map((decision) => ({ type: "proposal", id: decision.id, decision }))];
   return {
     decision: !rejected.length ? "approve" : mixed ? "feedback" : "reject",
-    feedback: lines.join(" ") || null,
+    feedback: draftFeedback(decisions),
     steer: rejected.some((decision) => decision.notThisKind) ? "not_this_kind" : null,
     drafts: decisions,
     links,

package/lib/review-requests.ts

@@ -108,6 +108,31 @@ export function answerUpdate(request: ReviewRequest, input: AnswerInput, by: str
   };
 }
 
+/**
+ * The update that changes only the note of a request that already has an answer (a hard gate, a stage review, an acknowledged flag).
+ * The decision, the steering signal, who answered and when stay as they were. Applied with the condition that the state is unchanged,
+ * so it cannot overwrite a request that timed out or was withdrawn in the meantime.
+ */
+export function answerReasonUpdate(request: ReviewRequest, why: string, editor: string, now: Date): Record<string, unknown> {
+  if (!request.answer) throw new Error("This request has no answer yet; answer it first.");
+  const at = now.toISOString();
+  const answer: ReviewAnswer = { ...request.answer, feedback: why.trim() || null };
+  const history = [...request.history, { at, event: "reason_edited", by: editor, note: request.answer.decision }].slice(-MAX_HISTORY);
+  return { id: request.id, answer: JSON.stringify(answer), updatedAt: at, history: JSON.stringify(history) };
+}
+
+/** A request with a stored update applied in memory, for the demo and the fixtures; the live data API returns the saved row instead. */
+export function applyReviewUpdate(request: ReviewRequest, update: Record<string, unknown>): ReviewRequest {
+  return {
+    ...request,
+    ...(typeof update.state === "string" ? { state: update.state as ReviewState } : {}),
+    ...(update.answer ? { answer: JSON.parse(String(update.answer)) } : {}),
+    ...(update.links ? { links: JSON.parse(String(update.links)) } : {}),
+    history: update.history ? JSON.parse(String(update.history)) : request.history,
+    updatedAt: String(update.updatedAt ?? request.updatedAt),
+  };
+}
+
 // --- words ------------------------------------------------------------------------------------------------
 
 export function formatWhen(iso: string | null | undefined): string {

package/package.json

@@ -495,7 +495,7 @@
       "optional": true
     }
   },
-  "version": "5.48.0",
+  "version": "5.49.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.48.0",
+  "version": "5.49.0",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",