@anthusai/papyrus 2.0.0-next.8 → 2.0.0-next.80

package/components/notification-center.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import {
+  cyclotronAutoDecided, cyclotronHeldForReview, formatWhen, isUnread, modeLabel, modeMark, nextText, sectionReviews,
+  steeringText, subjectHref, summarize, summaryText,
+  type AnswerInput, type CyclotronEntry, type ReviewRequest,
+} from "../lib/review-requests";
+import type { ReferenceRecord } from "../lib/category-repository";
+import type { RelevanceDecisionView } from "../lib/relevance-decisions";
+import { FIXTURE_REVIEW_REQUESTS } from "../lib/review-fixture";
+
+export type NotificationLoadState = "loading" | "ready" | "forbidden" | "unavailable";
+
+type ViewProps = {
+  loadState: NotificationLoadState;
+  requests: ReviewRequest[];
+  readIds: ReadonlySet<string>;
+  held: CyclotronEntry[];
+  autoDecided: CyclotronEntry[];
+  demo?: boolean;
+  busyId?: string | null;
+  error?: string | null;
+  onAnswer?: (request: ReviewRequest, input: AnswerInput) => void;
+  onMarkRead?: (requestId: string) => void;
+  onMarkAllRead?: () => void;
+};
+
+function Entry({ request, unread, demo, busy, onAnswer, onMarkRead }: {
+  request: ReviewRequest; unread: boolean; demo: boolean; busy: boolean;
+  onAnswer?: ViewProps["onAnswer"]; onMarkRead?: ViewProps["onMarkRead"];
+}) {
+  const [note, setNote] = useState("");
+  const href = subjectHref(request.subject, demo);
+  const open = request.state === "open";
+  const steering = steeringText(request);
+  const act = (input: AnswerInput) => onAnswer?.(request, { ...input, feedback: input.feedback ?? (note.trim() || null) });
+  return (
+    <li className="rounded-lg border p-3 space-y-2" data-review-request={request.id} data-review-mode={request.mode} data-review-state={request.state} data-review-unread={unread || undefined}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant="outline"><span aria-hidden="true">{modeMark(request.mode)} </span>{modeLabel(request.mode)}</Badge>
+        {unread ? <Badge variant="default"><span aria-hidden="true">● </span>New</Badge> : <span className="text-xs text-muted-foreground">Read</span>}
+        <strong className="text-sm">{request.reason}</strong>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Raised by {request.raisedBy} on {formatWhen(request.raisedAt)}
+        {" · "}About: {href ? <Link href={href} onClick={() => onMarkRead?.(request.id)}>{request.subject.type.replace("_", " ")} {request.subject.id}</Link> : <span>{request.subject.type} {request.subject.id}</span>}
+      </p>
+      {request.ask ? <p className="text-sm">{request.ask}</p> : null}
+      {request.links.length ? (
+        <ul className="text-xs space-y-0.5" aria-label="Items in this request">
+          {request.links.slice(0, 10).map((link, index) => {
+            const target = link.url ?? (link.type ? subjectHref({ type: link.type, id: link.id ?? "" }, demo) : null);
+            return <li key={`${link.id ?? link.url}-${index}`}>{target ? <Link href={target}>{link.label ?? link.id ?? link.url}</Link> : (link.label ?? link.id)}</li>;
+          })}
+          {request.links.length > 10 ? <li>and {request.links.length - 10} more</li> : null}
+        </ul>
+      ) : null}
+      <p className="text-sm" data-review-next>{nextText(request)}</p>
+      {steering ? <p className="text-sm" data-review-steering>{steering}</p> : null}
+      {open ? (
+        <div className="space-y-2" data-review-controls>
+          <label className="block text-xs text-muted-foreground">
+            Steering note (optional)
+            <textarea
+              className="mt-1 block w-full rounded-md border bg-background p-2 text-sm"
+              disabled={busy}
+              onChange={(event) => setNote(event.target.value)}
+              placeholder={request.mode === "flag" ? "Tell the step what to do differently" : "What should change, or what did you want instead?"}
+              rows={2}
+              value={note}
+            />
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {request.mode === "flag" ? (
+              <Button disabled={busy} onClick={() => act({ decision: "approve" })} size="sm" variant="outline">Acknowledge</Button>
+            ) : (
+              <>
+                <Button disabled={busy} onClick={() => act({ decision: "approve" })} size="sm" variant="outline">Approve</Button>
+                <Button disabled={busy} onClick={() => act({ decision: "reject" })} size="sm" variant="outline">Reject</Button>
+              </>
+            )}
+            <Button disabled={busy || !note.trim()} onClick={() => act({ decision: "feedback", steer: "adjust" })} size="sm" variant="outline">Steer with this note</Button>
+            <Button disabled={busy} onClick={() => act({ decision: "feedback", steer: "not_this_kind" })} size="sm" variant="outline">Not this kind of thing</Button>
+            {unread ? <Button disabled={busy} onClick={() => onMarkRead?.(request.id)} size="sm" variant="ghost">Mark read</Button> : null}
+          </div>
+        </div>
+      ) : unread ? (
+        <Button disabled={busy} onClick={() => onMarkRead?.(request.id)} size="sm" variant="ghost">Mark read</Button>
+      ) : null}
+    </li>
+  );
+}
+
+function CyclotronLine({ entry, held }: { entry: CyclotronEntry; held: boolean }) {
+  const confidence = entry.confidence === null ? "confidence not recorded" : `confidence ${Math.round(entry.confidence * 100)}%`;
+  return (
+    <li className="rounded-lg border p-3 space-y-1" data-cyclotron-entry={entry.lineageId} data-cyclotron-held={held || undefined}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant="outline"><span aria-hidden="true">{held ? "◔" : "✓"} </span>{held ? "Held for review" : "Decided by the system"}</Badge>
+        <strong className="text-sm">{entry.title}</strong>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Classified as {entry.label} · {confidence}{entry.decidedAt ? ` · ${formatWhen(entry.decidedAt)}` : ""}
+        {entry.reviewedByPerson ? " · reviewed by a person" : ""}
+      </p>
+      {held ? <p className="text-sm">{entry.reviewDetail ? `${entry.reviewDetail}. ` : ""}Held for review: it stays pending until someone decides.</p> : null}
+      <Link className="text-sm" href={entry.href}>{held ? "Review it in References" : "Open it in References to correct it"}</Link>
+    </li>
+  );
+}
+
+function Section({ id, title, count, children, empty }: { id: string; title: string; count: number; children: React.ReactNode; empty: string }) {
+  return (
+    <section aria-labelledby={`notification-${id}`} className="space-y-2" data-notification-section={id}>
+      <h2 className="text-sm font-medium" id={`notification-${id}`}>{title} ({count})</h2>
+      {count ? children : <p className="text-sm text-muted-foreground">{empty}</p>}
+    </section>
+  );
+}
+
+/** The CMS console home: what needs a person, what will proceed on its own, and what the system decided. Ignore-safe by design. */
+export function NotificationCenterView({ loadState, requests, readIds, held, autoDecided, demo = false, busyId = null, error = null, onAnswer, onMarkRead, onMarkAllRead }: ViewProps) {
+  const sections = useMemo(() => sectionReviews(requests), [requests]);
+  const unreadCount = requests.filter((request) => isUnread(request, readIds)).length;
+  const summary = summarize(sections, held, autoDecided, unreadCount);
+  const entry = (request: ReviewRequest) => (
+    <Entry busy={busyId === request.id} demo={demo} key={request.id} onAnswer={onAnswer} onMarkRead={onMarkRead} request={request} unread={isUnread(request, readIds)} />
+  );
+  if (loadState === "loading") return (
+    <section aria-label="Loading Notification Center" className="space-y-4" data-notification-state="loading" role="status">
+      <div className="h-6 w-48 rounded bg-muted" />
+      <div className="h-4 w-3/4 max-w-xl rounded bg-muted" />
+      <div className="h-4 w-2/3 max-w-lg rounded bg-muted" />
+      <div className="grid gap-3 sm:grid-cols-2">
+        {Array.from({ length: 4 }, (_, index) => <div className="h-28 rounded-xl border bg-card p-4" key={index}>
+          <div className="h-4 w-2/3 rounded bg-muted" /><div className="mt-4 h-3 w-1/2 rounded bg-muted" />
+        </div>)}
+      </div>
+    </section>
+  );
+  if (loadState === "forbidden") return <div role="alert" data-notification-state="forbidden"><strong>The Notification Center is for editors and admins</strong></div>;
+  if (loadState === "unavailable") return <div role="alert" data-notification-state="unavailable"><strong>Review requests could not be read right now</strong><p>Try again in a minute. The current request state is unknown.</p></div>;
+  return (
+    <div className="space-y-6" data-notification-center>
+      <header className="space-y-1">
+        <h1 className="text-lg font-semibold">Notification Center</h1>
+        <p className="text-sm" data-notification-summary>{summaryText(summary)}</p>
+        <p className="text-xs text-muted-foreground">
+          Look, or steer. Anything you ignore keeps going: soft reviews proceed at their deadline and flags never wait. Only a hard gate waits for you.
+        </p>
+        <p className="text-xs text-muted-foreground" data-notification-unread>
+          {unreadCount ? `${unreadCount} unread` : "Nothing unread"}
+          {unreadCount ? <Button className="ml-2" onClick={onMarkAllRead} size="sm" variant="ghost">Mark all read</Button> : null}
+        </p>
+        {error ? <p role="alert" className="text-sm" data-notification-error>{error}</p> : null}
+      </header>
+
+      <Section count={sections.hardGates.length} empty="No hard gates. Nothing is blocked on you." id="hard-gates" title="Waiting for you: hard gates">
+        <ul className="space-y-2">{sections.hardGates.map(entry)}</ul>
+      </Section>
+      <Section count={sections.softReviews.length} empty="No soft reviews are running." id="soft-reviews" title="Proceeding soon: soft reviews, soonest deadline first">
+        <ul className="space-y-2">{sections.softReviews.map(entry)}</ul>
+      </Section>
+      <Section count={held.length} empty="No Cyclotron items are held for review." id="cyclotron" title="Cyclotron items routed to a person (low confidence)">
+        <ul className="space-y-2">{held.slice(0, 10).map((item) => <CyclotronLine entry={item} held key={item.lineageId} />)}</ul>
+        {held.length > 10 ? <p className="text-sm">and {held.length - 10} more. <Link href={getNewsroomNavHref("/newsroom/references", demo)}>See all in References</Link></p> : null}
+      </Section>
+      <Section count={sections.flags.length} empty="No flags." id="flags" title="Flags: for your information">
+        <ul className="space-y-2">{sections.flags.map(entry)}</ul>
+      </Section>
+      <Section count={sections.decided.length} empty="Nothing answered or proceeded yet." id="decided" title="Answered, and what became of it">
+        <ul className="space-y-2">{sections.decided.slice(0, 20).map(entry)}</ul>
+      </Section>
+      <details data-notification-section="auto-decided">
+        <summary className="cursor-pointer text-sm font-medium">Recently decided by the system ({autoDecided.length})</summary>
+        <div className="mt-2 space-y-2">
+          <p className="text-xs text-muted-foreground">Read only. The Cyclotron was confident enough to decide these without you. To correct one, open it in References.</p>
+          {autoDecided.length ? <ul className="space-y-2">{autoDecided.map((item) => <CyclotronLine entry={item} held={false} key={item.lineageId} />)}</ul> : <p className="text-sm text-muted-foreground">No automatic decisions yet.</p>}
+        </div>
+      </details>
+    </div>
+  );
+}
+
+type ContainerProps = {
+  references: ReferenceRecord[];
+  decisions: ReadonlyMap<string, RelevanceDecisionView>;
+  humanCuratedReferenceLineageIds: ReadonlySet<string>;
+  actorLabel: string;
+  demo: boolean;
+};
+
+const REFRESH_MILLISECONDS = 60_000;
+
+export function NotificationCenter({ references, decisions, humanCuratedReferenceLineageIds, actorLabel, demo }: ContainerProps) {
+  const [loadState, setLoadState] = useState<NotificationLoadState>("loading");
+  const [requests, setRequests] = useState<ReviewRequest[]>([]);
+  const [readIds, setReadIds] = useState<Set<string>>(new Set());
+  const [userKey, setUserKey] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (demo) {
+      setRequests(FIXTURE_REVIEW_REQUESTS);
+      setReadIds(new Set(["rr-flag-1"]));
+      setLoadState("ready");
+      return;
+    }
+    try {
+      const { loadReviews } = await import("../lib/review-client");
+      const loaded = await loadReviews();
+      if (loaded.state !== "ready") {
+        setLoadState(loaded.state);
+        return;
+      }
+      setRequests(loaded.requests);
+      setReadIds(new Set(loaded.readIds));
+      setUserKey(loaded.userKey);
+      setLoadState("ready");
+    } catch {
+      setLoadState("unavailable");
+    }
+  }, [demo]);
+
+  useEffect(() => {
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), REFRESH_MILLISECONDS);
+    return () => window.clearInterval(timer);
+  }, [refresh]);
+
+  const held = useMemo(() => cyclotronHeldForReview(references, decisions, demo), [references, decisions, demo]);
+  const autoDecided = useMemo(() => cyclotronAutoDecided(references, decisions, humanCuratedReferenceLineageIds, demo), [references, decisions, humanCuratedReferenceLineageIds, demo]);
+
+  const markRead = useCallback(async (requestId: string) => {
+    setReadIds((current) => new Set(current).add(requestId));
+    if (demo || !userKey) return;
+    const { markReviewRead } = await import("../lib/review-client");
+    await markReviewRead(userKey, requestId).catch(() => undefined);
+  }, [demo, userKey]);
+
+  const answer = useCallback(async (request: ReviewRequest, input: AnswerInput) => {
+    setError(null);
+    setBusyId(request.id);
+    try {
+      if (demo) throw new Error("This is a demo: answers are not saved.");
+      const { answerReviewRequest } = await import("../lib/review-client");
+      const saved = await answerReviewRequest(request, input, actorLabel);
+      setRequests((current) => current.map((entry) => (entry.id === saved.id ? saved : entry)));
+      await markRead(request.id);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : "Could not save the answer.");
+    } finally {
+      setBusyId(null);
+    }
+  }, [actorLabel, demo, markRead]);
+
+  const markAllRead = useCallback(() => {
+    for (const request of requests) if (isUnread(request, readIds)) void markRead(request.id);
+  }, [markRead, readIds, requests]);
+
+  return (
+    <NotificationCenterView
+      autoDecided={autoDecided} busyId={busyId} demo={demo} error={error} held={held} loadState={loadState}
+      onAnswer={answer} onMarkAllRead={markAllRead} onMarkRead={markRead} readIds={readIds} requests={requests}
+    />
+  );
+}

package/components/publication-cyclotron-panel.tsx

@@ -5,6 +5,9 @@ import {ReviewControl,type ReviewControlReview} from 'cyclotron/components/revie
 import {CyclotronStatusView} from 'cyclotron/components/cyclotron-status';
 import {assertPublicationScope,publicationScopeKey,publicationReviewPayload,type PublicationStatus,type PublicationHistory,type PublicationHistoryRow,type PublicationReviewPayload} from '../lib/publication-cyclotron';
 
+/** Steering is offered only when the Cyclotron contract says so; absent means unknown, so off. */
+export function steeringAvailable(status:PublicationStatus):boolean{return status.features?.steering===true;}
+
 function requestId(){
  const bytes=crypto.getRandomValues(new Uint8Array(16));
  return Array.from(bytes,value=>value.toString(16).padStart(2,'0')).join('');
@@ -28,28 +31,30 @@ function PublicationControls({mode,status,history,onReview,onSteer}:PublicationP
    const signature=JSON.stringify(review);const previous=requests.current[key];
    const id=previous?.signature===signature?previous.id:requestId();requests.current[key]={signature,id};
    const payload=publicationReviewPayload(status,row,classifier,review,id);
-   if(!onReview)throw new Error('This host has not enabled human review');
+   if(!onReview)throw new Error('Reviewing is not turned on here.');
    setBusy(key);setMessage(null);await onReview(payload);
-   if(current.current===context){setMessage({context,key,error:false,text:'Human label acknowledged.'});setEditing(old=>({...old,[key]:false}));}
-  }catch(error){if(current.current===context)setMessage({context,key,error:true,text:error instanceof Error?error.message:'Review failed; its outcome must be checked before retrying.'});}
+   if(current.current===context){setMessage({context,key,error:false,text:'Your choice was saved.'});setEditing(old=>({...old,[key]:false}));}
+  }catch(error){if(current.current===context)setMessage({context,key,error:true,text:error instanceof Error?error.message:'Your review may not have been saved; check before trying again.'});}
   finally{if(current.current===context)setBusy(null);}
  }
- return <section data-publication-scope={context} aria-label="Publication Cyclotron controls" className="space-y-4">
-  <header><h2 className="text-lg font-semibold">Cyclotron · {status.publicationId}</h2><p className="text-sm text-muted-foreground">{mode==='embedded'?'Classifier data owned by this deployment.':'Canonical classifier data owned by the shared remote lab.'}</p></header>
+ return <section data-publication-scope={context} aria-label="Suggestions and reviews" className="space-y-4">
+  <header><h2 className="text-lg font-semibold">Suggestions · {status.publicationId}</h2><p className="text-sm text-muted-foreground">{mode==='embedded'?'Suggestions and reviews are kept by this site.':'Suggestions and reviews are kept by the shared review service.'}</p></header>
   {status.outputs.map(output=><section key={`${context}:${output.id}`} aria-label={output.question} className="space-y-3 rounded-md border p-3">
    <CyclotronStatusView status={status.classifiers[output.id]} classifierName={output.question} variant="card"/>
-   {onSteer?<button type="button" disabled={Boolean(busy)} onClick={()=>onSteer(output.id)}>Evaluate classifier proposal</button>:null}
+   {onSteer?(steeringAvailable(status)
+    ?<button type="button" disabled={Boolean(busy)} onClick={()=>onSteer(output.id)}>Test a rule change</button>
+    :<div><button type="button" disabled aria-describedby={`steer-unavailable:${output.id}`}>Test a rule change · Not available yet</button><p id={`steer-unavailable:${output.id}`} className="text-sm text-muted-foreground">Rule changes cannot be tested on this service yet.</p></div>):null}
    {history.history.map(row=>{
     const prediction=row.decision.classifiers[output.id];if(!prediction)return null;
     const key=`${context}:${row.decision.decisionId}:${output.id}:${row.context?.contextId??'legacy'}`;const saved=row.reviews[output.id];const historical=Boolean(row.historicalContext||row.provenanceUnavailable||row.feedbackReconciliationRequired);
     return <article key={key} className="space-y-2 rounded-md border p-3">
-     {historical?<p className="text-sm">Historical source or binding revision · read-only</p>:null}{row.feedbackReconciliationRequired?<p role="status">Canonical feedback changed; provenance reconciliation is required before replay.</p>:null}<h3 className="font-medium">{String(row.item.title??row.decision.itemId)}</h3>
+     {historical?<p className="text-sm">An earlier copy of this source · read-only</p>:null}{row.feedbackReconciliationRequired?<p role="status">Earlier feedback changed; check this item before reviewing again.</p>:null}<h3 className="font-medium">{String(row.item.title??row.decision.itemId)}</h3>
      <p className="whitespace-pre-wrap text-sm">{String(row.item.abstract??row.item.text??'')}</p>
-     {!saved||editing[key]?<p className="text-sm" role="status">{historical?'This source revision is read-only.':!onReview?'Human review is unavailable in this session.':busy===key?'Submitting review… Your selection is preserved; wait for acknowledgement.':'Choose a label to enable Submit review. Explanation is optional.'}</p>:null}
+     {!saved||editing[key]?<p className="text-sm" role="status">{historical?'This earlier copy is read-only.':!onReview?'Reviewing is not available right now.':busy===key?'Saving your review… your choice is kept.':'Choose an option to enable Submit review. An explanation is optional.'}</p>:null}
      <ReviewControl key={`${key}:${Boolean(editing[key])}`} itemId={`${row.decision.itemId}:${Array.from(new TextEncoder().encode(context+':'+output.id+':'+(row.context?.contextId??'legacy')),byte=>byte.toString(16).padStart(2,'0')).join('')}`} decision={{decisionId:row.decision.decisionId,...prediction,classes:output.classes}} question={output.question} mode="labels" positiveLabel={output.positiveLabel??undefined} disabled={Boolean(busy)||!onReview||historical} value={saved&&!editing[key]?{label:saved.label,reasonCode:saved.reasonCode,explanation:saved.explanation}:undefined} onReview={review=>void submit(row,output.id,{...review,itemId:row.decision.itemId})}/>
      {message?.context===context&&message.key===key?<p role={message.error?'alert':'status'} className="text-sm">{message.text}</p>:null}
-     {saved&&onReview&&!historical&&!editing[key]?<button type="button" disabled={Boolean(busy)} onClick={()=>setEditing(old=>({...old,[key]:true}))}>Correct human label</button>:null}
-     <details><summary>Decision provenance and version</summary><pre className="max-h-64 overflow-auto whitespace-pre-wrap text-xs">{JSON.stringify({itemId:row.decision.itemId,source:row.item.source_uri,decisionId:row.decision.decisionId,prediction,bindingRevision:row.context?.binding.values.revision??status.bindingRevision,sourceRef:row.context?.sourceRef,contextId:row.context?.contextId},null,2)}</pre></details>
+     {saved&&onReview&&!historical&&!editing[key]?<button type="button" disabled={Boolean(busy)} onClick={()=>setEditing(old=>({...old,[key]:true}))}>Change my choice</button>:null}
+     <details><summary>Where this suggestion came from</summary><pre className="max-h-64 overflow-auto whitespace-pre-wrap text-xs">{JSON.stringify({itemId:row.decision.itemId,source:row.item.source_uri,decisionId:row.decision.decisionId,prediction,bindingRevision:row.context?.binding.values.revision??status.bindingRevision,sourceRef:row.context?.sourceRef,contextId:row.context?.contextId},null,2)}</pre></details>
     </article>;
    })}
   </section>)}

package/components/reader-auth-state.ts

@@ -61,7 +61,7 @@ export async function loadReaderSessionSnapshot(options?: { forceRefresh?: boole
 
 export function isUnauthenticatedError(error: unknown): boolean {
   const message = error instanceof Error ? error.message : String(error);
-  return /unauth|not authenticated|no current user|not signed in/i.test(message);
+  return /unauth|not.?authorized|not authenticated|no current user|not signed in|session expired|token expired|invalid.*token|\b401\b/i.test(message);
 }
 
 function readIdentityLabel(claims: {

package/components/reference-add-entry.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import type { PrimingPanelProps } from "cyclotron/components/priming-panel";
+import { ReferenceCyclotronPriming, type PrimingFormInput } from "./reference-cyclotron-priming";
+import { ReferencePriming } from "./reference-priming";
+import type { PrimingRequestView } from "../lib/relevance-status";
+import { Button } from "./ui/button";
+
+export type ReferenceUrlOption = {
+  labels: readonly string[];
+  requests: PrimingRequestView[];
+  onRequest: (input: PrimingFormInput) => Promise<void> | void;
+};
+
+type Option = "url" | "file";
+
+/**
+ * The one place an editor adds a reference. "Paste a URL" is always offered when
+ * the host can take one. "Import a file" appears only when a curation session
+ * (or the host) supplies the import transport, so without one it never renders.
+ */
+export function ReferenceAddEntry({
+  url,
+  importOptions,
+  onImported,
+}: {
+  url?: ReferenceUrlOption | null;
+  importOptions?: PrimingPanelProps | null;
+  /** Called after an import is saved, so the host can reload what depends on it. */
+  onImported?: () => void;
+}) {
+  const [chosen, setChosen] = useState<Option>("url");
+  const [fileOpened, setFileOpened] = useState(false);
+  const [saved, setSaved] = useState("");
+  if (!url && !importOptions) return null;
+
+  const option: Option = importOptions && (!url || chosen === "file") ? "file" : "url";
+  const choose = (next: Option) => {
+    setChosen(next);
+    if (next === "file") setFileOpened(true);
+  };
+
+  return (
+    <section aria-label="Add a reference" className="shrink-0 space-y-3" data-add-reference>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h3 className="font-semibold">Add a reference</h3>
+        {url && importOptions ? (
+          <div aria-label="How to add a reference" className="flex gap-2" role="group">
+            <Button aria-pressed={option === "url"} onClick={() => choose("url")} size="sm" type="button" variant={option === "url" ? "secondary" : "outline"}>Paste a URL</Button>
+            <Button aria-pressed={option === "file"} onClick={() => choose("file")} size="sm" type="button" variant={option === "file" ? "secondary" : "outline"}>Import a file</Button>
+          </div>
+        ) : null}
+      </div>
+      {url ? (
+        <div hidden={option !== "url"}>
+          <ReferenceCyclotronPriming labels={url.labels} onRequestPriming={url.onRequest} requests={url.requests} />
+        </div>
+      ) : null}
+      {importOptions && (fileOpened || !url) ? (
+        <div className="max-h-[55dvh] space-y-3 overflow-y-auto pr-1" hidden={option !== "file"}>
+          <ReferencePriming
+            {...importOptions}
+            onAccepted={(draft) => {
+              setSaved(`Added ${draft.rows.length} reference${draft.rows.length === 1 ? "" : "s"}.`);
+              importOptions.onAccepted?.(draft);
+              onImported?.();
+            }}
+          />
+          {saved ? <p role="status">{saved}</p> : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/components/reference-curation-controls.tsx

@@ -3,21 +3,31 @@
 import {useCallback,useEffect,useRef,useState} from 'react';
 import {useNewsroomCuration} from './newsroom-curation-provider';
 import {PublicationCyclotronPanel} from './publication-cyclotron-panel';
-import {ReferencePriming} from './reference-priming';
+import type {PrimingPanelProps} from 'cyclotron/components/priming-panel';
 import {Button} from './ui/button';
 import {publicationSteeringPayload,type PublicationHistory,type PublicationStatus} from '../lib/publication-cyclotron';
 import type {CurationSession} from '../lib/curation-client';
 
-export function ReferenceCurationControls({disabled=false}:{disabled?:boolean}){
+/** `refreshSignal` changes when references were just added, so the panel reloads by itself. */
+export function ReferenceCurationControls({disabled=false,refreshSignal=0}:{disabled?:boolean;refreshSignal?:number}){
   const session=useNewsroomCuration();
-  return session&&!disabled?<Controls key={session.key} session={session} disabled={disabled}/>:null;
+  return session&&!disabled?<Controls key={session.key} session={session} disabled={disabled} refreshSignal={refreshSignal}/>:null;
 }
 
-function Controls({session,disabled}:{session:CurationSession;disabled:boolean}){
+/**
+ * The import option of the Add a reference area, or null. Fail-closed: it exists
+ * only when a curation session supplies priming and the person may review.
+ */
+export function useReferenceImport(disabled=false):{panel:PrimingPanelProps;sessionKey:string}|null{
+  const session=useNewsroomCuration();
+  if(!session||disabled||!session.bootstrap.priming||!session.bootstrap.capabilities.includes('review'))return null;
+  return {sessionKey:session.key,panel:{client:session.priming,listId:session.bootstrap.priming.listId,classifiers:session.bootstrap.priming.classifiers}};
+}
+
+function Controls({session,disabled,refreshSignal}:{session:CurationSession;disabled:boolean;refreshSignal:number}){
   const [snapshot,setSnapshot]=useState<{status:PublicationStatus;history:PublicationHistory}|null>(null);
   const [error,setError]=useState('');
   const [loading,setLoading]=useState(true);
-  const [primingMessage,setPrimingMessage]=useState('');
   const [steering,setSteering]=useState<string|null>(null);
   const [rubric,setRubric]=useState('');
   const [explanation,setExplanation]=useState('');
@@ -30,14 +40,16 @@ function Controls({session,disabled}:{session:CurationSession;disabled:boolean})
   const refresh=useCallback(async()=>{
     setLoading(true);setError('');
     try{setSnapshot(await session.snapshot());}
-    catch(failure){setSnapshot(null);setError(failure instanceof Error?failure.message:'Curation status unavailable');}
+    catch(failure){setSnapshot(null);setError(failure instanceof Error?failure.message:'Suggestions are unavailable right now.');}
     finally{setLoading(false);}
   },[session]);
   useEffect(()=>{
     let active=true;
-    void session.snapshot().then(value=>{if(active){setSnapshot(value);setError('');}}).catch(failure=>{if(active){setSnapshot(null);setError(failure instanceof Error?failure.message:'Curation status unavailable');}}).finally(()=>{if(active)setLoading(false);});
+    void session.snapshot().then(value=>{if(active){setSnapshot(value);setError('');}}).catch(failure=>{if(active){setSnapshot(null);setError(failure instanceof Error?failure.message:'Suggestions are unavailable right now.');}}).finally(()=>{if(active)setLoading(false);});
     return()=>{active=false;};
   },[session]);
+  const lastSignal=useRef(refreshSignal);
+  useEffect(()=>{if(lastSignal.current!==refreshSignal){lastSignal.current=refreshSignal;void refresh();}},[refreshSignal,refresh]);
   async function steer(action:'evaluate'|'promote'){
     if(!snapshot||!steering||!session.bootstrap.bindingRef)return;
     setBusy(true);setSteeringMessage('');
@@ -49,29 +61,26 @@ function Controls({session,disabled}:{session:CurationSession;disabled:boolean})
       const receipt=await session.publication.steer(payload);
       const result=(receipt.steering as {result?:{trial_fingerprint?:string;improved?:boolean;promoted?:boolean}}|undefined)?.result;
       if(action==='evaluate')setTrial(result?.trial_fingerprint?{fingerprint:result.trial_fingerprint,improved:result.improved===true}:null);
-      setSteeringMessage(action==='promote'?'Evaluated proposal promoted.':result?.improved?'Evaluation complete: the candidate improved the measured result.':'Evaluation complete: no improvement was reported.');
+      setSteeringMessage(action==='promote'?'The tested change is now in use.':result?.improved?'Test finished: the change improved the results.':'Test finished: no improvement was found.');
       await refresh();
-    }catch(failure){setSteeringMessage(failure instanceof Error?failure.message:'Proposal outcome unavailable; check before retrying');}
+    }catch(failure){setSteeringMessage(failure instanceof Error?failure.message:'The result is unknown; check before trying again.');}
     finally{setBusy(false);}
   }
-  return <section aria-label="Publication curation" className="max-h-[55dvh] min-h-0 shrink-0 space-y-3 overflow-y-auto rounded-md border p-3" data-curation-mode={session.bootstrap.mode}>
-    <div className="flex items-center justify-between gap-3"><h3 className="font-semibold">Publication curation</h3><Button variant="outline" size="sm" disabled={loading||busy} onClick={()=>void refresh()}>Refresh curation</Button></div>
-    <p className="text-xs text-muted-foreground">{session.bootstrap.mode==='remote'?'Remote workspace':'Embedded workspace'} · {session.bootstrap.scope.publicationId}</p>
-    {loading?<p role="status">Loading publication monitoring…</p>:null}
+  return <section aria-label="Suggestions for this publication" className="max-h-[55dvh] min-h-0 shrink-0 space-y-3 overflow-y-auto rounded-md border p-3" data-curation-mode={session.bootstrap.mode}>
+    <div className="flex items-center justify-between gap-3"><h3 className="font-semibold">Suggestions for this publication</h3><Button variant="outline" size="sm" disabled={loading||busy} onClick={()=>void refresh()}>Refresh</Button></div>
+    <p className="text-xs text-muted-foreground">{session.bootstrap.mode==='remote'?'Shared review service':'This site'} · {session.bootstrap.scope.publicationId}</p>
+    {loading?<p role="status">Loading suggestions…</p>:null}
     {error?<p role="alert">{error}</p>:null}
     {snapshot?<PublicationCyclotronPanel mode={session.bootstrap.mode} status={snapshot.status} history={snapshot.history}
       onReview={canReview?async payload=>{await session.publication.review(payload);await refresh();}:undefined}
-      onSteer={canSteer&&snapshot.status.features?.steering&&session.bootstrap.bindingRef?classifier=>{setSteering(classifier);setRubric('');setExplanation('');setTrial(null);setSteeringMessage('');}:undefined}/>:null}
-    {steering?<form aria-label="Classifier proposal" className="space-y-3 rounded-md border p-3" onSubmit={event=>{event.preventDefault();void steer('evaluate');}}>
-      <h4 className="font-semibold">Evaluate classifier proposal</h4>
-      <p className="text-sm">A proposal is evaluated before an explicit promotion. Existing classifications are not relabeled by opening this form.</p>
-      <label className="block text-sm">Proposed instructions<textarea className="mt-1 block min-h-24 w-full rounded border bg-background p-2" required value={rubric} onChange={event=>{setRubric(event.target.value);setTrial(null);}}/></label>
+      onSteer={canSteer&&session.bootstrap.bindingRef?classifier=>{setSteering(classifier);setRubric('');setExplanation('');setTrial(null);setSteeringMessage('');}:undefined}/>:null}
+    {steering?<form aria-label="Rule change" className="space-y-3 rounded-md border p-3" onSubmit={event=>{event.preventDefault();void steer('evaluate');}}>
+      <h4 className="font-semibold">Test a rule change</h4>
+      <p className="text-sm">A change is tested before it is adopted. Opening this form does not change any existing suggestion.</p>
+      <label className="block text-sm">Proposed rule<textarea className="mt-1 block min-h-24 w-full rounded border bg-background p-2" required value={rubric} onChange={event=>{setRubric(event.target.value);setTrial(null);}}/></label>
       <label className="block text-sm">Why make this change?<textarea className="mt-1 block min-h-20 w-full rounded border bg-background p-2" required value={explanation} onChange={event=>setExplanation(event.target.value)}/></label>
-      <div className="flex flex-wrap gap-2"><Button type="submit" disabled={busy||!canSteer||!rubric.trim()||!explanation.trim()}>Evaluate proposal</Button><Button type="button" variant="outline" disabled={busy||!canSteer||!trial?.improved||!explanation.trim()} onClick={()=>void steer('promote')}>Promote evaluated proposal</Button><Button type="button" variant="ghost" disabled={busy} onClick={()=>setSteering(null)}>Close proposal</Button></div>
+      <div className="flex flex-wrap gap-2"><Button type="submit" disabled={busy||!canSteer||!rubric.trim()||!explanation.trim()}>Test change</Button><Button type="button" variant="outline" disabled={busy||!canSteer||!trial?.improved||!explanation.trim()} onClick={()=>void steer('promote')}>Adopt tested change</Button><Button type="button" variant="ghost" disabled={busy} onClick={()=>setSteering(null)}>Close</Button></div>
       {steeringMessage?<p role="status">{steeringMessage}</p>:null}
     </form>:null}
-    {session.bootstrap.priming&&canReview?<ReferencePriming client={session.priming} listId={session.bootstrap.priming.listId} classifiers={session.bootstrap.priming.classifiers}
-      onAccepted={draft=>{setPrimingMessage(`Accepted ${draft.rows.length} example item${draft.rows.length===1?'':'s'} for this pinned publication. Operation remains available without priming.`);void refresh();}}/>:null}
-    {primingMessage?<p role="status">{primingMessage}</p>:null}
   </section>;
 }