@anthusai/papyrus 5.57.0 → 5.58.0

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"
             />

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/news-desk-taxonomy-client.ts

@@ -49,6 +49,7 @@ import type {
 import { relationTypeKey, semanticStateKey, semanticVersionKey } from "../lib/semantic-graph";
 import {
   CONVERSATION_FEED_KEY,
+  GENERAL_CONVERSATION_KIND,
   REFERENCE_CONVERSATION_KIND,
   conversationAnchorKey,
   conversationMessageId,
@@ -301,7 +302,7 @@ const NEWSROOM_ASSIGNMENT_FEED_QUERY = `
 const NEWSROOM_REFERENCE_FEED_QUERY = `
   query ListReferencesByNewsroomFeedAndCreatedAt($newsroomFeedKey: String!, $sortDirection: ModelSortDirection, $limit: Int, $nextToken: String, $filter: ModelReferenceFilterInput) {
     listReferencesByNewsroomFeedAndCreatedAt(newsroomFeedKey: $newsroomFeedKey, sortDirection: $sortDirection, limit: $limit, nextToken: $nextToken, filter: $filter) {
-      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt }
+      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt }
       nextToken
     }
   }
@@ -310,7 +311,7 @@ const NEWSROOM_REFERENCE_FEED_QUERY = `
 const NEWSROOM_REFERENCE_IMPORTED_FEED_QUERY = `
   query ListReferencesByNewsroomFeedAndImportedAt($newsroomFeedKey: String!, $sortDirection: ModelSortDirection, $limit: Int, $nextToken: String, $filter: ModelReferenceFilterInput) {
     listReferencesByNewsroomFeedAndImportedAt(newsroomFeedKey: $newsroomFeedKey, sortDirection: $sortDirection, limit: $limit, nextToken: $nextToken, filter: $filter) {
-      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt }
+      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt }
       nextToken
     }
   }
@@ -319,7 +320,7 @@ const NEWSROOM_REFERENCE_IMPORTED_FEED_QUERY = `
 const LIST_REFERENCES_BY_CURATION_STATUS_AND_UPDATED_AT_QUERY = `
   query ListReferencesByCurationStatusAndUpdatedAt($curationStatus: String!, $sortDirection: ModelSortDirection, $limit: Int, $nextToken: String, $filter: ModelReferenceFilterInput) {
     listReferencesByCurationStatusAndUpdatedAt(curationStatus: $curationStatus, sortDirection: $sortDirection, limit: $limit, nextToken: $nextToken, filter: $filter) {
-      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt }
+      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt }
       nextToken
     }
   }
@@ -328,7 +329,7 @@ const LIST_REFERENCES_BY_CURATION_STATUS_AND_UPDATED_AT_QUERY = `
 const LIST_REFERENCES_BY_REVIEWED_FEED_AND_UPDATED_AT_QUERY = `
   query ListReferencesByReviewedFeedAndUpdatedAt($reviewedFeedKey: String!, $sortDirection: ModelSortDirection, $limit: Int, $nextToken: String, $filter: ModelReferenceFilterInput) {
     listReferencesByReviewedFeedAndUpdatedAt(reviewedFeedKey: $reviewedFeedKey, sortDirection: $sortDirection, limit: $limit, nextToken: $nextToken, filter: $filter) {
-      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt }
+      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt }
       nextToken
     }
   }
@@ -337,7 +338,7 @@ const LIST_REFERENCES_BY_REVIEWED_FEED_AND_UPDATED_AT_QUERY = `
 const LIST_REFERENCES_FALLBACK_QUERY = `
   query ListReferencesFallback($limit: Int, $nextToken: String) {
     listReferences(limit: $limit, nextToken: $nextToken) {
-      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt }
+      items { id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt }
       nextToken
     }
   }
@@ -470,7 +471,7 @@ const MODEL_ATTACHMENTS_BY_OWNER_QUERY = `
 
 /** Matches Reference model fields in amplify/data/resource.ts (no metadata on Reference). */
 const REFERENCE_RECORD_GRAPHQL_FIELDS =
-  "id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason newsroomFeedKey reviewedFeedKey updatedAt";
+  "id lineageId versionNumber previousVersionId versionState versionCreatedAt versionCreatedBy changeReason contentHash corpusId externalItemId title authors sourceUri storagePath mediaType byteSize sha256 sourcePublishedAt sourceUpdatedAt retrievedAt inboundCitationCount outboundCitationCount importRunId importedAt createdAt curationStatus curationStatusKey curationStatusUpdatedAt curationStatusUpdatedBy curationStatusReason curationReasonCode curationActorKind curationSectionId curationShareable curationDelegation curationDecisionRelationId newsroomFeedKey reviewedFeedKey updatedAt";
 
 const LIST_REFERENCES_BY_LINEAGE_AND_VERSION_QUERY = `
   query ListReferencesByLineageAndVersion($lineageId: ID!, $limit: Int, $nextToken: String) {
@@ -1430,7 +1431,9 @@ async function appendMessageToThread(thread: MessageThreadRecord, build: (sequen
     list: () => listMessagesByThreadId(threadId, 1000),
     create: (sequenceNumber) => {
       now = new Date().toISOString();
-      built = build(sequenceNumber, now);
+      // `createdAt` is part of the composite sort key of messagesByResponseTargetStatusCreatedAt, so AppSync refuses a Message that
+      // sets it without `responseStatus`. A person's message waits on no responder: COMPLETED, as the Python message contract writes.
+      built = { responseStatus: "COMPLETED", ...build(sequenceNumber, now) };
       return runGraphql<{ createMessage?: MessageRecord | null }>(CREATE_MESSAGE_MUTATION, { input: built });
     },
   });
@@ -1591,11 +1594,13 @@ export async function appendConversationMessage(input: {
   anchor: ConversationAnchor;
   body: string;
   parentMessageId?: string | null;
+  /** The conversation to write into, when the caller already holds it (the Messages page). Without it the anchor finds or creates it. */
+  thread?: MessageThreadRecord;
 }): Promise<{ message: ConversationMessage; thread: MessageThreadRecord; relationError: string | null }> {
   const content = String(input.body || "").trim();
   if (!content) throw new Error("Write something to post.");
   const author = await currentConversationAuthor();
-  const thread = await ensureConversationThread(input.anchor, author);
+  const thread = input.thread ?? await ensureConversationThread(input.anchor, author);
   const result = await appendMessageToThread(thread, (sequenceNumber, now) => ({
     id: conversationMessageId(thread.id, sequenceNumber),
     messageKind: "comment",
@@ -1627,6 +1632,65 @@ export async function appendConversationMessage(input: {
   return { message: toConversationMessage(result.message), thread: result.thread, relationError };
 }
 
+/** One page of conversation threads of a kind, newest activity first. */
+export async function loadConversationThreadPage(threadKind: string, nextToken: string | null, limit = 20): Promise<{ items: MessageThreadRecord[]; nextToken: string | null }> {
+  type ThreadConnectionResponse = { listMessageThreadsByKindAndUpdatedAt?: { items?: Array<MessageThreadRecord | null> | null; nextToken?: string | null } | null };
+  const response = await runGraphql<ThreadConnectionResponse>(LIST_MESSAGE_THREADS_BY_KIND_AND_UPDATED_AT_QUERY, { threadKind, sortDirection: "DESC", limit, nextToken });
+  const connection = response.listMessageThreadsByKindAndUpdatedAt;
+  const items = ((connection?.items ?? []).filter(Boolean) as MessageThreadRecord[]).map(normalizeThreadRecord).filter((thread) => thread.status !== "deleted");
+  return { items, nextToken: connection?.nextToken ?? null };
+}
+
+/** Every Message in a conversation thread, oldest first. */
+export async function loadConversationThreadMessages(threadId: string): Promise<ConversationMessage[]> {
+  const records = await listMessagesByThreadId(threadId, 500);
+  return records.filter((record) => record.status !== "deleted").map(toConversationMessage);
+}
+
+/** Starts a conversation about nothing but itself: its own thread, and its first Message. */
+export async function startUnattachedConversation(body: string): Promise<{ message: ConversationMessage; thread: MessageThreadRecord }> {
+  const content = String(body || "").trim();
+  if (!content) throw new Error("Write something to post.");
+  const author = await currentConversationAuthor();
+  const now = new Date().toISOString();
+  const id = `message-thread-conversation-new-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  const thread: MessageThreadRecord = {
+    id,
+    threadKind: GENERAL_CONVERSATION_KIND,
+    status: "active",
+    title: content.split("\n")[0].slice(0, 80),
+    createdBySub: author.sub,
+    createdByLabel: author.label,
+    messageCount: 0,
+    lastMessageId: null,
+    lastMessageAt: null,
+    metadata: JSON.stringify({ anchorKind: "none" }),
+    createdAt: now,
+    updatedAt: now,
+    newsroomFeedKey: CONVERSATION_FEED_KEY,
+  };
+  const created = await runGraphql<{ createMessageThread?: MessageThreadRecord | null }>(CREATE_MESSAGE_THREAD_MUTATION, { input: thread });
+  const saved = normalizeThreadRecord(created.createMessageThread ?? thread);
+  const result = await appendConversationMessage({ anchor: { kind: "none" }, body: content, thread: saved });
+  return { message: result.message, thread: result.thread };
+}
+
+/** The title and editorial stage of each Story, by lineage id. A Story that cannot be read has no entry. */
+export async function loadStoryHeaders(lineageIds: string[]): Promise<Map<string, { title: string; stage: string | null }>> {
+  const headers = new Map<string, { title: string; stage: string | null }>();
+  await Promise.all([...new Set(lineageIds)].map(async (lineageId) => {
+    try {
+      type Response = { listItemsByLineageAndVersion?: { items?: Array<{ versionNumber?: number | null; headline?: string | null; title?: string | null; stage?: string | null } | null> | null } | null };
+      const response = await runGraphql<Response>(`query StoryHeader($lineageId: ID!) { listItemsByLineageAndVersion(lineageId: $lineageId, limit: 50) { items { versionNumber headline title stage } } }`, { lineageId });
+      const items = (response.listItemsByLineageAndVersion?.items ?? []).filter(Boolean) as Array<{ versionNumber?: number | null; headline?: string | null; title?: string | null; stage?: string | null }>;
+      const newest = items.sort((left, right) => (right.versionNumber ?? 0) - (left.versionNumber ?? 0))[0];
+      const title = newest?.headline || newest?.title;
+      if (title) headers.set(lineageId, { title, stage: newest?.stage ?? null });
+    } catch { /* a Story that cannot be read keeps the title the thread was started with */ }
+  }));
+  return headers;
+}
+
 async function createCommentRelation(message: MessageRecord, anchor: ConversationAnchor): Promise<void> {
   if (anchor.kind === "none") return;
   const lineageId = anchor.lineageId.trim();
@@ -1843,10 +1907,17 @@ async function runGraphql<T extends Record<string, unknown>>(
   const client = generateClient<Schema>() as unknown as {
     graphql: (options: Record<string, unknown>) => Promise<{ data?: T | null; errors?: unknown[] | null }>;
   };
+  // The Amplify client rejects with the raw `{ data, errors }` response when the API returns errors; turn that into an
+  // Error carrying the API's own words, so a refusal is said in words instead of as an unknown failure.
   const response = await client.graphql({
     query,
     variables,
     authMode: USER_POOL_AUTH_MODE,
+  }).catch((failure: unknown) => {
+    if (failure && typeof failure === "object" && Array.isArray((failure as { errors?: unknown }).errors)) {
+      assertNoGraphQLErrors((failure as { errors: unknown[] }).errors);
+    }
+    throw failure;
   });
   assertNoGraphQLErrors(response.errors);
   return (response.data ?? {}) as T;
@@ -2082,17 +2153,15 @@ export async function loadEditorReferenceReviewDetails(lineageId: string) {
   configureAmplifyClient();
   const testMock = getTestEditorNewsroomMock();
   return loadReferenceReviewDetails(lineageId, {
-    relations: async (direction) => {
+    relations: async () => {
       if (testMock?.semanticRelations) return testMock.semanticRelations;
       return loadSemanticRelationsByState({
-        field: direction === "outgoing" ? "listSemanticRelationsBySubjectState" : "listSemanticRelationsByObjectState",
-        keyName: direction === "outgoing" ? "subjectStateKey" : "objectStateKey",
+        field: "listSemanticRelationsBySubjectState",
+        keyName: "subjectStateKey",
         keyValue: `reference#${lineageId}#current`,
-        query: direction === "outgoing" ? LIST_SEMANTIC_RELATIONS_BY_SUBJECT_STATE_QUERY : LIST_SEMANTIC_RELATIONS_BY_OBJECT_STATE_QUERY,
+        query: LIST_SEMANTIC_RELATIONS_BY_SUBJECT_STATE_QUERY,
       });
     },
-    message: async (id) => testMock?.messages ? testMock.messages.find((message) => message.id === id) ?? null : getMessageRecordById(id),
-    payloads: (id) => loadModelPayloadsForOwner("message", id, ["metadata"]),
   });
 }
 

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; }