@anthusai/papyrus 1.3.0 → 1.4.0-next.10

package/components/priming-proof-page.tsx

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

package/components/prospectus-account-chooser.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+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 { 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 })),
+    selectedAccountId: getLocalPreviewTenantId(),
+    cyclotronLabAccess: true,
+  };
+}
+
+const ACCOUNT_STATE_EVENT = "papyrus:prospectus-account-state";
+
+function summaryOf(state: ProspectusAccountState): string | null {
+  if (state.status !== "signedIn") return null;
+  const selected = state.publishingAccounts.find(account => account.accountId === state.selectedAccountId);
+  return selected ? `${selected.name ?? selected.accountId} · ${roleLabel(selected.role)}` : "Choose an account";
+}
+
+const roleLabel = (role: string) => role.replace(/_/g, " ");
+
+/** The signed-in person's current publishing account as "Name · role", or null when the site has no Prospectus accounts. */
+export function useProspectusAccountSummary(): string | null {
+  const [summary, setSummary] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    const returnPath = `${window.location.pathname}${window.location.search}`;
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath)).then(loaded => {
+      if (!cancelled) setSummary(summaryOf(loaded));
+    });
+    const onChange = (event: Event) => setSummary(summaryOf((event as CustomEvent<ProspectusAccountState>).detail));
+    window.addEventListener(ACCOUNT_STATE_EVENT, onChange);
+    return () => { cancelled = true; window.removeEventListener(ACCOUNT_STATE_EVENT, onChange); };
+  }, []);
+  return summary;
+}
+
+/**
+ * The publishing account the signed-in person is acting as. It appears only on sites that have Prospectus
+ * accounts configured; a site with its own user pool never shows it. Choosing an account records the choice
+ * in the sign-in session and reloads so every page reads the new account.
+ */
+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}`;
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath))
+      .then(loaded => { if (!cancelled) setState(loaded); });
+    return () => { cancelled = true; };
+  }, []);
+  if (state.status === "unavailable") return null;
+  if (state.status === "signedOut") {
+    return <div className="organizer-account-chooser" data-prospectus-account-chooser="signed-out">
+      <a className="organizer-account-chooser-link" href={state.signInUrl}>Sign in with Prospectus</a>
+    </div>;
+  }
+  const choose = async (accountId: string) => {
+    if (accountId === state.selectedAccountId || pending) return;
+    setPending(accountId); setError(null);
+    if (isLocalPreviewEnabled()) {
+      setLocalPreviewTenantId(accountId);
+      window.location.reload();
+      return;
+    }
+    const result = await selectProspectusAccount(accountId);
+    setPending(null);
+    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
+      ? <p className="organizer-account-chooser-note">No publishing accounts yet.</p>
+      : <ul role="listbox" aria-label="Publishing account">
+        {state.publishingAccounts.map(account => {
+          const selected = account.accountId === state.selectedAccountId;
+          return <li key={account.accountId} role="presentation">
+            <button aria-selected={selected} data-selected={selected || undefined} disabled={pending !== null} onClick={() => { void choose(account.accountId); }} role="option" type="button">
+              <span><strong>{account.name ?? account.accountId}</strong><small>{roleLabel(account.role)}</small></span>
+              {selected ? <Check size={14} aria-label="Selected" /> : null}
+            </button>
+          </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}
+  </div>;
+}

package/components/reference-cyclotron-priming.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import { primingStateText, type PrimingRequestView } from "../lib/relevance-status";
+
+export type PrimingFormInput = { url: string; label: string; explanation: string };
+
+/**
+ * A compact form that primes the running relevance cyclotron with a pasted
+ * URL. The next sweep reads the page, adds it to the cyclotron's example list
+ * and records the outcome, which this list shows beside each saved request.
+ */
+export function ReferenceCyclotronPriming({
+  labels,
+  requests,
+  onRequestPriming,
+}: {
+  labels: readonly string[];
+  requests: PrimingRequestView[];
+  onRequestPriming: (input: PrimingFormInput) => Promise<void> | void;
+}) {
+  const [url, setUrl] = useState("");
+  const [label, setLabel] = useState(labels[0] ?? "");
+  const [explanation, setExplanation] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function submit() {
+    setMessage("Saving…");
+    try {
+      await onRequestPriming({ url, label, explanation });
+      setUrl("");
+      setExplanation("");
+      setMessage("Saved. The next sweep reads the page and adds it to the cyclotron.");
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : String(error));
+    }
+  }
+
+  return (
+    <section aria-label="Prime the relevance cyclotron" className="space-y-2 text-sm" data-reference-cyclotron-priming>
+      <form
+        className="flex flex-wrap items-end gap-3"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void submit();
+        }}
+      >
+        <label className="flex min-w-64 flex-1 flex-col gap-1">
+          <span className="text-xs text-muted-foreground">Prime with a URL</span>
+          <input
+            aria-label="Priming URL"
+            onChange={(event) => setUrl(event.target.value)}
+            placeholder="https://"
+            required
+            type="url"
+            value={url}
+          />
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">Label</span>
+          <select aria-label="Priming label" onChange={(event) => setLabel(event.target.value)} value={label}>
+            {labels.map((choice) => (
+              <option key={choice} value={choice}>{choice}</option>
+            ))}
+          </select>
+        </label>
+        <label className="flex min-w-48 flex-1 flex-col gap-1">
+          <span className="text-xs text-muted-foreground">Why (optional)</span>
+          <input aria-label="Priming explanation" onChange={(event) => setExplanation(event.target.value)} type="text" value={explanation} />
+        </label>
+        <button className="cyclotron-review-secondary" type="submit">Save</button>
+        {message ? <p className="basis-full text-xs" role="status">{message}</p> : null}
+      </form>
+      {requests.length ? (
+        <ul aria-label="Saved priming requests" className="space-y-1 text-xs text-muted-foreground">
+          {requests.slice(0, 10).map((view) => (
+            <li data-priming-request-state={view.outcome?.state ?? "waiting"} key={view.request.requestId}>
+              <span className="font-medium">{view.request.label}</span> {view.request.url} · {primingStateText(view)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+}

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>
+  );
+}

package/components/reference-live-agreement.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  agreementStripState,
+  formatPercentage,
+  dailyCapWords,
+  loopStateWords,
+  type AgreementStripMeasurement,
+  type ShadowAgreement,
+} from "../lib/cyclotron-suggestions";
+import { formatSuggestionTime } from "./reference-cyclotron-suggestion";
+
+function MeasurementFigures({ measurement }: { measurement: AgreementStripMeasurement }) {
+  const figures: Array<[string, string]> = [
+    ["Agreement", formatPercentage(measurement.agreement)],
+    ["Precision", formatPercentage(measurement.precision)],
+    ["Recall", formatPercentage(measurement.recall)],
+    ["Comparisons", String(measurement.comparisons)],
+  ];
+  return (
+    <dl className="flex flex-wrap gap-x-6 gap-y-1">
+      {figures.map(([name, value]) => (
+        <div key={name}>
+          <dt className="text-xs font-semibold uppercase tracking-wide text-foreground">{name}</dt>
+          <dd className="text-base font-semibold text-foreground">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/**
+ * Live agreement at the top of References: how often the cyclotron's
+ * suggestions matched what editors then decided. Hidden without a payload.
+ */
+export function ReferenceLiveAgreement({ agreement }: { agreement: ShadowAgreement | null }) {
+  const state = agreementStripState(agreement);
+  if (state.kind === "hidden") return null;
+  return (
+    <section aria-label="Live agreement" className="shrink-0 space-y-2 border-y border-foreground py-3" data-reference-live-agreement={state.kind}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-foreground">Live agreement</h3>
+      {state.loop ? (
+        <p className="text-sm text-foreground" data-reference-live-agreement-loop>
+          <span className="font-semibold">{loopStateWords(state.loop)}</span>
+          {" · "}Last sweep {formatSuggestionTime(state.loop.lastSweepAt)}
+          {" · "}{dailyCapWords(state.loop)}
+        </p>
+      ) : null}
+      {state.stopReasonSentence ? (
+        <p className="text-sm font-semibold text-foreground" data-reference-live-agreement-stopped>{state.stopReasonSentence}</p>
+      ) : null}
+      {state.kind === "not_enough" ? (
+        <p className="text-sm text-foreground" data-reference-live-agreement-not-enough>
+          Not enough comparisons yet: {state.measurement.comparisons} of {state.needed} editor decisions have followed a suggestion. Figures appear at {state.needed}.
+        </p>
+      ) : <MeasurementFigures measurement={state.measurement} />}
+      <p className="text-xs text-foreground">
+        Suggestions compared with the decisions editors made afterwards. Computed {formatSuggestionTime(agreement?.computedAt ?? null)}.
+      </p>
+    </section>
+  );
+}

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>
+  );
+}