@anthusai/papyrus 5.43.0-next.38 → 5.43.0-next.39

package/components/decision-control.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import { CheckIcon, 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";
+
+/**
+ * One classification, in two stages: a model predicts it, a person decides it.
+ *
+ *   PREDICTED ACCEPT
+ *   [=========== 96% ==========|                ]   the prediction's own confidence, in its own bar
+ *   [ ✓ Accept  PREDICTED ]  [ ✕ Reject ]            one pair of segments; the predicted one is pre-filled, in its own tone
+ *   REASON · OPTIONAL
+ *   [ Why? In your own words… ]                      written, always in view, full width
+ *   ✓ Recorded · confirms the prediction             one status line for the whole block
+ *
+ * The prediction and the answer share one row of segments rather than a row each: they are not two
+ * voters, they are one decision before and after a person touched it. Once decided, a small marker
+ * stays on the segment the model picked — on the losing one if it was overturned — so the comparison
+ * survives the answer without a second row. The bar belongs to the model, so it never moves when the
+ * person answers; only its tone changes.
+ *
+ * The verdict never tints the person's own choice: a decided segment is always `--primary`, and
+ * `--feed-verdict-*` colours the marker and the bar. An overturned Reject painted red reads as "your
+ * answer is wrong" rather than "the model's was".
+ *
+ * No engine or product name appears in the copy: the component knows about predictions, not about
+ * what made them (AGENTS.md: a deployment publishes about any subject with any classifier behind it).
+ *
+ * Every tone, corner and opacity is a feed token from newsroom-organizer.css; the values after the
+ * comma are the last resort for a surface that declares none.
+ */
+
+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) * 100 * 2);
+}
+
+const WORD: Record<ReviewChoice, string> = { accept: "Accept", reject: "Reject" };
+const LABEL = "font-[family-name:var(--font-sans)] text-[10px] font-extrabold tracking-[0.07em] uppercase";
+/** A fill shorter than this cannot hold its own percentage, so the number sits beside it. */
+const NARROW_FILL = 14;
+
+export function DecisionControl({
+  answer,
+  decided = null,
+  disabled = false,
+  disabledReason = null,
+  feedback = { phase: "idle" },
+  needsReason = false,
+  note = null,
+  onChoose,
+  onReasonChange,
+  onReasonCommit,
+  prediction,
+  reason = "",
+  reasonRequiredFor = null,
+  showPrediction = true,
+  showReason = true,
+  size = "compact",
+  statusOverlay = false,
+  surface = "footer",
+}: {
+  /** The side shown as chosen. It may be an answer that is still saving. */
+  answer: ReviewChoice | null;
+  /** The saved answer, which the Confirmed / Overturned verdict compares against. */
+  decided?: ReviewChoice | null;
+  disabled?: boolean;
+  disabledReason?: string | null;
+  feedback?: RatingFeedback;
+  /** The answer is staged and waiting for a written reason before it can be recorded. */
+  needsReason?: boolean;
+  /** A short line shown in the status row beside the saved tick. It never adds a row. */
+  note?: string | null;
+  onChoose: (choice: ReviewChoice) => void;
+  onReasonChange?: (text: string) => void;
+  /** Save the reason on its own (on blur, or from the status row). */
+  onReasonCommit?: () => void;
+  prediction: CardPrediction;
+  /** The written reason, owned by the caller. */
+  reason?: string;
+  /** The side that cannot be recorded without a written reason. */
+  reasonRequiredFor?: ReviewChoice | null;
+  /** False for an item with nothing to predict: the bar and the caption are left out. */
+  showPrediction?: boolean;
+  /** False where the surrounding card owns the reason field. */
+  showReason?: boolean;
+  size?: "compact" | "large";
+  /** Lay the status line over the bottom padding of the nearest positioned ancestor, so it adds no height. */
+  statusOverlay?: boolean;
+  /** The tone the control sits on, so the bar's centre notch matches it. */
+  surface?: "footer" | "card";
+}) {
+  const fieldId = useId();
+  const ready = prediction.state === "ready" ? prediction : null;
+  const verdict = ready && decided ? (ready.choice === decided ? "match" : "miss") : null;
+  const saving = feedback.phase === "saving";
+  const [reasonDirty, setReasonDirty] = useState(false);
+  useEffect(() => { if (feedback.phase === "saved") setReasonDirty(false); }, [feedback.phase]);
+
+  const probability = ready ? predictionAcceptProbability(ready) : 0.5;
+  const half = confidenceFillPercent(probability) / 2; // percent of the full bar, one side of the centre
+  const leansAccept = probability >= 0.5;
+  const confidenceText = ready ? (ready.confidence !== null ? `${Math.round(ready.confidence * 100)}%` : "unrecorded") : null;
+  const narrow = half < NARROW_FILL;
+  const cell = size === "large" ? "min-h-14 text-base" : "min-h-12 text-sm";
+  const field = size === "large" ? "min-h-16" : "min-h-9";
+
+  const caption = ready
+    ? `Predicted ${WORD[ready.choice]}`
+    : prediction.state === "loading" ? "Reading the prediction…"
+      : prediction.state === "error" ? "Prediction unavailable" : "No prediction";
+
+  /* What the chosen segment says about itself while the answer is in flight or held back. A segment
+     never claims to be unrecorded while it is being recorded. */
+  const stagedWord = saving ? (decided ? "Updating…" : "Sending…") : needsReason ? "Needs a reason" : null;
+
+  return (
+    <div className="@container/decision grid gap-y-2" data-decision-control data-rating-grid>
+      {showPrediction ? (
+        <div className="grid gap-y-0.5" data-prediction>
+          <span className={cn(LABEL, "text-muted-foreground")} data-prediction-caption>{caption}</span>
+          <div
+            aria-label={ready ? `Prediction: ${WORD[ready.choice]}, ${confidenceText} confident` : caption}
+            className="relative h-4 w-full overflow-hidden rounded-full bg-[var(--feed-control)]"
+            data-confidence-bar
+            data-confidence-direction={ready ? (leansAccept ? "accept" : "reject") : "none"}
+            data-prediction-state={ready ? undefined : prediction.state}
+            role="img"
+          >
+            {ready ? (
+              <span
+                className={cn(
+                  "absolute inset-y-0 flex items-center rounded-full",
+                  leansAccept ? "justify-end" : "justify-start",
+                  verdict === "match" ? "bg-[var(--feed-verdict-match-fill,#059669)]"
+                    : verdict === "miss" ? "bg-[var(--feed-verdict-miss-fill,#dc2626)]"
+                      : "bg-[var(--foreground-muted)]",
+                )}
+                data-confidence-fill
+                data-fill-percent={Math.round(half * 2)}
+                style={{ left: leansAccept ? `${50 - half}%` : "50%", width: `${half}%` }}
+              >
+                {/* The confidence is printed in the bar and nowhere else, so no button has to carry a number. */}
+                {narrow ? null : <small className={cn(LABEL, "px-1.5 text-[var(--feed-card)] whitespace-nowrap")} data-confidence-value>{confidenceText}</small>}
+              </span>
+            ) : null}
+            {ready && narrow ? (
+              <small
+                className={cn(LABEL, "absolute top-0.5 text-muted-foreground whitespace-nowrap")}
+                data-confidence-value
+                style={leansAccept ? { left: `${50 - half}%`, transform: "translateX(-100%)" } : { left: `${50 + half}%` }}
+              >
+                {confidenceText}
+              </small>
+            ) : 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>
+        </div>
+      ) : null}
+
+      <div aria-label="Classification" className="grid grid-cols-2 gap-x-1.5" data-review-row="you" role="group">
+        {(["accept", "reject"] as const).map((choice) => {
+          const on = answer === choice;
+          const predicted = ready?.choice === choice;
+          const proposed = predicted && !answer;
+          const Icon = choice === "accept" ? CheckIcon : XIcon;
+          const sub = proposed ? "Predicted"
+            : on ? (stagedWord ?? (verdict === "miss" ? "Overturned" : verdict === "match" ? "Confirmed" : decided === choice ? "Recorded" : null))
+              : null;
+          return (
+            <button
+              aria-disabled={disabled ? true : undefined}
+              aria-pressed={on}
+              className={cn(
+                "relative inline-flex min-w-0 flex-col items-center justify-center gap-px rounded-[var(--feed-radius-md,16px)] px-2 font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring @max-[17rem]/decision:px-1",
+                cell,
+                // Three degrees of finish, in tone alone: the feed register has no borders to spend
+                // (newsroom-organizer.css strips them), so a chosen answer is the solid fill, the
+                // predicted side is the control tone, and an untouched side is quieter still.
+                on ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]"
+                  : proposed ? "bg-[var(--feed-control)] text-foreground hover:bg-[var(--feed-control)]/70"
+                    : "bg-[var(--feed-control)]/45 text-muted-foreground hover:bg-[var(--feed-control)]/70",
+                disabled && !on && "opacity-[var(--feed-quiet,0.6)]",
+              )}
+              data-predicted={predicted || undefined}
+              data-review-choice={choice}
+              data-state={on ? (saving || needsReason ? "staged" : "decided") : proposed ? "predicted" : "idle"}
+              key={choice}
+              onClick={() => { if (!disabled) onChoose(choice); }}
+              type="button"
+            >
+              {/* The model's opinion survives the answer, on the segment it picked. */}
+              {predicted && answer ? (
+                <span
+                  className={cn(
+                    "absolute top-1.5 right-2 opacity-55",
+                    verdict === "match" && "text-[var(--feed-verdict-match-fill,#059669)] opacity-100",
+                    verdict === "miss" && "text-[var(--feed-verdict-miss-fill,#dc2626)] opacity-100",
+                  )}
+                  data-prediction-mark
+                  data-verdict={verdict ?? undefined}
+                  title="this is what was predicted"
+                >
+                  <svg aria-hidden="true" className="size-3" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="8" />
+                    <circle cx="12" cy="12" fill="currentColor" r="2.6" stroke="none" />
+                  </svg>
+                </span>
+              ) : null}
+              <span className="flex items-center gap-1.5">
+                <Icon aria-hidden="true" className={cn("size-4", !on && "opacity-[var(--feed-quiet,0.6)]")} />
+                {WORD[choice]}
+              </span>
+              {sub ? <span className={cn(LABEL, "opacity-75")} data-choice-state>{sub}</span> : null}
+              {verdict && predicted ? <span className="sr-only">{verdict === "match" ? ", this is what was predicted" : ", the prediction was the other way"}</span> : null}
+            </button>
+          );
+        })}
+      </div>
+
+      {showReason ? (
+        <div className="grid gap-y-1.5" data-review-reason>
+          <label className={cn(LABEL, "text-muted-foreground")} htmlFor={fieldId}>
+            Reason{reasonRequiredFor ? ` · required to ${WORD[reasonRequiredFor].toLowerCase()}` : " · optional"}
+          </label>
+          {/* Written reasons only. A row of canned answers collects a label the model mostly has already;
+              what trains the next prediction is a sentence. */}
+          <textarea
+            className={cn(
+              "w-full rounded-[var(--feed-radius-md,16px)] border-0 bg-[var(--feed-control)] px-3 py-2 text-sm leading-5 text-foreground outline-none transition-[min-height] placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring",
+              field,
+            )}
+            disabled={disabled}
+            id={fieldId}
+            onBlur={() => { if (!disabled) onReasonCommit?.(); }}
+            onChange={(event) => { setReasonDirty(true); onReasonChange?.(event.target.value); }}
+            placeholder="Why? In your own words — this is what the next prediction learns from."
+            value={reason}
+          />
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          "flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground",
+          // The overlay strip is 16px tall: a question with a button, or an error, needs a row of its own.
+          statusOverlay && !needsReason && feedback.phase !== "error" ? "absolute inset-x-4 bottom-0 h-4 overflow-hidden leading-4" : "min-h-5",
+        )}
+        data-feed-saved
+        role="status"
+      >
+        {note ? <span data-feed-reason>{note}</span> : null}
+        {needsReason ? (
+          <>
+            <span className="font-semibold text-foreground">A reason is needed to record {WORD[answer ?? "reject"]}</span>
+            <button
+              className="rounded-[var(--feed-radius-md,16px)] bg-[var(--primary)] px-2.5 py-0.5 font-semibold text-[var(--primary-foreground)] outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:opacity-[var(--feed-quiet,0.6)]"
+              disabled={!reason.trim()}
+              data-review-record
+              onClick={() => { if (answer) onChoose(answer); }}
+              type="button"
+            >
+              Record
+            </button>
+          </>
+        ) : null}
+        {saving ? <span className="inline-flex items-center gap-1"><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Recording…</span> : null}
+        {feedback.phase === "saved" && !needsReason ? (
+          <span className="inline-flex items-center gap-1 text-foreground" data-review-saved>
+            <CheckIcon aria-hidden="true" className="size-3.5" />
+            Recorded
+            {verdict ? <span className="text-muted-foreground">· {verdict === "match" ? "confirms" : "overturns"} the prediction</span> : null}
+            {showReason ? (
+              reasonDirty ? <span className="text-muted-foreground">· reason not saved yet</span>
+                : reason.trim() ? <span className="text-muted-foreground">· reason saved</span>
+                  : <span className="text-muted-foreground">· no reason given</span>
+            ) : null}
+          </span>
+        ) : null}
+        {feedback.phase === "saved" && reasonDirty && showReason ? (
+          <button
+            className="rounded-[var(--feed-radius-md,16px)] bg-[var(--primary)] px-2.5 py-0.5 font-semibold text-[var(--primary-foreground)] outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+            data-review-save-reason
+            onClick={() => onReasonCommit?.()}
+            type="button"
+          >
+            Save reason
+          </button>
+        ) : null}
+      </div>
+      {disabledReason ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
+      {feedback.phase === "error" ? <p className="text-xs text-destructive" role="alert">{feedback.message}</p> : null}
+    </div>
+  );
+}

package/components/needs-me-bodies.tsx

@@ -13,7 +13,7 @@ import type { NeedsMeEntry } from "../lib/needs-me-items";
 import { answerWords, formatWhen, nextText, steeringText, subjectHref, subjectLabel } from "../lib/review-requests";
 import { DecidedLine } from "./notification-cards";
 import { SourceMark } from "./reference-feed";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import type { RatingController } from "./use-reference-ratings";
 import { FlagFooter, decidedChoiceOf, recordedAnswer } from "./needs-me-shared";
 
@@ -111,7 +111,7 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
           {item.decisionState === "acknowledged"
             ? <p className="flex items-center gap-1.5 text-sm font-medium" data-flag-acknowledged><CircleCheckIcon aria-hidden="true" className="size-4" />Acknowledged</p>
             : <DecidedLine choice={decided ?? "accept"} notThisKind={recorded.notThisKind} />}
-          {flag ? null : <RatingGrid answer={decided} disabled feedback={{ phase: "idle" }} onChoose={() => undefined} prediction={{ state: "none" }} showPrediction={false} size="large" surface="footer" />}
+          {flag ? null : <DecisionControl answer={decided} disabled feedback={{ phase: "idle" }} onChoose={() => undefined} prediction={{ state: "none" }} showPrediction={false} showReason={false} size="large" surface="footer" />}
           {lockedNote ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{lockedNote}</p> : null}
         </>
       ) : (
@@ -134,7 +134,7 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
           {flag ? (
             <FlagFooter busy={busy} disabledReason={disabledReason} done={false} error={rating.feedback.phase === "error" ? rating.feedback.message ?? null : null} onAcknowledge={() => ratings.choose(item.id, "accept")} />
           ) : (
-            <RatingGrid
+            <DecisionControl
               answer={rating.pending}
               disabled={Boolean(disabledReason)}
               disabledReason={disabledReason}
@@ -142,6 +142,7 @@ export function DecisionPanel({ item, ratings, extras, onExtras, disabledReason,
               onChoose={(choice) => { if (!disabledReason) ratings.choose(item.id, choice); }}
               prediction={{ state: "none" }}
               showPrediction={false}
+              showReason={false}
               size="large"
               surface="footer"
             />

package/components/needs-me-feed.tsx

@@ -32,7 +32,7 @@ import { NotificationSkeleton, RecentDecisions } from "./notification-cards";
 import { FEED_GRID, FEED_SURFACE_PROPS, FeedImage, PILL, REASON_LABELS, SELECTED_RING, SourceMark } from "./reference-feed";
 import { predictionFromDecision, ReviewQueueBar, useQueueGestures, type CardPrediction, type ReviewChoice } from "./reference-review-card";
 import type { CorrectCaptureAction } from "./reference-capture-client";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { useMediaQuery } from "./use-media-query";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
@@ -169,30 +169,24 @@ export function NeedsMeCard({ item, now, onOpen, predictionLoading, ratings, sel
         {flag ? (
           <FlagFooter busy={rating.feedback.phase === "saving"} disabledReason={disabledReason} done={item.decisionState === "acknowledged"} error={rating.feedback.phase === "error" ? rating.feedback.message ?? null : null} onAcknowledge={() => ratings.choose(item.id, "accept")} />
         ) : (
-          <RatingGrid
+          <DecisionControl
             answer={chosen}
             decided={decided}
             disabled={Boolean(disabledReason) || locked}
             disabledReason={disabledReason}
             feedback={feedback}
+            needsReason={refLike && rating.askReason}
             note={reasonLabel ? `Reason: ${reasonLabel}` : locked ? whyLine ?? "Decided here." : null}
             onChoose={(choice) => { if (!disabledReason && !locked) ratings.choose(item.id, choice); }}
+            onReasonChange={(text) => ratings.setNote(item.id, text)}
+            onReasonCommit={() => { if (!disabledReason && !locked) ratings.commitNote(item.id); }}
             prediction={cardPrediction(item, predictionLoading)}
+            reason={rating.note ?? ""}
+            reasonRequiredFor={refLike ? "reject" : null}
             showPrediction={refLike}
+            showReason={refLike}
           />
         )}
-        {refLike && rating.askReason ? (
-          // Covers the footer rather than adding to it, so asking for a reason never pushes the cards below it down.
-          <div className="absolute inset-0 z-10 flex flex-col justify-center space-y-2 bg-[var(--feed-footer)] p-3" data-review-reasons>
-            <p className="text-xs font-medium">Reason for rejecting. Choose one to save your Reject.</p>
-            <div className="flex flex-wrap gap-1.5">
-              {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-                <button className={cn(PILL, "min-h-8 bg-[var(--feed-control)] px-3 text-xs")} data-review-reason={code} key={code} onClick={() => ratings.setReason(item.id, code)} type="button">{REASON_LABELS[code]}</button>
-              ))}
-              <button className={cn(PILL, "min-h-8 px-3 text-xs text-muted-foreground")} onClick={() => ratings.cancelReason(item.id)} type="button">Cancel</button>
-            </div>
-          </div>
-        ) : null}
       </div>
     </article>
   );

package/components/newsroom-organizer.css

@@ -401,11 +401,29 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
   --feed-radius-lg: 10px;
   --feed-radius-md: 8px;
   --feed-radius-pill: 8px;
+  /* Verdict tones for the rating grid. Hue is never the only signal: the cell also carries a CircleCheck or
+     CircleX and the word Match or Miss. Named here, in the feed layer, because the component must not hold
+     literal palette values and because Tailwind's dark: variant (.dark *) never fires in this app. */
+  --feed-verdict-match-tint: #05966933;
+  --feed-verdict-match-ink: #064e3b;
+  --feed-verdict-match-fill: #059669;
+  --feed-verdict-miss-tint: #dc262633;
+  --feed-verdict-miss-ink: #7f1d1d;
+  --feed-verdict-miss-fill: #dc2626;
+  /* The quiet step for an unpredicted cell and a switched-off button. */
+  --feed-quiet: 0.6;
 }
 [data-kanbus-theme][data-color-mode="dark"] [data-feed-surface], [data-kanbus-theme][data-color-mode="dark"][data-feed-surface] {
   --feed-card: color-mix(in oklab, var(--kb-theme-paper) 94%, var(--kb-theme-ink));
   --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
   --feed-control: color-mix(in oklab, var(--kb-theme-paper) 80%, var(--kb-theme-ink));
+  /* Dark verdicts lift toward the tint rather than down into it, so the ink reads on a dark card. */
+  --feed-verdict-match-tint: #34d39933;
+  --feed-verdict-match-ink: #d1fae5;
+  --feed-verdict-match-fill: #34d399;
+  --feed-verdict-miss-tint: #f8717133;
+  --feed-verdict-miss-ink: #fee2e2;
+  --feed-verdict-miss-fill: #f87171;
 }
 
 /* Borderless detail pane, Add panel and mobile sheet ([data-feed-flat]): no border, rule or box anywhere inside. Regions are told apart
@@ -426,6 +444,12 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: var(--feed-radius-pill) !important; }
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-review-queue-bar] { background: var(--feed-footer) !important; }
+/* The decision control keeps one corner across its segments and its reason field, and its predicted segment
+   keeps its tones apart: the flat rules above give every unpressed button the same control fill, which would
+   leave the predicted side and an untouched side looking identical. */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-decision-control] :is(button, textarea) { border-radius: var(--feed-radius-md) !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-decision-control] [data-review-choice][data-state="idle"] { background: color-mix(in oklab, var(--feed-control) 45%, transparent) !important; }
+
 /* The rating grid keeps its own rounded rectangles in the borderless panes (not the pill shape the flat rules give other buttons). */
 [data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: var(--feed-radius-md) !important; }
 

package/components/notification-cards.tsx

@@ -9,7 +9,7 @@ import { cannotMoveReason, type DraftChoice } from "../lib/review-drafts";
 import { answerWords, formatWhen, modeLabel, nextText, steeringText, subjectHref, subjectLabel, type ReviewRequest } from "../lib/review-requests";
 import type { ReferencePreview } from "../lib/reference-preview";
 import { FEED_SURFACE_PROPS, FeedImage, PILL, SourceMark } from "./reference-feed";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 
 /** What the editor typed with an answer. */
 export type DecisionExtras = { why: string; notThisKind: boolean };
@@ -109,9 +109,9 @@ function DecisionFooter({ busy, decision, disabledReason, error, kind, lockedNot
       {locked ? (
         <>
           <DecidedLine choice={decision.choice} notThisKind={decision.notThisKind} why={decision.why} />
-          <RatingGrid
+          <DecisionControl
             answer={decision.choice} disabled disabledReason={null} feedback={{ phase: "saved" }} onChoose={() => undefined}
-            prediction={{ state: "none" }} showPrediction={false} surface="footer"
+            prediction={{ state: "none" }} showPrediction={false} showReason={false} surface="footer"
           />
           <p className="text-xs text-muted-foreground" data-review-disabled-reason>{lockedNote}</p>
         </>
@@ -132,7 +132,7 @@ function DecisionFooter({ busy, decision, disabledReason, error, kind, lockedNot
             </button>
             <span className="text-xs text-muted-foreground">Optional. Counts if you reject.</span>
           </div>
-          <RatingGrid
+          <DecisionControl
             answer={busy ? pending : null}
             disabled={Boolean(disabledReason)}
             disabledReason={disabledReason}
@@ -140,6 +140,7 @@ function DecisionFooter({ busy, decision, disabledReason, error, kind, lockedNot
             onChoose={choose}
             prediction={{ state: "none" }}
             showPrediction={false}
+            showReason={false}
             surface="footer"
           />
         </>

package/components/reference-feed.tsx

@@ -20,7 +20,7 @@ import { referenceDisplayTitle } from "../lib/newsroom-references";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import { cn } from "../lib/utils";
 import { predictionFromDecision, type ReviewChoice } from "./reference-review-card";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { CaptureBadge } from "./reference-capture-panel";
 import { AutoAcceptedBadge } from "./auto-accepted-badge";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
@@ -312,31 +312,22 @@ export function FeedCard({
       </button>
 
       <div className="relative bg-[var(--feed-footer)] px-4 pb-4 pt-3" data-feed-actions>
-        <RatingGrid
+        <DecisionControl
           answer={chosen}
           decided={answer}
           disabled={Boolean(disabledReason)}
           disabledReason={disabledReason}
           feedback={feedback}
+          needsReason={rating.askReason}
           note={reasonLabel ? `Reason: ${reasonLabel}` : null}
           onChoose={(choice) => { if (!disabledReason) store.choose(item.lineageId, choice); }}
+          onReasonChange={(text) => store.setNote(item.lineageId, text)}
+          onReasonCommit={() => { if (!disabledReason) store.commitNote(item.lineageId); }}
           prediction={decision ? predictionFromDecision(decision) : predictionLoading ? { state: "loading" } : { state: "none" }}
+          reason={rating.note ?? ""}
+          reasonRequiredFor="reject"
           statusOverlay
         />
-        {rating.askReason ? (
-          // Covers the footer rather than adding to it, so asking for a reason never pushes the cards below it down.
-          <div className="absolute inset-0 z-10 flex flex-col justify-center space-y-2 bg-[var(--feed-footer)] p-3" data-review-reasons>
-            <p className="text-xs font-medium">Reason for rejecting. Choose one to save your Reject.</p>
-            <div className="flex flex-wrap gap-1.5">
-              {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-                <button className={cn(PILL, "min-h-8 bg-[var(--feed-control)] px-3 text-xs")} data-review-reason={code} key={code} onClick={() => store.setReason(item.lineageId, code)} type="button">
-                  {REASON_LABELS[code]}
-                </button>
-              ))}
-              <button className={cn(PILL, "min-h-8 px-3 text-xs text-muted-foreground")} onClick={() => store.cancelReason(item.lineageId)} type="button">Cancel</button>
-            </div>
-          </div>
-        ) : null}
       </div>
     </article>
   );

package/components/reference-review-card.tsx

@@ -2,20 +2,16 @@
 
 import {
   ArchiveIcon,
-  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  CircleCheckIcon,
-  CircleXIcon,
   ExternalLinkIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
 import { Button } from "./ui/button";
-import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { cn } from "../lib/utils";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
-import { REFERENCE_REJECTION_REASON_CODES, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 
 export type ReviewChoice = "accept" | "reject";
 
@@ -31,96 +27,6 @@ export type ReviewCardDecision = {
   reasonCode: ReferenceRejectionReasonCode | null;
 };
 
-const REASON_LABELS: Record<ReferenceRejectionReasonCode, string> = {
-  out_of_scope: "Out of scope",
-  policy_exclusion: "Policy exclusion",
-  duplicate: "Duplicate",
-  low_quality: "Low quality",
-  unavailable: "Unavailable",
-  provenance: "Provenance",
-  other: "Other",
-};
-
-const CHOICE_LABEL: Record<ReviewChoice, string> = { accept: "Accept", reject: "Reject" };
-
-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 };
 }
@@ -181,10 +87,8 @@ export function ReviewCard({
   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.
@@ -222,53 +126,23 @@ export function ReviewCard({
         ) : null}
       </header>
 
-      <RatingGrid
+      <DecisionControl
         answer={chosen}
         decided={decided}
         disabled={Boolean(disabledReason)}
         disabledReason={disabledReason}
         feedback={item.feedback}
+        needsReason={item.askReason}
         onChoose={choose}
+        onReasonChange={(text) => store.setNote(itemId, text)}
+        onReasonCommit={commitNote}
         prediction={prediction}
+        reason={note}
+        reasonRequiredFor="reject"
         size="large"
         surface="card"
       />
 
-      <label className="block text-sm font-medium">
-        Why? (optional)
-        <AutoGrowTextarea
-          aria-label="Why? (optional)"
-          className="mt-1 block min-h-20 w-full rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-base font-normal outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
-          onBlur={commitNote}
-          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}
-        />
-      </label>
-
-      {chosen === "reject" ? (
-        <div className="space-y-2" data-review-reasons>
-          <p className="text-sm font-medium">Reason for rejecting</p>
-          <div className="flex flex-wrap gap-2">
-            {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-              <button
-                aria-disabled={disabledReason ? true : undefined}
-                aria-pressed={reason === code}
-                className={cn("inline-flex min-h-10 items-center gap-1.5 rounded-[var(--feed-radius-pill,8px)] px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", reason === code ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)]")}
-                data-review-reason={code}
-                key={code}
-                onClick={() => chooseReason(code)}
-                type="button"
-              >
-                {reason === code ? <CheckIcon aria-hidden="true" className="size-4" /> : null}
-                {REASON_LABELS[code]}
-              </button>
-            ))}
-          </div>
-          {!reason && !note.trim() ? <p className="text-sm text-muted-foreground">Choose a reason, or say why above, to save your Reject.</p> : null}
-        </div>
-      ) : null}
-
       {children}
 
       {onArchive ? (

package/components/use-reference-ratings.ts

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 import type { ReviewChoice } from "./reference-review-card";
-import type { RatingFeedback } from "./review-rating-grid";
+import type { RatingFeedback } from "./decision-control";
 
 /** How long after the last keystroke a typed reason is saved on its own. */
 export const NOTE_AUTOSAVE_MS = 1200;

package/package.json

@@ -84,6 +84,7 @@
     "./components/conversation-provider": "./components/conversation-provider.tsx",
     "./components/conversation-thread": "./components/conversation-thread.tsx",
     "./components/curation-delegation-client": "./components/curation-delegation-client.ts",
+    "./components/decision-control": "./components/decision-control.tsx",
     "./components/dev-sandbox-editor-sign-in": "./components/dev-sandbox-editor-sign-in.tsx",
     "./components/editorial-checks-admin-panel": "./components/editorial-checks-admin-panel.tsx",
     "./components/editorial-finding-card": "./components/editorial-finding-card.tsx",
@@ -164,7 +165,6 @@
     "./components/reference-stories": "./components/reference-stories.tsx",
     "./components/references-page-loading": "./components/references-page-loading.tsx",
     "./components/references-prefetch": "./components/references-prefetch.ts",
-    "./components/review-rating-grid": "./components/review-rating-grid.tsx",
     "./components/settings-page": "./components/settings-page.tsx",
     "./components/signup-entries-panel": "./components/signup-entries-panel.tsx",
     "./components/staging-banner": "./components/staging-banner.tsx",
@@ -510,7 +510,7 @@
       "optional": true
     }
   },
-  "version": "5.43.0-next.38",
+  "version": "5.43.0-next.39",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-crypto/sha256-js": "5.2.0",

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.43.0-next.38",
+  "version": "5.43.0-next.39",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",

package/components/review-rating-grid.tsx

@@ -1,190 +0,0 @@
-"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.
- * The grid sizes itself to its own width (a container query), not the window's: on a narrow card the label column shrinks to its
- * word, the padding tightens, and the confidence wraps under "Accept" instead of spilling out of its cell.
- */
-
-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(
-        "@container/rating grid gap-x-2 gap-y-2",
-        showPrediction ? "grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] @max-[17rem]/rating:gap-x-1.5" : "grid-cols-2",
-      )}
-      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 min-w-0 flex-col items-center justify-center rounded-[16px] px-2 py-1.5 text-center @max-[17rem]/rating:px-1",
-                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}
-            >
-              {/* Wraps rather than overflows: when the cell is narrow, the confidence moves onto its own line. */}
-              <span className="flex max-w-full flex-wrap items-center justify-center gap-x-1.5 leading-tight">
-                <span className="inline-flex items-center gap-1">
-                  {Icon ? <Icon aria-hidden="true" className="size-4 shrink-0" /> : null}
-                  {WORD[choice]}
-                </span>
-                {/* The confidence and the verdict share one line, so a vote never makes the cell (or the card) taller. */}
-                {predicted && (confidenceText || verdict) ? (
-                  <small className="inline-flex items-center gap-1 whitespace-nowrap text-xs">
-                    {confidenceText ? <span className="font-normal opacity-80" data-cyclotron-confidence>{confidenceText}</span> : null}
-                    {confidenceText && verdict ? <span aria-hidden="true" className="opacity-60">·</span> : null}
-                    {verdict ? <span className="font-medium" data-verdict-word>{verdict === "match" ? "Match" : "Miss"}</span> : null}
-                  </small>
-                ) : null}
-              </span>
-              {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 min-w-0 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 @max-[17rem]/rating:gap-1 @max-[17rem]/rating:px-1",
-                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>
-  );
-}