@anthusai/papyrus 1.13.0 → 1.15.0

package/components/newsroom-board-view.tsx

@@ -5,8 +5,8 @@ import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { IssueCollection, IssueDetailPanel, IssueTypeFilter, issueTypeFromFilter, useBoardColumnState } from "@kanbus/ui";
 import "@kanbus/ui/styles/kanban.css";
+import "@kanbus/ui/styles/newsprint.css";
 import "./newsroom-newsprint-board.css";
-import { BoardCardExcerpts } from "./board-card-excerpts";
 import { PlusIcon } from "lucide-react";
 import { newsroomHref } from "../lib/newsroom-base-path";
 import {
@@ -81,7 +81,6 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
   const [supportingRecordsError, setSupportingRecordsError] = useState<string | null>(null);
   const generation = useRef(0);
   const boardBodyRef = useRef<HTMLDivElement | null>(null);
-  const [boardBodyElement, setBoardBodyElement] = useState<HTMLDivElement | null>(null);
   const [typeFilter, setTypeFilter] = useState<string | null>("all");
   const showsContentItems = subject !== "assignment";
   const contentItemColumnKeyPrefix = `${contentItemBoardType()}/`;
@@ -173,11 +172,10 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
         </Link>
       )}
     </>}>
-    <div className="organizer-native-board papyrus-newsprint-board" data-color-mode={theme}>
+    <div className="organizer-native-board papyrus-newsprint-board" data-kanbus-theme="newsprint" data-color-mode={theme}>
       {error && <NewsroomOpsStatusBanner tone="error">{error}</NewsroomOpsStatusBanner>}
       {subject === "desk" && <IssueTypeFilter config={config} value={typeFilter} onChange={setTypeFilter} name="Record type" className="organizer-board-type-filter" />}
-      <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={node => { boardBodyRef.current = node; setBoardBodyElement(node); }} onScrollCapture={handleBoardScroll}>
-        <BoardCardExcerpts excerpts={issues.flatMap(item => item.kind === "contentItem" && item.excerpt ? [{ issueId: item.id, text: item.excerpt }] : [])} scope={boardBodyElement} />
+      <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={boardBodyRef} onScrollCapture={handleBoardScroll}>
         <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
           motion={lowMotion ? STATIC_MOTION : undefined}
           collapsedColumns={columnState.collapsedColumns} onToggleCollapse={columnState.toggleColumn} initialScroll="start"

package/components/newsroom-newsprint-board.css

@@ -1,56 +1,7 @@
 .papyrus-newsprint-board {
-  --background: var(--org-paper);
-  --card: var(--org-paper);
-  --frame: var(--org-paper);
-  --column: var(--org-paper);
-  --border: var(--org-line);
-  --text-foreground: var(--org-ink);
-  --text-muted: var(--org-muted);
-  --text-selected: var(--org-ink);
-  --font-body: Newsroom UI, system-ui, sans-serif;
-  --kb-column-width: 245px;
-  --kb-column-radius: 0;
-  --kb-card-radius: 0;
-  --kb-card-border-width: 0;
-  --kb-card-shadow: none;
-  --kb-card-selected-shadow: none;
-  --kb-board-gap: 18px;
-  color: var(--org-ink);
-  background: transparent;
+  --kb-newsprint-paper: var(--org-paper);
+  --kb-newsprint-ink: var(--org-ink);
+  --kb-newsprint-line: var(--org-line);
+  --kb-newsprint-display-font: Newsroom Display, Georgia, serif;
+  --kb-newsprint-body-font: Newsroom UI, system-ui, sans-serif;
 }
-.papyrus-newsprint-board .kb-grid { height: 100%; min-height: 0; scrollbar-width: thin; }
-.papyrus-newsprint-board .kb-column { border-left: 1px solid var(--org-line); padding-left: 10px; }
-.papyrus-newsprint-board .kb-column:first-child { border-left: 0; padding-left: 0; }
-.papyrus-newsprint-board .kb-column-header {
-  border-bottom: 2px solid var(--org-ink);
-  padding: 5px 0;
-  font: 700 12px Newsroom Display, Georgia, serif;
-  text-transform: uppercase;
-  letter-spacing: .6px;
-  min-height: 32px;
-}
-.papyrus-newsprint-board .issue-card {
-  --issue-accent: var(--org-paper) !important;
-  --issue-accent-muted: var(--muted) !important;
-  --issue-accent-foreground: var(--org-ink) !important;
-  --issue-priority-bg: var(--org-paper) !important;
-  background: transparent !important;
-  border-radius: 0;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-.papyrus-newsprint-board .issue-card + .issue-card { border-top: 1px solid var(--org-line) !important; }
-.papyrus-newsprint-board .issue-accent-bar { border-bottom: 0; background: var(--org-paper) !important; color: var(--org-ink) !important; }
-.papyrus-newsprint-board .issue-accent-id { font: 400 9px Newsroom UI, system-ui, sans-serif; letter-spacing: .8px; white-space: nowrap; color: var(--org-ink) !important; }
-.papyrus-newsprint-board .issue-accent-priority { border-radius: 0; color: var(--org-muted) !important; background: transparent !important; font-size: 8px; }
-.papyrus-newsprint-board .issue-card h3 { font: 700 19px/1.2 Newsroom Display, Georgia, serif !important; letter-spacing: -.2px; }
-.papyrus-newsprint-board .issue-card[data-selected=true] { outline: 2px solid var(--org-ink); outline-offset: -2px; }
-.papyrus-newsprint-board .issue-card[data-selected=true] h3 { color: var(--org-ink) !important; }
-.papyrus-newsprint-board .kb-issue-detail { background: var(--org-paper); border: 1px solid var(--org-line); border-radius: 0; box-shadow: none; }
-.papyrus-newsprint-board .kb-issue-detail h2 { font: 700 28px/1.2 Newsroom Display, Georgia, serif; border-bottom: 3px double var(--org-ink); padding-bottom: 12px; }
-.papyrus-newsprint-board .issue-card .issue-accent-bar { height: auto !important; margin: 0 !important; width: 100% !important; padding: 0 !important; min-height: 0; }
-.papyrus-newsprint-board .issue-card .issue-card-content { padding-top: 2px !important; gap: 4px; }
-.papyrus-newsprint-board .issue-card h3 { margin: 0; }
-.board-card-excerpt p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--org-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.board-card-excerpt[data-expanded="true"] p { display: block; -webkit-line-clamp: unset; }
-.board-card-excerpt button { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--org-ink); cursor: pointer; }

package/components/newsroom-organizer.css

@@ -274,6 +274,14 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-account-chooser li button small,.organizer-account-chooser-note{font-size:12px;color:var(--org-ink);margin:0}
 .organizer-account-chooser-heading{margin:0;font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
 .organizer-account-chooser-link{color:var(--org-ink);text-decoration:underline;text-underline-offset:3px}
+.organizer-account-create-start,.organizer-account-create button{background:none;border:1px solid var(--org-ink);border-radius:0;color:var(--org-ink);font:600 12px/1.4 Newsroom UI,system-ui,sans-serif;padding:4px 10px;cursor:pointer;text-underline-offset:3px}
+.organizer-account-create-start:hover,.organizer-account-create button:hover{text-decoration:underline}
+.organizer-account-create-start:focus-visible,.organizer-account-create button:focus-visible,.organizer-account-create input:focus-visible{outline:2px solid var(--org-ink);outline-offset:1px}
+.organizer-account-create button:disabled{cursor:default;text-decoration:line-through}
+.organizer-account-create{display:grid;gap:6px}
+.organizer-account-create label{display:grid;gap:2px;font:600 11px/1.4 Newsroom UI,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
+.organizer-account-create input{background:transparent;border:0;border-bottom:2px solid var(--org-ink);border-radius:0;color:var(--org-ink);font:400 14px/1.4 Newsroom UI,system-ui,sans-serif;padding:4px 0;text-transform:none;letter-spacing:0}
+.organizer-account-create span{display:flex;gap:8px}
 [data-reference-cyclotron-status] .cyclotron-status[data-variant]{border-radius:0;background:transparent;border-top:1px solid var(--org-ink);border-bottom:1px solid var(--org-ink);padding-left:0;padding-right:0}
 [data-reference-cyclotron-status] :is(.cyclotron-status-note,.cyclotron-status-definition,.cyclotron-status-header p,.cyclotron-status-override){color:var(--org-ink)}
 [data-reference-cyclotron-status] .cyclotron-status[data-variant="strip"]>span+span::before{color:var(--org-ink)}
@@ -295,4 +303,17 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .news-desk-columns--administration .news-desk-delegation-list li[data-delegation-live=true] .news-desk-delegation-state{font-weight:700;text-decoration:underline;text-underline-offset:4px}
 .news-desk-columns--administration .news-desk-delegation-state{font:600 12px/1.4 Newsroom UI,system-ui,sans-serif;color:var(--administration-strong)}
 .news-desk-columns--administration .news-desk-delegation-confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.news-desk-columns--administration .news-desk-delegation-pending-list{list-style:none;margin:0;padding:0;display:grid}
+.news-desk-columns--administration .news-desk-delegation-pending-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 24px;align-items:center;padding:16px 0 16px 12px;border-top:1px solid var(--org-line);border-left:3px solid var(--org-ink)}
+.news-desk-columns--administration .news-desk-delegation-pending-list li>div{display:grid;gap:2px}
+.news-desk-columns--administration .news-desk-delegation-pending-list li>div>strong{font:700 18px/1.2 Newsroom Display,Georgia,serif}
+.news-desk-columns--administration .news-desk-delegation-pending-list li>div>span{font:400 13px/1.4 Newsroom UI,system-ui,sans-serif}
+.news-desk-columns--administration .news-desk-delegation-countdown{font-weight:600!important;font-variant-numeric:tabular-nums}
+.news-desk-columns--administration .news-desk-delegation-code{font:700 34px/1.1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--org-ink);padding:6px 0;border-top:2px solid var(--org-ink);border-bottom:2px solid var(--org-ink)}
+.news-desk-columns--administration .news-desk-delegation-decision{display:flex;gap:8px}
+.news-desk-columns--administration .news-desk-delegation-decision button{min-height:40px;padding:4px 18px;border:1px 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:.07em;text-transform:uppercase;cursor:pointer}
+.news-desk-columns--administration .news-desk-delegation-decision button:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}
+.news-desk-columns--administration .news-desk-delegation-decision button:disabled{cursor:default;text-decoration:line-through}
+.news-desk-columns--administration .news-desk-delegation-decision button:focus-visible{outline:2px solid var(--org-ink);outline-offset:2px}
+@container (max-width:640px){.news-desk-columns--administration .news-desk-delegation-pending-list li{grid-template-columns:minmax(0,1fr)}.news-desk-columns--administration .news-desk-delegation-code{font-size:28px}}
 @container (max-width:640px){.news-desk-columns--administration .news-desk-delegation-form{grid-template-columns:minmax(0,1fr)}.news-desk-columns--administration .news-desk-delegation-list li{grid-template-columns:minmax(0,1fr)}}

package/components/newsroom-references-view.tsx

@@ -57,6 +57,11 @@ import {
   ReferenceSuggestionRowLine,
 } from "./reference-cyclotron-suggestion";
 import { ReferenceLiveAgreement } from "./reference-live-agreement";
+import { SectionPicker, SectionSuggestionBlock, type SectionChoice } from "./reference-section-suggestion";
+import type { SectionSuggestion, SiteSectionAgreement } from "../lib/site-section-suggestions";
+
+/** What an editor adds to an accept: the Section the reference belongs in, which becomes a training label. */
+export type ReferenceReviewOptions = { sectionId?: string | null };
 import type { DelegatedCuration, ShadowAgreement } from "../lib/cyclotron-suggestions";
 import { ReferenceCyclotronPriming, type PrimingFormInput } from "./reference-cyclotron-priming";
 import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyclotron-status";
@@ -91,9 +96,15 @@ type NewsroomReferencesViewProps = {
   /** The live-agreement payload; the strip is hidden without it. */
   shadowAgreement?: ShadowAgreement | null;
   disabled?: boolean;
+  /** The enabled newsroom Sections an accepted reference can be placed in. */
+  sections?: SectionChoice[];
+  /** The site cyclotron's suggested Section per reference lineage. Advisory. */
+  sectionSuggestions?: Map<string, SectionSuggestion>;
+  /** How often the Section suggestions matched later editor decisions. */
+  sectionAgreement?: SiteSectionAgreement | null;
   onRelevanceReview?: (reference: ReferenceRecord, curation: RelevanceCuration) => void;
   initialReferenceLineageId?: string | null;
-  onReview: (reference: ReferenceRecord, action: ReferenceCurationAction) => void;
+  onReview: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: ReferenceReviewOptions) => void;
   referenceAttachments?: ReferenceAttachmentRecord[];
   references: ReferenceRecord[];
 };
@@ -243,6 +254,9 @@ function ReferenceDetailPanel({
   previewAttachments,
   reference,
   onClose,
+  sectionAgreement = null,
+  sectionSuggestion,
+  sections = [],
 }: {
   countsAsTrainingLabel?: boolean;
   delegated?: DelegatedCuration;
@@ -250,12 +264,17 @@ function ReferenceDetailPanel({
   demo?: boolean;
   disabled?: boolean;
   onRelevanceReview?: (curation: RelevanceCuration) => void;
-  onReview: (action: ReferenceCurationAction) => void;
+  onReview: (action: ReferenceCurationAction, options?: ReferenceReviewOptions) => void;
+  sectionAgreement?: SiteSectionAgreement | null;
+  sectionSuggestion?: SectionSuggestion;
+  sections?: SectionChoice[];
   previewAttachments: ReferenceAttachmentRecord[];
   reference: ReferenceRecord;
   onClose?: () => void;
 }) {
   const lineageId = referenceLineageId(reference);
+  const [chosenSectionId, setChosenSectionId] = useState<string | null>(null);
+  useEffect(() => { setChosenSectionId(null); }, [lineageId]);
   const status = normalizeReferenceCurationStatus(reference.curationStatus);
   const url = referenceUrl(reference);
   const acceptDisabled = disabled || status === "accepted";
@@ -307,6 +326,20 @@ function ReferenceDetailPanel({
             ) : null}
           </div>
         ) : null}
+        {status === "pending" && sectionSuggestion ? (
+          <SectionSuggestionBlock agreement={sectionAgreement} referenceLineageId={lineageId} sections={sections} suggestion={sectionSuggestion} />
+        ) : null}
+        {status === "pending" && sections.length ? (
+          <SectionPicker
+            agreement={sectionAgreement}
+            chosenSectionId={chosenSectionId}
+            disabled={disabled}
+            onChoose={setChosenSectionId}
+            referenceLineageId={lineageId}
+            sections={sections}
+            suggestedSectionId={sectionSuggestion?.sectionId ?? null}
+          />
+        ) : null}
         {delegated ? <DelegatedCurationNote delegated={delegated} referenceLineageId={lineageId} /> : countsAsTrainingLabel ? <CountsAsTrainingLabelNote referenceLineageId={lineageId} /> : null}
 
         <div
@@ -319,7 +352,7 @@ function ReferenceDetailPanel({
             aria-pressed={status === "accepted"}
             data-news-desk-reference-accept
             disabled={acceptDisabled}
-            onClick={() => onReview("accept")}
+            onClick={() => onReview("accept", chosenSectionId ? { sectionId: chosenSectionId } : undefined)}
             size="sm"
             type="button"
             variant={status === "accepted" ? "default" : "outline"}
@@ -443,6 +476,9 @@ export function NewsroomReferencesView({
   demo = false,
   disabled = false,
   onRelevanceReview,
+  sections = [],
+  sectionSuggestions,
+  sectionAgreement = null,
   initialReferenceLineageId = null,
   onReview,
   referenceAttachments = [],
@@ -531,9 +567,9 @@ export function NewsroomReferencesView({
     }
   };
 
-  const runReview = (action: ReferenceCurationAction) => {
+  const runReview = (action: ReferenceCurationAction, options?: ReferenceReviewOptions) => {
     if (!selectedReference) return;
-    onReview(selectedReference, action);
+    onReview(selectedReference, action, options);
   };
 
   const emptyLabel = canonicalReferences.length
@@ -688,6 +724,9 @@ export function NewsroomReferencesView({
               disabled={disabled}
               onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
               onReview={runReview}
+              sectionAgreement={sectionAgreement}
+              sectionSuggestion={sectionSuggestions?.get(referenceLineageId(selectedReference))}
+              sections={sections}
               previewAttachments={previewAttachments}
               reference={selectedReference}
             />
@@ -722,6 +761,9 @@ export function NewsroomReferencesView({
                   onClose={closeDetail}
                   onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
                   onReview={runReview}
+                  sectionAgreement={sectionAgreement}
+                  sectionSuggestion={sectionSuggestions?.get(referenceLineageId(selectedReference))}
+                  sections={sections}
                   previewAttachments={previewAttachments}
                   reference={selectedReference}
                 />

package/components/prospectus-account-chooser.tsx

@@ -4,9 +4,15 @@ import { useEffect, useState } from "react";
 import { Check } from "lucide-react";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
 import { LOCAL_PREVIEW_TENANTS, getLocalPreviewTenantId, setLocalPreviewTenantId } from "../lib/local-preview-tenant";
-import { loadProspectusAccountState, selectProspectusAccount, type ProspectusAccountState } from "../lib/prospectus-account-client";
+import { createProspectusAccount, loadProspectusAccountState, selectProspectusAccount, type ProspectusAccountState } from "../lib/prospectus-account-client";
+
+/** Local preview: add ?no-accounts=1 to the address to see a signed-in person with no publishing account. */
+function previewHasNoAccounts(): boolean {
+  return typeof window !== "undefined" && new URLSearchParams(window.location.search).has("no-accounts");
+}
 
 function previewAccountState(): ProspectusAccountState {
+  if (previewHasNoAccounts()) return { status: "signedIn", publishingAccounts: [], selectedAccountId: null, cyclotronLabAccess: false };
   return {
     status: "signedIn",
     publishingAccounts: LOCAL_PREVIEW_TENANTS.map(tenant => ({ accountId: tenant.accountId, name: tenant.name, role: tenant.role })),
@@ -50,6 +56,8 @@ export function ProspectusAccountChooser() {
   const [state, setState] = useState<ProspectusAccountState>({ status: "unavailable" });
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
   useEffect(() => {
     let cancelled = false;
     const returnPath = `${window.location.pathname}${window.location.search}`;
@@ -76,6 +84,20 @@ export function ProspectusAccountChooser() {
     if ("error" in result) { setError(result.error); return; }
     window.location.reload();
   };
+  const create = async () => {
+    if (pending) return;
+    setPending("create"); setError(null);
+    if (isLocalPreviewEnabled()) {
+      const name = newName.trim() || "New publishing account";
+      setState({ status: "signedIn", publishingAccounts: [{ accountId: "preview-created-account", name, role: "owner" }], selectedAccountId: "preview-created-account", cyclotronLabAccess: false });
+      setPending(null); setCreating(false);
+      return;
+    }
+    const result = await createProspectusAccount(newName);
+    setPending(null);
+    if ("error" in result) { setError(result.error); return; }
+    window.location.reload();
+  };
   return <div className="organizer-account-chooser" data-prospectus-account-chooser="signed-in">
     <p className="organizer-account-chooser-heading">Publishing account</p>
     {state.publishingAccounts.length === 0
@@ -91,6 +113,17 @@ export function ProspectusAccountChooser() {
           </li>;
         })}
       </ul>}
+    {state.publishingAccounts.length === 0 ? (
+      creating
+        ? <form className="organizer-account-create" data-prospectus-create-account onSubmit={event => { event.preventDefault(); void create(); }}>
+          <label>Account name<input autoFocus disabled={pending !== null} maxLength={80} onChange={event => setNewName(event.target.value)} placeholder="Optional" type="text" value={newName} /></label>
+          <span>
+            <button data-prospectus-create-account-submit disabled={pending !== null} type="submit">{pending === "create" ? "Creating…" : "Create account"}</button>
+            <button disabled={pending !== null} onClick={() => setCreating(false)} type="button">Cancel</button>
+          </span>
+        </form>
+        : <button className="organizer-account-create-start" data-prospectus-create-account-start onClick={() => setCreating(true)} type="button">Create publishing account</button>
+    ) : null}
     {!state.selectedAccountId && state.publishingAccounts.length > 0 ? <p className="organizer-account-chooser-note">Choose the account you are working as.</p> : null}
     {state.cyclotronLabAccess ? <p className="organizer-account-chooser-note" data-cyclotron-lab-access>Cyclotron lab access is on for you.</p> : null}
     {error ? <p className="organizer-account-chooser-note" role="alert">{error}</p> : null}

package/components/reference-section-suggestion.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { formatPercentage } from "../lib/cyclotron-suggestions";
+import { sectionAgreementIsMeasured, type SectionAgreement, type SectionSuggestion, type SiteSectionAgreement } from "../lib/site-section-suggestions";
+import { MINIMUM_COMPARISONS_FOR_AGREEMENT } from "../lib/cyclotron-suggestions";
+
+export type SectionChoice = { id: string; title: string };
+
+function titleOf(sections: SectionChoice[], sectionId: string): string {
+  return sections.find((section) => section.id === sectionId)?.title ?? sectionId;
+}
+
+function agreementWords(agreement: SectionAgreement | undefined): string {
+  if (!agreement) return "no editor decisions compared yet";
+  if (!sectionAgreementIsMeasured(agreement)) {
+    return `${agreement.comparisons} of ${MINIMUM_COMPARISONS_FOR_AGREEMENT} editor decisions compared, too few to measure`;
+  }
+  return `agreement ${formatPercentage(agreement.agreement)}, ${agreement.comparisons} editor decisions compared`;
+}
+
+/**
+ * The suggested Section for a pending reference, how likely the other Sections
+ * are, and how often this Section's suggestions matched editors. Advisory: no
+ * Section is chosen until an editor picks one.
+ */
+export function SectionSuggestionBlock({
+  agreement,
+  referenceLineageId,
+  sections,
+  suggestion,
+}: {
+  agreement: SiteSectionAgreement | null;
+  referenceLineageId: string;
+  sections: SectionChoice[];
+  suggestion: SectionSuggestion;
+}) {
+  const figures = agreement?.sections.find((entry) => entry.sectionId === suggestion.sectionId);
+  const others = suggestion.probabilities.filter((entry) => entry.sectionId !== suggestion.sectionId).slice(0, 3);
+  return (
+    <section aria-label="Suggested Section" className="space-y-2 border-y border-foreground py-3" data-reference-section-suggestion={referenceLineageId}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-foreground">Suggested Section</h3>
+      <p className="text-sm text-foreground">
+        The cyclotron suggests <span className="font-semibold">{titleOf(sections, suggestion.sectionId)}</span>
+        {suggestion.confidence !== null ? ` (${formatPercentage(suggestion.confidence)})` : ""}.
+      </p>
+      {others.length ? (
+        <p className="text-xs text-foreground" data-reference-section-alternatives>
+          Next most likely: {others.map((entry) => `${titleOf(sections, entry.sectionId)} ${formatPercentage(entry.probability)}`).join(", ")}.
+        </p>
+      ) : null}
+      <p className="text-xs text-foreground" data-reference-section-agreement>
+        For {titleOf(sections, suggestion.sectionId)}: {agreementWords(figures)}.
+      </p>
+      <p className="text-xs text-foreground" data-reference-section-notice>
+        A suggestion never places a reference. The Section you choose when you accept does.
+      </p>
+    </section>
+  );
+}
+
+/**
+ * Picks the Section an accepted reference belongs to. The choice is sent with
+ * the accept and is what the cyclotron learns from; nothing is preselected.
+ */
+export function SectionPicker({
+  agreement,
+  chosenSectionId,
+  disabled,
+  onChoose,
+  referenceLineageId,
+  sections,
+  suggestedSectionId,
+}: {
+  agreement: SiteSectionAgreement | null;
+  chosenSectionId: string | null;
+  disabled?: boolean;
+  onChoose: (sectionId: string | null) => void;
+  referenceLineageId: string;
+  sections: SectionChoice[];
+  suggestedSectionId: string | null;
+}) {
+  return (
+    <fieldset className="space-y-1 border-l-2 border-foreground pl-3" data-reference-section-picker={referenceLineageId} disabled={disabled}>
+      <legend className="text-xs font-semibold uppercase tracking-wide text-foreground">Section when you accept</legend>
+      <label className="flex items-center gap-2 text-sm text-foreground">
+        <input checked={chosenSectionId === null} name={`section-${referenceLineageId}`} onChange={() => onChoose(null)} type="radio" />
+        <span className={chosenSectionId === null ? "font-semibold" : undefined}>No Section</span>
+      </label>
+      {sections.map((section) => {
+        const figures = agreement?.sections.find((entry) => entry.sectionId === section.id);
+        const chosen = chosenSectionId === section.id;
+        return (
+          <label className="flex flex-wrap items-center gap-x-2 text-sm text-foreground" key={section.id}>
+            <input checked={chosen} name={`section-${referenceLineageId}`} onChange={() => onChoose(section.id)} type="radio" value={section.id} />
+            <span className={chosen ? "font-semibold underline underline-offset-4" : undefined}>{section.title}</span>
+            {section.id === suggestedSectionId ? <span className="text-xs">suggested</span> : null}
+            {sectionAgreementIsMeasured(figures) ? <span className="text-xs">agreement {formatPercentage(figures?.agreement ?? null)}</span> : null}
+          </label>
+        );
+      })}
+      <p className="text-xs text-foreground">The Section you choose is a training label for the cyclotron.</p>
+    </fieldset>
+  );
+}

package/components/topic-steering-workspace.tsx

@@ -56,6 +56,7 @@ import {
   type NewsroomRecordPage,
   loadCyclotronStatus,
   loadCyclotronShadowAgreement,
+  loadSiteSectionAgreement,
   requestCyclotronPriming,
   loadCyclotronPrimingRequests,
   requestCyclotronReviewRate,
@@ -162,6 +163,8 @@ import { isLocalPreviewEnabled } from "../lib/local-preview";
 import { currentRelevanceDecisions } from "../lib/relevance-decisions";
 import { delegatedCurationsByReference, referencesWithHumanLatestCuration, type ShadowAgreement } from "../lib/cyclotron-suggestions";
 import { createLocalPreviewCyclotronFixtures } from "../lib/local-preview-seed";
+import { createLocalPreviewSectionFixtures } from "../lib/local-preview-section-fixtures";
+import { currentSectionSuggestions, siteCyclotronIdOf, type SiteSectionAgreement } from "../lib/site-section-suggestions";
 import {
   buildPrimingRequest,
   buildReviewRateRequest,
@@ -862,6 +865,35 @@ function NewsDeskDashboard({
     [dashboard.newsroomSections],
   );
   const [newsroomSections, setNewsroomSections] = useState(fallbackNewsroomSections);
+  const sectionChoices = useMemo(
+    () => newsroomSections
+      .filter((section) => section.enabled !== false && section.enabledStatus !== "disabled")
+      .sort((left, right) => left.sortOrder - right.sortOrder)
+      .map((section) => ({ id: section.id, title: section.title })),
+    [newsroomSections],
+  );
+  const sectionPreviewFixtures = useMemo(
+    () => (isLocalPreviewEnabled() ? createLocalPreviewSectionFixtures(references, sectionChoices.map((section) => section.id)) : null),
+    [references, sectionChoices],
+  );
+  const sectionSuggestions = useMemo(
+    () => currentSectionSuggestions(sectionPreviewFixtures ? [...semanticRelations, ...sectionPreviewFixtures.relations] : semanticRelations),
+    [sectionPreviewFixtures, semanticRelations],
+  );
+  const siteCyclotronId = useMemo(() => siteCyclotronIdOf(sectionSuggestions), [sectionSuggestions]);
+  const [siteSectionAgreement, setSiteSectionAgreement] = useState<SiteSectionAgreement | null>(null);
+  useEffect(() => {
+    if (sectionPreviewFixtures) {
+      setSiteSectionAgreement(sectionPreviewFixtures.agreement);
+      return;
+    }
+    if (!siteCyclotronId || dashboard.isDemo) return;
+    let cancelled = false;
+    loadSiteSectionAgreement(siteCyclotronId)
+      .then((loaded) => { if (!cancelled) setSiteSectionAgreement(loaded); })
+      .catch(() => { if (!cancelled) setSiteSectionAgreement(null); });
+    return () => { cancelled = true; };
+  }, [dashboard.isDemo, sectionPreviewFixtures, siteCyclotronId]);
   const [procedureDefinitions, setProcedureDefinitions] = useState(dashboard.procedureDefinitions ?? []);
   const [procedureVersions, setProcedureVersions] = useState(dashboard.procedureVersions ?? []);
   const [procedureRuns, setProcedureRuns] = useState(dashboard.procedureRuns ?? []);
@@ -1586,6 +1618,7 @@ function NewsDeskDashboard({
     note?: string,
     reasonCode?: ReferenceRejectionReasonCode | null,
     relevance?: { decisionRelationId: string; shareable: boolean },
+    sectionId?: string | null,
   ) {
     const nextStatus = referenceCurationStatusForAction(action);
     setActionState({ id: reference.id, message: `${action} pending`, tone: "pending" });
@@ -1615,6 +1648,7 @@ function NewsDeskDashboard({
           curationStatus: nextStatus,
           reasonCode: action === "reject" ? reasonCode ?? null : null,
           ...(relevance ? { decisionRelationId: relevance.decisionRelationId, shareable: relevance.shareable } : {}),
+          ...(action === "accept" && sectionId ? { sectionId } : {}),
         },
       }, ...current]);
       setSemanticRelations((current) => [{
@@ -1657,6 +1691,7 @@ function NewsDeskDashboard({
               reasonCode: action === "reject" ? reasonCode ?? undefined : undefined,
               decisionRelationId: relevance?.decisionRelationId,
               shareable: relevance ? relevance.shareable : undefined,
+              sectionId: action === "accept" ? sectionId ?? undefined : undefined,
             },
             { authMode: USER_POOL_AUTH_MODE },
           );
@@ -3265,7 +3300,10 @@ function NewsDeskDashboard({
               normalizeReferenceRejectionReasonCode(curation.reasonCode),
               { decisionRelationId: curation.decisionRelationId, shareable: curation.shareable },
             )}
-            onReview={(reference, action) => runReferenceCurationAction(reference, action)}
+            sections={sectionChoices}
+            sectionSuggestions={sectionSuggestions}
+            sectionAgreement={siteSectionAgreement}
+            onReview={(reference, action, options) => runReferenceCurationAction(reference, action, undefined, undefined, undefined, options?.sectionId)}
             referenceAttachments={referenceAttachments}
             references={references}
           />

package/lib/curation-delegation-helpers.ts

@@ -1,6 +1,4 @@
-export const DEFAULT_DELEGATION_HOURS = 8;
-export const MINIMUM_DELEGATION_HOURS = 1;
-export const MAXIMUM_DELEGATION_HOURS = 72;
+export type CurationDelegationState = "pending" | "approved" | "denied" | "expired" | "revoked";
 
 export type CurationDelegationRecord = {
   delegationId: string;
@@ -8,25 +6,15 @@ export type CurationDelegationRecord = {
   grantorLabel: string | null;
   expiresAt: string;
   revokedAt: string | null;
+  state?: CurationDelegationState | null;
+  /** XXXX-XXXX, present only while the request is pending. */
+  userCode?: string | null;
+  requestedHours?: number | null;
+  pendingExpiresAt?: string | null;
+  approvedAt?: string | null;
+  deniedAt?: string | null;
 };
 
-export type DelegationInputValidation =
-  | { ok: true; agentLabel: string; hours: number }
-  | { ok: false; message: string };
-
-export function validateDelegationInput(agentLabelText: string, hoursText: string): DelegationInputValidation {
-  const agentLabel = agentLabelText.trim();
-  if (!agentLabel) return { ok: false, message: "Enter the name of the agent you are trusting." };
-  if (/\s/.test(agentLabel)) return { ok: false, message: "The agent name cannot contain spaces. Use the name the agent passes as --agent." };
-  const trimmedHours = hoursText.trim();
-  if (!/^\d+$/.test(trimmedHours)) return { ok: false, message: `Enter a whole number of hours from ${MINIMUM_DELEGATION_HOURS} to ${MAXIMUM_DELEGATION_HOURS}.` };
-  const hours = Number(trimmedHours);
-  if (hours < MINIMUM_DELEGATION_HOURS || hours > MAXIMUM_DELEGATION_HOURS) {
-    return { ok: false, message: `A delegation lasts from ${MINIMUM_DELEGATION_HOURS} to ${MAXIMUM_DELEGATION_HOURS} hours.` };
-  }
-  return { ok: true, agentLabel, hours };
-}
-
 export function delegationExpiryText(expiresAt: string, revokedAt: string | null, nowMilliseconds: number): string {
   if (revokedAt) return "Revoked";
   const remaining = Date.parse(expiresAt) - nowMilliseconds;
@@ -41,11 +29,6 @@ export function isDelegationActive(record: CurationDelegationRecord, nowMillisec
   return !record.revokedAt && Date.parse(record.expiresAt) > nowMilliseconds;
 }
 
-export function buildDelegatedCommandLine(input: { email: string; agentLabel: string; token: string; action?: "approve" | "reject" }): string {
-  const email = input.email.trim() || "<your-email>";
-  return `papyrus references ${input.action ?? "approve"} <reference-id> --on-behalf-of ${email} --agent ${input.agentLabel} --instruction "<the person's own words>" --delegation-token ${input.token}`;
-}
-
 export function describeDelegationError(error: unknown): string {
   const raw = error instanceof Error ? error.message : typeof error === "string" ? error : "";
   const graphql = (error as { errors?: Array<{ message?: string }> } | null)?.errors?.[0]?.message ?? "";
@@ -57,3 +40,30 @@ export function describeDelegationError(error: unknown): string {
   const detail = (graphql || raw).trim();
   return detail ? `The server refused the request: ${detail}` : "Something went wrong. Nothing was changed.";
 }
+
+/** A pending request that an agent started and nobody has approved, denied or let lapse. */
+export function isPendingDelegation(record: CurationDelegationRecord, nowMilliseconds: number): boolean {
+  return record.state === "pending" && Boolean(record.userCode) && Date.parse(record.pendingExpiresAt ?? record.expiresAt) > nowMilliseconds;
+}
+
+/** "9:41 left" for a request that is still open, "Expired" once its window has passed. */
+export function pendingCountdownText(pendingExpiresAt: string | null | undefined, nowMilliseconds: number): string {
+  const remaining = Date.parse(pendingExpiresAt ?? "") - nowMilliseconds;
+  if (!Number.isFinite(remaining) || remaining <= 0) return "Expired";
+  const totalSeconds = Math.ceil(remaining / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")} left`;
+}
+
+/** The state of a decided or lapsed delegation in words an editor reads in the list. */
+export function delegationStateText(record: CurationDelegationRecord, nowMilliseconds: number): string {
+  if (record.state === "denied") return "Denied";
+  if (record.state === "pending") return pendingCountdownText(record.pendingExpiresAt ?? record.expiresAt, nowMilliseconds) === "Expired" ? "Request expired" : "Waiting for a decision";
+  return delegationExpiryText(record.expiresAt, record.revokedAt, nowMilliseconds);
+}
+
+export function requestedHoursText(hours: number | null | undefined): string {
+  if (!hours || hours <= 0) return "Duration not stated";
+  return `Asks for ${hours} ${hours === 1 ? "hour" : "hours"}`;
+}