@anthusai/papyrus 5.49.0 → 5.51.0

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

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

package/components/newsroom-access-gate.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { newsroomHref } from "../lib/newsroom-base-path";
 import Link from "next/link";
 import { SITE_BRAND } from "../lib/site-brand";
 import type { NewsDeskShellState } from "../lib/news-desk-session";
 import { cn } from "../lib/utils";
 import { NewsroomOpsShell } from "./newsroom-ops-shell";
-import { NewsroomOverviewSkeleton } from "./newsroom-overview-skeleton";
+import { NotificationSkeleton } from "./notification-cards";
 import { ReaderAuthControl } from "./reader-auth-control";
 import { buttonVariants } from "./ui/button";
 import { ReferencesPageLoading } from "./references-page-loading";
@@ -23,24 +22,15 @@ export function NewsDeskAccessGate({ initialTab, shell, showSectionTabs = false
       backHref="/"
       backLabel={SITE_BRAND.backToHomeLabel}
       headerActions={(
-        <Link className={cn(buttonVariants({ variant: "ghost", size: "sm" }))} href="/settings">Settings</Link>
+        <Link className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "organizer-header-settings")} href="/settings">Settings</Link>
       )}
       pageTitle={referencesPage ? "References" : showSectionTabs ? "Notification Center" : "Newsroom"}
       showNavigation={showSectionTabs || referencesPage}
     >
-      {pending && referencesPage ? <ReferencesPageLoading /> : pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
-        <div aria-label="Loading newsroom" className="space-y-4" data-newsroom-page-skeleton role="status">
-          <div className="h-6 w-48 rounded bg-muted" />
-          <div className="h-4 w-3/4 rounded bg-muted" />
-          <div className="grid gap-3 sm:grid-cols-2">
-            {Array.from({ length: 4 }, (_, index) => <div className="h-32 rounded-xl border bg-card p-4" key={index}>
-              <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
-            </div>)}
-          </div>
-        </div>
-      )) : (
+      {/* The loading state is the feed's own skeleton, so what loads replaces it in place. */}
+      {pending && referencesPage ? <ReferencesPageLoading /> : pending ? <NotificationSkeleton bare={!showSectionTabs} count={4} /> : (
       <section aria-live="polite" data-news-desk-access={accessPhase} data-news-desk-access-phase={accessPhase}>
-        <div className="space-y-3 rounded-xl border border-border bg-card p-6">
+        <div className="space-y-3 rounded-xl bg-card p-6">
           <p className="m-0 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Access</p>
           <h2 className="m-0 font-sans text-xl font-semibold tracking-tight">{formatAccessTitle(shell)}</h2>
           <p className="m-0 text-sm text-muted-foreground">{formatAccessDetail(shell)}</p>
@@ -48,7 +38,8 @@ export function NewsDeskAccessGate({ initialTab, shell, showSectionTabs = false
           <p className="m-0 text-sm text-foreground">{formatAccessActionDetail(shell)}</p>
           {shell?.phase === "signedOut" || shell?.phase === "error" ? (
             <div className="news-desk-access-panel__auth">
-              <ReaderAuthControl postAuthPath={newsroomHref()} showIdentity />
+              {/* No fixed return path: sign-in comes back to the page that asked, so a deep link survives it. */}
+              <ReaderAuthControl showIdentity />
             </div>
           ) : null}
         </div>

package/components/newsroom-ops-shell.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { SearchIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { Separator } from "./ui/separator";
 import { cn } from "../lib/utils";
@@ -179,27 +178,6 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
   </div>;
 }
 
-export function NewsroomOpsSearchButton({
-  disabled,
-  onPress,
-}: {
-  disabled?: boolean;
-  onPress?: () => void;
-}) {
-  return (
-    <Button
-      aria-label="Search knowledge base"
-      disabled={disabled}
-      onClick={onPress}
-      size="icon-sm"
-      type="button"
-      variant="outline"
-    >
-      <SearchIcon className="size-4" />
-    </Button>
-  );
-}
-
 export function NewsroomOpsStatusBanner({
   children,
   tone = "info",

package/components/newsroom-organizer.css

@@ -417,3 +417,22 @@ 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] [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: var(--feed-radius-md) !important; }
+
+/* Flat chrome (Ryan, 2026-10-28): the shell has no outlines or rules either. Controls are tone fills in rounded rectangles; on a phone the
+   page's own heading names the page, so the bar keeps one search field and the account button, nothing cut off. */
+.newsroom-organizer,.organizer-menu,.organizer-account-popup{--org-control:color-mix(in oklab,var(--org-paper) 90%,var(--org-ink))}
+.organizer-sidebar{border-right:0}
+.organizer-search{border-bottom:0;background:var(--org-control);border-radius:8px;padding:6px 10px}
+.newsroom-organizer button.organizer-toggle,.newsroom-organizer button.organizer-account{border:0;background:var(--org-control);border-radius:8px !important}
+.organizer-account-popup{border:0}
+.organizer-menu .organizer-destinations a{border:0;background:var(--org-control);border-radius:8px !important}
+@media(max-width:900px){
+ .organizer-topbar h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+ .organizer-search{flex:1;max-width:none}
+ .organizer-header-settings{display:none}
+ .organizer-bottom-nav{border-top:0;background:color-mix(in oklab,var(--org-paper) 95%,var(--org-ink))}
+}
+
+/* Captured text in the reference detail reads in the feed's own type, not the analysis view's serif and small caps. */
+[data-capture-text] .reference-capture-markdown,[data-capture-text] .reference-capture-markdown :is(h1,h2,h3,h4,h5,h6,p,li,th,td){font-family:inherit;letter-spacing:normal;text-transform:none}
+[data-capture-text] .reference-capture-markdown :is(h3,h4,h5){font-size:1em;font-weight:600;margin:1em 0 .25em}

package/components/newsroom-references-view.tsx

@@ -9,7 +9,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
 import { ScrollArea } from "./ui/scroll-area";
 import { Separator } from "./ui/separator";
 import {
@@ -50,7 +50,7 @@ import { useReferenceCapture, type CorrectCaptureAction } from "./reference-capt
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
 import { captureStatusesByLineage } from "../lib/reference-capture";
 import { applyFeedOrderSnapshot, partitionReferenceFeed, takeFeedOrderSnapshot, type FeedOrderSnapshot, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
-import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
+import { referenceDek, referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
 import { chooseSyntheticRejects, withSyntheticRejects } from "../lib/local-preview-synthetic-rejects";
 import { cn } from "../lib/utils";
@@ -262,28 +262,31 @@ function ReferenceDetailPanel({
       data-news-desk-reference-detail={lineageId}
     >
       <div className="space-y-4 p-4" data-reference-curation-status={status}>
-        <div className="flex flex-wrap items-center gap-2">
-          <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
-          {reference.corpusId ? <Badge variant="outline">{reference.corpusId}</Badge> : null}
-        </div>
-
         <ReviewCard
           decided={status === "accepted" ? "accept" : status === "rejected" ? "reject" : null}
+          dek={referenceDek(reference, referencePreviewsByLineage(previewAttachments).get(lineageId))}
           disabledReason={disabled ? "Editor access is required to change this reference." : null}
           initialNote={sourceNote}
           initialReason={sourceReason}
           itemId={lineageId}
+          meta={(
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
+              {reference.corpusId ? <Badge variant="secondary">{reference.corpusId}</Badge> : null}
+            </div>
+          )}
           ratings={ratings}
           onArchive={status === "archived" ? undefined : async () => { await onReview("archive"); }}
           onDecide={decide}
           prediction={cardPrediction(decision, predictionState)}
-          summary={summaryOf(reference)}
+          sourcePreview={<ReferenceSourcePreview attachments={previewAttachments} sourceUri={reference.sourceUri} />}
+          summary={capture.summary ?? summaryOf(reference)}
           title={referenceDisplayTitle(reference)}
           titleHref={url}
         >
           {decision ? <div data-reference-relevance-decision={lineageId}><ReferenceSuggestionProvenance decision={decision} /></div> : null}
           {sectionSuggestion || ((status === "pending" || status === "accepted") && sections.length) ? (
-            <details className="rounded-md border p-3 text-sm">
+            <details className="rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-sm">
               <summary className="cursor-pointer font-semibold">Section placement (optional)</summary>
               <div className="mt-3 space-y-3">
                 {sectionSuggestion ? <SectionSuggestionBlock agreement={sectionAgreement} referenceLineageId={lineageId} sections={sections} suggestion={sectionSuggestion} /> : null}
@@ -304,12 +307,7 @@ function ReferenceDetailPanel({
 
         <Separator />
 
-        <ReferenceCapturePanel capture={capture} />
-
-        <section aria-label="Source preview" className="space-y-2">
-          <h3 className="text-sm font-medium text-foreground">Source preview</h3>
-          <ReferenceSourcePreview attachments={previewAttachments} sourceUri={reference.sourceUri} />
-        </section>
+        <ReferenceCapturePanel capture={capture} showSummary={false} />
 
         <dl className="grid gap-3 text-sm">
           <div>
@@ -663,7 +661,6 @@ export function NewsroomReferencesView({
   return (
     <div
       className="flex min-h-0 flex-1 flex-col gap-4 md:max-h-[100dvh] md:flex-row"
-      data-detail-reserved={view === "feed" ? "true" : undefined}
       data-news-desk-section="references"
       data-detail-open={selectedReference || routeLineageId ? "true" : "false"}
     >
@@ -764,8 +761,9 @@ export function NewsroomReferencesView({
               </button>
             </div>
           ) : null}
+          {/* 6px of room on every side, so a selected card's 4px ring (drawn outside the card) is never cut off by the scroller. */}
           <ScrollArea className="min-h-0 flex-1 [overflow-anchor:none]" data-reference-feed-scroll>
-            <div className="pb-6 pr-1">
+            <div className="px-1.5 pb-6 pt-1.5 pr-2.5">
               <ReferenceFeed
                 disabledReason={feedDisabledReason}
                 loading={previewSkeleton || (loading && !references.length)}
@@ -873,7 +871,9 @@ 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)] md:pb-16 lg:w-[min(100%,28rem)]",
+          "hidden min-h-0 w-full shrink-0 flex-col overflow-hidden rounded-[20px] bg-[var(--feed-card)] md:w-[min(100%,24rem)] md:pb-16 lg:w-[min(100%,28rem)]",
+          // The pane appears once a reference is selected (or when the queue is done); until then the feed has the whole width.
+          (selectedReference || caughtUp) && "md:flex",
         )}
         data-newsroom-list-detail-shell
         data-news-desk-section="references"
@@ -909,11 +909,7 @@ export function NewsroomReferencesView({
               previewAttachments={previewAttachments}
               reference={selectedReference}
             />
-          ) : caughtUp ? caughtUpPanel : (
-            <CardContent className="p-4 text-sm text-muted-foreground">
-              Select a reference to inspect curation details.
-            </CardContent>
-          )}
+          ) : caughtUp ? caughtUpPanel : null}
         </ScrollArea>
         </div>
         {queueBar}

package/components/reader-auth-control.tsx

@@ -36,7 +36,9 @@ export function ReaderAuthControl({
     if (!nextPath) return;
     if (window.location.pathname !== "/" || window.location.search || window.location.hash) return;
     if (storedPath) window.sessionStorage.removeItem(POST_AUTH_PATH_KEY);
-    window.history.replaceState(window.history.state, "", nextPath);
+    if (nextPath === "/") return;
+    // Sign-in comes back to "/"; the page asked for (a deep link such as /references/<id>) may be another route, so load it.
+    window.location.replace(nextPath);
   }, [postAuthPath]);
 
   const refreshAuthState = useCallback(async () => {

package/components/reference-capture-panel.tsx

@@ -4,7 +4,9 @@ import { FileCheckIcon, FileClockIcon, FileWarningIcon, FileXIcon, Loader2Icon }
 import { useEffect, useState } from "react";
 import { captureLine, type CaptureAssessment, type CaptureState, type CaptureStatus } from "../lib/reference-capture";
 import { cn } from "../lib/utils";
+import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import type { CaptureView } from "./reference-capture-client";
+import { MarkdownContext } from "./markdown-context";
 
 const ICON = { full: FileCheckIcon, thin: FileWarningIcon, none: FileXIcon, running: FileClockIcon } as const;
 /** Colour never stands alone: each state has its own icon and words. */
@@ -66,7 +68,7 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
     <div className="space-y-3 rounded-2xl bg-[var(--feed-control)] p-3" data-capture-correction>
       <label className="block text-sm font-medium">
         The text
-        <textarea
+        <AutoGrowTextarea
           aria-label="Captured text"
           className="mt-1 block min-h-40 w-full rounded-2xl bg-[var(--feed-card)] p-3 text-sm font-normal"
           data-capture-correction-text
@@ -92,7 +94,7 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
       </div>
       <label className="block text-sm font-medium">
         Note (optional)
-        <textarea aria-label="Note about the capture (optional)" className="mt-1 block min-h-16 w-full rounded-2xl bg-[var(--feed-card)] p-3 text-sm font-normal" onChange={(event) => setNote(event.target.value)} value={note} />
+        <AutoGrowTextarea aria-label="Note about the capture (optional)" className="mt-1 block min-h-16 w-full rounded-2xl bg-[var(--feed-card)] p-3 text-sm font-normal" onChange={(event) => setNote(event.target.value)} value={note} />
       </label>
       {reason ? <p className="text-xs text-muted-foreground" data-capture-correction-reason>{reason}</p> : null}
       {phase === "error" ? <p className="text-xs text-destructive" role="alert">{message}</p> : null}
@@ -113,7 +115,12 @@ function CorrectionForm({ capture, onDone }: { capture: CaptureView; onDone: ()
 }
 
 /** Our captured record of a Reference: what we stored of its content, said plainly, above the live source preview. */
-export function ReferenceCapturePanel({ capture, startEditing = false }: { capture: CaptureView; startEditing?: boolean }) {
+export function ReferenceCapturePanel({ capture, showSummary = true, startEditing = false }: {
+  capture: CaptureView;
+  /** False where the summary is already shown above the rating, with the title. */
+  showSummary?: boolean;
+  startEditing?: boolean;
+}) {
   const [expanded, setExpanded] = useState(false);
   const [editing, setEditing] = useState(startEditing && Boolean(capture.correct));
   const [savedNote, setSavedNote] = useState(false);
@@ -137,10 +144,13 @@ export function ReferenceCapturePanel({ capture, startEditing = false }: { captu
       </div>
       {capture.loading ? <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground" role="status"><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Reading the stored text…</p> : null}
       {capture.error ? <p className="text-xs text-destructive" role="alert">The stored text could not be read. {capture.error}</p> : null}
-      {text ? (
+      {/* While the editor is open it holds the text, so the read-only copy steps aside: the text is never shown twice. */}
+      {text && !editing ? (
         <div className="space-y-2">
-          <div className="max-h-80 overflow-y-auto whitespace-pre-wrap rounded-2xl bg-[var(--feed-control)] p-3 text-sm leading-relaxed" data-capture-text tabIndex={0}>
-            {expanded || !long ? text : `${text.slice(0, PREVIEW_CHARACTERS)}…`}
+          {/* No scroll box of its own: on a phone a swipe here scrolls the page. "Show all" grows it in place. */}
+          {/* Captured pages are stored as Markdown: render it (as React elements, never HTML) so headings and lists read as such. */}
+          <div className="rounded-2xl bg-[var(--feed-control)] p-3 text-sm leading-relaxed" data-capture-text>
+            <MarkdownContext className="reference-capture-markdown" text={expanded || !long ? text : `${text.slice(0, PREVIEW_CHARACTERS)}…`} />
           </div>
           {long ? (
             <button className="rounded-full bg-[var(--feed-control)] px-3 py-1.5 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring" data-capture-toggle onClick={() => setExpanded((value) => !value)} type="button">
@@ -149,7 +159,7 @@ export function ReferenceCapturePanel({ capture, startEditing = false }: { captu
           ) : null}
         </div>
       ) : null}
-      {capture.summary ? (
+      {showSummary && capture.summary ? (
         <div className="space-y-1" data-capture-summary>
           <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Summary{capture.summaryStale ? " (out of date: the text was replaced)" : ""}</h4>
           <p className="text-sm">{capture.summary}</p>

package/components/reference-feed.tsx

@@ -81,6 +81,10 @@ export type ReferenceFeedProps = {
 };
 
 /** Columns follow the width the feed has (a container query, not the screen), so they stay put while a detail pane holds its place beside it. */
+/** A selected card: a thick ring drawn outside it on every side (a box-shadow, so it takes no layout space and covers nothing inside
+ *  the card). The grid's gap leaves room for it between cards. The fallback keeps the ring if a theme has no --primary. */
+export const SELECTED_RING = { boxShadow: "0 0 0 4px var(--primary, currentColor)" } as const;
+
 export const FEED_GRID = "grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-5";
 const GRID = FEED_GRID;
 /** The lead spans two columns only where there are at least two to span (two 17rem columns and the gap). */
@@ -115,7 +119,7 @@ function hueOf(name: string): number {
   return Math.abs(hash) % 360;
 }
 
-/** A small mark for a source: its own favicon on a light tile when it loads, else its first letter. */
+/** A small mark for a source: its own icon (found on the server, see lib/source-icon.ts) on a light tile when there is one, else its first letter. */
 export function SourceMark({ host, size = "sm" }: { host: string | null; size?: "sm" | "lg" }) {
   const [failed, setFailed] = useState(false);
   const box = size === "lg" ? "size-16 rounded-2xl text-3xl" : "size-5 rounded-md text-[0.65rem]";
@@ -124,7 +128,7 @@ export function SourceMark({ host, size = "sm" }: { host: string | null; size?:
     <span aria-hidden="true" className={cn("inline-flex shrink-0 items-center justify-center overflow-hidden bg-white font-bold uppercase text-neutral-700", box)} data-feed-source-mark>
       {host && !failed ? (
         // eslint-disable-next-line @next/next/no-img-element
-        <img alt="" className={size === "lg" ? "size-10 object-contain" : "size-3.5 object-contain"} loading="lazy" onError={() => setFailed(true)} referrerPolicy="no-referrer" src={`https://${host}/favicon.ico`} />
+        <img alt="" className={size === "lg" ? "size-10 object-contain" : "size-3.5 object-contain"} loading="lazy" onError={() => setFailed(true)} src={`/api/newsroom/source-icon?host=${encodeURIComponent(host)}`} />
       ) : letter}
     </span>
   );
@@ -254,17 +258,17 @@ export function FeedCard({
       aria-current={selected ? "true" : undefined}
       className={cn(
         "relative flex flex-col overflow-hidden rounded-[20px] text-card-foreground transition-[background-color,box-shadow] duration-200",
-        selected ? "bg-[var(--feed-control)] shadow-xl" : "bg-[var(--feed-card)]",
+        selected ? "bg-[var(--feed-control)]" : "bg-[var(--feed-card)]",
         lead && LEAD_SPAN,
       )}
       data-feed-card={item.lineageId}
       data-feed-lead={lead || undefined}
       data-feed-rated={answer ?? undefined}
       data-feed-selected={selected || undefined}
+      style={selected ? SELECTED_RING : undefined}
       data-feed-visit-rated={visitRated || undefined}
       data-newsroom-card-id={item.lineageId}
     >
-      {selected ? <span aria-hidden="true" className="absolute inset-y-0 left-0 z-10 w-1.5 bg-[var(--primary)]" data-feed-selected-bar /> : null}
       <button
         aria-label={`Open: ${title}`}
         className="flex flex-1 flex-col text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"

package/components/reference-review-card.tsx

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

package/components/reference-source-preview.tsx

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