@anthusai/papyrus 1.4.0-next.4 → 1.4.0-next.5

package/components/newsroom-organizer-shell.tsx

@@ -2,8 +2,8 @@
 
 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 { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { BookOpen, ClipboardList, Menu, Search, 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";
@@ -15,7 +15,22 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGro
 import type { NewsroomOpsShellProps } from "./newsroom-ops-shell";
 import "./newsroom-organizer.css";
 
-const ICONS = { overview: LayoutDashboard, articles: ClipboardList, references: BookOpen, messages: MessagesSquare };
+/** The standard place to search the knowledge base; the Search page is the results page. */
+function OrganizerSearch({ demo }: { demo: boolean }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [text, setText] = useState(searchParams.get("q") ?? "");
+  return <form className="organizer-search" role="search" onSubmit={event => {
+    event.preventDefault();
+    const query = text.trim();
+    if (query) router.push(getNewsroomNavHref(`/newsroom/search?q=${encodeURIComponent(query)}`, demo));
+  }}>
+    <Search size={14} aria-hidden="true" />
+    <input aria-label="Search the knowledge base" data-newsroom-search type="search" onChange={event => setText(event.target.value)} placeholder="Search" value={text} />
+  </form>;
+}
+
+const ICONS = { articles: 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 }) {
@@ -46,7 +61,7 @@ function Account({ placement }: { placement: "sidebar" | "header" }) {
     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">
+    <DropdownMenuTrigger id={`organizer-account-trigger-${placement}`} 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">
@@ -107,7 +122,7 @@ export function NewsroomOrganizerShell({ activeTab, appTitle, backHref = "/", ba
   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">
       <div className="organizer-sidebar-head">
-        <Link className="organizer-brand" href={getNewsroomNavHref("/newsroom", demo)}>{appTitle}<small>The newsroom</small></Link>
+        <Link className="organizer-brand" href={getNewsroomNavHref("/newsroom", demo)}>{SITE_BRAND.components?.NewsroomLogo ? <SITE_BRAND.components.NewsroomLogo className="organizer-brand-logo" /> : appTitle}<small>The newsroom</small></Link>
         {sidebarToggle}
       </div>
       <Navigation activePath={activePath} demo={demo} admin={admin} surface="sidebar" />
@@ -117,7 +132,7 @@ export function NewsroomOrganizerShell({ activeTab, appTitle, backHref = "/", ba
       <header className="organizer-topbar" data-newsroom-ops-topbar>
         {showNavigation && collapsed && sidebarToggle}
         <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" />
+        <h1 data-newsroom-ops-title>{pageTitle}</h1><OrganizerSearch demo={demo} /><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>

package/components/newsroom-organizer.css

@@ -15,9 +15,9 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .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)}
+.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-ink);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;color:var(--org-muted)}
+.organizer-destinations a[aria-current=page]{border-bottom:3px double var(--org-ink);color:var(--org-ink);box-shadow:inset 3px 0 0 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:48px;min-height:48px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--org-ink)}
@@ -39,7 +39,7 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .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}
 .organizer-header-button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--org-line);font:inherit;color:inherit;background:transparent;text-decoration:none;white-space:nowrap;cursor:pointer}
-.organizer-header-button[aria-pressed=true]{background:var(--org-ink);color:var(--org-paper)}
+.organizer-header-button[aria-pressed=true]{background:transparent;color:var(--org-ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--org-ink)}
 .organizer-board-note{font-size:11px;line-height:1.5;margin:0;color:var(--org-muted);white-space:nowrap}
 @media(min-width:901px){.newsroom-organizer[data-sidebar-collapsed=false] .organizer-masthead{display:none}}
 .organizer-board-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-width:0;min-height:0;gap:16px}
@@ -82,3 +82,186 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .newsroom-embedded-article [class*="grid-cols-2"],.newsroom-embedded-article [class*="lg:grid"]{grid-template-columns:minmax(0,1fr) !important}
 @container (min-width:1100px){.newsroom-embedded-article [class*="lg:grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
 .newsroom-organizer [class*="rounded"]:not([data-slot=avatar]):not([class*="animate-spin"]):not([role=progressbar]),.organizer-menu,.organizer-account-popup,[data-slot=dialog-content],[data-slot=popover-content],[data-slot=dropdown-menu-content],[data-slot=select-content],[data-slot=tooltip-content]{border-radius:0 !important}
+
+:root.light-theme .newsroom-organizer,:root.light-theme .organizer-menu,:root.light-theme .organizer-account-popup{--org-ink:var(--foreground-strong);--org-muted:var(--foreground)}
+.newsroom-organizer [class~="bg-primary"],.newsroom-organizer [class~="bg-secondary"],.newsroom-organizer [data-slot=button][class*="bg-primary"]{background:transparent !important;color:var(--org-ink) !important;border:1px solid var(--org-ink) !important;font-weight:700}
+.newsroom-organizer [class~="text-primary-foreground"],.newsroom-organizer [class~="text-secondary-foreground"]{color:var(--org-ink) !important}
+.newsroom-organizer [data-selected=true],.newsroom-organizer [aria-current=true]{background:transparent !important;color:var(--org-ink) !important;box-shadow:inset 3px 0 0 var(--org-ink);font-weight:600}
+.newsroom-organizer .news-desk-columns--administration{--administration-gap:16px;--administration-quiet:color-mix(in srgb,rgb(var(--ink-solid-rgb)) 64%,var(--org-paper));--administration-strong:rgb(var(--ink-solid-rgb));container-type:inline-size;font-family:Newsroom UI,system-ui,sans-serif;font-size:14px;line-height:1.5;max-width:1280px}
+.news-desk-columns--administration :is(h2,h3,strong){font-family:Newsroom Display,Georgia,serif;color:var(--administration-strong)}
+.news-desk-columns--administration .category-steering-section--lead>.category-steering-section__header{display:none}
+.news-desk-columns--administration .news-desk-settings-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
+.news-desk-columns--administration .news-desk-settings-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-right:0;padding-right:0}
+.news-desk-columns--administration .news-desk-settings-nav a{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--org-line);background:transparent;color:inherit;text-decoration:none;min-height:44px;min-width:0}
+.news-desk-columns--administration .news-desk-settings-nav a[data-active=true]{border-color:var(--administration-strong);box-shadow:inset 0 -2px 0 var(--administration-strong);background:transparent}
+.news-desk-columns--administration .news-desk-settings-nav a strong{font-size:16px;font-weight:700;line-height:1.2}
+.news-desk-columns--administration .news-desk-settings-nav a span{display:none;font:400 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-settings-panel{display:grid;gap:24px;min-width:0}
+.news-desk-columns--administration .category-steering-section__header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--administration-strong)}
+.news-desk-columns--administration .category-steering-section__header h2{margin:0;font-size:22px;font-weight:700;line-height:1.2}
+.news-desk-columns--administration .category-steering-section__header span{font:400 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet)}
+.news-desk-columns--administration .story-label{margin:0;font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-doctrine-list{display:grid;gap:24px;min-width:0;max-width:none;width:100%}
+.news-desk-columns--administration .news-desk-doctrine-card{display:grid;gap:16px;min-width:0;padding:0;border:0}
+.news-desk-columns--administration .news-desk-doctrine-card+.news-desk-doctrine-card{padding-top:24px;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-doctrine-card__header,.news-desk-columns--administration .news-desk-doctrine-card__footer,.news-desk-columns--administration .news-desk-doctrine-card__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
+.news-desk-columns--administration .news-desk-doctrine-card__header>div{display:grid;gap:2px}
+.news-desk-columns--administration .news-desk-doctrine-card h3{margin:0;font-size:20px;font-weight:700;line-height:1.2}
+.news-desk-columns--administration .news-desk-doctrine-card__header>span,.news-desk-columns--administration .news-desk-doctrine-card__footer>span,.news-desk-columns--administration .news-desk-doctrine-card__actions>span{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-doctrine-card__footer{padding-top:0;border-top:0}
+.news-desk-columns--administration .news-desk-doctrine-card__actions{justify-content:flex-end}
+.news-desk-columns--administration .news-desk-doctrine-card__field{display:grid;gap:6px;min-width:0}
+.news-desk-columns--administration .news-desk-doctrine-card__field>span{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration :is(.news-desk-doctrine-card__field,.news-desk-merge-panel) :is(input:not([type=checkbox]),select,textarea){width:100%;max-width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--org-line);background:transparent;color:var(--administration-strong);font:400 14px/1.5 Newsroom UI,system-ui,sans-serif;letter-spacing:0}
+.news-desk-columns--administration .news-desk-doctrine-card__field textarea{min-height:96px;max-height:360px;field-sizing:content;resize:vertical}
+.news-desk-columns--administration .news-desk-doctrine-card__field :is(input,select,textarea):focus-visible{outline:2px solid var(--administration-strong);outline-offset:-1px}
+.news-desk-columns--administration .news-desk-doctrine-card__field:has(input[type=checkbox]){grid-auto-flow:column;justify-content:start;align-items:center;gap:12px}
+.news-desk-columns--administration .news-desk-doctrine-card__field input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--administration-strong)}
+.news-desk-columns--administration details{border-top:1px solid var(--org-line);padding-top:12px}
+.news-desk-columns--administration details[open]{display:grid;gap:16px}
+.news-desk-columns--administration [data-news-desk-admin-panel]{display:grid;gap:24px;align-content:start}
+.news-desk-columns--administration [data-news-desk-admin-panel]>.news-desk-doctrine-card{padding-top:24px;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font:600 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration details[open] summary{margin-bottom:0}
+.news-desk-columns--administration :is(.news-desk-doctrine-card__actions button,.news-desk-user-row__actions button,.news-desk-primary-action-button,.news-desk-merge-panel button){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--org-line);background:transparent;color:var(--administration-strong);font:600 12px/1.2 Newsroom UI,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
+.news-desk-columns--administration .news-desk-doctrine-card__actions button:last-child:not(:only-child),.news-desk-columns--administration .news-desk-doctrine-card__actions button:only-child,.news-desk-columns--administration .news-desk-primary-action-button,.news-desk-columns--administration [data-news-desk-merge-confirm]{background:transparent;border:2px solid var(--org-ink);color:var(--org-ink);font-weight:700}
+.news-desk-columns--administration :is(.news-desk-doctrine-card__actions,.news-desk-user-row__actions) button:disabled,.news-desk-columns--administration .news-desk-primary-action-button:disabled{background:transparent;border-color:var(--org-line);color:var(--administration-quiet);opacity:.6;cursor:default}
+.news-desk-columns--administration .news-desk-administration-category-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
+.news-desk-columns--administration .news-desk-administration-category-list{display:grid;gap:0;min-width:0;max-height:min(46dvh,420px);overflow:auto;padding:0;border:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-administration-category-list>.story-label{padding:12px 12px 6px;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-administration-category-list>.story-label:first-child{border-top:0}
+.news-desk-columns--administration .news-desk-administration-category-list>.news-desk-primary-action-button{margin:12px}
+.news-desk-columns--administration .news-desk-administration-category-list>.category-steering-empty{padding:12px;border:0}
+.news-desk-columns--administration .news-desk-administration-category-button{display:grid;gap:2px;width:100%;padding:10px 12px;border:0;border-left:3px solid transparent;border-top:1px solid var(--org-line);background:transparent;text-align:left;color:inherit;cursor:pointer;min-height:44px}
+.news-desk-columns--administration .news-desk-administration-category-list>.story-label+.news-desk-administration-category-button{border-top:0}
+.news-desk-columns--administration .news-desk-administration-category-button[data-selected=true]{border-left-color:var(--administration-strong);background:color-mix(in srgb,var(--administration-strong) 7%,transparent)}
+.news-desk-columns--administration .news-desk-administration-category-button span{font:700 15px/1.25 Newsroom Display,Georgia,serif;color:var(--administration-strong)}
+.news-desk-columns--administration .news-desk-administration-category-button small{font:400 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-administration-category-doctrine{display:grid;gap:0;margin-top:16px;padding-top:24px;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-user-list{display:grid;gap:0;max-width:960px}
+.news-desk-columns--administration .news-desk-user-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-user-row:first-child{padding-top:0;border-top:0}
+.news-desk-columns--administration .news-desk-user-row>div:first-child{display:grid;gap:6px;min-width:0}
+.news-desk-columns--administration .news-desk-user-row header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;justify-content:flex-start}
+.news-desk-columns--administration .news-desk-user-row strong{font-size:18px;font-weight:700;line-height:1.2}
+.news-desk-columns--administration .news-desk-user-row header span{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--administration-quiet)}
+.news-desk-columns--administration .news-desk-user-row p{margin:0;font:400 13px/1.5 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet);overflow-wrap:anywhere}
+.news-desk-columns--administration .news-desk-user-row__actions{display:flex;flex-wrap:wrap;gap:8px}
+.news-desk-columns--administration .news-desk-chip-row{display:flex;flex-wrap:wrap;gap:6px}
+.news-desk-columns--administration .news-desk-chip-row span{padding:2px 8px;border:1px solid var(--org-line);font:400 12px/1.5 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet);overflow-wrap:anywhere}
+.news-desk-columns--administration .news-desk-merge-panel{display:grid;gap:16px;margin-top:24px;padding:16px;border:1px solid var(--org-line)}
+.news-desk-columns--administration .category-steering-alert{padding:10px 12px;border:1px solid var(--org-line);border-left:3px solid var(--administration-strong);font-size:13px;line-height:1.5;color:var(--administration-strong)}
+.news-desk-columns--administration .category-steering-empty{padding:16px;border:1px dashed var(--org-line);font:400 14px/1.5 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--administration-quiet)}
+@container (min-width:600px){
+ .news-desk-columns--administration .news-desk-settings-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
+ .news-desk-columns--administration .news-desk-settings-nav a span{display:block}
+ .news-desk-columns--administration .news-desk-user-row{grid-template-columns:minmax(0,1fr) auto}
+ .news-desk-columns--administration .news-desk-user-row__actions{justify-content:flex-end;max-width:260px}
+}
+@container (min-width:900px){
+ .news-desk-columns--administration .news-desk-settings-shell{grid-template-columns:240px minmax(0,1fr);gap:32px}
+ .news-desk-columns--administration .news-desk-settings-nav{grid-template-columns:minmax(0,1fr);gap:0;position:sticky;top:0}
+ .news-desk-columns--administration .news-desk-settings-nav a{border-width:0 0 1px;padding:12px 8px}
+ .news-desk-columns--administration .news-desk-settings-nav a[data-active=true]{box-shadow:inset 3px 0 0 var(--administration-strong);border-bottom-color:var(--org-line)}
+ .news-desk-columns--administration .news-desk-administration-category-layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
+ .news-desk-columns--administration .news-desk-administration-category-list{max-height:none}
+}
+.newsroom-assignment-detail-desk{display:grid;gap:4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--org-muted)}
+.newsroom-assignment-detail-error{margin:0;text-transform:none;letter-spacing:0;color:var(--org-ink);font-weight:700}
+[data-slot=select-content],[data-slot=select-item],[data-slot=dropdown-menu-item],[data-slot=dropdown-menu-content],[role=option],[role=menuitem],[role=listbox],[role=menu]{border-radius:0 !important}
+.newsroom-desk-group-heading{margin:16px 0 8px;font:700 12px Newsroom Display,Georgia,serif;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--org-ink);padding-bottom:4px}
+.newsroom-desk-group-heading small{font:400 11px Newsroom UI,system-ui;text-transform:none;letter-spacing:0;color:var(--org-muted);margin-left:8px}
+.newsroom-desk-legacy-value{display:block;font-size:11px;color:var(--org-muted);overflow-wrap:anywhere}
+.newsroom-article-view-toggle{display:inline-flex}
+.newsroom-article-front-matter>summary{cursor:pointer;font-size:14px;font-weight:600;padding:6px 0;list-style-position:inside}
+.newsroom-article-front-matter[open]>summary{margin-bottom:6px}
+.story-trail{container-type:inline-size;display:grid;gap:20px}
+.story-trail-section h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--org-ink);padding-bottom:4px}
+.story-trail-section h3 small{font-weight:400;color:var(--org-muted);margin-left:6px}
+.story-trail-list,.story-trail-events{list-style:none;margin:0;padding:0;display:grid;gap:12px}
+.story-trail-list>li{border-bottom:1px solid var(--org-line);padding-bottom:12px;display:grid;gap:4px}
+.story-trail-list>li:last-child{border-bottom:0}
+.story-trail-events{gap:2px;padding-left:12px;border-left:2px solid var(--org-line);font-size:13px}
+.story-trail-row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
+.story-trail-meta,.story-trail-empty{font-size:12px;color:var(--org-muted);margin:0}
+.story-trail-chip{font-size:11px;border:1px solid var(--org-ink);padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
+.story-trail-message pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;font-size:12px;max-height:320px;overflow:auto}
+.story-trail-message summary{cursor:pointer;font-size:13px}
+@container (min-width:900px){.story-trail{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-items:start}}
+.newsroom-article-older-version{margin:0 0 12px;padding:8px 12px;border:1px solid var(--org-ink);border-left-width:5px;font-weight:600}
+.newsroom-article-link-button{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;color:inherit}
+.story-trail-list>li[data-story-reference-focused]{border-left:3px solid var(--org-ink);padding-left:10px}
+.story-trail-list>li[data-story-trail-feed-reference]{border-left:1px solid var(--org-line);padding-left:10px}
+.wiki{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:24px;align-items:start}
+.wiki-sidebar{display:grid;gap:8px;position:sticky;top:0;max-height:100vh;overflow:auto;border-right:1px solid var(--org-line);padding-right:16px}
+.wiki-home{text-align:left;background:none;border:0;border-bottom:1px solid var(--org-ink);padding:4px 0;font:inherit;font-weight:600;cursor:pointer;color:var(--org-ink)}
+.wiki-home[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
+.wiki-search,.wiki-kind{font:inherit;border:1px solid var(--org-ink);border-radius:0;padding:4px 8px;background:transparent;color:var(--org-ink)}
+.wiki-sidebar-list,.wiki-concept-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.wiki-sidebar-list a{color:var(--org-ink);text-decoration:none}
+.wiki-sidebar-list a[aria-current="page"]{font-weight:700;text-decoration:underline;text-underline-offset:4px}
+.wiki-main{min-width:0;max-width:820px}
+.wiki-page h1{margin:0 0 6px}
+.wiki-page h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--org-ink);padding-bottom:4px;margin:24px 0 8px}
+.wiki-page h3{font-size:13px;margin:12px 0 4px}
+.wiki-page-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
+.wiki-tool-link{background:none;border:0;padding:0;font:inherit;color:var(--org-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
+.wiki-link,.wiki-concept-list a{color:var(--org-ink);text-decoration:underline;text-underline-offset:3px}
+.wiki-concept-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
+.wiki-chip{font-size:11px;border:1px solid var(--org-ink);padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
+.wiki-meta,.wiki-empty{font-size:12px;color:var(--org-muted);margin:0}
+@media (max-width:760px){.wiki{grid-template-columns:minmax(0,1fr)}.wiki-sidebar{position:static;max-height:240px;border-right:0;padding-right:0}}
+.organizer-board-body .kb-issue-detail [data-markus-preview] a,.organizer-board-body .kb-issue-detail .wiki-link{display:inline;min-height:0;padding:0}
+.newsroom-article-front-matter-fields{display:grid;gap:10px;max-width:640px}
+.newsroom-article-front-matter-fields label{display:grid;gap:4px;font-size:13px;font-weight:600}
+.newsroom-article-summary{border-bottom:1px solid var(--org-line);margin-bottom:12px;padding-bottom:10px}
+.newsroom-article-subtitle{margin:0 0 4px;font-size:18px;font-weight:600;line-height:1.3}
+.newsroom-article-blurb{margin:0;font-size:14px;line-height:1.45}
+.organizer-search{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--org-ink);padding:2px 0;min-width:140px;max-width:240px}
+.organizer-search input{font:inherit;font-size:13px;border:0;background:transparent;color:var(--org-ink);outline:0;width:100%;padding:2px 0}
+.organizer-search input:focus-visible{text-decoration:underline;text-underline-offset:4px}
+@media (max-width:900px){.organizer-search{min-width:0;max-width:120px}}
+.taxonomy-view-switch{display:flex;gap:20px;border-bottom:1px solid var(--org-line);margin-bottom:12px}
+.taxonomy-view-switch a{color:var(--org-ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
+.taxonomy-view-switch a[aria-current="page"]{font-weight:700;border-bottom-color:var(--org-ink)}
+.news-desk-settings-shell[data-settings-nav="hidden"]{display:block}
+.news-desk-columns--taxonomy{display:block;margin:0;--administration-quiet:var(--org-muted);--administration-strong:var(--org-ink)}
+.news-desk-columns--taxonomy .category-steering-section--lead>.category-steering-section__header{display:flex}
+.news-desk-columns--taxonomy .news-desk-main-column{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:0 40px;align-items:start;grid-column:auto;container-type:inline-size}
+.news-desk-columns--taxonomy .news-desk-desk-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
+.news-desk-columns--taxonomy .news-desk-desk-card{border-top:0;border-bottom:1px solid var(--org-line);border-left:3px solid transparent;padding:12px 0 12px 12px;gap:2px;background:none}
+.news-desk-columns--taxonomy .news-desk-desk-card[data-selected="true"]{border-left-color:var(--org-ink);background:none;padding:12px 0 12px 12px}
+.news-desk-columns--taxonomy .news-desk-desk-card[data-selected="true"] strong{text-decoration:underline;text-underline-offset:4px}
+.news-desk-columns--taxonomy .news-desk-desk-card>span{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;color:var(--org-muted)}
+.news-desk-columns--taxonomy .news-desk-desk-card strong{font:700 18px/1.2 Newsroom Display,Georgia,serif;color:var(--org-ink)}
+.news-desk-columns--taxonomy .news-desk-desk-card p{font:400 13px/1.4 Newsroom UI,system-ui,sans-serif;color:var(--org-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.news-desk-columns--taxonomy .news-desk-desk-card small{font:400 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--org-muted)}
+.news-desk-columns--taxonomy .news-desk-desk-detail{margin:0;display:grid;gap:24px;min-width:0}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header{display:grid;gap:12px;border-bottom:3px double var(--org-ink);padding-bottom:16px}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header h3{margin:0;font:700 30px/1.15 Newsroom Display,Georgia,serif}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header>div>span{font:400 13px/1.4 Newsroom UI,system-ui,sans-serif;color:var(--org-muted)}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header dl{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header dl>div{display:flex;flex-direction:column-reverse;gap:2px}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header dt{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--org-muted)}
+.news-desk-columns--taxonomy .news-desk-topic-detail__header dd{margin:0;font:700 22px/1.1 Newsroom Display,Georgia,serif}
+.news-desk-columns--taxonomy .news-desk-desk-detail__grid{grid-template-columns:minmax(0,1fr);gap:32px}
+@container (min-width:900px){.news-desk-columns--taxonomy .news-desk-desk-detail__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
+.news-desk-columns--taxonomy .category-steering-category-card{display:grid;gap:14px;border:0;padding:0;background:none}
+.news-desk-columns--taxonomy .category-steering-category-card>header,.news-desk-columns--taxonomy .category-steering-category-card>footer{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px}
+.news-desk-columns--taxonomy .category-steering-category-card label{display:grid;gap:6px}
+.news-desk-columns--taxonomy .category-steering-category-card label>span{font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--org-muted)}
+.news-desk-columns--taxonomy .category-steering-category-card :is(input,textarea){width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--org-line);border-radius:0;background:transparent;color:var(--org-ink);font:400 14px/1.5 Newsroom UI,system-ui,sans-serif}
+.news-desk-columns--taxonomy .news-desk-desk-subtopics{border-top:1px solid var(--org-line);padding-top:16px}
+.news-desk-columns--taxonomy .news-desk-chip-row{display:flex;flex-wrap:wrap;gap:8px}
+.news-desk-columns--taxonomy .news-desk-chip-row span{border:1px solid var(--org-ink);padding:2px 8px;font:400 13px/1.4 Newsroom UI,system-ui,sans-serif;border-radius:0}
+.news-desk-columns--taxonomy .news-desk-rail-column{grid-column:auto;padding:0;margin-top:32px;border-top:1px solid var(--org-ink);padding-top:16px}
+.news-desk-columns--taxonomy .news-desk-ledger-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
+.news-desk-columns--taxonomy .news-desk-ledger-item{display:grid;gap:4px;border:0;padding:0}
+.news-desk-columns--taxonomy .news-desk-ledger-item header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px}
+.news-desk-columns--taxonomy .news-desk-ledger-item p{margin:0;font:400 13px/1.45 Newsroom UI,system-ui,sans-serif}
+@media (max-width:900px){.news-desk-columns--taxonomy .news-desk-main-column{grid-template-columns:minmax(0,1fr);gap:24px}}
+.news-desk-columns--taxonomy :is(.category-steering-category-card>header span,.category-steering-category-card>footer span,.news-desk-desk-detail__grid span,.category-steering-subcategory-list__label,.news-desk-ledger-item header span){color:var(--org-ink);opacity:1;font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
+.news-desk-columns--taxonomy .category-steering-category-card>header strong{font:700 12px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--org-ink)}
+.news-desk-columns--taxonomy .category-steering-category-card button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:4px 12px;border:2px solid var(--org-ink);border-radius:0;background:transparent;color:var(--org-ink);font:700 12px/1.2 Newsroom UI,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
+.news-desk-columns--taxonomy .category-steering-category-card button:disabled{border-color:var(--org-line);opacity:.6;cursor:default}
+.news-desk-columns--taxonomy .news-desk-rail-column .category-steering-section__header{border-bottom:0;padding-bottom:4px}

package/components/priming-proof-page.tsx

@@ -4,15 +4,24 @@ import {
   type PrimingProofReport,
 } from "../lib/priming-proof-report";
 
-function ProofMethod({ heldOutSize, teachingSource }: { heldOutSize: number | null; teachingSource: string | null }) {
+function ProofMethod({ heldOutSize, teachingSource, design }: { heldOutSize: number | null; teachingSource: string | null; design: string | null }) {
   return (
     <section aria-labelledby="priming-proof-method" className="space-y-2 text-sm leading-relaxed">
       <h2 id="priming-proof-method" className="text-base font-semibold uppercase tracking-wide">How the number is made</h2>
-      <p>
-        Editors already decided which candidate sources belong in this publication. A fixed, balanced sample of those
-        decisions{heldOutSize === null ? "" : ` (${heldOutSize} sources)`} is frozen as the held-out set and never used
-        for teaching. A classifier that always gives the same answer agrees on half of it.
-      </p>
+      {design === null ? (
+        <p>
+          Editors already decided which candidate sources belong in this publication. A fixed, balanced sample of those
+          decisions{heldOutSize === null ? "" : ` (${heldOutSize} sources)`} is frozen as the held-out set and never used
+          for teaching. A classifier that always gives the same answer agrees on half of it.
+        </p>
+      ) : (
+        <p>
+          Editors already decided which candidate sources belong in this publication
+          {heldOutSize === null ? "" : `, ${heldOutSize} of them`}. Design: {design}. No source is ever judged by a
+          classifier that was taught from that same source. The two outcomes are not equally common, so read agreement
+          beside precision and recall: a classifier that always gives the majority answer would still agree often.
+        </p>
+      )}
       <p>
         Editors teach the classifier with labels: their other reviews of candidate sources, and sources they paste,
         check after Papyrus extracts them, and mark publish or reject.
@@ -33,7 +42,7 @@ export function PrimingProofPage({ report }: { report: PrimingProofReport | null
           <h1 className="text-3xl font-bold">Does teaching the classifier work?</h1>
           <p className="text-muted-foreground">No approved proof run has been published for this publication yet.</p>
         </header>
-        <ProofMethod heldOutSize={null} teachingSource={null} />
+        <ProofMethod heldOutSize={null} teachingSource={null} design={null} />
       </main>
     );
   }
@@ -84,7 +93,7 @@ export function PrimingProofPage({ report }: { report: PrimingProofReport | null
           </table>
         </div>
       </section>
-      <ProofMethod heldOutSize={report.heldOut.size} teachingSource={report.priming.source} />
+      <ProofMethod heldOutSize={report.heldOut.size} teachingSource={report.priming.source} design={report.heldOut.design ?? null} />
       <p className="break-all text-xs text-muted-foreground">
         Held-out fingerprint {report.heldOut.fingerprint}
         {report.priming.fingerprint ? ` · labels fingerprint ${report.priming.fingerprint}` : ""}

package/components/story-reporting-trail-client.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "../amplify/data/resource";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { createLocalPreviewReportingTrail } from "../lib/local-preview-seed";
+import { EMPTY_STORY_REPORTING_TRAIL, type StoryReportingTrail, type TrailAssignment, type TrailAttachment, type TrailReference, type TrailThread, type TrailVersion } from "../lib/story-reporting-trail";
+import { configureAmplifyClient } from "./amplify-client-provider";
+
+type GraphqlResponse = { data?: Record<string, { items?: Record<string, unknown>[] | null; nextToken?: string | null } | null> | null; errors?: { message?: string }[] | null };
+type GraphqlClient = { graphql: (options: Record<string, unknown>) => Promise<GraphqlResponse> };
+
+const USER_POOL = "userPool";
+const PAGE_LIMIT = 200;
+
+async function listAll(client: GraphqlClient, field: string, selection: string, variableDeclarations: string, fieldArguments: string, variables: Record<string, unknown>): Promise<Record<string, unknown>[]> {
+  const rows: Record<string, unknown>[] = [];
+  let nextToken: string | null = null;
+  do {
+    const response: GraphqlResponse = await client.graphql({
+      query: `query ($limit: Int, $nextToken: String${variableDeclarations}) { ${field}(limit: $limit, nextToken: $nextToken${fieldArguments}) { items { ${selection} } nextToken } }`,
+      variables: { ...variables, limit: PAGE_LIMIT, nextToken },
+      authMode: USER_POOL,
+    });
+    if (response.errors?.length) throw new Error(response.errors.map(error => error.message ?? "GraphQL error").join("; "));
+    const connection = response.data?.[field];
+    rows.push(...((connection?.items ?? []).filter(Boolean) as Record<string, unknown>[]));
+    nextToken = connection?.nextToken ?? null;
+  } while (nextToken);
+  return rows;
+}
+
+const text = (value: unknown): string | null => typeof value === "string" ? value : null;
+
+function parseMetadata(value: unknown): Record<string, unknown> {
+  if (typeof value === "string") {
+    try { const parsed = JSON.parse(value); return typeof parsed === "object" && parsed ? parsed as Record<string, unknown> : {}; } catch { return {}; }
+  }
+  return typeof value === "object" && value ? value as Record<string, unknown> : {};
+}
+
+async function getReference(client: GraphqlClient, referenceId: string): Promise<Record<string, unknown> | null> {
+  try {
+    const response = await client.graphql({ query: "query ($id: ID!) { getReference(id: $id) { id title sourceUri } }", variables: { id: referenceId }, authMode: USER_POOL });
+    return (response.data?.getReference as unknown as Record<string, unknown> | null) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** Reads the whole reporting trail of one story from the backend; the local preview serves a snapshot instead. */
+export async function loadStoryReportingTrail(lineageId: string, itemId: string): Promise<StoryReportingTrail> {
+  if (isLocalPreviewEnabled()) return createLocalPreviewReportingTrail(lineageId);
+  configureAmplifyClient();
+  const client = generateClient<Schema>() as unknown as GraphqlClient;
+  const [versionRows, assignmentRows, attachmentRows, relationRows] = await Promise.all([
+    listAll(client, "listItemsByLineageAndVersion", "id versionNumber versionState status stage headline title changeReason versionCreatedBy versionCreatedAt updatedAt", ", $lineageId: ID!", ", lineageId: $lineageId", { lineageId }).catch(() => []),
+    listAll(client, "listAssignmentsByItemLineageAndCreatedAt", "id title assignmentTypeKey status assigneeKey summary createdAt", ", $itemLineageId: ID!", ", itemLineageId: $itemLineageId", { itemLineageId: lineageId }).catch(() => []),
+    listAll(client, "listModelAttachmentsByOwnerRoleAndSortKey", "id role filename mediaType byteSize", ", $ownerId: ID!", ", ownerId: $ownerId", { ownerId: itemId }).catch(() => []),
+    listAll(client, "listSemanticRelations", "id predicate subjectKind subjectLineageId objectKind objectId objectLineageId metadata", ", $filter: ModelSemanticRelationFilterInput", ", filter: $filter", { filter: { or: [{ subjectLineageId: { eq: lineageId } }, { objectLineageId: { eq: lineageId } }] } }).catch(() => []),
+  ]);
+  const versions: TrailVersion[] = versionRows.map(row => ({
+    id: String(row.id), versionNumber: Number(row.versionNumber ?? 0), versionState: text(row.versionState), status: text(row.status), stage: text(row.stage),
+    headline: text(row.headline) ?? text(row.title), changeReason: text(row.changeReason), versionCreatedBy: text(row.versionCreatedBy), versionCreatedAt: text(row.versionCreatedAt), updatedAt: text(row.updatedAt),
+  })).sort((left, right) => right.versionNumber - left.versionNumber);
+  const assignments: TrailAssignment[] = await Promise.all(assignmentRows.map(async row => {
+    const eventRows = await listAll(client, "listAssignmentEventsByAssignmentAndCreatedAt", "id eventType fromStatus toStatus actorLabel note createdAt", ", $assignmentId: ID!", ", assignmentId: $assignmentId", { assignmentId: row.id }).catch(() => []);
+    return {
+      id: String(row.id), title: String(row.title ?? ""), assignmentTypeKey: String(row.assignmentTypeKey ?? ""), status: String(row.status ?? ""), assigneeKey: text(row.assigneeKey), summary: text(row.summary), createdAt: String(row.createdAt ?? ""),
+      events: eventRows.map(event => ({ id: String(event.id), eventType: String(event.eventType ?? ""), fromStatus: text(event.fromStatus), toStatus: text(event.toStatus), actorLabel: text(event.actorLabel), note: text(event.note), createdAt: String(event.createdAt ?? "") })),
+    };
+  }));
+  const anchorFilters = [{ primaryAnchorLineageId: { eq: lineageId } }, ...assignments.map(assignment => ({ primaryAnchorId: { eq: assignment.id } }))];
+  const threadRows = await listAll(client, "listMessageThreads", "id title threadKind summary", ", $filter: ModelMessageThreadFilterInput", ", filter: $filter", { filter: { or: anchorFilters } }).catch(() => []);
+  const threads: TrailThread[] = await Promise.all(threadRows.map(async row => {
+    const messageRows = await listAll(client, "listMessagesByThreadAndSequence", "id messageKind authorLabel summary content createdAt sequenceNumber", ", $threadId: ID!", ", threadId: $threadId", { threadId: row.id }).catch(() => []);
+    return { id: String(row.id), title: text(row.title), threadKind: text(row.threadKind), summary: text(row.summary), messages: messageRows.map(message => ({ id: String(message.id), sequenceNumber: typeof message.sequenceNumber === "number" ? message.sequenceNumber : null, messageKind: text(message.messageKind), authorLabel: text(message.authorLabel), summary: text(message.summary), content: text(message.content), createdAt: String(message.createdAt ?? "") })) };
+  }));
+  const referenceRelations = relationRows.filter(relation => relation.predicate === "uses_evidence" && relation.subjectLineageId === lineageId && relation.objectKind === "reference");
+  const references: TrailReference[] = await Promise.all(referenceRelations.map(async relation => {
+    const metadata = parseMetadata(relation.metadata);
+    const referenceRow = await getReference(client, String(relation.objectId));
+    return {
+      relationId: String(relation.id), predicate: String(relation.predicate ?? ""), referenceId: String(relation.objectId), referenceLineageId: text(relation.objectLineageId),
+      title: text(referenceRow?.title), sourceUri: text(referenceRow?.sourceUri),
+      role: metadata.role === "cited" ? "cited" as const : "consulted" as const, note: text(metadata.note), citationKey: text(metadata.citationKey), addedBy: text(metadata.addedBy), addedAt: text(metadata.addedAt),
+    };
+  }));
+  const attachments: TrailAttachment[] = attachmentRows.map(row => ({ id: String(row.id), role: text(row.role), filename: text(row.filename), mediaType: text(row.mediaType), byteSize: typeof row.byteSize === "number" ? row.byteSize : null }));
+  return { ...EMPTY_STORY_REPORTING_TRAIL, versions, assignments, threads, references, attachments };
+}

package/components/story-reporting-trail.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { storyMessageFeed, storyReportingTrailIsEmpty, type StoryReportingTrail, type TrailReference } from "../lib/story-reporting-trail";
+import { loadStoryReportingTrail } from "./story-reporting-trail-client";
+
+const timestampFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+function formatTimestamp(value: string | null | undefined): string {
+  if (!value) return "";
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : timestampFormat.format(parsed);
+}
+
+function ReferenceSummary({ citedKeys, demo, focused, reference }: { citedKeys: readonly string[]; demo: boolean; focused: boolean; reference: TrailReference }) {
+  return <>
+    <div className="story-trail-row">
+      <strong>{reference.title ?? reference.referenceId}</strong>
+      <span className="story-trail-chip" data-story-trail-reference-role={reference.role}>{reference.role === "cited" ? "Cited" : "Consulted"}</span>
+      {reference.citationKey && citedKeys.includes(reference.citationKey) && <span className="story-trail-chip">In the text</span>}
+    </div>
+    <div className="story-trail-meta">{[reference.addedBy && `added by ${reference.addedBy}`, formatTimestamp(reference.addedAt), reference.citationKey && `citation key ${reference.citationKey}`].filter(Boolean).join(" · ")}</div>
+    {reference.note && <p data-story-trail-reference-summary={focused ? "focused" : undefined}>{reference.note}</p>}
+    {reference.sourceUri && <div className="story-trail-meta">{reference.sourceUri}</div>}
+    {reference.referenceLineageId && <Link href={getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(reference.referenceLineageId)}`, demo)}>Open the full reference page</Link>}
+  </>;
+}
+
+function TrailSection({ count, children, title }: { count: number; children: React.ReactNode; title: string }) {
+  return <section className="story-trail-section" data-story-trail-section={title.toLowerCase()}>
+    <h3>{title} <small>{count}</small></h3>
+    {count ? children : <p className="story-trail-empty">None recorded.</p>}
+  </section>;
+}
+
+/**
+ * The messages and references of one story: draft versions, the assignments and agent events that did the work,
+ * notes and packets, the references behind it, and attached files. Container queries lay the sections out
+ * in one column in a narrow Board panel and side by side on a wide page.
+ */
+export function StoryReportingTrailView({ citedKeys = [], demo = false, focusedReferenceId = null, itemId, lineageId, onOpenVersion, onShowReference, view = "messages" }: { citedKeys?: readonly string[]; demo?: boolean; focusedReferenceId?: string | null; itemId: string; lineageId: string | null | undefined; onOpenVersion?: (versionId: string) => void; onShowReference?: (referenceId: string) => void; view?: "messages" | "references" }) {
+  const [trail, setTrail] = useState<StoryReportingTrail | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setTrail(null); setError(null);
+    loadStoryReportingTrail(lineageId || itemId, itemId)
+      .then(loaded => { if (!cancelled) setTrail(loaded); })
+      .catch((reason: unknown) => { if (!cancelled) setError(reason instanceof Error ? reason.message : "Could not load the reporting trail."); });
+    return () => { cancelled = true; };
+  }, [itemId, lineageId]);
+  if (error) return <p role="alert" className="story-trail-empty">{error}</p>;
+  if (!trail) return <p className="story-trail-empty">Loading the reporting trail…</p>;
+  const messageFeed = storyMessageFeed(trail);
+  if (view === "references") return <div className="story-trail" data-story-trail data-story-trail-view="references">
+    <TrailSection count={trail.references.length} title="References">
+      <ul className="story-trail-list" data-story-references-list>
+        {trail.references.map(reference => <li data-story-reference-entry={reference.referenceId} data-story-reference-focused={reference.referenceId === focusedReferenceId ? "true" : undefined} key={reference.relationId} ref={reference.referenceId === focusedReferenceId ? node => node?.scrollIntoView({ block: "nearest" }) : undefined}>
+          <ReferenceSummary citedKeys={citedKeys} demo={demo} focused={reference.referenceId === focusedReferenceId} reference={reference} />
+        </li>)}
+      </ul>
+    </TrailSection>
+  </div>;
+  return <div className="story-trail" data-story-trail data-story-trail-view="messages">
+    {storyReportingTrailIsEmpty(trail) && <p className="story-trail-empty">No messages have been recorded for this story yet. Notes and packets, the work done on it, its draft versions and the references behind it appear here as agents and editors work on it.</p>}
+    <TrailSection count={messageFeed.length} title="Messages">
+      <ol className="story-trail-list" data-story-trail-feed>
+        {messageFeed.map(entry => entry.entryKind === "reference"
+          ? <li data-story-trail-feed-reference={entry.reference.referenceId} key={entry.id}>
+            <div className="story-trail-row"><span className="story-trail-chip">Reference found</span><span className="story-trail-meta">{formatTimestamp(entry.createdAt)}</span></div>
+            <ReferenceSummary citedKeys={citedKeys} demo={demo} focused={false} reference={entry.reference} />
+            {onShowReference && <button className="newsroom-article-link-button" data-story-trail-show-reference={entry.reference.referenceId} onClick={() => onShowReference(entry.reference.referenceId)} type="button">Show in the References list</button>}
+          </li>
+          : <li key={entry.id}>
+            <div className="story-trail-row"><strong>{entry.authorLabel ?? "Unknown author"}</strong>{entry.messageKind && <span className="story-trail-chip">{entry.messageKind.replace(/_/g, " ")}</span>}<span className="story-trail-meta">{formatTimestamp(entry.createdAt)}</span></div>
+            {entry.summary && <p><strong>{entry.summary}</strong></p>}
+            {entry.content && <details className="story-trail-message" open={messageFeed.length <= 3}><summary>Show the message</summary><pre>{entry.content}</pre></details>}
+          </li>)}
+      </ol>
+    </TrailSection>
+    <TrailSection count={trail.versions.length} title="Draft versions">
+      <ol className="story-trail-list">
+        {trail.versions.map((version, versionIndex) => <li key={version.id}>
+          <div className="story-trail-row"><strong>Version {version.versionNumber}</strong>{versionIndex === 0 && <span className="story-trail-chip">Latest</span>}<span className="story-trail-chip">{version.versionState ?? "draft"}</span>{version.stage && <span className="story-trail-chip">{version.stage}</span>}</div>
+          <div className="story-trail-meta">{[formatTimestamp(version.versionCreatedAt ?? version.updatedAt), version.versionCreatedBy, version.changeReason].filter(Boolean).join(" · ")}</div>
+          {onOpenVersion
+            ? <button className="newsroom-article-link-button" data-story-trail-open-version={version.versionNumber} onClick={() => onOpenVersion(version.id)} type="button">{versionIndex === 0 ? "Open the latest version" : "Open this older version (read-only)"}</button>
+            : <Link href={getNewsroomNavHref(`/newsroom/articles/${encodeURIComponent(version.id)}`, demo)}>{versionIndex === 0 ? "Open the latest version" : "Open this older version (read-only)"}</Link>}
+        </li>)}
+      </ol>
+    </TrailSection>
+    <TrailSection count={trail.assignments.length} title="Work">
+      <ol className="story-trail-list">
+        {trail.assignments.map(assignment => <li key={assignment.id}>
+          <div className="story-trail-row"><strong>{assignment.title}</strong> <span className="story-trail-chip">{assignment.status}</span></div>
+          <div className="story-trail-meta">{[assignment.assignmentTypeKey, assignment.assigneeKey, formatTimestamp(assignment.createdAt)].filter(Boolean).join(" · ")}</div>
+          {assignment.summary && <p>{assignment.summary}</p>}
+          {assignment.events.length > 0 && <ol className="story-trail-events">
+            {assignment.events.map(event => <li key={event.id}>
+              <span className="story-trail-meta">{formatTimestamp(event.createdAt)}</span> {event.eventType}{event.toStatus ? ` → ${event.toStatus}` : ""}{event.actorLabel ? ` by ${event.actorLabel}` : ""}{event.note ? `: ${event.note}` : ""}
+            </li>)}
+          </ol>}
+          <Link href={getNewsroomNavHref(`/newsroom/assignments/${encodeURIComponent(assignment.id)}`, demo)}>Open assignment</Link>
+        </li>)}
+      </ol>
+    </TrailSection>
+    <TrailSection count={trail.attachments.length} title="Files">
+      <ul className="story-trail-list">
+        {trail.attachments.map(attachment => <li key={attachment.id}><strong>{attachment.filename ?? attachment.id}</strong> <span className="story-trail-meta">{[attachment.role, attachment.mediaType].filter(Boolean).join(" · ")}</span></li>)}
+      </ul>
+    </TrailSection>
+  </div>;
+}