@anthusai/papyrus 1.0.0-next.9 → 1.1.0

package/components/newsroom-organizer-shell.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { BookOpen, ClipboardList, LayoutDashboard, Menu, MessagesSquare, PanelLeftClose, PanelLeftOpen, Settings, UserRound, LogIn, LogOut } from "lucide-react";
+import { ORGANIZER_NAV_GROUPS, ORGANIZER_PRIMARY_NAV, ORGANIZER_SETTINGS_DESTINATION } from "../lib/newsroom-organizer-nav";
+import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { SITE_BRAND } from "../lib/site-brand";
+import { useOptionalNewsDeskClient } from "./news-desk-client-provider";
+import { ReaderAuthControl } from "./reader-auth-control";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTrigger } from "./ui/sheet";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu";
+import type { NewsroomOpsShellProps } from "./newsroom-ops-shell";
+import "./newsroom-organizer.css";
+
+const ICONS = { overview: LayoutDashboard, board: ClipboardList, references: BookOpen, messages: MessagesSquare };
+
+/** Navigation is a presentation layer; existing route and server authorization still own access. */
+function Navigation({ activePath, demo, admin, surface, onNavigate }: { activePath: string; demo: boolean; admin: boolean; surface: string; onNavigate?: () => void }) {
+  const id = useId();
+  const all = ORGANIZER_NAV_GROUPS.flatMap(group => group.items);
+  const active = all.filter(item => activePath === item.path || (item.path !== "/newsroom" && activePath.startsWith(item.path + "/"))).sort((a, b) => b.path.length - a.path.length)[0]?.key;
+  return <nav className="organizer-destinations" aria-label={surface === "sidebar" ? "Newsroom" : "All workspaces"}>
+    {ORGANIZER_NAV_GROUPS.map((group, index) => <section key={group.title} aria-labelledby={`${id}-${index}`}>
+      <h3 id={`${id}-${index}`}>{group.title}</h3>
+      {group.items.filter(item => item.access !== "admin" || admin).map(item => <Link key={item.key}
+        href={getNewsroomNavHref(item.path, demo)} onClick={onNavigate} aria-label={item.label}
+        aria-current={active === item.key ? "page" : undefined} aria-describedby={`${id}-${item.key}`}
+        data-news-desk-tab={item.key}>
+        <strong>{item.label}</strong><small id={`${id}-${item.key}`}>{item.description}</small>
+      </Link>)}
+    </section>)}
+  </nav>;
+}
+
+function Account({ placement }: { placement: "sidebar" | "header" }) {
+  const session = useOptionalNewsDeskClient();
+  const auth = session?.shell.auth ?? { status: "loading" as const, label: "Checking sign-in" };
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const media = matchMedia("(max-width: 900px)");
+    const close = () => setOpen(false);
+    media.addEventListener("change", close);
+    return () => media.removeEventListener("change", close);
+  }, []);
+  return <DropdownMenu open={open} onOpenChange={setOpen}>
+    <DropdownMenuTrigger className={`organizer-account organizer-account-${placement}`} aria-label="Account menu" title="Account menu">
+      <UserRound size={18} aria-hidden="true" /><span><strong>{auth.label}</strong><small>{auth.status === "signedIn" ? "Account & preferences" : auth.status === "signedOut" ? "Not signed in" : "Checking session"}</small></span>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent className="organizer-account-popup" side={placement === "sidebar" ? "top" : "bottom"} align="end">
+      <DropdownMenuGroup>
+        <DropdownMenuLabel>{auth.label}</DropdownMenuLabel><DropdownMenuSeparator />
+        <DropdownMenuItem render={<Link href={getNewsroomNavHref(ORGANIZER_SETTINGS_DESTINATION.path)} />}><Settings aria-hidden="true" />{ORGANIZER_SETTINGS_DESTINATION.label}</DropdownMenuItem>
+        <ReaderAuthControl authState={auth} renderAction={({ disabled, onClick, signedIn }) => <DropdownMenuItem disabled={disabled} closeOnClick={false} onClick={onClick}>
+          {signedIn ? <LogOut aria-hidden="true" /> : <LogIn aria-hidden="true" />}{signedIn ? "Sign out" : "Sign in"}
+        </DropdownMenuItem>} />
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>;
+}
+
+export function NewsroomOrganizerShell({ activeTab, appTitle, backHref = "/", backLabel, children, demo = false, headerActions, pageTitle, showNavigation = true }: NewsroomOpsShellProps) {
+  const pathname = usePathname();
+  const session = useOptionalNewsDeskClient();
+  const admin = demo || session?.shell.dashboard?.canManageUsers === true;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [loadedPreference, setLoadedPreference] = useState(false);
+  const preferenceKey = `papyrus.cms.sidebar.v1.${SITE_BRAND.id}`;
+  useEffect(() => {
+    try { setCollapsed(localStorage.getItem(preferenceKey) === "true"); } catch { /* Optional browser preference. */ }
+    setLoadedPreference(true);
+  }, [preferenceKey]);
+  useEffect(() => { if (loadedPreference) try { localStorage.setItem(preferenceKey, String(collapsed)); } catch { /* Controls still work without storage. */ } }, [collapsed, loadedPreference, preferenceKey]);
+  useEffect(() => { setMenuOpen(false); }, [pathname]);
+  useEffect(() => {
+    const media = matchMedia("(max-width: 900px)");
+    let previousFocus: Element | null = null;
+    let frame = 0;
+    const remember = () => { if (document.activeElement !== document.body) previousFocus = document.activeElement; };
+    const change = () => {
+      const active = document.activeElement === document.body ? previousFocus : document.activeElement;
+      if (!(active instanceof HTMLElement)) return;
+      if (!media.matches) setMenuOpen(false);
+      const selector = active.closest(".organizer-account, .organizer-account-popup") ? ".organizer-account"
+        : media.matches && active.closest(".organizer-sidebar, .organizer-toggle") ? ".organizer-more"
+        : !media.matches && active.closest(".organizer-bottom-nav, .organizer-menu") ? ".organizer-toggle" : null;
+      if (!selector) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (document.activeElement === active || document.activeElement === document.body || !(document.activeElement as HTMLElement)?.getClientRects().length)
+          Array.from(document.querySelectorAll<HTMLElement>(selector)).find(element => element.getClientRects().length)?.focus();
+      });
+    };
+    document.addEventListener("focusin", remember);
+    media.addEventListener("change", change);
+    return () => { document.removeEventListener("focusin", remember); media.removeEventListener("change", change); cancelAnimationFrame(frame); };
+  }, []);
+  const activePath = browserPathToInternalNewsroomPath(pathname ?? "/newsroom");
+  return <div className="newsroom-organizer" data-news-desk data-newsroom-ops-shell="true" data-newsroom-chrome="organizer" data-sidebar-collapsed={collapsed || !showNavigation ? "true" : "false"}>
+    {showNavigation && <aside className="organizer-sidebar" hidden={collapsed} id="organizer-sidebar">
+      <Link className="organizer-brand" href={getNewsroomNavHref("/newsroom", demo)}>{appTitle}<small>The newsroom</small></Link>
+      <Navigation activePath={activePath} demo={demo} admin={admin} surface="sidebar" />
+      <Account placement="sidebar" />
+    </aside>}
+    <div className="organizer-workspace">
+      <header className="organizer-topbar" data-newsroom-ops-topbar>
+        {showNavigation && <button type="button" className="organizer-toggle" title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"} aria-expanded={!collapsed} aria-controls="organizer-sidebar" onClick={() => setCollapsed(value => !value)}>
+          {collapsed ? <PanelLeftOpen size={16} aria-hidden="true" /> : <PanelLeftClose size={16} aria-hidden="true" />}<span>{collapsed ? "Expand sidebar" : "Collapse sidebar"}</span>
+        </button>}
+        <Link className="organizer-masthead" href={backHref} title={backLabel}>{appTitle}</Link>
+        <h1 data-newsroom-ops-title>{pageTitle}</h1><div className="organizer-header-actions">{headerActions}</div><Account placement="header" />
+      </header>
+      <main className="organizer-main">{demo && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
+    </div>
+    {showNavigation && <nav className="organizer-bottom-nav" aria-label="Primary newsroom navigation"><ul>
+      {ORGANIZER_PRIMARY_NAV.map(item => { const Icon = ICONS[item.key as keyof typeof ICONS]; return <li key={item.key}><Link
+        href={getNewsroomNavHref(item.path, demo)} title={item.description} aria-label={item.label} aria-current={activeTab === item.key || activeTab === "work" && item.key === "board" ? "page" : undefined}>
+        <Icon size={18} aria-hidden="true" /><span>{item.label}</span></Link></li>; })}
+      <li><Sheet open={menuOpen} onOpenChange={setMenuOpen}><SheetTrigger className="organizer-more" aria-label="More"><Menu size={18} aria-hidden="true" /><span>More</span></SheetTrigger>
+        <SheetContent side="bottom" className="organizer-menu"><SheetHeader><SheetTitle>Newsroom</SheetTitle><SheetDescription>Workspaces and administration</SheetDescription></SheetHeader>
+          <Navigation activePath={activePath} demo={demo} admin={admin} surface="menu" onNavigate={() => setMenuOpen(false)} />
+        </SheetContent>
+      </Sheet></li>
+    </ul></nav>}
+  </div>;
+}

package/components/newsroom-organizer.css

@@ -0,0 +1,63 @@
+@font-face{font-family:Newsroom Display;src:url('./newsroom-fonts/playfair-display-700.ttf') format('truetype');font-weight:700;font-display:swap}
+@font-face{font-family:Newsroom Display;src:url('./newsroom-fonts/playfair-display-900.ttf') format('truetype');font-weight:900;font-display:swap}
+@font-face{font-family:Newsroom UI;src:url('./newsroom-fonts/plus-jakarta-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
+@font-face{font-family:Newsroom UI;src:url('./newsroom-fonts/plus-jakarta-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
+.newsroom-organizer,.organizer-menu,.organizer-account-popup{--org-paper:var(--background);--org-ink:var(--foreground);--org-line:var(--border);--org-muted:var(--muted-foreground);font-family:Newsroom UI,system-ui,sans-serif;color:var(--org-ink);background:var(--org-paper)}
+.newsroom-organizer{display:grid;grid-template-columns:264px minmax(0,1fr);height:100dvh;max-height:100dvh;overflow:clip;font-size:14px}
+.newsroom-organizer[data-sidebar-collapsed=true]{grid-template-columns:minmax(0,1fr)}
+body:has(.newsroom-organizer){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
+body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
+.papyrus-console-page:has(.newsroom-organizer){display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}
+.papyrus-console-page .newsroom-organizer{height:100%;max-height:100%;flex:1}
+.newsroom-organizer h1,.newsroom-organizer h2,.newsroom-organizer h3{font-family:Newsroom Display,Georgia,serif}
+.organizer-sidebar{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--org-line);padding:16px;gap:16px;overflow:hidden}
+.organizer-sidebar[hidden]{display:none}.organizer-brand{font:900 40px/1.1 Newsroom Display,Georgia,serif;padding-bottom:20px;border-bottom:3px double var(--org-ink)}
+.organizer-brand small{display:block;font:400 10px Newsroom UI,system-ui;letter-spacing:.3em;text-transform:uppercase;margin-top:12px}
+.organizer-destinations{min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;padding-right:1px}
+.organizer-destinations section+section{margin-top:24px}.organizer-destinations h3{font:600 10px Newsroom UI,system-ui;letter-spacing:.07em;text-transform:uppercase;color:var(--org-muted);margin:16px 0 8px}
+.organizer-destinations a{display:flex;flex-direction:column;align-items:start;gap:6px;padding:14px 8px;border-bottom:1px solid var(--org-line);color:var(--org-muted);text-decoration:none;min-height:44px}
+.organizer-destinations a strong{font:700 16px Newsroom Display,Georgia,serif}.organizer-destinations a small{font:400 11px/1.5 Newsroom UI,system-ui;white-space:normal;overflow-wrap:anywhere}
+.organizer-destinations a[aria-current=page]{border-bottom:2px solid var(--org-ink);color:var(--org-ink)}
+.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:57px;min-height:57px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--org-ink)}
+.organizer-masthead{font:900 28px Newsroom Display,Georgia,serif;white-space:nowrap;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
+.organizer-topbar h1{font:400 12px Newsroom UI,system-ui;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
+.organizer-toggle{display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 12px;border:1px solid var(--org-line);font:400 11px Newsroom UI,system-ui;flex-shrink:0}
+.organizer-header-actions{display:flex;align-items:center;gap:8px;min-width:0;max-width:45%;overflow-x:auto}
+.organizer-main{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;padding:16px 0}
+.organizer-main>[data-category-steering]{min-height:0}.organizer-demo-notice{font-size:11px;color:var(--org-muted);margin-bottom:12px}
+.organizer-account{display:flex;align-items:center;gap:10px;min-height:44px;flex-shrink:0;border:1px solid var(--org-line);padding:8px;text-align:left;border-radius:3px}
+.organizer-account span{min-width:0}.organizer-account strong{display:block;font:600 11px Newsroom UI,system-ui;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organizer-account small{display:block;font-size:9px;color:var(--org-muted);margin-top:2px}
+.organizer-account-header{display:none;padding:8px;min-width:36px;min-height:36px}.organizer-account-header span{display:none}
+.newsroom-organizer[data-sidebar-collapsed=true] .organizer-account-header{display:flex}
+.organizer-account-popup{min-width:250px;max-width:calc(100vw - 32px);border:1px solid var(--org-line);padding:6px;border-radius:4px}
+.organizer-account-popup [role=menuitem]{min-height:40px;font-size:12px}.organizer-account-popup .reader-auth{display:contents}.organizer-account-popup .reader-auth__error{display:block;white-space:normal;font-size:11px;padding:8px}
+.organizer-bottom-nav{display:none}
+.organizer-main:has(.organizer-native-board){display:flex;overflow:hidden}
+.organizer-native-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:12px}
+.organizer-board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;flex-wrap:wrap}
+.organizer-board-toolbar [role=group],.organizer-board-pages{display:flex;gap:8px;flex-wrap:wrap}
+.organizer-board-toolbar button,.organizer-board-pages button{min-height:44px;padding:8px 12px;border:1px solid var(--org-line)}
+.organizer-board-toolbar button[aria-pressed=true]{background:var(--org-ink);color:var(--org-paper)}
+.organizer-board-note{font-size:11px;line-height:1.5;margin:0;color:var(--org-muted)}
+.organizer-board-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-width:0;min-height:0;gap:16px}
+.organizer-board-body[data-detail-open=true]{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
+.organizer-board-body>.kb-issue-collection{height:100%;min-height:0;overflow:auto}
+.organizer-board-body>.kb-issue-detail{overflow:auto;min-height:0}
+.organizer-board-body .kb-issue-detail a{display:block;min-height:44px;text-decoration:underline;padding:12px 0}
+.organizer-menu{height:min(85dvh,760px);max-height:85dvh;display:flex;flex-direction:column;padding:16px;border-radius:24px 24px 0 0;gap:20px}
+.organizer-menu .organizer-destinations{overflow-y:auto}.organizer-menu .organizer-destinations section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.organizer-menu .organizer-destinations h3{grid-column:1/-1;font-size:12px;text-transform:none;margin:0 0 4px}
+.organizer-menu .organizer-destinations a{border:1px solid var(--org-line);padding:12px;color:var(--org-ink)}
+@media(max-width:900px){
+ .newsroom-organizer,.newsroom-organizer[data-sidebar-collapsed=true]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
+ .organizer-sidebar,.organizer-toggle{display:none}.organizer-workspace{padding:0 16px}.organizer-topbar{gap:8px;height:55px;min-height:55px}
+ .organizer-masthead{font-size:24px;max-width:36vw}.organizer-topbar h1{font-size:10px}.organizer-account-header{display:flex}.organizer-header-actions{gap:4px;max-width:35%}
+ .organizer-bottom-nav{display:block;border-top:1px solid var(--org-ink);background:var(--org-paper);padding:4px 8px max(4px,env(safe-area-inset-bottom))}
+ .organizer-bottom-nav ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
+ .organizer-bottom-nav :is(a,button){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;width:100%;font:400 10px Newsroom UI,system-ui;padding:6px 0;text-decoration:none;border-radius:8px}
+ .organizer-bottom-nav a[aria-current=page]{background:var(--muted);font-weight:600}
+ .organizer-board-body[data-detail-open=true]{grid-template-columns:minmax(0,1fr)}
+ .organizer-board-body>.kb-issue-detail{position:absolute;inset:0;z-index:2;overflow:auto}
+}
+@media(prefers-reduced-motion:reduce){.newsroom-organizer,.newsroom-organizer *,.organizer-menu,.organizer-menu *,.organizer-account-popup,.organizer-account-popup *{scroll-behavior:auto;animation:none!important;transition:none!important}}

package/components/newsroom-references-view.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import type { PrimingPanelProps } from "cyclotron/components/priming-panel";
+import { ReferencePriming } from "./reference-priming";
+import { ReferenceCurationControls } from "./reference-curation-controls";
+
 import {
   ArchiveIcon,
   ChevronLeftIcon,
@@ -44,21 +48,38 @@ import {
 import { normalizeReferenceCurationStatus } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
+import { ReferenceRelevanceReview } from "./reference-relevance-review";
+import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyclotron-status";
+import type { CyclotronStatus } from "cyclotron/cyclotron-status";
+import type { RelevanceCuration, 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. */
+  priming?: PrimingPanelProps;
+  /** The relevance cyclotron's status snapshot, shown above the list. */
+  cyclotronStatus?: CyclotronStatus | null;
+  /** Present for editors who may ask for a manual review rate. */
+  onRequestReviewRate?: (choice: ReviewRateChoice) => Promise<void> | void;
   demo?: boolean;
+  /** The relevance cyclotron's current decisions, keyed by reference lineage. */
+  decisions?: Map<string, RelevanceDecisionView>;
   disabled?: boolean;
+  onRelevanceReview?: (reference: ReferenceRecord, curation: RelevanceCuration) => void;
   initialReferenceLineageId?: string | null;
   onReview: (reference: ReferenceRecord, action: ReferenceCurationAction) => void;
   referenceAttachments?: ReferenceAttachmentRecord[];
   references: ReferenceRecord[];
 };
 
-const STATUS_FILTERS: Array<{ key: ReferenceStatusFilter; label: string }> = [
+type ReferenceListFilter = ReferenceStatusFilter | "needs_review";
+
+const NEEDS_REVIEW_FILTER: { key: ReferenceListFilter; label: string } = { key: "needs_review", label: "Needs review" };
+
+const STATUS_FILTERS: Array<{ key: ReferenceListFilter; label: string }> = [
   { key: "all", label: "All" },
   { key: "pending", label: "Pending" },
   { key: "accepted", label: "Accepted" },
@@ -183,16 +204,30 @@ function useReferencePreviewAttachments(
   return previewAttachments;
 }
 
+function decisionSummary(decision: RelevanceDecisionView): string {
+  const sure = decision.confidence == null ? "confidence unknown" : `${Math.round(decision.confidence * 100)}% sure`;
+  return `${decision.label} · ${sure}${decision.version != null ? ` · version ${decision.version}` : ""}`;
+}
+
+function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
+  return Boolean(decision?.reviewRecommended)
+    && normalizeReferenceCurationStatus(reference.curationStatus) === "pending";
+}
+
 function ReferenceDetailPanel({
+  decision,
   demo,
   disabled,
+  onRelevanceReview,
   onReview,
   previewAttachments,
   reference,
   onClose,
 }: {
+  decision?: RelevanceDecisionView;
   demo?: boolean;
   disabled?: boolean;
+  onRelevanceReview?: (curation: RelevanceCuration) => void;
   onReview: (action: ReferenceCurationAction) => void;
   previewAttachments: ReferenceAttachmentRecord[];
   reference: ReferenceRecord;
@@ -224,11 +259,25 @@ function ReferenceDetailPanel({
           ) : null}
         </div>
 
+        {decision && status === "pending" && onRelevanceReview ? (
+          <ReferenceRelevanceReview
+            decision={decision}
+            disabled={disabled}
+            onCurate={onRelevanceReview}
+            referenceLineageId={lineageId}
+          />
+        ) : decision ? (
+          <p className="text-sm text-muted-foreground" data-reference-relevance-decision={lineageId}>
+            Cyclotron decision: {decisionSummary(decision)}
+          </p>
+        ) : null}
+
         <div
           className="flex flex-wrap items-center gap-2"
           data-news-desk-reference-curation-cluster
           data-reference-curation-status={status}
         >
+          {decision && status === "pending" && onRelevanceReview ? null : <>
           <Button
             aria-label="Accept reference"
             aria-pressed={status === "accepted"}
@@ -255,6 +304,7 @@ function ReferenceDetailPanel({
             <ThumbsDownIcon className="size-4" />
             Reject
           </Button>
+          </>}
           <Button
             aria-label="Archive reference"
             disabled={archiveDisabled}
@@ -347,8 +397,13 @@ function ReferenceDetailPanel({
 }
 
 export function NewsroomReferencesView({
+  priming,
+  cyclotronStatus,
+  decisions,
+  onRequestReviewRate,
   demo = false,
   disabled = false,
+  onRelevanceReview,
   initialReferenceLineageId = null,
   onReview,
   referenceAttachments = [],
@@ -365,13 +420,20 @@ export function NewsroomReferencesView({
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
   const statusCounts = useMemo(() => countReferencesByStatus(canonicalReferences), [canonicalReferences]);
 
-  const [statusFilter, setStatusFilter] = useState<ReferenceStatusFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<ReferenceListFilter>("all");
+  const needsReviewCount = useMemo(
+    () => canonicalReferences.filter((reference) => needsReview(reference, decisions?.get(referenceLineageId(reference)))).length,
+    [canonicalReferences, decisions],
+  );
+  const filters = decisions?.size ? [NEEDS_REVIEW_FILTER, ...STATUS_FILTERS] : STATUS_FILTERS;
   const [selectedLineageId, setSelectedLineageId] = useState(routeLineageId);
   const [mobileDetailOpen, setMobileDetailOpen] = useState(Boolean(routeLineageId) && isMobileDetail);
 
   const filteredReferences = useMemo(
-    () => filterReferencesByStatus(canonicalReferences, statusFilter),
-    [canonicalReferences, statusFilter],
+    () => statusFilter === "needs_review"
+      ? canonicalReferences.filter((reference) => needsReview(reference, decisions?.get(referenceLineageId(reference))))
+      : filterReferencesByStatus(canonicalReferences, statusFilter),
+    [canonicalReferences, decisions, statusFilter],
   );
 
   const selectedReference = useMemo(
@@ -390,7 +452,7 @@ export function NewsroomReferencesView({
     ? filteredReferences[selectedIndex + 1]
     : null;
 
-  const syncStatusUrl = useCallback((nextStatus: ReferenceStatusFilter) => {
+  const syncStatusUrl = useCallback((nextStatus: ReferenceListFilter) => {
     if (demo) return;
     syncBrowserNewsroomIndexUrl("references", {
       status: nextStatus === "all" ? "" : nextStatus,
@@ -452,22 +514,31 @@ export function NewsroomReferencesView({
             Review source intake before it becomes accepted evidence.
           </p>
         </div>
+        <ReferenceCurationControls disabled={disabled} />
+        {priming && !disabled ? <ReferencePriming {...priming} /> : null}
+        {cyclotronStatus ? (
+          <div className="shrink-0">
+            <ReferenceCyclotronStatus onRequestRate={disabled ? undefined : onRequestReviewRate} status={cyclotronStatus} />
+          </div>
+        ) : null}
 
         <Tabs
           className="shrink-0"
           defaultValue="all"
           onValueChange={(value) => {
-            const next = value as ReferenceStatusFilter;
+            const next = value as ReferenceListFilter;
             setStatusFilter(next);
             syncStatusUrl(next);
           }}
           value={statusFilter}
         >
           <TabsList className="h-auto w-full flex-wrap justify-start gap-1 bg-muted/40 p-1">
-            {STATUS_FILTERS.map((filter) => {
+            {filters.map((filter) => {
               const count = filter.key === "all"
                 ? canonicalReferences.length
-                : statusCounts[filter.key] ?? 0;
+                : filter.key === "needs_review"
+                  ? needsReviewCount
+                  : statusCounts[filter.key] ?? 0;
               return (
                 <TabsTrigger className="text-xs sm:text-sm" key={filter.key} value={filter.key}>
                   {filter.label}
@@ -484,6 +555,7 @@ export function NewsroomReferencesView({
               const lineageId = referenceLineageId(reference);
               const status = normalizeReferenceCurationStatus(reference.curationStatus);
               const active = selectedLineageId === lineageId;
+              const decision = decisions?.get(lineageId);
               return (
                 <button
                   aria-current={active ? "true" : undefined}
@@ -504,6 +576,14 @@ export function NewsroomReferencesView({
                     <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
                   </div>
                   <p className="mt-2 text-xs text-muted-foreground">{formatReferenceListDate(reference)}</p>
+                  {decision ? (
+                    <p className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground" data-reference-relevance-row={lineageId}>
+                      <span>Decision: {decisionSummary(decision)}</span>
+                      {needsReview(reference, decision) ? (
+                        <Badge variant="outline"><span aria-hidden="true">●</span> Needs review</Badge>
+                      ) : null}
+                    </p>
+                  ) : null}
                 </button>
               );
             }) : (
@@ -552,8 +632,10 @@ export function NewsroomReferencesView({
         <ScrollArea className="min-h-0 flex-1">
           {selectedReference ? (
             <ReferenceDetailPanel
+              decision={decisions?.get(referenceLineageId(selectedReference))}
               demo={demo}
               disabled={disabled}
+              onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
               onReview={runReview}
               previewAttachments={previewAttachments}
               reference={selectedReference}
@@ -581,9 +663,11 @@ export function NewsroomReferencesView({
             {selectedReference ? (
               <ScrollArea className="max-h-[75dvh]">
                 <ReferenceDetailPanel
+                  decision={decisions?.get(referenceLineageId(selectedReference))}
                   demo={demo}
                   disabled={disabled}
                   onClose={closeDetail}
+                  onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
                   onReview={runReview}
                   previewAttachments={previewAttachments}
                   reference={selectedReference}

package/components/papyrus-console-shell.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
 import type { BotAvatarState } from "anthus-vultus";
 import dynamic from "next/dynamic";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -152,7 +153,8 @@ export function PapyrusConsoleShell({ children }: PapyrusConsoleShellProps) {
   const [session, setSession] = useState<ReaderSessionSnapshot | null>(null);
   const [open, setOpen] = useState(false);
   const [openingReferenceChat, setOpeningReferenceChat] = useState(false);
-  const isNewsroomPath = pathname === "/newsroom" || pathname.startsWith("/newsroom/");
+  const internalPathname = browserPathToInternalNewsroomPath(pathname);
+  const isNewsroomPath = internalPathname === "/newsroom" || internalPathname.startsWith("/newsroom/");
   const canUseConsole = Boolean(session?.hasSession && session.groups.some((group) => group === "editor" || group === "admin"));
   const shouldOfferConsole = isNewsroomPath && canUseConsole;
 
@@ -433,7 +435,7 @@ function ConsolePanel({ actorEmail, actorLabel, onClose }: { actorEmail: string
   const handledNavigationMessageIdsRef = useRef<Set<string>>(new Set());
 
   const currentWebPath = useMemo(() => {
-    const path = pathname ?? "/newsroom";
+    const path = browserPathToInternalNewsroomPath(pathname ?? "/newsroom");
     const query = searchParams.toString();
     return query ? `${path}?${query}` : path;
   }, [pathname, searchParams]);

package/components/pictogram-figure.tsx

@@ -12,6 +12,9 @@ export type PictogramFigureProps = {
   credit: string;
   figureClassName: string;
   height: number;
+  /** Rhythm blog layout: solved frame size in CSS pixels; wins over `height`/`width` when set. */
+  frameHeight?: number;
+  frameWidth?: number;
   layout?: ArticleImageLayout;
   priority?: boolean;
   sizes: string;
@@ -34,6 +37,8 @@ export function PictogramFigure({
   caption,
   credit,
   figureClassName,
+  frameHeight,
+  frameWidth,
   height,
   priority = false,
   sizes,
@@ -41,6 +46,8 @@ export function PictogramFigure({
   themeVariants,
   width,
 }: PictogramFigureProps) {
+  const imageHeight = frameHeight ?? height;
+  const imageWidth = frameWidth ?? width;
   const resolvedTheme = useResolvedPapyrusTheme();
   const themedImageSrc = resolveThemedImageSrc(src, themeVariants, resolvedTheme);
 
@@ -53,8 +60,8 @@ export function PictogramFigure({
       <Image
         src={themedImageSrc}
         alt={alt}
-        width={width}
-        height={height}
+        width={imageWidth}
+        height={imageHeight}
         sizes={sizes}
         priority={priority}
         unoptimized={shouldBypassImageOptimization(themedImageSrc)}

package/components/presentation-header.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { getEditionSectionPath } from "../lib/edition-routes";
+import { SITE_BRAND } from "../lib/site-brand";
+
+export type PresentationHeaderSection = {
+  key: string;
+  label: string;
+};
+
+export type PresentationHeaderProps = {
+  editionDate?: string;
+  title?: string;
+  description?: string;
+  sections?: PresentationHeaderSection[];
+  editionBasePath?: string;
+};
+
+export function PresentationHeader({
+  editionDate,
+  title: contentTitle,
+  description,
+  sections,
+  editionBasePath,
+}: PresentationHeaderProps) {
+  const title = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadTitle : contentTitle;
+  const subtitle = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadSubtitle : description;
+  const eyebrow = SITE_BRAND.mastheadEyebrow ?? null;
+  const tagline = SITE_BRAND.mastheadTagline ?? null;
+  const taglineLines = SITE_BRAND.mastheadTaglineLines ?? null;
+  const displayDate = editionDate
+    ? SITE_BRAND.mastheadDateFormat === "formatted"
+      ? formatMastheadDate(editionDate)
+      : editionDate
+    : null;
+
+  const eyebrowParts = eyebrow ? splitEyebrow(eyebrow) : null;
+
+  return (
+    <>
+      <header className="presentation-header">
+        <div className="presentation-header__copy-stack">
+          {eyebrowParts ? (
+            <span className="presentation-header__eyebrow">
+              <span className="presentation-header__eyebrow-strong">{eyebrowParts.lead}</span>
+              {eyebrowParts.rest ? (
+                <span className="presentation-header__eyebrow-muted">{eyebrowParts.rest}</span>
+              ) : null}
+            </span>
+          ) : null}
+          <h1>
+            {SITE_BRAND.mastheadWordSplit && title
+              ? title.split(/\s+/).map((word) => (
+                  <span className="presentation-header__word" key={word}>
+                    <span className="presentation-header__word-text">{word}</span>
+                  </span>
+                ))
+              : title}
+          </h1>
+          <div className="presentation-header__meta">
+            {subtitle && !eyebrow ? <span className="presentation-header__subtitle">{subtitle}</span> : null}
+            {displayDate ? <p className="presentation-header__date">{displayDate}</p> : null}
+          </div>
+        </div>
+        {tagline ? (
+          <span className="presentation-header__tagline">
+            {taglineLines && taglineLines.length > 0
+              ? taglineLines.map((line, index) => (
+                  <span className="presentation-header__tagline-line" key={index}>
+                    <span className="presentation-header__tagline-emphasis">{line.emphasis}</span>
+                    <span className="presentation-header__tagline-tail">{line.tail}</span>
+                    {index < taglineLines.length - 1 ? " " : null}
+                  </span>
+                ))
+              : tagline}
+          </span>
+        ) : null}
+      </header>
+      {sections && sections.length > 0 ? (
+        <nav className="presentation-section-nav" aria-label="Edition sections">
+          {sections.map((section) => (
+            <Link
+              href={getSectionHref(section, { editionBasePath, editionDate })}
+              key={section.key}
+            >
+              {section.label}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+    </>
+  );
+}
+
+function getSectionHref(
+  section: PresentationHeaderSection,
+  options: { editionBasePath?: string; editionDate?: string },
+): string {
+  if (SITE_BRAND.sectionLinkStrategy === "anchor") {
+    const anchor = `#${getSectionAnchorId(section.key)}`;
+    return options.editionBasePath ? `${options.editionBasePath}${anchor}` : anchor;
+  }
+  if (options.editionBasePath) {
+    return `${options.editionBasePath}/section/${encodeURIComponent(section.key)}`;
+  }
+  if (options.editionDate) {
+    const datedPath = getEditionSectionPath(options.editionDate, section.key);
+    return datedPath.startsWith("//") ? `#${getSectionAnchorId(section.key)}` : datedPath;
+  }
+  return `#${getSectionAnchorId(section.key)}`;
+}
+
+export function getSectionAnchorId(sectionKey: string): string {
+  return `section-${sectionKey}`;
+}
+
+function splitEyebrow(text: string): { lead: string; rest: string } {
+  const trimmed = text.trim();
+  const firstSpace = trimmed.indexOf(" ");
+  if (firstSpace === -1) return { lead: trimmed, rest: "" };
+  return { lead: trimmed.slice(0, firstSpace), rest: trimmed.slice(firstSpace + 1) };
+}
+
+export function formatMastheadDate(value: string): string {
+  const normalized = value?.trim();
+  if (!normalized) return value;
+  const date = new Date(`${normalized}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+}

package/components/presentation-rhythm-hrule.tsx

@@ -0,0 +1,17 @@
+type PresentationRhythmHRuleProps = {
+  /** Hide in wide 2-column secondary pairs (items 1+2 side-by-side). */
+  hideInSecondaryPair?: boolean;
+};
+
+export function PresentationRhythmHRule({ hideInSecondaryPair = false }: PresentationRhythmHRuleProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className="presentation-rhythm-hrule"
+      data-hide-in-secondary-pair={hideInSecondaryPair ? "true" : undefined}
+      role="presentation"
+    >
+      <div className="presentation-rhythm-hrule__line" />
+    </div>
+  );
+}