@anthusai/papyrus 5.43.0-next.11 → 5.43.0-next.13

package/components/newsroom-organizer.css

@@ -357,6 +357,8 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: 20px !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-2xl"],
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: 16px !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[16px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: 16px !important; }
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-3xl"],
 .newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: 24px !important; }
 
@@ -391,3 +393,5 @@ 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: 9999px !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 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: 16px !important; }

package/components/reference-feed.tsx

@@ -1,14 +1,6 @@
 "use client";
 
-import {
-  CheckIcon,
-  CircleCheckIcon,
-  CircleXIcon,
-  InfoIcon,
-  Loader2Icon,
-  MinusIcon,
-  XIcon,
-} from "lucide-react";
+import { InfoIcon, Loader2Icon } from "lucide-react";
 import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import type { ReferenceRecord } from "../lib/category-repository";
 import { REFERENCE_REJECTION_REASON_CODES, normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
@@ -28,6 +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";
 
 /**
  * Flat surfaces, no borders: the page tone, a card tone one step away from it, a footer tone, and a control tone for chips and
@@ -182,46 +175,6 @@ function FeedImage({ host, lead, name, src }: { host: string | null; lead: boole
   );
 }
 
-function percent(confidence: number | null): string | null {
-  return confidence === null ? null : `${Math.round(confidence * 100)}%`;
-}
-
-/** The Cyclotron's read-only answer as a soft pill: Accept or Reject with its confidence, then Match or Miss once a person has answered. */
-function PredictionChip({ answer, decision, loading }: { answer: ReviewChoice | null; decision: RelevanceDecisionView | undefined; loading: boolean }) {
-  const base = "inline-flex min-h-8 items-center gap-1.5 rounded-full px-3 text-xs font-medium";
-  if (!decision) {
-    return (
-      <span className={cn(base, "bg-[var(--feed-control)] text-muted-foreground")} data-cyclotron-state={loading ? "loading" : "none"}>
-        {loading ? <Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" /> : <MinusIcon aria-hidden="true" className="size-3.5" />}
-        {loading ? "Predicting…" : "No prediction"}
-      </span>
-    );
-  }
-  const prediction = predictionFromDecision(decision);
-  if (prediction.state !== "ready") return null;
-  const matched = answer ? prediction.choice === answer : null;
-  const verdict = matched === null ? null : matched ? "match" : "miss";
-  const Icon = verdict === "match" ? CircleCheckIcon : verdict === "miss" ? CircleXIcon : prediction.choice === "accept" ? CheckIcon : XIcon;
-  return (
-    <span
-      className={cn(
-        base,
-        verdict === null && "bg-[var(--feed-control)] text-foreground",
-        verdict === "match" && "bg-primary/15 text-primary",
-        verdict === "miss" && "bg-destructive/15 text-destructive",
-      )}
-      data-cyclotron-choice={prediction.choice}
-      data-predicted
-      data-verdict={verdict ?? undefined}
-    >
-      <Icon aria-hidden="true" className="size-4" />
-      <span>Cyclotron · {prediction.choice === "accept" ? "Accept" : "Reject"}{percent(prediction.confidence) ? ` ${percent(prediction.confidence)}` : ""}</span>
-      {verdict ? <span data-verdict-word>· {verdict === "match" ? "Match" : "Miss"}</span> : null}
-      {verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
-    </span>
-  );
-}
-
 type RateState = { phase: "idle" | "saving" | "saved" | "error" | "reason"; message?: string };
 
 function FeedCard({
@@ -324,34 +277,14 @@ function FeedCard({
       </button>
 
       <div className="space-y-2.5 bg-[var(--feed-footer)] p-3" data-feed-actions>
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <PredictionChip answer={answer} decision={decision} loading={predictionLoading} />
-          <span aria-live="polite" className="inline-flex min-h-5 items-center gap-1 text-xs text-muted-foreground" data-feed-saved role="status">
-            {rate.phase === "saving" ? <><Loader2Icon aria-hidden="true" className="size-3.5 animate-spin" />Saving…</> : null}
-            {rate.phase === "saved" || (visitRated && rate.phase === "idle" && answer) ? <><CheckIcon aria-hidden="true" className="size-3.5" />Saved</> : null}
-          </span>
-        </div>
-        <div aria-label="Your answer" className="flex items-center gap-2" data-review-row="you" role="group">
-          <span className="sr-only">You</span>
-          {(["accept", "reject"] as const).map((choice) => {
-            const on = answer === choice;
-            return (
-              <button
-                aria-disabled={disabledReason ? true : undefined}
-                aria-pressed={on}
-                className={cn(PILL, "min-h-10 flex-1", on ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--feed-control)] text-foreground hover:bg-[var(--feed-control)]/70", disabledReason && "opacity-60")}
-                data-review-choice={choice}
-                key={choice}
-                onClick={() => choose(choice)}
-                type="button"
-              >
-                {choice === "accept" ? <CheckIcon aria-hidden="true" className={cn("size-4", !on && "opacity-60")} /> : <XIcon aria-hidden="true" className={cn("size-4", !on && "opacity-60")} />}
-                {choice === "accept" ? "Accept" : "Reject"}
-              </button>
-            );
-          })}
-        </div>
-        {disabledReason ? <p className="text-xs text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
+        <RatingGrid
+          answer={answer}
+          disabled={Boolean(disabledReason)}
+          disabledReason={disabledReason}
+          feedback={rate.phase === "saving" ? { phase: "saving" } : rate.phase === "error" ? { phase: "error", message: rate.message } : rate.phase === "saved" || (visitRated && rate.phase === "idle" && answer) ? { phase: "saved" } : { phase: "idle" }}
+          onChoose={choose}
+          prediction={decision ? predictionFromDecision(decision) : predictionLoading ? { state: "loading" } : { state: "none" }}
+        />
         {rate.phase === "reason" ? (
           <div className="space-y-2" data-review-reasons>
             <p className="text-xs font-medium">Reason for rejecting. Choose one to save your Reject.</p>
@@ -365,7 +298,6 @@ function FeedCard({
             </div>
           </div>
         ) : null}
-        {rate.phase === "error" ? <p className="text-xs text-destructive" role="alert">{rate.message}</p> : null}
       </div>
     </article>
   );

package/components/reference-review-card.tsx

@@ -12,6 +12,7 @@ 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 { REFERENCE_REJECTION_REASON_CODES, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
 
 export type ReviewChoice = "accept" | "reject";
@@ -247,21 +248,17 @@ export function ReviewCard({
         {summary ? <p className="text-sm text-muted-foreground">{summary}</p> : null}
       </header>
 
-      <CyclotronRow decided={decided} prediction={prediction} />
-
-      <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>
-          <ChoiceButtons chosen={chosen} disabled={Boolean(disabledReason)} onChoose={choose} />
-        </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={saving ? { phase: "saving" } : error ? { phase: "error", message: error } : saved ? { phase: "saved" } : { phase: "idle" }}
+        onChoose={choose}
+        prediction={prediction}
+        size="large"
+        surface="card"
+      />
 
       <label className="block text-sm font-medium">
         Why? (optional)

package/components/review-rating-grid.tsx

@@ -0,0 +1,164 @@
+"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" },
+  onChoose,
+  prediction,
+  size = "compact",
+  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;
+  onChoose: (choice: ReviewChoice) => void;
+  prediction: CardPrediction;
+  size?: "compact" | "large";
+  /** 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 grid-cols-[4.5rem_minmax(0,1fr)_minmax(0,1fr)] gap-x-2 gap-y-2.5", size === "large" && "grid-cols-[5rem_minmax(0,1fr)_minmax(0,1fr)]")} data-rating-grid>
+      <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 gap-1" 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>
+          {prediction.state === "ready" ? null : (
+            <small className="text-center text-xs text-muted-foreground" data-cyclotron-state={prediction.state}>
+              {prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
+            </small>
+          )}
+        </div>
+      </div>
+
+      <div className="col-span-3 grid grid-cols-subgrid items-stretch" data-review-row="you">
+        <span className={cn("self-center font-semibold", label)}>You</span>
+        {(["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 && "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="col-span-3 min-h-5 text-xs text-muted-foreground" data-feed-saved role="status">
+        {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="col-span-3 text-xs text-muted-foreground" data-review-disabled-reason>{disabledReason}</p> : null}
+      {feedback.phase === "error" ? <p className="col-span-3 text-xs text-destructive" role="alert">{feedback.message}</p> : null}
+    </div>
+  );
+}

package/package.json

@@ -149,6 +149,7 @@
     "./components/reference-source-preview": "./components/reference-source-preview.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",
@@ -479,7 +480,7 @@
       "optional": true
     }
   },
-  "version": "5.43.0-next.11",
+  "version": "5.43.0-next.13",
   "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.11",
+  "version": "5.43.0-next.13",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",