@anthusai/papyrus 5.47.0 → 5.49.0

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { referenceDisplayTitle, referenceLineageId, formatReferenceListDate } from "../lib/newsroom-references";
+import { referenceMetadataField } from "../lib/reference-display";
+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 { decidedChoiceOf } from "./needs-me-shared";
+import { predictionFromDecision, ReviewCard, type CardPrediction } from "./reference-review-card";
+import { ReferenceCapturePanel } from "./reference-capture-panel";
+import { useReferenceCapture } from "./reference-capture-client";
+import { ReferenceSourcePreview } from "./reference-source-preview";
+import { ReferenceSuggestionProvenance } from "./reference-cyclotron-suggestion";
+import { useReferencePreviewAttachments } from "./use-reference-preview-attachments";
+
+function cardPrediction(item: NeedsMeEntry, predictionLoading: boolean): CardPrediction {
+  if (item.payload.kind === "reference" && item.payload.decision) return predictionFromDecision(item.payload.decision);
+  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. */
+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;
+  const lineageId = referenceLineageId(reference);
+  const status = normalizeReferenceCurationStatus(reference.curationStatus);
+  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 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}
+        itemId={item.id}
+        onDecide={async () => undefined}
+        prediction={cardPrediction(item, predictionLoading)}
+        ratings={ratings}
+        summary={summary}
+        title={referenceDisplayTitle(reference)}
+        titleHref={url}
+      >
+        {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>
+      <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>
+          <dd className="mt-1 text-foreground">{formatReferenceListDate(reference)}</dd>
+        </div>
+        <div>
+          <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Media</dt>
+          <dd className="mt-1 text-foreground">{reference.mediaType ?? "unknown"}</dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+

package/components/needs-me-shared.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { CheckIcon, CircleCheckIcon, Loader2Icon } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { NeedsMeEntry } from "../lib/needs-me-items";
+import type { ReviewChoice } from "./reference-review-card";
+
+/** References and captures are rated like the References feed: a reason code is asked for on Reject. */
+export function isReferenceLike(item: Pick<NeedsMeEntry, "type">): boolean {
+  return item.type === "reference" || item.type === "incomplete_capture";
+}
+
+export function decidedChoiceOf(item: Pick<NeedsMeEntry, "decisionState">): ReviewChoice | null {
+  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 (
+    <div className="space-y-2" data-flag-footer>
+      {done ? (
+        <p className="inline-flex min-h-12 items-center gap-1.5 text-sm font-medium" data-flag-acknowledged><CircleCheckIcon aria-hidden="true" className="size-4" />Acknowledged</p>
+      ) : (
+        <button
+          aria-disabled={busy || Boolean(disabledReason) || undefined}
+          className={cn("inline-flex min-h-12 w-full items-center justify-center gap-1.5 rounded-[16px] bg-[var(--feed-control)] px-3 text-sm font-semibold text-foreground outline-none transition-colors hover:bg-[var(--feed-control)]/70 focus-visible:ring-2 focus-visible:ring-ring", (busy || disabledReason) && "opacity-60")}
+          data-flag-acknowledge
+          onClick={() => { if (!busy && !disabledReason) onAcknowledge(); }}
+          type="button"
+        >
+          {busy ? <Loader2Icon aria-hidden="true" className="size-4 animate-spin" /> : <CheckIcon aria-hidden="true" className="size-4" />}
+          {busy ? "Saving…" : "Acknowledge"}
+        </button>
+      )}
+      {disabledReason && !done ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
+      {error ? <p className="text-xs text-destructive" role="alert">{error}</p> : null}
+    </div>
+  );
+}

package/components/newsroom-ops-overview.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
+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,12 +14,14 @@ 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";
 import type { NotificationFixture } from "./notification-center";
 import { NotificationCenter } from "./notification-center";
+import type { CorrectCaptureAction } from "./reference-capture-client";
 import type { ReviewChoice } from "./reference-review-card";
 
 type NewsroomOpsOverviewProps = {
@@ -38,7 +39,9 @@ type NewsroomOpsOverviewProps = {
   predictionState?: "loading" | "ready" | "error";
   /** Words for why a rating cannot be saved right now, or null. */
   disabledReason?: string | null;
-  onReview?: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: { reasonCode?: ReferenceRejectionReasonCode | null; decisionRelationId?: string; shareable?: boolean }) => Promise<void> | void;
+  onReview?: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: { reasonCode?: ReferenceRejectionReasonCode | null; note?: string; decisionRelationId?: string; shareable?: boolean }) => Promise<void> | void;
+  /** Saves a pasted or corrected capture (the `correctReferenceCapture` action). Without it the capture panel has no edit action. */
+  onCorrectCapture?: CorrectCaptureAction;
   /** Local real-data preview of the Notification Center (scripts/export-notification-center-fixture.py). */
   notificationFixture?: NotificationFixture | null;
 };
@@ -55,6 +58,7 @@ export function NewsroomOpsOverview({
   loading = false,
   newsroomSections,
   notificationFixture = null,
+  onCorrectCapture,
   onReview,
   predictionState = "ready",
   referenceAttachments = [],
@@ -62,7 +66,6 @@ export function NewsroomOpsOverview({
   savedCopy = null,
 }: NewsroomOpsOverviewProps) {
   const pathname = usePathname();
-  const router = useRouter();
   const liveReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
   // Until the live read arrives, a saved copy of the last view fills the page. It is display only.
   const showingSavedCopy = loading && !liveReferences.length && Boolean(savedCopy?.references.length);
@@ -72,14 +75,11 @@ export function NewsroomOpsOverview({
     const live = referencePreviewsByLineage(referenceAttachments);
     return showingSavedCopy && !live.size ? new Map(savedCopy!.previews) : live;
   }, [referenceAttachments, savedCopy, showingSavedCopy]);
-  const openReference = useCallback(
-    (lineageId: string) => router.push(getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo)),
-    [demo, router],
-  );
-  const rateReference = useCallback(async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => {
+  const rateReference = useCallback(async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null, note?: string) => {
     const decision = shownDecisions.get(referenceLineageId(reference));
     await onReview?.(reference, choice, {
       reasonCode: choice === "reject" ? reasonCode : null,
+      ...(note ? { note } : {}),
       ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
     });
   }, [onReview, shownDecisions]);
@@ -100,29 +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}
-            onOpenReference={openReference}
-            onRateReference={rateReference}
-            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>
@@ -133,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}
@@ -144,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>
                 );
               })}
@@ -164,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]">
@@ -184,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]">
@@ -197,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}
@@ -37,6 +37,13 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 @media (min-width:768px){
 .organizer-main:has(>[data-category-steering]>[data-news-desk-section=references]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
 .organizer-main>[data-category-steering]:has(>[data-news-desk-section=references]){display:flex;flex-direction:column;flex:1;min-height:0}
+.organizer-main:has(>[data-category-steering]>[data-newsroom-ops-home]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
+.organizer-main>[data-category-steering]:has(>[data-newsroom-ops-home]){display:flex;flex-direction:column;flex:1;min-height:0}
+[data-newsroom-ops-home]{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
+[data-newsroom-ops-home]>[data-newsroom-overview-feeds]{display:contents}
+[data-newsroom-overview-notifications]{display:flex;flex-direction:column;flex:0 0 100%;min-height:0}
+[data-newsroom-overview-notifications]>[data-notification-center]{flex:1;min-height:0}
+[data-newsroom-overview-feeds]>:not([data-newsroom-overview-notifications]){flex:none}
 }
 .organizer-native-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:8px}
 .organizer-board-view-toggle{display:flex;gap:4px;flex-shrink:0}
@@ -355,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. */
@@ -371,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));
@@ -385,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

@@ -42,6 +42,8 @@ import {
 import { normalizeReferenceCurationStatus, referenceReasonCode, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
+import { useReferencePreviewAttachments } from "./use-reference-preview-attachments";
+import { useMediaQuery } from "./use-media-query";
 import { FEED_SURFACE_PROPS, FEED_SURFACE_STYLE, ReferenceFeed } from "./reference-feed";
 import { ReferenceCapturePanel } from "./reference-capture-panel";
 import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capture-client";
@@ -88,10 +90,6 @@ import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyc
 import type { PrimingRequestView } from "../lib/relevance-status";
 import type { CyclotronStatus } from "cyclotron/cyclotron-status";
 import { awaitsEditorReview, type RelevanceCuration, type RelevanceDecisionView } from "../lib/relevance-decisions";
-import {
-  loadReferenceAttachmentsForLineageId,
-  loadStoragePathUrl,
-} from "./news-desk-taxonomy-client";
 
 type NewsroomReferencesViewProps = {
   /** Present only when the host has configured optional example priming. */
@@ -154,18 +152,6 @@ const STATUS_FILTERS: Array<{ key: ReferenceListFilter; label: string }> = [
   { key: "archived", label: "Archived" },
 ];
 
-function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    const update = () => setMatches(mediaQuery.matches);
-    update();
-    mediaQuery.addEventListener("change", update);
-    return () => mediaQuery.removeEventListener("change", update);
-  }, [query]);
-  return matches;
-}
-
 function buildReferenceDetailPath(lineageId: string, demo?: boolean): string {
   return getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo);
 }
@@ -177,100 +163,6 @@ function referenceUrl(reference: ReferenceRecord): string | null {
   return null;
 }
 
-function normalizeReferenceDetailHttpUri(value: string | null | undefined): string | null {
-  const trimmed = value?.trim();
-  if (!trimmed) return null;
-  if (/^https?:\/\//i.test(trimmed)) return trimmed;
-  return null;
-}
-
-function useReferencePreviewAttachments(
-  reference: ReferenceRecord | null,
-  referenceAttachments: ReferenceAttachmentRecord[],
-) {
-  const lineageId = reference ? referenceLineageId(reference) : "";
-  const seededAttachments = useMemo(
-    () => referenceAttachments.filter((attachment) => attachment.referenceLineageId === lineageId),
-    [lineageId, referenceAttachments],
-  );
-  const [attachments, setAttachments] = useState<ReferenceAttachmentRecord[]>(seededAttachments);
-  const [attachmentLinksById, setAttachmentLinksById] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    setAttachments(seededAttachments);
-  }, [seededAttachments]);
-
-  useEffect(() => {
-    if (!lineageId) return;
-    if (seededAttachments.length > 0) return;
-    let active = true;
-    void loadReferenceAttachmentsForLineageId(lineageId)
-      .then((loaded) => {
-        if (!active || !loaded.length) return;
-        setAttachments(loaded);
-      })
-      .catch(() => undefined);
-    return () => {
-      active = false;
-    };
-  }, [lineageId, seededAttachments.length]);
-
-  useEffect(() => {
-    if (!attachments.length) {
-      setAttachmentLinksById({});
-      return;
-    }
-    let active = true;
-    const staticLinks = new Map<string, string>();
-    const storageLookups: Array<{ id: string; storagePath: string }> = [];
-
-    for (const attachment of attachments) {
-      if (attachment.storagePath) {
-        storageLookups.push({ id: attachment.id, storagePath: attachment.storagePath });
-        continue;
-      }
-      const sourceHref = normalizeReferenceDetailHttpUri(attachment.sourceUri);
-      if (sourceHref) staticLinks.set(attachment.id, sourceHref);
-    }
-
-    if (!storageLookups.length) {
-      setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-      return () => {
-        active = false;
-      };
-    }
-
-    setAttachmentLinksById(Object.fromEntries(staticLinks.entries()));
-    void Promise.all(storageLookups.map(async (lookup) => {
-      const result = await loadStoragePathUrl(lookup.storagePath);
-      return { id: lookup.id, url: result.url };
-    }))
-      .then((resolved) => {
-        if (!active) return;
-        const nextLinks = Object.fromEntries(staticLinks.entries());
-        for (const entry of resolved) {
-          if (entry.url) nextLinks[entry.id] = entry.url;
-        }
-        setAttachmentLinksById(nextLinks);
-      })
-      .catch(() => undefined);
-
-    return () => {
-      active = false;
-    };
-  }, [attachments]);
-
-  const previewAttachments = useMemo(
-    () => attachments.map((attachment) => ({
-      ...attachment,
-      sourceUri: attachmentLinksById[attachment.id] ?? attachment.sourceUri,
-    })),
-    [attachmentLinksById, attachments],
-  );
-
-  return previewAttachments;
-}
-
 function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
   return awaitsEditorReview(reference.curationStatus, decision);
 }
@@ -757,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
@@ -981,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"
@@ -1035,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-cards.tsx

@@ -19,17 +19,22 @@ const CARD = "flex flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)]
 const PILL_BUTTON = cn(PILL, "min-h-9 bg-[var(--feed-control)] px-3.5 text-foreground hover:bg-[var(--feed-control)]/70");
 
 /** Pulsing placeholder cards in the shape of the real ones, on screen the moment the page opens. */
-export function NotificationSkeleton({ count = 3 }: { count?: number }) {
+export function NotificationSkeleton({ bare = false, count = 3 }: { bare?: boolean; count?: number }) {
   return (
     <div aria-busy="true" aria-label="Loading what needs you" className="space-y-6" data-notification-skeleton role="status" {...FEED_SURFACE_PROPS}>
-      <div className="space-y-3">
-        <div className="h-8 w-2/3 max-w-md animate-pulse rounded-full bg-[var(--feed-control)]" />
-        <div className="h-4 w-1/3 max-w-xs animate-pulse rounded-full bg-[var(--feed-control)]" />
-      </div>
-      <div className="flex gap-2">
-        {[0, 1, 2, 3].map((index) => <div className="h-9 w-24 animate-pulse rounded-full bg-[var(--feed-control)]" key={index} />)}
-      </div>
-      <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+      {bare ? null : (
+        <>
+          <div className="space-y-3">
+            <div className="h-8 w-2/3 max-w-md animate-pulse rounded-full bg-[var(--feed-control)]" />
+            <div className="h-4 w-1/3 max-w-xs animate-pulse rounded-full bg-[var(--feed-control)]" />
+          </div>
+          <div className="h-11 animate-pulse rounded-[20px] bg-[var(--feed-card)]" />
+          <div className="flex gap-2">
+            {[0, 1, 2, 3, 4].map((index) => <div className="h-9 w-24 animate-pulse rounded-full bg-[var(--feed-control)]" key={index} />)}
+          </div>
+        </>
+      )}
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-5">
         {Array.from({ length: count }, (_, index) => (
           <div className={CARD} key={index}>
             <div className="aspect-[16/10] animate-pulse bg-[var(--feed-control)]" />