@anthusai/papyrus 1.11.0 → 1.13.0

package/components/board-card-excerpts.tsx

@@ -1,45 +1,61 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect } from "react";
 
 type Excerpt = { issueId: string; text: string };
 
-function CardExcerpt({ text }: { text: string }) {
-  const [expanded, setExpanded] = useState(false);
-  return <div className="board-card-excerpt" data-board-card-excerpt data-expanded={expanded}>
-    <p>{text}</p>
-    {text.length > 130 && <button aria-expanded={expanded} onClick={event => { event.stopPropagation(); setExpanded(open => !open); }} onKeyDown={event => event.stopPropagation()} type="button">{expanded ? "Less" : "More"}</button>}
-  </div>;
+const EXCERPT_TOGGLE_THRESHOLD = 130;
+
+function buildExcerptElement(text: string): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "board-card-excerpt";
+  container.dataset.boardCardExcerpt = "";
+  container.dataset.expanded = "false";
+  const paragraph = document.createElement("p");
+  paragraph.textContent = text;
+  container.append(paragraph);
+  if (text.length > EXCERPT_TOGGLE_THRESHOLD) {
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.textContent = "More";
+    toggle.setAttribute("aria-expanded", "false");
+    const flip = (event: Event) => {
+      event.stopPropagation();
+      const expanded = container.dataset.expanded !== "true";
+      container.dataset.expanded = String(expanded);
+      toggle.textContent = expanded ? "Less" : "More";
+      toggle.setAttribute("aria-expanded", String(expanded));
+    };
+    toggle.addEventListener("click", flip);
+    toggle.addEventListener("keydown", event => event.stopPropagation());
+    container.append(toggle);
+  }
+  return container;
 }
 
 /**
  * Adds a short expandable excerpt under each card's headline. The Kanbus card has no excerpt slot,
- * so each excerpt is rendered into the card's content block once the card is on the page.
+ * so each excerpt is written into the card's content block once the card is on the page.
  */
 export function BoardCardExcerpts({ excerpts, scope }: { excerpts: readonly Excerpt[]; scope: HTMLElement | null }) {
-  const [hosts, setHosts] = useState<{ host: HTMLElement; text: string }[]>([]);
   useEffect(() => {
     if (!scope) return;
-    const collect = () => {
-      const found = excerpts.flatMap(({ issueId, text }) => {
-        const card = Array.from(scope.querySelectorAll<HTMLElement>(".issue-card")).find(candidate => candidate.dataset.issueId === issueId);
-        const content = card?.querySelector<HTMLElement>(".issue-card-content");
-        if (!content) return [];
-        let host = content.querySelector<HTMLElement>(":scope > [data-board-card-excerpt-host]");
-        if (!host) {
-          host = document.createElement("div");
-          host.dataset.boardCardExcerptHost = "true";
-          content.querySelector("h3")?.after(host);
-        }
-        return [{ host, text }];
-      });
-      setHosts(previous => previous.length === found.length && previous.every((entry, index) => entry.host === found[index].host && entry.text === found[index].text) ? previous : found);
+    const textByIssueId = new Map(excerpts.map(({ issueId, text }) => [issueId, text]));
+    const place = () => {
+      for (const card of Array.from(scope.querySelectorAll<HTMLElement>(".issue-card"))) {
+        const text = textByIssueId.get(card.dataset.issueId ?? "");
+        const content = card.querySelector<HTMLElement>(".issue-card-content");
+        if (!text || !content) continue;
+        const existing = content.querySelector<HTMLElement>(":scope > [data-board-card-excerpt]");
+        if (existing && existing.querySelector("p")?.textContent === text) continue;
+        existing?.remove();
+        content.querySelector("h3")?.after(buildExcerptElement(text));
+      }
     };
-    collect();
-    const observer = new MutationObserver(collect);
+    place();
+    const observer = new MutationObserver(place);
     observer.observe(scope, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [excerpts, scope]);
-  return <>{hosts.map(({ host, text }, index) => createPortal(<CardExcerpt text={text} />, host, `${index}`))}</>;
+  return null;
 }

package/components/curation-delegation-client.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import type { CurationDelegationRecord } from "../lib/curation-delegation-helpers";
+import { configureAmplifyClient } from "./amplify-client-provider";
+
+const USER_POOL_AUTH_MODE = "userPool";
+
+export type CreatedCurationDelegation = CurationDelegationRecord & { token: string };
+
+const CREATE_MUTATION = `
+  mutation CreateCurationDelegation($agentLabel: String!, $hours: Int) {
+    createCurationDelegation(agentLabel: $agentLabel, hours: $hours) {
+      delegationId token agentLabel grantorLabel expiresAt revokedAt
+    }
+  }
+`;
+
+const REVOKE_MUTATION = `
+  mutation RevokeCurationDelegation($delegationId: ID!) {
+    revokeCurationDelegation(delegationId: $delegationId) {
+      delegationId agentLabel grantorLabel expiresAt revokedAt
+    }
+  }
+`;
+
+const LIST_QUERY = `
+  query ListCurationDelegations {
+    listCurationDelegations {
+      delegationId agentLabel grantorLabel expiresAt revokedAt
+    }
+  }
+`;
+
+const previewDelegations: CurationDelegationRecord[] = [];
+
+async function runGraphql<T>(query: string, variables: Record<string, unknown>): Promise<T> {
+  configureAmplifyClient();
+  const client = generateClient() as unknown as {
+    graphql: (options: Record<string, unknown>) => Promise<{ data?: T | null; errors?: Array<{ message?: string }> | null }>;
+  };
+  const response = await client.graphql({ query, variables, authMode: USER_POOL_AUTH_MODE });
+  if (response.errors?.length) throw Object.assign(new Error(response.errors[0]?.message ?? "Request failed."), { errors: response.errors });
+  if (!response.data) throw new Error("The server returned no result.");
+  return response.data;
+}
+
+export async function createCurationDelegation(agentLabel: string, hours: number): Promise<CreatedCurationDelegation> {
+  if (isLocalPreviewEnabled()) {
+    const delegationId = `curation-delegation-preview-${previewDelegations.length + 1}`;
+    const record: CurationDelegationRecord = {
+      delegationId,
+      agentLabel,
+      grantorLabel: "ryan@example.com",
+      expiresAt: new Date(Date.now() + hours * 3_600_000).toISOString(),
+      revokedAt: null,
+    };
+    previewDelegations.push(record);
+    return { ...record, token: `${delegationId}~preview-token-not-valid-anywhere` };
+  }
+  const data = await runGraphql<{ createCurationDelegation: CreatedCurationDelegation }>(CREATE_MUTATION, { agentLabel, hours });
+  return data.createCurationDelegation;
+}
+
+export async function revokeCurationDelegation(delegationId: string): Promise<CurationDelegationRecord> {
+  if (isLocalPreviewEnabled()) {
+    const record = previewDelegations.find((entry) => entry.delegationId === delegationId);
+    if (!record) throw new Error("That delegation was not found.");
+    record.revokedAt = record.revokedAt ?? new Date().toISOString();
+    return { ...record };
+  }
+  const data = await runGraphql<{ revokeCurationDelegation: CurationDelegationRecord }>(REVOKE_MUTATION, { delegationId });
+  return data.revokeCurationDelegation;
+}
+
+export async function listCurationDelegations(): Promise<CurationDelegationRecord[]> {
+  if (isLocalPreviewEnabled()) return previewDelegations.map((entry) => ({ ...entry })).reverse();
+  const data = await runGraphql<{ listCurationDelegations: CurationDelegationRecord[] }>(LIST_QUERY, {});
+  return data.listCurationDelegations ?? [];
+}

package/components/news-desk-taxonomy-client.ts

@@ -3621,6 +3621,13 @@ export async function loadCyclotronStatus(cyclotronId: string): Promise<import("
   return latestCyclotronStatus(payloads.map((payload) => ({ json: payload.json, updatedAt: payload.attachment.updatedAt })));
 }
 
+/** The relevance cyclotron's latest cyclotron-shadow-agreement/v1 payload: suggestions compared with later human decisions. */
+export async function loadCyclotronShadowAgreement(cyclotronId: string): Promise<import("../lib/cyclotron-suggestions").ShadowAgreement | null> {
+  const { latestShadowAgreement, shadowAgreementPayloadId } = await import("../lib/cyclotron-suggestions");
+  const payloads = await loadModelPayloadsForOwner("knowledgeRawPayload", shadowAgreementPayloadId(cyclotronId), ["raw_payload"]);
+  return latestShadowAgreement(payloads.map((payload) => ({ json: payload.json, updatedAt: payload.attachment.updatedAt })));
+}
+
 /** Ask the next decide-relevance sweep to set or clear a manual review rate. */
 export async function requestCyclotronReviewRate(
   cyclotronId: string,

package/components/newsroom-organizer.css

@@ -274,3 +274,25 @@ 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}
+[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)}
+[data-reference-cyclotron-status] .cyclotron-status-bar{border-radius:0;background:transparent;border:1px solid var(--org-ink)}
+[data-reference-cyclotron-status] .cyclotron-status-bar>span{opacity:1}
+[data-reference-cyclotron-status] :is(.cyclotron-review-secondary,.cyclotron-review-choice,.cyclotron-review-submit){border-radius:0;opacity:1}
+.news-desk-columns--administration .news-desk-delegation-note{margin:0;color:var(--administration-strong);max-width:68ch}
+.news-desk-columns--administration .news-desk-delegation-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:12px;align-items:end}
+.news-desk-columns--administration .news-desk-delegation-error{margin:0;padding:8px 0 8px 12px;border-left:3px solid var(--org-ink);color:var(--administration-strong);font-weight:600}
+.news-desk-columns--administration .news-desk-delegation-token{display:grid;gap:12px;min-width:0;padding:16px;border:2px solid var(--org-ink)}
+.news-desk-columns--administration .news-desk-delegation-token h3{margin:0;font-size:20px}
+.news-desk-columns--administration .news-desk-delegation-token p{margin:0}
+.news-desk-columns--administration .news-desk-delegation-token__row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
+.news-desk-columns--administration .news-desk-delegation-token__row code{flex:1 1 280px;min-width:0;padding:8px 10px;border:1px solid var(--org-line);font:500 13px/1.5 ui-monospace,Menlo,monospace;overflow-wrap:anywhere;color:var(--administration-strong)}
+.news-desk-columns--administration .news-desk-delegation-token__row button,.news-desk-columns--administration .news-desk-delegation-list button{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;cursor:pointer}
+.news-desk-columns--administration .news-desk-delegation-list{list-style:none;margin:0;padding:0;display:grid}
+.news-desk-columns--administration .news-desk-delegation-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--org-line)}
+.news-desk-columns--administration .news-desk-delegation-list li>div{display:grid;gap:2px}
+.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}
+@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

@@ -49,6 +49,15 @@ import { normalizeReferenceCurationStatus } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
 import { ReferenceRelevanceReview } from "./reference-relevance-review";
+import {
+  CountsAsTrainingLabelNote,
+  DelegatedCurationNote,
+  ReferenceSuggestionBlock,
+  ReferenceSuggestionProvenance,
+  ReferenceSuggestionRowLine,
+} from "./reference-cyclotron-suggestion";
+import { ReferenceLiveAgreement } from "./reference-live-agreement";
+import type { DelegatedCuration, ShadowAgreement } from "../lib/cyclotron-suggestions";
 import { ReferenceCyclotronPriming, type PrimingFormInput } from "./reference-cyclotron-priming";
 import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyclotron-status";
 import type { PrimingRequestView } from "../lib/relevance-status";
@@ -75,6 +84,12 @@ type NewsroomReferencesViewProps = {
   demo?: boolean;
   /** The relevance cyclotron's current decisions, keyed by reference lineage. */
   decisions?: Map<string, RelevanceDecisionView>;
+  /** Reference lineage ids whose latest curation Message was made by a person. */
+  humanCuratedReferenceLineageIds?: Set<string>;
+  /** Delegated curations by reference lineage. */
+  delegatedCurations?: Map<string, DelegatedCuration>;
+  /** The live-agreement payload; the strip is hidden without it. */
+  shadowAgreement?: ShadowAgreement | null;
   disabled?: boolean;
   onRelevanceReview?: (reference: ReferenceRecord, curation: RelevanceCuration) => void;
   initialReferenceLineageId?: string | null;
@@ -212,17 +227,14 @@ function useReferencePreviewAttachments(
   return previewAttachments;
 }
 
-function decisionSummary(decision: RelevanceDecisionView): string {
-  const sure = decision.confidence == null ? "confidence unknown" : `${Math.round(decision.confidence * 100)}% sure`;
-  return `${decision.label} · ${sure}${decision.version != null ? ` · version ${decision.version}` : ""}`;
-}
-
 function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
   return Boolean(decision?.reviewRecommended)
     && normalizeReferenceCurationStatus(reference.curationStatus) === "pending";
 }
 
 function ReferenceDetailPanel({
+  countsAsTrainingLabel,
+  delegated,
   decision,
   demo,
   disabled,
@@ -232,6 +244,8 @@ function ReferenceDetailPanel({
   reference,
   onClose,
 }: {
+  countsAsTrainingLabel?: boolean;
+  delegated?: DelegatedCuration;
   decision?: RelevanceDecisionView;
   demo?: boolean;
   disabled?: boolean;
@@ -267,25 +281,39 @@ function ReferenceDetailPanel({
           ) : null}
         </div>
 
-        {decision && status === "pending" && onRelevanceReview ? (
-          <ReferenceRelevanceReview
-            decision={decision}
-            disabled={disabled}
-            onCurate={onRelevanceReview}
-            referenceLineageId={lineageId}
-          />
-        ) : decision ? (
-          <p className="text-sm text-muted-foreground" data-reference-relevance-decision={lineageId}>
-            Cyclotron decision: {decisionSummary(decision)}
-          </p>
+        {decision ? (
+          <div className="space-y-3" data-reference-relevance-decision={lineageId}>
+            <ReferenceSuggestionBlock
+              decision={decision}
+              disabled={disabled}
+              onCurate={onRelevanceReview}
+              referenceLineageId={lineageId}
+              settled={status !== "pending"}
+              statusLabel={referenceStatusLabel(status)}
+            />
+            <ReferenceSuggestionProvenance decision={decision} />
+            {status === "pending" && onRelevanceReview ? (
+              <details className="text-sm text-foreground">
+                <summary className="cursor-pointer font-semibold underline-offset-4 hover:underline">Review with a reason</summary>
+                <div className="mt-2">
+                  <ReferenceRelevanceReview
+                    decision={decision}
+                    disabled={disabled}
+                    onCurate={onRelevanceReview}
+                    referenceLineageId={lineageId}
+                  />
+                </div>
+              </details>
+            ) : null}
+          </div>
         ) : null}
+        {delegated ? <DelegatedCurationNote delegated={delegated} referenceLineageId={lineageId} /> : countsAsTrainingLabel ? <CountsAsTrainingLabelNote referenceLineageId={lineageId} /> : null}
 
         <div
           className="flex flex-wrap items-center gap-2"
           data-news-desk-reference-curation-cluster
           data-reference-curation-status={status}
         >
-          {decision && status === "pending" && onRelevanceReview ? null : <>
           <Button
             aria-label="Accept reference"
             aria-pressed={status === "accepted"}
@@ -312,7 +340,6 @@ function ReferenceDetailPanel({
             <ThumbsDownIcon className="size-4" />
             Reject
           </Button>
-          </>}
           <Button
             aria-label="Archive reference"
             disabled={archiveDisabled}
@@ -409,6 +436,9 @@ export function NewsroomReferencesView({
   cyclotronStatus,
   cyclotronPriming,
   decisions,
+  humanCuratedReferenceLineageIds,
+  delegatedCurations,
+  shadowAgreement = null,
   onRequestReviewRate,
   demo = false,
   disabled = false,
@@ -523,6 +553,7 @@ export function NewsroomReferencesView({
             Review source intake before it becomes accepted evidence.
           </p>
         </div>
+        <ReferenceLiveAgreement agreement={shadowAgreement} />
         <ReferenceCurationControls disabled={disabled} />
         {priming && !disabled ? <ReferencePriming {...priming} /> : null}
         {cyclotronPriming && !disabled ? (
@@ -595,12 +626,12 @@ export function NewsroomReferencesView({
                   </div>
                   <p className="mt-2 text-xs text-muted-foreground">{formatReferenceListDate(reference)}</p>
                   {decision ? (
-                    <p className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground" data-reference-relevance-row={lineageId}>
-                      <span>Decision: {decisionSummary(decision)}</span>
+                    <div className="flex flex-wrap items-center gap-2" data-reference-relevance-row={lineageId}>
+                      <ReferenceSuggestionRowLine decision={decision} referenceLineageId={lineageId} />
                       {needsReview(reference, decision) ? (
                         <Badge variant="outline"><span aria-hidden="true">●</span> Needs review</Badge>
                       ) : null}
-                    </p>
+                    </div>
                   ) : null}
                 </button>
               );
@@ -650,6 +681,8 @@ export function NewsroomReferencesView({
         <ScrollArea className="min-h-0 flex-1">
           {selectedReference ? (
             <ReferenceDetailPanel
+              countsAsTrainingLabel={humanCuratedReferenceLineageIds?.has(referenceLineageId(selectedReference))}
+              delegated={delegatedCurations?.get(referenceLineageId(selectedReference))}
               decision={decisions?.get(referenceLineageId(selectedReference))}
               demo={demo}
               disabled={disabled}
@@ -681,6 +714,8 @@ export function NewsroomReferencesView({
             {selectedReference ? (
               <ScrollArea className="max-h-[75dvh]">
                 <ReferenceDetailPanel
+                  countsAsTrainingLabel={humanCuratedReferenceLineageIds?.has(referenceLineageId(selectedReference))}
+              delegated={delegatedCurations?.get(referenceLineageId(selectedReference))}
                   decision={decisions?.get(referenceLineageId(selectedReference))}
                   demo={demo}
                   disabled={disabled}

package/components/prospectus-account-chooser.tsx

@@ -3,26 +3,20 @@
 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";
 
-let previewState: ProspectusAccountState | null = null;
-
-const PREVIEW_ACCOUNT_STATE: ProspectusAccountState = {
-  status: "signedIn",
-  publishingAccounts: [
-    { accountId: "preview-papyrus", name: "Papyrus", role: "publisher" },
-    { accountId: "preview-pilobolus", name: "Pilobolus", role: "editor" },
-  ],
-  selectedAccountId: "preview-papyrus",
-  cyclotronLabAccess: true,
-};
+function previewAccountState(): ProspectusAccountState {
+  return {
+    status: "signedIn",
+    publishingAccounts: LOCAL_PREVIEW_TENANTS.map(tenant => ({ accountId: tenant.accountId, name: tenant.name, role: tenant.role })),
+    selectedAccountId: getLocalPreviewTenantId(),
+    cyclotronLabAccess: true,
+  };
+}
 
 const ACCOUNT_STATE_EVENT = "papyrus:prospectus-account-state";
 
-function announceAccountState(state: ProspectusAccountState) {
-  window.dispatchEvent(new CustomEvent<ProspectusAccountState>(ACCOUNT_STATE_EVENT, { detail: state }));
-}
-
 function summaryOf(state: ProspectusAccountState): string | null {
   if (state.status !== "signedIn") return null;
   const selected = state.publishingAccounts.find(account => account.accountId === state.selectedAccountId);
@@ -37,7 +31,7 @@ export function useProspectusAccountSummary(): string | null {
   useEffect(() => {
     let cancelled = false;
     const returnPath = `${window.location.pathname}${window.location.search}`;
-    (isLocalPreviewEnabled() ? Promise.resolve(previewState ?? PREVIEW_ACCOUNT_STATE) : loadProspectusAccountState(returnPath)).then(loaded => {
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath)).then(loaded => {
       if (!cancelled) setSummary(summaryOf(loaded));
     });
     const onChange = (event: Event) => setSummary(summaryOf((event as CustomEvent<ProspectusAccountState>).detail));
@@ -59,7 +53,7 @@ export function ProspectusAccountChooser() {
   useEffect(() => {
     let cancelled = false;
     const returnPath = `${window.location.pathname}${window.location.search}`;
-    (isLocalPreviewEnabled() ? Promise.resolve(previewState ?? PREVIEW_ACCOUNT_STATE) : loadProspectusAccountState(returnPath))
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath))
       .then(loaded => { if (!cancelled) setState(loaded); });
     return () => { cancelled = true; };
   }, []);
@@ -73,8 +67,9 @@ export function ProspectusAccountChooser() {
     if (accountId === state.selectedAccountId || pending) return;
     setPending(accountId); setError(null);
     if (isLocalPreviewEnabled()) {
-      const next = { ...state, selectedAccountId: accountId };
-      previewState = next; setState(next); announceAccountState(next); setPending(null); return;
+      setLocalPreviewTenantId(accountId);
+      window.location.reload();
+      return;
     }
     const result = await selectProspectusAccount(accountId);
     setPending(null);

package/components/reference-cyclotron-status.tsx

@@ -48,14 +48,14 @@ export function ReferenceCyclotronStatus({
     <section aria-label="Relevance cyclotron" className="space-y-2" data-reference-cyclotron-status>
       <CyclotronStatusView status={status} />
       {stale ? (
-        <p className="text-xs text-muted-foreground" data-reference-cyclotron-status-stale>
+        <p className="text-xs text-foreground" data-reference-cyclotron-status-stale>
           <span aria-hidden="true">⚠ </span>
           Snapshot from {Math.round(ageHours)} hours ago; the next sweep refreshes it.
         </p>
       ) : null}
       <button
         aria-expanded={open}
-        className="text-xs text-muted-foreground underline underline-offset-4"
+        className="text-xs text-foreground underline underline-offset-4"
         onClick={() => setOpen((value) => !value)}
         type="button"
       >
@@ -75,7 +75,7 @@ export function ReferenceCyclotronStatus({
               }}
             >
               <label className="flex flex-col gap-1">
-                <span className="text-xs text-muted-foreground">Review rate for confident decisions</span>
+                <span className="text-xs text-foreground">Review rate for confident decisions</span>
                 <select aria-label="Manual review rate" onChange={(event) => setRate(Number(event.target.value))} value={rate}>
                   {RATE_CHOICES.map((choice) => (
                     <option key={choice} value={choice}>{Math.round(choice * 100)}%</option>
@@ -83,7 +83,7 @@ export function ReferenceCyclotronStatus({
                 </select>
               </label>
               <label className="flex flex-col gap-1">
-                <span className="text-xs text-muted-foreground">For</span>
+                <span className="text-xs text-foreground">For</span>
                 <select aria-label="How long the manual rate lasts" onChange={(event) => setDays(Number(event.target.value))} value={days}>
                   {DAY_CHOICES.map((choice) => (
                     <option key={choice} value={choice}>{choice} day{choice === 1 ? "" : "s"}</option>
@@ -96,7 +96,7 @@ export function ReferenceCyclotronStatus({
                   Clear manual rate
                 </button>
               ) : null}
-              <p className="basis-full text-xs text-muted-foreground">
+              <p className="basis-full text-xs text-foreground">
                 Low-confidence decisions and the random audit share are always reviewed.
               </p>
               {message ? <p className="basis-full text-xs" role="status">{message}</p> : null}

package/components/reference-cyclotron-suggestion.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import {
+  curationForSuggestionChoice,
+  type DelegatedCuration,
+  provenanceSummary,
+  suggestionConfidenceWords,
+  type SuggestionChoice,
+} from "../lib/cyclotron-suggestions";
+import type { RelevanceCuration, RelevanceDecisionView } from "../lib/relevance-decisions";
+
+const RULE_BUTTON_CLASS =
+  "border border-foreground px-3 py-1 text-sm font-semibold text-foreground underline-offset-4 hover:underline disabled:cursor-not-allowed disabled:opacity-100 disabled:line-through";
+
+/** UTC and fixed-format so server and browser render the same words. */
+export function formatSuggestionTime(instant: string | null): string {
+  if (!instant) return "time not recorded";
+  const parsed = new Date(instant);
+  if (Number.isNaN(parsed.getTime())) return "time not recorded";
+  return `${parsed.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+
+/** The one-line suggestion in a queue row. Never worded as a decision. */
+export function ReferenceSuggestionRowLine({
+  decision,
+  referenceLineageId,
+}: {
+  decision: RelevanceDecisionView;
+  referenceLineageId: string;
+}) {
+  return (
+    <p className="mt-1 text-xs text-foreground" data-reference-suggestion-row={referenceLineageId}>
+      <span className="font-semibold">Suggestion:</span> {decision.label}, {suggestionConfidenceWords(decision)}
+    </p>
+  );
+}
+
+/**
+ * The detail's Suggestion block. Agree and Overrule go through the ordinary
+ * accept and reject actions; nothing changes until an editor clicks.
+ */
+export function ReferenceSuggestionBlock({
+  decision,
+  disabled,
+  onCurate,
+  referenceLineageId,
+  statusLabel,
+  settled,
+}: {
+  decision: RelevanceDecisionView;
+  disabled?: boolean;
+  onCurate?: (curation: RelevanceCuration) => void;
+  referenceLineageId: string;
+  statusLabel: string;
+  settled: boolean;
+}) {
+  const choose = (choice: SuggestionChoice) => onCurate?.(curationForSuggestionChoice(decision, choice));
+  const suggestsAccept = decision.positiveLabel !== null && decision.label === decision.positiveLabel;
+  return (
+    <section aria-label="Suggestion" className="space-y-2 border-y border-foreground py-3" data-reference-suggestion={referenceLineageId}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-foreground">Suggestion</h3>
+      <p className="text-sm text-foreground">
+        The cyclotron suggests <span className="font-semibold">{decision.label}</span> ({suggestionConfidenceWords(decision)}).
+      </p>
+      <p className="text-xs text-foreground" data-reference-suggestion-notice>
+        A suggestion never changes the status until an editor acts. This reference is {statusLabel.toLowerCase()}.
+      </p>
+      {!settled && onCurate ? (
+        <div className="flex flex-wrap gap-2">
+          <button
+            className={RULE_BUTTON_CLASS}
+            data-reference-suggestion-agree
+            disabled={disabled}
+            onClick={() => choose("agree")}
+            type="button"
+          >
+            Agree ({suggestsAccept ? "accept" : "reject"})
+          </button>
+          <button
+            className={RULE_BUTTON_CLASS}
+            data-reference-suggestion-overrule
+            disabled={disabled}
+            onClick={() => choose("overrule")}
+            type="button"
+          >
+            Overrule ({suggestsAccept ? "reject" : "accept"})
+          </button>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+/** The expandable "How this suggestion was made" block, from the recorded provenance. */
+export function ReferenceSuggestionProvenance({ decision }: { decision: RelevanceDecisionView }) {
+  const summary = provenanceSummary(decision);
+  return (
+    <details className="text-sm text-foreground" data-reference-suggestion-provenance>
+      <summary className="cursor-pointer font-semibold underline-offset-4 hover:underline">How this suggestion was made</summary>
+      {summary ? (
+        <ul className="mt-2 space-y-1">
+          <li>{summary.teachingLabelsSentence}.</li>
+          <li>{summary.primingExamplesSentence}.</li>
+          <li>Doctrine fingerprint {summary.doctrineShortHash ?? "not recorded"}.</li>
+          <li>Model {summary.modelVersion ?? "version not recorded"}.</li>
+          <li>Decided {formatSuggestionTime(summary.decidedAt)}.</li>
+        </ul>
+      ) : (
+        <p className="mt-2">This suggestion was made before the cyclotron recorded how. Only its model version and confidence are known.</p>
+      )}
+    </details>
+  );
+}
+
+/** Shown only when the latest curation of the reference was made by a signed-in person. */
+export function CountsAsTrainingLabelNote({ referenceLineageId }: { referenceLineageId: string }) {
+  return (
+    <p className="border-l-2 border-foreground pl-2 text-xs font-semibold text-foreground" data-reference-training-label={referenceLineageId}>
+      Counts as a training label: an editor made this decision, so the cyclotron learns from it.
+    </p>
+  );
+}
+
+/**
+ * Shown on a record an agent decided for a person under a delegation. The
+ * backend stamps it human, so it counts as that person's training label.
+ */
+export function DelegatedCurationNote({ delegated, referenceLineageId }: { delegated: DelegatedCuration; referenceLineageId: string }) {
+  return (
+    <section aria-label="Delegated decision" className="space-y-1 border-l-2 border-foreground pl-2 text-sm text-foreground" data-reference-delegated-curation={referenceLineageId}>
+      <p className="font-semibold">
+        Decided by {delegated.agent} on behalf of {delegated.person ?? "a person"}
+      </p>
+      {delegated.instruction ? <blockquote className="italic">&ldquo;{delegated.instruction}&rdquo;</blockquote> : null}
+      <p className="text-xs">Delegation {delegated.delegationShortId || "id not recorded"}.</p>
+      <p className="text-xs font-semibold" data-reference-training-label={referenceLineageId}>
+        {delegated.countsAsTrainingLabel
+          ? `Counts as a training label: the record is stamped as ${delegated.person ?? "the person"}'s own decision, so the cyclotron learns from it.`
+          : "Does not count as a training label."}
+      </p>
+    </section>
+  );
+}