@anthusai/papyrus 5.44.0 → 5.45.0

package/amplify/functions/model-attachment-upload/handler.ts

@@ -41,6 +41,7 @@ const ALLOWED_ROLES = new Set([
   "item_excerpt",
   "message_body",
   "metadata",
+  "preview",
   "ontology_concept_profile",
   "ontology_relation_explanation",
   "published_item_body",

package/amplify/functions/monitoring-view/schema.js

@@ -14,6 +14,14 @@ export const monitoringViewSchemaDefinitions = {
         .returns(a.json())
         .authorization((allow) => [allow.groups(editors)])
         .handler(functionHandler("monitoringView", monitoringView)),
+    // One more page of one Monitoring list (runs, routerRuns, items, emailSubmissions), after a cursor from
+    // the overview or a previous page. filter "held" lists only held email submissions, restarting from the newest.
+    monitoringPage: a
+        .query()
+        .arguments({ list: a.string().required(), cursor: a.string(), filter: a.string(), scope: a.string() })
+        .returns(a.json())
+        .authorization((allow) => [allow.groups(editors)])
+        .handler(functionHandler("monitoringView", monitoringView)),
     monitoringEmailSubmission: a
         .query()
         .arguments({ receiptId: a.string().required() })

package/amplify/functions/monitoring-view/schema.ts

@@ -16,6 +16,14 @@ export const monitoringViewSchemaDefinitions = {
     .returns(a.json())
     .authorization((allow) => [allow.groups(editors)])
     .handler(functionHandler("monitoringView", monitoringView)),
+  // One more page of one Monitoring list (runs, routerRuns, items, emailSubmissions), after a cursor from
+  // the overview or a previous page. filter "held" lists only held email submissions, restarting from the newest.
+  monitoringPage: a
+    .query()
+    .arguments({ list: a.string().required(), cursor: a.string(), filter: a.string(), scope: a.string() })
+    .returns(a.json())
+    .authorization((allow) => [allow.groups(editors)])
+    .handler(functionHandler("monitoringView", monitoringView)),
   monitoringEmailSubmission: a
     .query()
     .arguments({ receiptId: a.string().required() })

package/components/monitoring-overview-view.tsx

@@ -18,6 +18,7 @@ import {
   type EmailDecisionResult,
   type EmailQuarantine,
   type MonitoringItem,
+  type MonitoringListName,
   type MonitoringEmailDetails,
   type MonitoringEmailArticleResolution,
   type EmailReferenceImportItem,
@@ -30,6 +31,27 @@ import {
 
 export type MonitoringMode = "publication" | "all";
 
+/** How a paged list loads more: the page owns the cursors and the requests, the view only shows the button. */
+export type MonitoringPaging = {
+  /** Loads the next page of a list; the page appends it. */
+  onLoadMore?: (list: MonitoringListName) => void;
+  /** The list whose next page is being fetched. */
+  loadingList?: MonitoringListName | null;
+  /** Show only email submissions held for review (restarts the email list from its newest held message). */
+  heldOnly?: boolean;
+  onHeldOnlyChange?: (heldOnly: boolean) => void;
+};
+
+function LoadMore({ list, cursor, paging }: { list: MonitoringListName; cursor: string | null | undefined; paging?: MonitoringPaging }) {
+  if (!cursor || !paging?.onLoadMore) return null;
+  const loading = paging.loadingList === list;
+  return (
+    <button type="button" data-monitoring-load-more={list} disabled={loading} onClick={() => paging.onLoadMore?.(list)}>
+      {loading ? "Loading…" : "Load more"}
+    </button>
+  );
+}
+
 const STATUS_WORDS: Record<string, string> = { complete: "Complete", partial: "Partial", stopped: "Stopped", failed: "Failed", error: "Error" };
 const status = (value: string) => STATUS_WORDS[value] ?? value;
 const STOP_WORDS: Record<string, string> = {
@@ -102,8 +124,9 @@ function QueueItem({ item, ownId, demo }: { item: MonitoringItem; ownId: string
   );
 }
 
-export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImportCandidates, onDecide }: {
+export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink, onImportCandidates, onDecide, cursor, paging }: {
   items: MonitoringEmailSummary[]; detail: MonitoringEmailDetails | null; onOpen?: (receiptId: string) => void;
+  cursor?: string | null; paging?: MonitoringPaging;
   onDecide?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
   onResolveArticleLink?: (receiptId: string, candidateIndex: number) => Promise<MonitoringEmailArticleResolution>;
   onImportCandidates?: (receiptId: string, items: EmailReferenceImportItem[]) => Promise<EmailReferenceImportOutcome>;
@@ -121,6 +144,7 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   const receiptKey = receiptId ?? "";
   const quarantine = (detail && "submission" in detail ? decidedByReceipt[receiptKey] ?? detail.submission.quarantine : null);
   const accepted = emailSubmissionAccepted(quarantine);
+  const groupInfo = detail && "submission" in detail ? items.find((item) => item.receiptId === detail.submission.receiptId)?.group : undefined;
   const reason = reasonByReceipt[receiptKey] ?? "";
   const busyDecision = busyDecisionByReceipt[receiptKey] ?? false;
   const selected = selectedByReceipt[receiptKey] ?? {};
@@ -242,9 +266,23 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   return (
     <article className="news-desk-doctrine-card" data-monitoring-section="email-submissions">
       <div className="news-desk-doctrine-card__header"><div><h3>Email submissions</h3><span>Untrusted source material held privately for editor review</span></div></div>
+      {paging?.onHeldOnlyChange ? (
+        <div className="news-desk-monitoring__scope" role="group" aria-label="Filter email submissions">
+          <button type="button" aria-pressed={!paging.heldOnly} data-email-filter="all" onClick={() => paging.onHeldOnlyChange?.(false)}>All</button>
+          <button type="button" aria-pressed={paging.heldOnly === true} data-email-filter="held" onClick={() => paging.onHeldOnlyChange?.(true)}>Held for review</button>
+        </div>
+      ) : null}
       {items.length ? <ul className="news-desk-monitoring__list">
         {items.map((item) => <li key={item.receiptId} data-email-submission={item.receiptId}>
           <strong>{item.subject || "(no subject)"}</strong>
+          {item.group ? <details data-email-group={item.group.fingerprint}>
+            <summary>Received {item.group.count} times · latest {formatUtc(item.observedAt)}</summary>
+            <ol>
+              {item.group.copies.map((copy) => <li key={copy.receiptId} data-email-copy={copy.receiptId}>
+                {formatUtc(copy.observedAt)} · {copy.quarantine ? QUARANTINE_LABELS[copy.quarantine.state] : copy.status}
+              </li>)}
+            </ol>
+          </details> : null}
           <span>{formatUtc(item.observedAt)} · {item.linkCount} candidate links · {item.reviewRequired
             ? `${item.linkCount} await editor import` : `${item.processedCount} queued`}</span>
           {item.reviewRequired ? <span>Authentication warnings: private review required; nothing was routed automatically.</span> : null}
@@ -256,7 +294,8 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
           {item.quarantine ? <span data-email-quarantine-state={item.quarantine.state}>{QUARANTINE_LABELS[item.quarantine.state]}</span> : null}
           {onOpen ? <button type="button" onClick={() => onOpen(item.receiptId)}>Read email and review candidate links</button> : null}
         </li>)}
-      </ul> : <p>No email submissions are available for this publication.</p>}
+      </ul> : <p>{paging?.heldOnly ? "No email submissions are held for review." : "No email submissions are available for this publication."}</p>}
+      <LoadMore list="emailSubmissions" cursor={cursor} paging={paging} />
       {detail && "submission" in detail ? (
         <section aria-label="Email submission details" data-email-submission-details={detail.submission.receiptId}>
           <h4>{detail.submission.subject || "Submitted email"}</h4>
@@ -266,6 +305,7 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
             <h5>{QUARANTINE_LABELS[quarantine.state]}</h5>
             {quarantine.state === "quarantined" ? <>
               <p>This message was held privately and nothing was routed. Accept it to queue its links as if it had been accepted, or Reject it to close it. Sender identity and authentication signals never grant access; the decision is yours and is recorded.</p>
+              {groupInfo ? <p data-email-group-note>One decision applies to all {groupInfo.count} copies of this email.</p> : null}
               <label>Why? (optional)
                 <textarea value={reason} rows={3} maxLength={500} style={{ display: "block", width: "100%" }}
                   onChange={(event) => setReasonByReceipt((current) => ({ ...current, [receiptKey]: event.target.value }))} />
@@ -278,7 +318,7 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
               </button>
             </> : null}
             {quarantine.decision ? <p data-email-decision-record>
-              {quarantine.decision.action === "accept" ? "Accepted" : "Rejected"}
+              {quarantine.decision.action === "accept" ? "Accepted" : "Rejected"}{quarantine.decision.viaGroup ? " (one decision for every copy of this email)" : ""}
               {quarantine.decision.by ? ` by ${quarantine.decision.by}` : ""}{quarantine.decision.at ? ` on ${formatUtc(quarantine.decision.at)}` : ""}
               {quarantine.decision.reason ? `. Why: ${quarantine.decision.reason}` : "."}
             </p> : null}
@@ -323,8 +363,8 @@ export function EmailSubmissions({ items, detail, onOpen, onResolveArticleLink,
   );
 }
 
-function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onImportCandidates, onDecide }: {
-  data: MonitoringOverview; demo: boolean; emailDetail: MonitoringEmailDetails | null; onEmailOpen: (id: string) => void;
+function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onImportCandidates, onDecide, paging }: {
+  data: MonitoringOverview; demo: boolean; paging?: MonitoringPaging; emailDetail: MonitoringEmailDetails | null; onEmailOpen: (id: string) => void;
   onDecide?: (receiptId: string, decision: "accept" | "reject", reason: string) => Promise<EmailDecisionResult>;
   onResolveArticleLink?: (receiptId: string, candidateIndex: number) => Promise<MonitoringEmailArticleResolution>;
   onImportCandidates?: (receiptId: string, items: EmailReferenceImportItem[]) => Promise<EmailReferenceImportOutcome>;
@@ -337,6 +377,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
       ) : null}
 
       <EmailSubmissions items={data.emailSubmissions ?? []} detail={emailDetail} onOpen={onEmailOpen}
+        cursor={data.cursors?.emailSubmissions} paging={paging}
         onResolveArticleLink={demo ? undefined : onResolveArticleLink}
         onImportCandidates={demo ? undefined : onImportCandidates}
         onDecide={demo ? undefined : onDecide} />
@@ -397,6 +438,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             ))}
           </ul>
         ) : <p>No collector runs recorded yet.</p>}
+        <LoadMore list="runs" cursor={data.cursors?.runs} paging={paging} />
         {data.routerRuns.length ? (
           <ul className="news-desk-monitoring__list" data-monitoring-router-runs>
             {data.routerRuns.map((run) => (
@@ -409,6 +451,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             ))}
           </ul>
         ) : null}
+        <LoadMore list="routerRuns" cursor={data.cursors?.routerRuns} paging={paging} />
       </article>
 
       <article className="news-desk-doctrine-card" data-monitoring-section="queue">
@@ -418,6 +461,7 @@ function Ready({ data, demo, emailDetail, onEmailOpen, onResolveArticleLink, onI
             {data.items.map((item) => <QueueItem key={`${item.monitorId ?? ""}-${item.sourceId}-${item.revision}`} item={item} ownId={data.scope.publicationId} demo={demo} />)}
           </ul>
         ) : <p>No items in the queue.</p>}
+        <LoadMore list="items" cursor={data.cursors?.items} paging={paging} />
         {data.hiddenNotRelevant > 0 ? (
           <p className="news-desk-delegation-note" data-monitoring-hidden>
             {data.hiddenNotRelevant} {data.hiddenNotRelevant === 1 ? "item" : "items"} judged not relevant to this publication {data.hiddenNotRelevant === 1 ? "is" : "are"} not listed.
@@ -448,7 +492,9 @@ export function MonitoringOverviewView({
   onResolveArticleLink,
   onImportCandidates,
   onDecide,
+  paging,
 }: {
+  paging?: MonitoringPaging;
   result: MonitoringResult | null;
   canViewAll: boolean;
   mode: MonitoringMode;
@@ -475,7 +521,7 @@ export function MonitoringOverviewView({
     body = <Message kind="empty" title="Nothing has been collected yet">No feed is configured and no run has been recorded. Items appear here after the collector&apos;s first run.</Message>;
   } else {
     body = <Ready data={result} demo={demo} emailDetail={emailDetail} onEmailOpen={onEmailOpen}
-      onResolveArticleLink={onResolveArticleLink} onImportCandidates={onImportCandidates} onDecide={onDecide} />;
+      onResolveArticleLink={onResolveArticleLink} onImportCandidates={onImportCandidates} onDecide={onDecide} paging={paging} />;
   }
   const scopeLine = result && "scope" in result
     ? (result.scope.mode === "all" ? "Showing the whole shared pipeline, every publication." : `Showing what is relevant to ${result.scope.publicationId ?? "this publication"}.`)

package/components/monitoring-panel.tsx

@@ -7,10 +7,18 @@ import {
   importMonitoringEmailCandidates,
   loadMonitoringEmailSubmission,
   loadMonitoringOverview,
+  loadMonitoringPage,
   resolveMonitoringEmailArticleLink,
 } from "../lib/monitoring-client";
 import { FIXTURE_ALL_PIPELINE_OVERVIEW, FIXTURE_MONITORING_OVERVIEW } from "../lib/monitoring-overview-fixture";
-import type { EmailReferenceImportItem, MonitoringEmailDetails, MonitoringResult } from "../lib/monitoring-overview";
+import { withLoadedPages } from "../lib/monitoring-paging";
+import type {
+  EmailReferenceImportItem,
+  MonitoringEmailDetails,
+  MonitoringListName,
+  MonitoringResult,
+} from "../lib/monitoring-overview";
+import type { MonitoringLoadedPages } from "../lib/monitoring-paging";
 import { EmailSubmissions, MonitoringOverviewView, type MonitoringMode } from "./monitoring-overview-view";
 
 const REFRESH_MILLISECONDS = 60_000;
@@ -50,6 +58,18 @@ function MonitoringOverviewPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo
   const [mode, setMode] = useState<MonitoringMode>("publication");
   const [result, setResult] = useState<MonitoringResult | null>(null);
   const [emailDetail, setEmailDetail] = useState<MonitoringEmailDetails | null>(null);
+  // Pages the editor loaded beyond the newest page of each list. The 60 second refresh re-reads only the newest
+  // page, so what was loaded stays on screen.
+  const [loaded, setLoaded] = useState<MonitoringLoadedPages>({});
+  const [heldOnly, setHeldOnly] = useState(false);
+  const [held, setHeld] = useState<MonitoringLoadedPages["emailSubmissions"] | null>(null);
+  const [loadingList, setLoadingList] = useState<MonitoringListName | null>(null);
+
+  useEffect(() => {
+    setLoaded({});
+    setHeldOnly(false);
+    setHeld(null);
+  }, [mode]);
 
   useEffect(() => {
     if (isDemo) {
@@ -80,13 +100,51 @@ function MonitoringOverviewPanel({ isAdmin, isDemo }: { isAdmin: boolean; isDemo
     setEmailDetail(next);
   };
 
+  // Appends the next page of a list, or (held filter) the next page of held messages.
+  const loadMore = async (list: MonitoringListName) => {
+    if (isDemo || !result || !("scope" in result) || loadingList) return;
+    const current = withLoadedPages(result as never, loaded, heldOnly ? held : null);
+    const cursor = current.cursors?.[list];
+    if (!cursor) return;
+    setLoadingList(list);
+    try {
+      const page = await loadMonitoringPage(list, cursor, mode, heldOnly && list === "emailSubmissions");
+      if (!("rows" in page)) return;
+      if (heldOnly && list === "emailSubmissions") {
+        setHeld((existing) => ({ rows: [...(existing?.rows ?? []), ...page.rows] as never, cursor: page.cursor }));
+      } else {
+        setLoaded((existing) => ({ ...existing, [list]: { rows: [...(existing[list]?.rows ?? []), ...page.rows], cursor: page.cursor } }) as MonitoringLoadedPages);
+      }
+    } finally {
+      setLoadingList(null);
+    }
+  };
+
+  // Held for review restarts the email list at its newest held message, however old.
+  const changeHeldOnly = async (next: boolean) => {
+    setHeldOnly(next);
+    setHeld(null);
+    if (!next || isDemo) return;
+    setLoadingList("emailSubmissions");
+    try {
+      const page = await loadMonitoringPage("emailSubmissions", null, mode, true);
+      if ("rows" in page) setHeld({ rows: page.rows as never, cursor: page.cursor });
+      else setHeldOnly(false);
+    } finally {
+      setLoadingList(null);
+    }
+  };
+
+  const shown = result && "scope" in result ? withLoadedPages(result as never, loaded, heldOnly ? held ?? { rows: [], cursor: null } : null) : result;
+
   const resolveEmailArticleLink = (receiptId: string, candidateIndex: number) =>
     resolveMonitoringEmailArticleLink(receiptId, candidateIndex);
 
   const importEmailCandidates = (receiptId: string, candidates: EmailReferenceImportItem[]) =>
     importMonitoringEmailCandidates(receiptId, candidates);
 
-  return <MonitoringOverviewView result={result} canViewAll={isAdmin} mode={mode} onModeChange={setMode} demo={isDemo}
+  return <MonitoringOverviewView result={shown} canViewAll={isAdmin} mode={mode} onModeChange={setMode} demo={isDemo}
     emailDetail={emailDetail} onEmailOpen={isDemo ? () => {} : openEmail} onResolveArticleLink={isDemo ? undefined : resolveEmailArticleLink}
-    onImportCandidates={importEmailCandidates} onDecide={isDemo ? undefined : decideMonitoringEmailSubmission} />;
+    onImportCandidates={importEmailCandidates} onDecide={isDemo ? undefined : decideMonitoringEmailSubmission}
+    paging={isDemo ? undefined : { onLoadMore: (list) => void loadMore(list), loadingList, heldOnly, onHeldOnlyChange: (next) => void changeHeldOnly(next) }} />;
 }

package/components/news-desk-client-provider.tsx

@@ -6,6 +6,9 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import type { DevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
 import type { CategorySteeringDashboard } from "../lib/category-repository";
 import { ensureDevSandboxEditorSession } from "./dev-sandbox-editor-sign-in";
+import { discardReferencesHeadStart, prefetchReferencesFeed } from "./references-prefetch";
+import { SITE_BRAND } from "../lib/site-brand";
+import { clearSavedNewsroomDisplay, loadSessionDisplay, saveSessionDisplay } from "../lib/reference-feed-cache";
 import {
   loadEditorAssignmentsData,
   loadEditorDoctrineRecordsData,
@@ -75,7 +78,12 @@ export function NewsDeskClientProvider({
       ));
       return;
     }
-    setShell((current) => beginAccessCheck(current));
+    // A recent confirmed session is shown (name, "loading" instead of "checking") while the real check runs again.
+    // Display only: the check below still decides access, and the backend authorizes every call.
+    const remembered = loadSessionDisplay(SITE_BRAND.id);
+    setShell((current) => (remembered && !current.dashboard
+      ? { ...beginAccessCheck(current), phase: "loadingDesk" as const, auth: { status: "signedIn" as const, label: remembered.label } }
+      : beginAccessCheck(current)));
 
     try {
       await ensureDevSandboxEditorSession(devSandboxEditorAuth);
@@ -88,6 +96,8 @@ export function NewsDeskClientProvider({
     if (bootstrapSequenceRef.current !== sequence) return;
 
     if (access.status === "signedOut") {
+      clearSavedNewsroomDisplay(SITE_BRAND.id);
+      discardReferencesHeadStart();
       setShell((current) => resolveSignedOut(current, access.auth));
       return;
     }
@@ -100,7 +110,10 @@ export function NewsDeskClientProvider({
       return;
     }
 
+    saveSessionDisplay(SITE_BRAND.id, { label: access.auth.label, isAdmin: access.isAdmin });
     setShell((current) => beginDeskLoad(current, access.auth));
+    // The References reads do not depend on the summary dashboard: start them now, side by side with it.
+    if (typeof window !== "undefined" && /\/newsroom\/references(\/|$)/.test(window.location.pathname)) prefetchReferencesFeed();
 
     try {
       const dashboard = await loadEditorNewsDeskDashboard({ isAdmin: access.isAdmin });
@@ -183,6 +196,8 @@ export function NewsDeskClientProvider({
     const unsubscribe = Hub.listen("auth", ({ payload }) => {
       if (payload.event === "signedOut") {
         bootstrapSequenceRef.current += 1;
+        clearSavedNewsroomDisplay(SITE_BRAND.id);
+        discardReferencesHeadStart();
         setShell((current) => resolveSignedOut(current, { status: "signedOut", label: "Signed out" }));
         return;
       }

package/components/news-desk-page.tsx

@@ -1,3 +1,4 @@
+import { withReferenceFeedFixture } from "../lib/local-preview-feed-fixture";
 import { resolveNewsDeskTab } from "../lib/newsroom-section-routing";
 import { NewsDeskWorkspace, type NewsDeskTab } from "./topic-steering-workspace";
 import {
@@ -67,7 +68,7 @@ export async function NewsDeskPage({ section: routeSection, selectionPath, searc
   const analysisProfiles = await loadAnalysisProfileSummaries(getBrandAnalysisProfilesPath(brand));
   const configuredCorpora = await loadConfiguredCorpusSummaries(getBrandSteeringConfigPath(brand));
   const dashboard = useDemoDashboard
-    ? createDemoCategorySteeringDashboard(brand.id, getBrandNewsroomSectionsConfigPath(brand))
+    ? withReferenceFeedFixture(createDemoCategorySteeringDashboard(brand.id, getBrandNewsroomSectionsConfigPath(brand)))
     : await loadCategorySteeringDashboard();
   return <NewsDeskWorkspace analysisProfiles={analysisProfiles} configuredCorpora={configuredCorpora} dashboard={dashboard} initialSelection={initialSelection} initialTab={initialTab} />;
 }

package/components/newsroom-access-gate.tsx

@@ -9,24 +9,26 @@ import { NewsroomOpsShell } from "./newsroom-ops-shell";
 import { NewsroomOverviewSkeleton } from "./newsroom-overview-skeleton";
 import { ReaderAuthControl } from "./reader-auth-control";
 import { buttonVariants } from "./ui/button";
+import { ReferencesPageLoading } from "./references-page-loading";
 
-export function NewsDeskAccessGate({ shell, showSectionTabs = false }: { shell: NewsDeskShellState | null; showSectionTabs?: boolean }) {
+export function NewsDeskAccessGate({ initialTab, shell, showSectionTabs = false }: { initialTab?: string; shell: NewsDeskShellState | null; showSectionTabs?: boolean }) {
   const accessPhase = shell?.phase ?? "checkingAccess";
   const pending = accessPhase === "checkingAccess" || accessPhase === "loadingDesk";
+  const referencesPage = initialTab === "references";
 
   return (
     <NewsroomOpsShell
-      activeTab="overview"
+      activeTab={referencesPage ? "references" : "overview"}
       appTitle={SITE_BRAND.appTitle}
       backHref="/"
       backLabel={SITE_BRAND.backToHomeLabel}
       headerActions={(
         <Link className={cn(buttonVariants({ variant: "ghost", size: "sm" }))} href="/settings">Settings</Link>
       )}
-      pageTitle={showSectionTabs ? "Notification Center" : "Newsroom"}
-      showNavigation={showSectionTabs}
+      pageTitle={referencesPage ? "References" : showSectionTabs ? "Notification Center" : "Newsroom"}
+      showNavigation={showSectionTabs || referencesPage}
     >
-      {pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
+      {pending && referencesPage ? <ReferencesPageLoading /> : pending ? (showSectionTabs ? <NewsroomOverviewSkeleton /> : (
         <div aria-label="Loading newsroom" className="space-y-4" data-newsroom-page-skeleton role="status">
           <div className="h-6 w-48 rounded bg-muted" />
           <div className="h-4 w-3/4 rounded bg-muted" />

package/components/newsroom-client-shell.tsx

@@ -2,13 +2,14 @@ import { NewsDeskClientProvider } from "./news-desk-client-provider";
 import { createDemoCategorySteeringDashboard } from "../lib/category-repository";
 import { resolveDevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { withReferenceFeedFixture } from "../lib/local-preview-feed-fixture";
 import { getBrandNewsroomSectionsConfigPath, resolveActiveSiteBrand } from "../lib/site-brand-tenant";
 
 export function NewsroomClientShell({ children }: Readonly<{ children: React.ReactNode }>) {
   const devSandboxEditorAuth = resolveDevSandboxEditorAuth();
   const activeBrand = resolveActiveSiteBrand();
   const localPreviewDashboard = isLocalPreviewEnabled()
-    ? createDemoCategorySteeringDashboard(activeBrand.id, getBrandNewsroomSectionsConfigPath(activeBrand))
+    ? withReferenceFeedFixture(createDemoCategorySteeringDashboard(activeBrand.id, getBrandNewsroomSectionsConfigPath(activeBrand)))
     : null;
 
   return (

package/components/newsroom-ops-shell.tsx

@@ -165,7 +165,7 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
         <Link className="organizer-masthead" href={backHref} title={backLabel}>{appTitle}</Link>
         <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>
+      <main className="organizer-main">{demo && !session?.shell.dashboard?.realDataPreview && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
     </div>
     {showNavigation && <NewsroomMobileNavigation activeTab={activeTab} items={ORGANIZER_PRIMARY_NAV.map(item => ({ ...item, href: getNewsroomNavHref(item.path, demo) }))}
       chat={consoleState?.shouldOfferConsole ? { open: consoleState.open, onOpen: consoleState.openConsole } : undefined}

package/components/newsroom-organizer.css

@@ -347,3 +347,51 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .news-desk-columns--administration .news-desk-newsletter__text{margin:0;padding:12px;max-height:280px;overflow:auto;border:1px solid var(--org-line);font:400 12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
 .news-desk-columns--administration .news-desk-newsletter__filters{display:flex;flex-wrap:wrap;gap:12px 24px}
 .news-desk-columns--administration .news-desk-newsletter__filters .news-desk-doctrine-card__field{min-width:180px}
+
+/* The References feed is rounded and borderless (Ryan's design rule): flat tones and rounded rectangles instead of lines and boxes.
+   The newsroom chrome squares every "rounded" class above; inside a [data-feed-surface] the rounded classes mean what they say.
+   The repeated attribute raises specificity over the squaring rules without !important escalation. */
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-full"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-full"] { border-radius: 9999px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[20px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: 20px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-2xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[16px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-3xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: 24px !important; }
+
+/* Feed tones. Light: cards a touch lighter than the page, footers between, controls a touch darker. Dark: each step lifts toward the ink.
+   Also set on the portaled mobile sheet, which carries the theme attributes itself. */
+[data-kanbus-theme] [data-feed-surface], [data-kanbus-theme][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 35%, white);
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 70%, white);
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+}
+[data-kanbus-theme][data-color-mode="dark"] [data-feed-surface], [data-kanbus-theme][data-color-mode="dark"][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 94%, var(--kb-theme-ink));
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 80%, var(--kb-theme-ink));
+}
+
+/* Borderless detail pane, Add panel and mobile sheet ([data-feed-flat]): no border, rule or box anywhere inside. Regions are told apart
+   by tone (card, footer, control) and shapes are rounded rectangles. The repeated attribute outranks the newsroom chrome's own rules. */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat],
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] * { border-width: 0 !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] *:not(:focus-visible) { box-shadow: none; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is([data-slot=separator], hr) { display: none !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button], [data-slot=badge]):not([aria-pressed=true]):not([data-slot=sheet-close]):not([class*="hover:bg-muted"]) {
+  background: var(--feed-control) !important; border-radius: 9999px !important; color: var(--foreground, inherit);
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true]:not([class*="destructive"]) {
+  background: var(--primary) !important; color: var(--primary-foreground) !important; border-radius: 9999px !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true][class*="destructive"] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(textarea, input:not([type=radio]):not([type=checkbox]), select, details, [data-cyclotron-choice]:not([data-predicted])) {
+  background: var(--feed-control) !important; border-radius: 16px !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: 9999px !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-review-queue-bar] { background: var(--feed-footer) !important; }
+/* The rating grid keeps its own rounded rectangles in the borderless panes (not the pill shape the flat rules give other buttons). */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: 16px !important; }