@anthusai/papyrus 5.43.0-next.2 → 5.43.0-next.21

package/components/reference-review-card.tsx

@@ -12,6 +12,8 @@ import {
 import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
 import { Button } from "./ui/button";
 import { cn } from "../lib/utils";
+import { RatingGrid } from "./review-rating-grid";
+import { useRatingStore, type RatingController } from "./use-reference-ratings";
 import { REFERENCE_REJECTION_REASON_CODES, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 
 export type ReviewChoice = "accept" | "reject";
@@ -44,6 +46,84 @@ function percent(confidence: number | null): string | null {
   return confidence === null ? null : `${Math.round(confidence * 100)}%`;
 }
 
+/**
+ * The Cyclotron's read-only row: its Accept or Reject highlighted with its confidence, and a check or cross once a person has answered.
+ * Shared by the review card and by every list that shows a suggestion before a decision.
+ */
+export function CyclotronRow({ decided = null, prediction }: { decided?: ReviewChoice | null; prediction: CardPrediction }) {
+  const matched = decided && prediction.state === "ready" ? prediction.choice === decided : null;
+  return (
+    <div className="space-y-2" data-review-row="cyclotron">
+      <div className="flex items-center gap-3">
+        <span className="w-20 shrink-0 text-sm font-semibold">Cyclotron</span>
+        {prediction.state === "ready" ? (
+          <div className="flex flex-1 gap-2">
+            {(["accept", "reject"] as const).map((choice) => {
+              const predicted = prediction.state === "ready" && prediction.choice === choice;
+              const verdict = predicted && matched !== null ? (matched ? "match" : "miss") : null;
+              return (
+                <span
+                  className={cn(
+                    "inline-flex min-h-10 flex-1 items-center justify-center gap-1.5 rounded-md border px-3 text-sm",
+                    predicted ? "border-foreground bg-muted font-semibold" : "border-dashed text-muted-foreground",
+                    verdict === "match" && "border-green-700 bg-green-100 text-green-950",
+                    verdict === "miss" && "border-red-700 bg-red-100 text-red-950",
+                  )}
+                  data-cyclotron-choice={choice}
+                  data-predicted={predicted || undefined}
+                  data-verdict={verdict ?? undefined}
+                  key={choice}
+                >
+                  {verdict === "match" ? <CircleCheckIcon aria-hidden="true" className="size-4" /> : null}
+                  {verdict === "miss" ? <CircleXIcon aria-hidden="true" className="size-4" /> : null}
+                  {CHOICE_LABEL[choice]}
+                  {predicted && percent(prediction.confidence) ? <small className="text-xs font-normal">{percent(prediction.confidence)}</small> : null}
+                  {verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
+                </span>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground" data-cyclotron-state={prediction.state}>
+            {prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The two answers, large enough to tap: Accept and Reject, the chosen one filled and checked (never colour alone). */
+export function ChoiceButtons({ chosen, disabled = false, onChoose }: { chosen: ReviewChoice | null; disabled?: boolean; onChoose: (choice: ReviewChoice) => void }) {
+  return (
+    <div className="flex flex-1 gap-2">
+      {(["accept", "reject"] as const).map((choice) => {
+        const on = chosen === choice;
+        return (
+          <Button
+            aria-disabled={disabled ? true : undefined}
+            aria-pressed={on}
+            className="min-h-14 flex-1 text-base"
+            data-review-choice={choice}
+            key={choice}
+            onClick={() => onChoose(choice)}
+            type="button"
+            variant={on ? (choice === "accept" ? "default" : "destructive") : "outline"}
+          >
+            {on ? <CheckIcon aria-hidden="true" className="size-5" /> : null}
+            {CHOICE_LABEL[choice]}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** A reference's relevance decision in the card's own vocabulary. */
+export function predictionFromDecision(decision: { label: string; positiveLabel: string | null; confidence: number | null }): CardPrediction {
+  return { state: "ready", choice: decision.label === (decision.positiveLabel ?? "include") ? "accept" : "reject", confidence: decision.confidence };
+}
+
 /**
  * One reusable card for answering a single question: Accept or Reject. The Cyclotron's row is
  * read-only; the human row is the real control and its answer is final. Saves on tap.
@@ -62,8 +142,11 @@ export function ReviewCard({
   summary,
   title,
   titleHref,
+  ratings,
 }: {
   children?: ReactNode;
+  /** A shared rating store, so the grid card and this card stay in step. Optional: the card works alone without it. */
+  ratings?: RatingController;
   /** The saved human answer, or null while the item is undecided. */
   decided: ReviewChoice | null;
   /** When set, the controls explain in words why they cannot change anything. */
@@ -78,70 +161,21 @@ export function ReviewCard({
   title: string;
   titleHref?: string | null;
 }) {
-  const [draft, setDraft] = useState<ReviewChoice | null>(null);
-  const [note, setNote] = useState(initialNote);
-  const [reason, setReason] = useState<ReferenceRejectionReasonCode | null>(initialReason);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const inFlight = useRef(false);
-  const noteTouched = useRef(false);
-  const reasonTouched = useRef(false);
-  const savedNote = useRef(initialNote);
-
-  // Saved values from outside (another editor, a reload) refresh whatever the human has not touched.
-  useEffect(() => {
-    savedNote.current = initialNote;
-    if (!noteTouched.current) setNote(initialNote);
-  }, [initialNote]);
-  useEffect(() => {
-    if (!reasonTouched.current) setReason(initialReason);
-  }, [initialReason]);
-
-  const chosen = draft ?? decided;
-
-  async function save(choice: ReviewChoice, nextReason: ReferenceRejectionReasonCode | null, nextNote: string) {
-    if (disabledReason || inFlight.current) return;
-    if (choice === "reject" && !nextReason) return;
-    inFlight.current = true;
-    setSaving(true);
-    setSaved(false);
-    setError(null);
-    try {
-      await onDecide(choice, { note: nextNote.trim(), reasonCode: choice === "reject" ? nextReason : null });
-      savedNote.current = nextNote.trim();
-      noteTouched.current = false;
-      reasonTouched.current = false;
-      setDraft(null);
-      setSaved(true);
-    } catch (failure) {
-      setDraft(null);
-      setError(failure instanceof Error ? failure.message : "Your answer could not be saved. Tap it again to retry.");
-    } finally {
-      inFlight.current = false;
-      setSaving(false);
-    }
-  }
-
-  function choose(choice: ReviewChoice) {
-    if (disabledReason) return;
-    if (chosen === choice && draft === null) return; // the selected answer never unselects itself
-    setError(null);
-    setDraft(choice);
-    void save(choice, reason, note);
-  }
-
-  function chooseReason(code: ReferenceRejectionReasonCode) {
-    if (disabledReason) return;
-    setReason(code);
-    reasonTouched.current = true;
-    if (chosen === "reject") void save("reject", code, note);
-  }
-
-  function commitNote() {
-    if (!decided || disabledReason || note.trim() === savedNote.current.trim()) return;
-    void save(decided, reason, note);
-  }
+  // The rating state lives in a store. Given one (`ratings`), the grid card and this card share it, so a vote or a reason typed in
+  // either shows in both at once; without one the card keeps a private store, exactly as before.
+  const local = useRatingStore({
+    save: (_id, choice, detail) => onDecide(choice, detail),
+    saved: () => decided,
+    seed: () => ({ note: initialNote, reasonCode: initialReason }),
+  });
+  const store = ratings ?? local;
+  const item = store.get(itemId);
+  const note = item.note ?? initialNote;
+  const reason = item.reasonCode !== undefined ? item.reasonCode : initialReason;
+  const chosen = item.pending ?? decided;
+  const choose = (choice: ReviewChoice) => { if (!disabledReason) store.choose(itemId, choice); };
+  const chooseReason = (code: ReferenceRejectionReasonCode) => { if (!disabledReason) store.setReason(itemId, code); };
+  const commitNote = () => { if (!disabledReason) store.commitNote(itemId); };
 
   // Desktop shortcuts: A accepts, R rejects. Never while typing.
   useEffect(() => {
@@ -156,12 +190,6 @@ export function ReviewCard({
     return () => window.removeEventListener("keydown", onKey);
   });
 
-  const predictedMarker = (choice: ReviewChoice) => {
-    if (prediction.state !== "ready" || prediction.choice !== choice) return null;
-    return prediction.choice;
-  };
-  const matched = decided && prediction.state === "ready" ? prediction.choice === decided : null;
-
   return (
     <section aria-label="Review" className="space-y-4" data-review-card={itemId}>
       <header className="space-y-1">
@@ -175,76 +203,17 @@ export function ReviewCard({
         {summary ? <p className="text-sm text-muted-foreground">{summary}</p> : null}
       </header>
 
-      <div className="space-y-2" data-review-row="cyclotron">
-        <div className="flex items-center gap-3">
-          <span className="w-20 shrink-0 text-sm font-semibold">Cyclotron</span>
-          {prediction.state === "ready" ? (
-            <div className="flex flex-1 gap-2">
-              {(["accept", "reject"] as const).map((choice) => {
-                const predicted = predictedMarker(choice) !== null;
-                const verdict = predicted && matched !== null ? (matched ? "match" : "miss") : null;
-                return (
-                  <span
-                    className={cn(
-                      "inline-flex min-h-10 flex-1 items-center justify-center gap-1.5 rounded-md border px-3 text-sm",
-                      predicted ? "border-foreground bg-muted font-semibold" : "border-dashed text-muted-foreground",
-                      verdict === "match" && "border-green-700 bg-green-100 text-green-950",
-                      verdict === "miss" && "border-red-700 bg-red-100 text-red-950",
-                    )}
-                    data-cyclotron-choice={choice}
-                    data-predicted={predicted || undefined}
-                    data-verdict={verdict ?? undefined}
-                    key={choice}
-                  >
-                    {verdict === "match" ? <CircleCheckIcon aria-hidden="true" className="size-4" /> : null}
-                    {verdict === "miss" ? <CircleXIcon aria-hidden="true" className="size-4" /> : null}
-                    {CHOICE_LABEL[choice]}
-                    {predicted && percent(prediction.confidence) ? <small className="text-xs font-normal">{percent(prediction.confidence)}</small> : null}
-                    {verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
-                  </span>
-                );
-              })}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground" data-cyclotron-state={prediction.state}>
-              {prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
-            </p>
-          )}
-        </div>
-      </div>
-
-      <div className="space-y-2" data-review-row="you">
-        <div className="flex items-center gap-3">
-          <span className="w-20 shrink-0 text-sm font-semibold">You</span>
-          <div className="flex flex-1 gap-2">
-            {(["accept", "reject"] as const).map((choice) => {
-              const on = chosen === choice;
-              return (
-                <Button
-                  aria-disabled={disabledReason ? true : undefined}
-                  aria-pressed={on}
-                  className="min-h-14 flex-1 text-base"
-                  data-review-choice={choice}
-                  key={choice}
-                  onClick={() => choose(choice)}
-                  type="button"
-                  variant={on ? (choice === "accept" ? "default" : "destructive") : "outline"}
-                >
-                  {on ? <CheckIcon aria-hidden="true" className="size-5" /> : null}
-                  {CHOICE_LABEL[choice]}
-                </Button>
-              );
-            })}
-          </div>
-        </div>
-        <div className="min-h-5 pl-[5.75rem] text-sm" role="status">
-          {saving ? "Saving…" : saved ? (
-            <span className="inline-flex items-center gap-1" data-review-saved><CheckIcon aria-hidden="true" className="size-4" />Saved</span>
-          ) : null}
-        </div>
-        {disabledReason ? <p className="text-sm text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
-        {error ? <p className="text-sm text-destructive" role="alert">{error}</p> : null}
-      </div>
+      <RatingGrid
+        answer={chosen}
+        decided={decided}
+        disabled={Boolean(disabledReason)}
+        disabledReason={disabledReason}
+        feedback={item.feedback}
+        onChoose={choose}
+        prediction={prediction}
+        size="large"
+        surface="card"
+      />
 
       <label className="block text-sm font-medium">
         Why? (optional)
@@ -252,7 +221,7 @@ export function ReviewCard({
           aria-label="Why? (optional)"
           className="mt-1 block min-h-24 w-full rounded-md border bg-background p-3 text-base font-normal"
           onBlur={commitNote}
-          onChange={(event) => { setNote(event.target.value); noteTouched.current = true; setSaved(false); }}
+          onChange={(event) => store.setNote(itemId, event.target.value)}
           placeholder="Say what made this an easy yes or a clear no. Your note teaches the Cyclotron."
           value={note}
         />

package/components/references-page-loading.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { LoaderIcon } from "lucide-react";
+import { SITE_BRAND } from "../lib/site-brand";
+import { loadFeedSnapshot, type FeedSnapshot } from "../lib/reference-feed-cache";
+import { partitionReferenceFeed, type ReferenceFeedTabKey } from "../lib/reference-feed-ranking";
+import { selectCanonicalReferenceRecords } from "../lib/newsroom-references";
+import { ReferenceFeed, ReferenceFeedSkeleton } from "./reference-feed";
+
+/**
+ * What the References page shows while the session and the first reads are still resolving: the real page header at once,
+ * then this browser's last saved view (read only, answering switches on when the session is confirmed), or card skeletons
+ * when there is none. Never a full-screen "checking" screen.
+ */
+export function ReferencesPageLoading() {
+  const [snapshot, setSnapshot] = useState<FeedSnapshot | null>(null);
+  const [checked, setChecked] = useState(false);
+  const [tab, setTab] = useState<ReferenceFeedTabKey>("feed");
+  const [note, setNote] = useState<string | null>(null);
+  const [now] = useState(() => Date.now());
+  useEffect(() => {
+    setSnapshot(loadFeedSnapshot(SITE_BRAND.id));
+    setChecked(true);
+  }, []);
+  const references = useMemo(() => selectCanonicalReferenceRecords(snapshot?.references ?? []), [snapshot]);
+  const decisions = useMemo(() => new Map(snapshot?.decisions ?? []), [snapshot]);
+  const previews = useMemo(() => new Map(snapshot?.previews ?? []), [snapshot]);
+  const partition = useMemo(() => partitionReferenceFeed(references, decisions, { now }), [references, decisions, now]);
+  const noVisitRated = useMemo(() => new Set<string>(), []);
+
+  return (
+    <div className="space-y-4" data-references-page-loading>
+      <div className="space-y-1">
+        <h2 className="text-2xl font-bold tracking-tight">References</h2>
+        <p className="text-sm text-muted-foreground">A feed ranked by what you are most likely to accept.</p>
+      </div>
+      {note ? <p className="text-sm text-muted-foreground" role="status">{note}</p> : null}
+      {checked && references.length ? (
+        <ReferenceFeed
+          disabledReason="Confirming your sign-in. You can answer in a moment."
+          now={now}
+          onOpen={() => setNote("Opening a reference is available in a moment, once your sign-in is confirmed.")}
+          onRate={() => undefined}
+          onTabChange={setTab}
+          onVisitRated={() => undefined}
+          partition={partition}
+          previews={previews}
+          stale
+          tab={tab}
+          visitRated={noVisitRated}
+        />
+      ) : (
+        <>
+          <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground" role="status"><LoaderIcon aria-hidden="true" className="size-3.5 animate-spin" />Loading your references</p>
+          <ReferenceFeedSkeleton />
+        </>
+      )}
+    </div>
+  );
+}

package/components/references-prefetch.ts

@@ -0,0 +1,52 @@
+/**
+ * Starts the References reads as soon as the editor session is confirmed, in parallel with the summary dashboard, instead of after it.
+ * The page that needs them takes the in-flight request once; anything later, or a retry, makes a fresh read. This is a head start
+ * on the same reads, not a cache: the backend authorizes each call exactly as before.
+ */
+import {
+  loadEditorMessagesData,
+  loadEditorReferencesData,
+  loadEditorSemanticRelationsData,
+} from "./news-desk-taxonomy-client";
+
+const HEAD_START_MS = 60_000;
+type Started = { startedAt: number; promise: Promise<unknown> };
+const started = new Map<string, Started>();
+
+const LOADERS = {
+  references: loadEditorReferencesData,
+  relations: loadEditorSemanticRelationsData,
+  messages: loadEditorMessagesData,
+} as const;
+type Key = keyof typeof LOADERS;
+
+/** Begin all three reads. Safe to call twice; a failure is reported to whoever takes the read, never as an unhandled rejection. */
+export function prefetchReferencesFeed(now = Date.now()) {
+  for (const key of Object.keys(LOADERS) as Key[]) {
+    if (started.has(key)) continue;
+    const promise = LOADERS[key]();
+    promise.catch(() => undefined);
+    started.set(key, { startedAt: now, promise });
+  }
+}
+
+function take<Key2 extends Key>(key: Key2, now = Date.now()): ReturnType<(typeof LOADERS)[Key2]> {
+  const head = started.get(key);
+  started.delete(key);
+  if (head && now - head.startedAt <= HEAD_START_MS) return head.promise as ReturnType<(typeof LOADERS)[Key2]>;
+  return LOADERS[key]() as ReturnType<(typeof LOADERS)[Key2]>;
+}
+
+export const loadReferencesWithHeadStart = () => take("references");
+export const loadRelationsWithHeadStart = () => take("relations");
+export const loadMessagesWithHeadStart = () => take("messages");
+
+/** Forget any unclaimed head start (sign-out). */
+export function discardReferencesHeadStart() {
+  started.clear();
+}
+
+/** The pages that need the References straight away: the feed itself and the home page, whose Notification Center shows References cards. */
+export function wantsReferencesHeadStart(pathname: string): boolean {
+  return /\/newsroom\/references(\/|$)/.test(pathname) || /\/newsroom\/?$/.test(pathname);
+}

package/components/review-rating-grid.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { CheckIcon, CircleCheckIcon, CircleXIcon, Loader2Icon, XIcon } from "lucide-react";
+import { UNRECORDED_CONFIDENCE } from "../lib/reference-feed-ranking";
+import { cn } from "../lib/utils";
+import type { CardPrediction, ReviewChoice } from "./reference-review-card";
+
+/**
+ * The rating area of a card: one grid, three columns (label | Accept | Reject), and the two rows share its columns exactly.
+ *   Cyclotron   [ Accept 96% ]  [ Reject ]      read only; the predicted side is highlighted with its confidence
+ *               [====== confidence bar, centred at 50% ======]
+ *   You         [ Accept ]      [ Reject ]      the real buttons, each directly under its matching cell
+ * Feedback is never colour alone: before you answer the predicted cell is neutral-accent with a check or cross; after, it turns
+ * green with a CircleCheck (Match) or red with a CircleX (Miss), and the confidence bar tints the same way. Your chosen button is
+ * filled. Flat tones and rounded shapes only, no borders.
+ */
+
+export type RatingFeedback = { phase: "idle" | "saving" | "saved" | "error"; message?: string };
+
+/** P(accept) from a prediction: its confidence is in the side it chose; an unrecorded confidence is a mild lean. */
+export function predictionAcceptProbability(prediction: Extract<CardPrediction, { state: "ready" }>): number {
+  const confidence = prediction.confidence ?? UNRECORDED_CONFIDENCE;
+  return prediction.choice === "accept" ? confidence : 1 - confidence;
+}
+
+/** How far, in percent of the whole bar, the fill reaches from the centre: |P(accept) - 0.5| * 2, over the two halves. */
+export function confidenceFillPercent(probability: number): number {
+  return Math.min(100, Math.abs(probability - 0.5) * 2 * 100);
+}
+
+const WORD: Record<ReviewChoice, string> = { accept: "Accept", reject: "Reject" };
+
+const TONE = {
+  match: "bg-emerald-600/20 text-emerald-900 dark:bg-emerald-400/20 dark:text-emerald-100",
+  miss: "bg-red-600/20 text-red-900 dark:bg-red-400/20 dark:text-red-100",
+} as const;
+const FILL = { match: "bg-emerald-600 dark:bg-emerald-400", miss: "bg-red-600 dark:bg-red-400", neutral: "bg-[var(--primary)]" } as const;
+
+export function RatingGrid({
+  answer,
+  decided = answer,
+  disabled = false,
+  disabledReason = null,
+  feedback = { phase: "idle" },
+  note = null,
+  onChoose,
+  prediction,
+  showPrediction = true,
+  size = "compact",
+  statusOverlay = false,
+  surface = "footer",
+}: {
+  /** The side the buttons show as chosen (it may be a pending choice that is still saving). */
+  answer: ReviewChoice | null;
+  /** The saved human answer, which the Match / Miss verdict compares against. */
+  decided?: ReviewChoice | null;
+  disabled?: boolean;
+  disabledReason?: string | null;
+  feedback?: RatingFeedback;
+  /** A short line shown in the status row beside the Saved tick (for example the reason). It never adds a row. */
+  note?: string | null;
+  onChoose: (choice: ReviewChoice) => void;
+  prediction: CardPrediction;
+  /** False for a card with nothing to predict (an AI draft): the Cyclotron row and the "You" label are left out and only the two buttons remain. */
+  showPrediction?: boolean;
+  size?: "compact" | "large";
+  /** Lay the Saved / note line over the bottom padding of the nearest positioned ancestor, so it adds no height under the buttons. */
+  statusOverlay?: boolean;
+  /** The tone the grid sits on, so the bar's centre notch matches it. */
+  surface?: "footer" | "card";
+}) {
+  const ready = prediction.state === "ready" ? prediction : null;
+  const verdict = ready && decided ? (ready.choice === decided ? "match" : "miss") : null;
+  const probability = ready ? predictionAcceptProbability(ready) : 0.5;
+  const half = confidenceFillPercent(probability) / 2; // percent of the full bar width, on one side of the centre
+  const leansAccept = probability >= 0.5;
+  const confidenceText = ready && ready.confidence !== null ? `${Math.round(ready.confidence * 100)}%` : null;
+  const cell = size === "large" ? "min-h-14 text-base" : "min-h-12 text-sm";
+  const label = size === "large" ? "text-sm" : "text-xs";
+
+  return (
+    <div
+      className={cn(
+        "grid gap-x-2 gap-y-2",
+        showPrediction ? "grid-cols-[4.5rem_minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-2",
+        showPrediction && size === "large" && "grid-cols-[5rem_minmax(0,1fr)_minmax(0,1fr)]",
+      )}
+      data-rating-grid
+    >
+      {showPrediction ? <div className="col-span-3 grid grid-cols-subgrid items-stretch gap-y-2" data-review-row="cyclotron">
+        <span className={cn("self-center font-semibold", label)}>Cyclotron</span>
+        {(["accept", "reject"] as const).map((choice) => {
+          const predicted = ready?.choice === choice;
+          const Icon = predicted ? (verdict === "match" ? CircleCheckIcon : verdict === "miss" ? CircleXIcon : choice === "accept" ? CheckIcon : XIcon) : null;
+          return (
+            <span
+              className={cn(
+                "flex flex-col items-center justify-center rounded-[16px] px-2 py-1.5 text-center",
+                cell,
+                !predicted && "bg-[var(--feed-control)]/45 text-muted-foreground",
+                predicted && !verdict && "bg-[var(--feed-control)] font-semibold text-[var(--primary)]",
+                predicted && verdict && cn("font-semibold", TONE[verdict]),
+              )}
+              data-cyclotron-choice={choice}
+              data-predicted={predicted || undefined}
+              data-verdict={predicted && verdict ? verdict : undefined}
+              key={choice}
+            >
+              <span className="inline-flex items-center gap-1.5">
+                {Icon ? <Icon aria-hidden="true" className="size-4 shrink-0" /> : null}
+                {WORD[choice]}
+                {predicted && confidenceText ? <small className="text-xs font-normal opacity-80">{confidenceText}</small> : null}
+              </span>
+              {predicted && verdict ? <small className="text-xs font-medium" data-verdict-word>{verdict === "match" ? "Match" : "Miss"}</small> : null}
+              {predicted && verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
+            </span>
+          );
+        })}
+        <div className="col-span-2 col-start-2 flex flex-col justify-center" data-confidence>
+          <div
+            aria-label={ready ? `Cyclotron confidence: leans ${leansAccept ? "Accept" : "Reject"}, ${Math.round(confidenceFillPercent(probability))} percent of the way` : "No confidence"}
+            className="relative h-2.5 w-full overflow-hidden rounded-full bg-[var(--feed-control)]"
+            data-confidence-bar
+            data-confidence-direction={ready ? (leansAccept ? "accept" : "reject") : "none"}
+            role="img"
+          >
+            {ready ? (
+              <span
+                className={cn("absolute inset-y-0 rounded-full", FILL[verdict ?? "neutral"])}
+                data-confidence-fill
+                data-fill-percent={Math.round(half * 2)}
+                style={{ left: leansAccept ? `${50 - half}%` : "50%", width: `${half}%` }}
+              />
+            ) : null}
+            <span aria-hidden="true" className={cn("absolute inset-y-0 left-1/2 w-1 -translate-x-1/2", surface === "footer" ? "bg-[var(--feed-footer)]" : "bg-[var(--feed-card)]")} />
+          </div>
+          {/* Screen-reader status only: a visible line under the bar would push it off the middle between the Cyclotron and You rows. */}
+          <small className="sr-only" data-cyclotron-state={prediction.state === "ready" ? undefined : prediction.state}>
+            {prediction.state === "ready" ? "" : prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
+          </small>
+        </div>
+      </div> : null}
+
+      <div className={cn("grid grid-cols-subgrid items-stretch", showPrediction ? "col-span-3" : "col-span-2")} data-review-row="you">
+        {showPrediction ? <span className={cn("self-center font-semibold", label)}>You</span> : null}
+        {(["accept", "reject"] as const).map((choice) => {
+          const on = answer === choice;
+          const Icon = choice === "accept" ? CheckIcon : XIcon;
+          return (
+            <button
+              aria-disabled={disabled ? true : undefined}
+              aria-pressed={on}
+              className={cn(
+                "inline-flex items-center justify-center gap-1.5 rounded-[16px] px-2 font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                cell,
+                on ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)] text-foreground hover:bg-[var(--feed-control)]/70",
+                disabled && !on && "opacity-60",
+              )}
+              data-review-choice={choice}
+              key={choice}
+              onClick={() => onChoose(choice)}
+              type="button"
+            >
+              <Icon aria-hidden="true" className={cn("size-4", !on && "opacity-60")} />
+              {WORD[choice]}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className={cn("flex flex-wrap items-center gap-x-3 text-xs text-muted-foreground", statusOverlay ? "absolute inset-x-4 bottom-0 h-4 overflow-hidden leading-4" : cn("min-h-5", showPrediction ? "col-span-3" : "col-span-2"))} data-feed-saved role="status">
+        {note ? <span data-feed-reason>{note}</span> : null}
+        {feedback.phase === "saving" ? <span className="inline-flex items-center gap-1"><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Saving…</span> : null}
+        {feedback.phase === "saved" ? <span className="inline-flex items-center gap-1" data-review-saved><CheckIcon aria-hidden="true" className="size-3.5" />Saved</span> : null}
+      </div>
+      {disabledReason ? <p className={cn("text-xs text-muted-foreground", showPrediction ? "col-span-3" : "col-span-2")} data-review-disabled-reason>{disabledReason}</p> : null}
+      {feedback.phase === "error" ? <p className={cn("text-xs text-destructive", showPrediction ? "col-span-3" : "col-span-2")} role="alert">{feedback.message}</p> : null}
+    </div>
+  );
+}