@anthusai/papyrus 5.56.1 → 5.58.0

package/components/conversations-view.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { BookmarkIcon, ExternalLinkIcon, InboxIcon, Loader2Icon, MessageCircleIcon, MessageSquareTextIcon, MessagesSquareIcon, NewspaperIcon, TriangleAlertIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { MessageThreadRecord } from "../lib/category-repository";
+import { conversationAge, messageCountLabel, type ConversationMessage } from "../lib/conversation";
+import { CONVERSATION_SECTIONS, SECTION_EMPTY_COPY, createMergedThreadStream, sectionOfThreadKind, threadKindsForSection, type ConversationSection } from "../lib/conversation-feed";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { cn } from "../lib/utils";
+import { Composer, ConversationThread } from "./conversation-thread";
+import type { ConversationReferenceView, ConversationStoryView, ConversationsSource } from "./conversations-source";
+import { FEED_GRID, FEED_SURFACE_PROPS, PILL, ReferenceCardHeader } from "./reference-feed";
+
+const PAGE_SIZE = 12;
+/** A card shows this many of the newest messages; the rest are one button away. */
+const LATEST_MESSAGES = 3;
+const STALE_AFTER_MS = 60_000;
+const CONSOLE_SELECT_THREAD_EVENT = "papyrus:console-select-thread";
+const LABEL = "font-[family-name:var(--font-sans)] text-[10px] font-extrabold tracking-[0.07em] uppercase";
+
+const SECTION_ICONS = { all: InboxIcon, references: BookmarkIcon, stories: NewspaperIcon, chats: MessageCircleIcon, other: MessagesSquareIcon } as const;
+
+type KindLabel = { icon: typeof BookmarkIcon; text: string };
+function kindLabel(kind: string): KindLabel {
+  switch (sectionOfThreadKind(kind)) {
+    case "references": return { icon: BookmarkIcon, text: "Reference" };
+    case "stories": return { icon: NewspaperIcon, text: "Story" };
+    case "chats": return { icon: MessageCircleIcon, text: "Chat" };
+    default: return kind === "edition_forum" || kind === "section_forum"
+      ? { icon: MessagesSquareIcon, text: kind === "edition_forum" ? "Edition forum" : "Section forum" }
+      : { icon: MessageSquareTextIcon, text: "Message" };
+  }
+}
+
+/** One conversation's Messages: loaded once, shown at once when posted, taken back when the save fails. */
+function useThreadMessages(source: ConversationsSource, thread: MessageThreadRecord, seed: ConversationMessage[] | undefined, reloadKey: number) {
+  const [messages, setMessages] = useState<ConversationMessage[]>(seed ?? []);
+  const [state, setState] = useState<"loading" | "ready" | "error">(seed ? "ready" : "loading");
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+  const counter = useRef(0);
+  useEffect(() => {
+    let active = true;
+    source.loadMessages(thread.id).then((loaded) => {
+      if (!active) return;
+      setMessages((current) => [...loaded, ...current.filter((message) => message.pending)]);
+      setState("ready");
+      setError(null);
+    }).catch((failure) => {
+      if (!active) return;
+      setError(failure instanceof Error ? failure.message : "The conversation could not be loaded.");
+      setState("error");
+    });
+    return () => { active = false; };
+  }, [source, thread.id, reloadKey, attempt]);
+  const post = useCallback(async (body: string, parentMessageId: string | null) => {
+    counter.current += 1;
+    const pendingId = `pending-${counter.current}`;
+    const pending: ConversationMessage = { id: pendingId, parentMessageId, authorLabel: source.authorLabel, content: body.trim(), createdAt: new Date().toISOString(), sequenceNumber: Number.MAX_SAFE_INTEGER - 1000 + counter.current, pending: true };
+    setMessages((current) => [...current, pending]);
+    try {
+      const saved = await source.post({ thread, body, parentMessageId });
+      setMessages((current) => current.map((message) => (message.id === pendingId ? saved : message)));
+    } catch (failure) {
+      setMessages((current) => current.filter((message) => message.id !== pendingId));
+      throw failure instanceof Error ? failure : new Error("Your message could not be saved.");
+    }
+  }, [source, thread]);
+  return { messages, state, error, post, retry: () => setAttempt((current) => current + 1) };
+}
+
+function CardCaption({ kind, now, updatedAt }: { kind: string; now: number; updatedAt: string }) {
+  const { icon: Icon, text } = kindLabel(kind);
+  const age = conversationAge(updatedAt, now);
+  return (
+    <p className={cn(LABEL, "flex items-center justify-between gap-2 text-muted-foreground")} data-conversation-caption>
+      <span className="inline-flex items-center gap-1.5"><Icon aria-hidden="true" className="size-3.5" />{text}</span>
+      {age ? <span className="font-medium normal-case tracking-normal" data-conversation-activity>Active {age === "now" ? "now" : `${age} ago`}</span> : null}
+    </p>
+  );
+}
+
+/** The Reference a conversation is about, as an attachment under its messages: the standard header, no decision controls. */
+function ReferenceAttachment({ href, now, onNavigate, thread, view }: { href: string; now: number; onNavigate?: (href: string) => void; thread: MessageThreadRecord; view: ConversationReferenceView | undefined }) {
+  const open = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!onNavigate || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+    event.preventDefault();
+    onNavigate(href);
+  };
+  return (
+    <a
+      aria-label={`Open the Reference: ${view?.reference.title ?? thread.title}`}
+      className="flex flex-col overflow-hidden rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-footer)] text-left outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+      data-conversation-attachment="reference"
+      href={href}
+      onClick={open}
+    >
+      {view ? <ReferenceCardHeader now={now} preview={view.preview} reference={view.reference} /> : (
+        <span className="flex items-center gap-2 p-4 text-sm text-muted-foreground"><BookmarkIcon aria-hidden="true" className="size-4" />{thread.title}<ExternalLinkIcon aria-hidden="true" className="size-4" /></span>
+      )}
+    </a>
+  );
+}
+
+function ConversationCard({ demo, now, onNavigate, reloadKey, references, seed, source, stories, thread }: {
+  demo: boolean;
+  now: number;
+  onNavigate?: (href: string) => void;
+  reloadKey: number;
+  references: ReadonlyMap<string, ConversationReferenceView>;
+  seed: ConversationMessage[] | undefined;
+  source: ConversationsSource;
+  stories: ReadonlyMap<string, ConversationStoryView>;
+  thread: MessageThreadRecord;
+}) {
+  const section = sectionOfThreadKind(thread.threadKind);
+  const lineageId = thread.primaryAnchorLineageId ?? "";
+  // Forum threads and chats keep their own detail views; every other conversation is read and answered right here.
+  const inline = section === "references" || section === "stories" || thread.threadKind === "conversation";
+  const messages = useThreadMessages(source, thread, seed, reloadKey);
+  const story = stories.get(lineageId);
+  const frame = "flex flex-col gap-3 rounded-[20px] bg-[var(--feed-card)] p-4";
+
+  if (!inline) {
+    const isChat = section === "chats";
+    const href = getNewsroomNavHref(`/newsroom/forum/${encodeURIComponent(thread.id)}`, demo);
+    return (
+      <article className={frame} data-conversation-card={thread.id} data-conversation-kind={thread.threadKind}>
+        <CardCaption kind={thread.threadKind} now={now} updatedAt={thread.updatedAt} />
+        <h3 className="text-base font-semibold leading-snug" data-conversation-title>{thread.title}</h3>
+        <p className="text-sm text-muted-foreground">{messageCountLabel(thread.messageCount ?? 0)}</p>
+        {isChat ? (
+          <button className={cn(PILL, "self-start bg-[var(--feed-control)] text-foreground")} data-conversation-open onClick={() => window.dispatchEvent(new CustomEvent(CONSOLE_SELECT_THREAD_EVENT, { detail: { threadId: thread.id } }))} type="button">
+            <MessageCircleIcon aria-hidden="true" className="size-4" />Open chat
+          </button>
+        ) : (
+          <a className={cn(PILL, "self-start bg-[var(--feed-control)] text-foreground")} data-conversation-open href={href} onClick={(event) => { if (onNavigate && !event.metaKey && !event.ctrlKey && event.button === 0) { event.preventDefault(); onNavigate(href); } }}>
+            <MessagesSquareIcon aria-hidden="true" className="size-4" />Open thread
+          </a>
+        )}
+      </article>
+    );
+  }
+
+  return (
+    <article className={frame} data-conversation-card={thread.id} data-conversation-kind={thread.threadKind}>
+      <CardCaption kind={thread.threadKind} now={now} updatedAt={thread.updatedAt} />
+      {section === "stories" ? (
+        <div className="space-y-1 rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-footer)] p-3" data-conversation-story>
+          <p className="text-base font-semibold leading-snug">{story?.title ?? thread.title}</p>
+          <p className="flex flex-wrap items-center gap-x-3 text-sm text-muted-foreground">
+            {story?.stage ? <span data-conversation-stage>Stage: {story.stage}</span> : null}
+            <a className="inline-flex items-center gap-1 underline-offset-2 hover:underline" href={getNewsroomNavHref(`/newsroom/articles/${encodeURIComponent(lineageId)}`, demo)}>
+              <ExternalLinkIcon aria-hidden="true" className="size-3.5" />Open the Story
+            </a>
+          </p>
+        </div>
+      ) : null}
+      <ConversationThread
+        error={messages.error}
+        heading={`Messages in ${thread.title}`}
+        hideHeading
+        latest={LATEST_MESSAGES}
+        messages={messages.messages}
+        now={now}
+        onPost={messages.post}
+        onRetry={messages.retry}
+        state={messages.state}
+      />
+      {section === "references" && lineageId ? (
+        <ReferenceAttachment href={getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo)} now={now} onNavigate={onNavigate} thread={thread} view={references.get(lineageId)} />
+      ) : null}
+    </article>
+  );
+}
+
+/**
+ * Every conversation, newest activity first, as cards in a grid. Messages lead each card; the Reference or Story it is about is an
+ * attachment under them. Sections are buttons. Reads page by page from the thread indexes: nothing is loaded that is not shown.
+ */
+export function ConversationsView({ demo = false, onNavigate, source }: {
+  demo?: boolean;
+  /** Open a link inside the app without a page load. Without it links are ordinary links. */
+  onNavigate?: (href: string) => void;
+  source: ConversationsSource;
+}) {
+  const [section, setSection] = useState<ConversationSection>("all");
+  const [threads, setThreads] = useState<MessageThreadRecord[]>([]);
+  const [seeds, setSeeds] = useState<Record<string, ConversationMessage[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [references, setReferences] = useState<ReadonlyMap<string, ConversationReferenceView>>(() => new Map());
+  const [stories, setStories] = useState<ReadonlyMap<string, ConversationStoryView>>(() => new Map());
+  const [reloadKey, setReloadKey] = useState(0);
+  const [now, setNow] = useState(() => Date.now());
+  const loadedAt = useRef(Date.now());
+  const stream = useRef<ReturnType<typeof createMergedThreadStream<MessageThreadRecord>> | null>(null);
+  const generation = useRef(0);
+
+  const enrich = useCallback((page: MessageThreadRecord[]) => {
+    const referenceIds = page.filter((thread) => thread.threadKind === "reference_conversation" && thread.primaryAnchorLineageId).map((thread) => thread.primaryAnchorLineageId!);
+    const storyIds = page.filter((thread) => thread.threadKind === "story_conversation" && thread.primaryAnchorLineageId).map((thread) => thread.primaryAnchorLineageId!);
+    if (referenceIds.length) void source.loadReferences(referenceIds).then((loaded) => setReferences((current) => new Map([...current, ...loaded]))).catch(() => undefined);
+    if (storyIds.length) void source.loadStories(storyIds).then((loaded) => setStories((current) => new Map([...current, ...loaded]))).catch(() => undefined);
+  }, [source]);
+
+  useEffect(() => {
+    const mine = ++generation.current;
+    stream.current = createMergedThreadStream(threadKindsForSection(section), source.loadThreads);
+    setLoading(true);
+    setError(null);
+    stream.current.next(PAGE_SIZE).then((page) => {
+      if (generation.current !== mine) return;
+      setThreads(page.items);
+      setHasMore(page.hasMore);
+      setLoading(false);
+      loadedAt.current = Date.now();
+      enrich(page.items);
+    }).catch((failure) => {
+      if (generation.current !== mine) return;
+      setError(failure instanceof Error ? failure.message : "Conversations could not be loaded.");
+      setLoading(false);
+    });
+  }, [enrich, section, source, reloadKey]);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 60_000);
+    // Nothing subscribes: the page catches up when it is looked at again.
+    const refocus = () => { if (document.visibilityState !== "hidden" && Date.now() - loadedAt.current > STALE_AFTER_MS) setReloadKey((current) => current + 1); };
+    window.addEventListener("focus", refocus);
+    document.addEventListener("visibilitychange", refocus);
+    return () => { window.clearInterval(timer); window.removeEventListener("focus", refocus); document.removeEventListener("visibilitychange", refocus); };
+  }, []);
+
+  const loadMore = async () => {
+    if (!stream.current || loadingMore) return;
+    const mine = generation.current;
+    setLoadingMore(true);
+    try {
+      const page = await stream.current.next(PAGE_SIZE);
+      if (generation.current !== mine) return;
+      setThreads((current) => [...current, ...page.items.filter((thread) => !current.some((entry) => entry.id === thread.id))]);
+      setHasMore(page.hasMore);
+      enrich(page.items);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : "More conversations could not be loaded.");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  const startConversation = async (body: string) => {
+    const { thread, message } = await source.start(body);
+    setSeeds((current) => ({ ...current, [thread.id]: [message] }));
+    setThreads((current) => [thread, ...current.filter((entry) => entry.id !== thread.id)]);
+  };
+
+  const canStart = section === "all" || section === "other";
+  return (
+    <div className="@container space-y-5" data-conversations-view {...FEED_SURFACE_PROPS}>
+      <div aria-label="Conversations" className="flex flex-wrap gap-1.5" data-conversation-sections role="group">
+        {CONVERSATION_SECTIONS.map(({ key, label }) => {
+          const Icon = SECTION_ICONS[key];
+          const on = section === key;
+          return (
+            <button
+              aria-pressed={on}
+              className={cn(PILL, on ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)]/45 text-muted-foreground hover:bg-[var(--feed-control)]/70 hover:text-foreground")}
+              data-conversation-section={key}
+              key={key}
+              onClick={() => setSection(key)}
+              type="button"
+            >
+              <Icon aria-hidden="true" className="size-4" />
+              {label}
+            </button>
+          );
+        })}
+      </div>
+
+      {canStart ? (
+        <section aria-label="New message" className="max-w-2xl space-y-2 rounded-[20px] bg-[var(--feed-card)] p-4" data-conversation-new>
+          <h2 className={cn(LABEL, "text-muted-foreground")}>New message</h2>
+          <Composer buttonLabel="Post" icon="post" label="New message" onSubmit={startConversation} placeholder="New message… (a thought that is not about any one Reference or Story)" />
+        </section>
+      ) : null}
+
+      {loading ? <p className="flex items-center gap-1.5 text-sm text-muted-foreground" data-conversations-loading role="status"><Loader2Icon aria-hidden="true" className="size-4 animate-spin" />Loading conversations</p> : null}
+      {error ? (
+        <p className="flex items-start gap-1.5 text-sm text-destructive" data-conversations-error role="alert">
+          <TriangleAlertIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+          <span>Conversations could not be loaded. {error}</span>
+        </p>
+      ) : null}
+      {!loading && !error && !threads.length ? (
+        <p className="flex items-center gap-2 text-sm text-muted-foreground" data-conversations-empty>
+          <InboxIcon aria-hidden="true" className="size-4" />
+          {SECTION_EMPTY_COPY[section]}
+        </p>
+      ) : null}
+
+      {threads.length ? (
+        <div className={FEED_GRID} data-conversation-grid>
+          {threads.map((thread) => (
+            <ConversationCard demo={demo} key={thread.id} now={now} onNavigate={onNavigate} reloadKey={reloadKey} references={references} seed={seeds[thread.id]} source={source} stories={stories} thread={thread} />
+          ))}
+        </div>
+      ) : null}
+      {hasMore ? (
+        <button className={cn(PILL, "bg-[var(--feed-control)] text-foreground")} data-conversations-more disabled={loadingMore} onClick={() => void loadMore()} type="button">
+          {loadingMore ? <Loader2Icon aria-hidden="true" className="size-4 animate-spin" /> : null}
+          Show more conversations
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/components/decision-control.tsx

@@ -0,0 +1,307 @@
+"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 { AutoGrowTextarea } from "./ui/auto-grow-textarea";
+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. */}
+          <AutoGrowTextarea
+            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…"
+            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"
             />