@anthusai/papyrus 5.56.1 → 5.58.0

package/components/notification-cards.tsx

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

package/components/reference-conversation.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ConversationThread } from "./conversation-thread";
+import { useConversation } from "./use-conversation";
+
+/**
+ * The Messages about one Reference, under its review card. Shows nothing where no conversation store is provided.
+ * `onCount` tells the feed how many Messages there are, so its card count follows what is written here.
+ */
+export function ReferenceConversation({ disabledReason = null, lineageId, onCount, referenceId, title }: {
+  disabledReason?: string | null;
+  lineageId: string;
+  onCount?: (lineageId: string, count: number) => void;
+  /** The Reference version's id, when it differs from the lineage id. */
+  referenceId?: string;
+  title?: string;
+}) {
+  const conversation = useConversation({ kind: "reference", lineageId, title, ...(referenceId ? { id: referenceId } : {}) });
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 60000);
+    return () => window.clearInterval(timer);
+  }, []);
+  const settled = conversation.messages.filter((message) => !message.pending).length;
+  useEffect(() => {
+    if (conversation.state === "ready") onCount?.(lineageId, settled);
+  }, [conversation.state, lineageId, onCount, settled]);
+  if (!conversation.available) return null;
+  return (
+    <div data-reference-conversation={lineageId}>
+      <ConversationThread
+        disabledReason={disabledReason}
+        error={conversation.error}
+        messages={conversation.messages}
+        now={now}
+        onPost={conversation.post}
+        onRetry={conversation.retry}
+        state={conversation.state}
+      />
+    </div>
+  );
+}

package/components/reference-feed.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { InfoIcon, Loader2Icon } from "lucide-react";
+import { InfoIcon, Loader2Icon, MessageSquareIcon } 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, isAutoAccepted, normalizeReferenceCurationStatus, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
@@ -20,11 +20,12 @@ import { referenceDisplayTitle } from "../lib/newsroom-references";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
 import { cn } from "../lib/utils";
 import { predictionFromDecision, type ReviewChoice } from "./reference-review-card";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { CaptureBadge } from "./reference-capture-panel";
 import { AutoAcceptedBadge } from "./auto-accepted-badge";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
 import type { CaptureStatus } from "../lib/reference-capture";
+import { messageCountLabel } from "../lib/conversation";
 
 /**
  * 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
@@ -56,6 +57,8 @@ export type ReferenceFeedProps = {
   disabledReason?: string | null;
   /** True while the first read is in flight: cards are skeletons. */
   loading?: boolean;
+  /** How many Messages each Reference has, by lineage id. A card with none shows no count. */
+  messageCounts?: ReadonlyMap<string, number>;
   now: number;
   onOpen: (lineageId: string) => void;
   onRate: (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null) => Promise<void> | void;
@@ -199,8 +202,61 @@ export function FeedImage({ host, lead, name, src }: { host: string | null; lead
   );
 }
 
+/**
+ * The standard Reference header: its picture, source, headline, dek and age. The feed card wraps it in the button that opens the
+ * Reference, and the Messages page shows it under a conversation as the thing the conversation is about. No decision controls.
+ */
+export function ReferenceCardHeader({ capture, lead = false, messageCount = 0, now, preview, reference, titleId }: {
+  capture?: CaptureStatus | undefined;
+  lead?: boolean;
+  messageCount?: number;
+  now: number;
+  preview: ReferencePreview | undefined;
+  reference: ReferenceRecord;
+  titleId?: string;
+}) {
+  const host = referenceSourceHost(reference);
+  const site = preview?.siteName ?? host ?? "Unknown source";
+  const title = referenceDisplayTitle(reference);
+  const dek = referenceDek(reference, preview);
+  const showDek = dekAddsInformation(title, dek, preview?.imageUrl ?? null);
+  const time = referenceDisplayTime(reference);
+  const age = formatFeedAge(time, now);
+  return (
+    <>
+        <FeedImage host={host} lead={lead} name={site} src={preview?.imageUrl ?? null} />
+        <span className={cn("flex flex-1 flex-col gap-2.5", lead ? "p-5 @[36rem]:p-7" : "p-5")}>
+          <span className="flex items-center gap-2 text-xs font-medium text-muted-foreground" data-feed-source>
+            <SourceMark host={host} />
+            <span className="truncate">{site}</span>
+          </span>
+          <span className={cn("font-bold leading-[1.15] tracking-tight text-foreground", lead ? "line-clamp-3 text-2xl @[36rem]:text-3xl @[60rem]:text-4xl" : "line-clamp-3 text-xl")} data-feed-title id={titleId}>
+            {title}
+          </span>
+          {showDek ? <span className={cn("text-muted-foreground", lead ? "line-clamp-3 text-base" : "line-clamp-2 text-sm")} data-feed-dek>{dek}</span> : null}
+          <span className="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-1 text-xs text-muted-foreground">
+            <span>
+              {age ? <time dateTime={new Date(time ?? now).toISOString()} title={new Date(time ?? now).toLocaleString()}>{age}</time> : null}
+              {age && host ? <span aria-hidden="true"> · </span> : null}
+              {host}
+            </span>
+            {capture ? <CaptureBadge status={capture} /> : null}
+            {messageCount > 0 ? (
+              <span aria-label={messageCountLabel(messageCount)} className="inline-flex items-center gap-1 tabular-nums" data-feed-message-count={messageCount} role="img">
+                <MessageSquareIcon aria-hidden="true" className="size-3.5" />
+                {messageCount}
+              </span>
+            ) : null}
+            {isAutoAccepted(reference) ? <AutoAcceptedBadge actor={reference.curationStatusUpdatedBy} reason={reference.curationStatusReason} /> : null}
+          </span>
+        </span>
+    </>
+  );
+}
+
 export function FeedCard({
   capture,
+  messageCount = 0,
   decision,
   disabledReason,
   item,
@@ -216,6 +272,8 @@ export function FeedCard({
 }: {
   /** Optional: the capture badge. */
   capture?: CaptureStatus | undefined;
+  /** Optional: how many Messages this Reference has. */
+  messageCount?: number;
   decision: RelevanceDecisionView | undefined;
   disabledReason: string | null;
   item: FeedItem;
@@ -277,54 +335,26 @@ export function FeedCard({
         onClick={onOpen}
         type="button"
       >
-        <FeedImage host={host} lead={lead} name={site} src={preview?.imageUrl ?? null} />
-        <span className={cn("flex flex-1 flex-col gap-2.5", lead ? "p-5 @[36rem]:p-7" : "p-5")}>
-          <span className="flex items-center gap-2 text-xs font-medium text-muted-foreground" data-feed-source>
-            <SourceMark host={host} />
-            <span className="truncate">{site}</span>
-          </span>
-          <span className={cn("font-bold leading-[1.15] tracking-tight text-foreground", lead ? "line-clamp-3 text-2xl @[36rem]:text-3xl @[60rem]:text-4xl" : "line-clamp-3 text-xl")} data-feed-title id={titleId}>
-            {title}
-          </span>
-          {showDek ? <span className={cn("text-muted-foreground", lead ? "line-clamp-3 text-base" : "line-clamp-2 text-sm")} data-feed-dek>{dek}</span> : null}
-          <span className="mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-1 text-xs text-muted-foreground">
-            <span>
-              {age ? <time dateTime={new Date(time ?? now).toISOString()} title={new Date(time ?? now).toLocaleString()}>{age}</time> : null}
-              {age && host ? <span aria-hidden="true"> · </span> : null}
-              {host}
-            </span>
-            {capture ? <CaptureBadge status={capture} /> : null}
-            {isAutoAccepted(reference) ? <AutoAcceptedBadge actor={reference.curationStatusUpdatedBy} reason={reference.curationStatusReason} /> : null}
-          </span>
-        </span>
+        <ReferenceCardHeader capture={capture} lead={lead} messageCount={messageCount} now={now} preview={preview} reference={reference} titleId={titleId} />
       </button>
 
       <div className="relative bg-[var(--feed-footer)] px-4 pb-4 pt-3" data-feed-actions>
-        <RatingGrid
+        <DecisionControl
           answer={chosen}
           decided={answer}
           disabled={Boolean(disabledReason)}
           disabledReason={disabledReason}
           feedback={feedback}
+          needsReason={rating.askReason}
           note={reasonLabel ? `Reason: ${reasonLabel}` : null}
           onChoose={(choice) => { if (!disabledReason) store.choose(item.lineageId, choice); }}
+          onReasonChange={(text) => store.setNote(item.lineageId, text)}
+          onReasonCommit={() => { if (!disabledReason) store.commitNote(item.lineageId); }}
           prediction={decision ? predictionFromDecision(decision) : predictionLoading ? { state: "loading" } : { state: "none" }}
+          reason={rating.note ?? ""}
+          reasonRequiredFor="reject"
           statusOverlay
         />
-        {rating.askReason ? (
-          // Covers the footer rather than adding to it, so asking for a reason never pushes the cards below it down.
-          <div className="absolute inset-0 z-10 flex flex-col justify-center space-y-2 bg-[var(--feed-footer)] p-3" data-review-reasons>
-            <p className="text-xs font-medium">Reason for rejecting. Choose one to save your Reject.</p>
-            <div className="flex flex-wrap gap-1.5">
-              {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-                <button className={cn(PILL, "min-h-8 bg-[var(--feed-control)] px-3 text-xs")} data-review-reason={code} key={code} onClick={() => store.setReason(item.lineageId, code)} type="button">
-                  {REASON_LABELS[code]}
-                </button>
-              ))}
-              <button className={cn(PILL, "min-h-8 px-3 text-xs text-muted-foreground")} onClick={() => store.cancelReason(item.lineageId)} type="button">Cancel</button>
-            </div>
-          </div>
-        ) : null}
       </div>
     </article>
   );
@@ -398,6 +428,7 @@ export function SectionHeading({ children, id }: { children: ReactNode; id: stri
 export function ReferenceFeed({
   disabledReason = null,
   loading = false,
+  messageCounts,
   now,
   onOpen,
   onRate,
@@ -426,6 +457,7 @@ export function ReferenceFeed({
       item={item}
       key={item.lineageId}
       lead={lead}
+      messageCount={messageCounts?.get(item.lineageId)}
       now={now}
       onOpen={() => onOpen(item.lineageId)}
       onRate={async (reference, choice, reasonCode) => { onVisitRated(item.lineageId); await onRate(reference, choice, reasonCode); }}

package/components/reference-review-card.tsx

@@ -2,20 +2,16 @@
 
 import {
   ArchiveIcon,
-  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  CircleCheckIcon,
-  CircleXIcon,
   ExternalLinkIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode, type PointerEvent as ReactPointerEvent } from "react";
 import { Button } from "./ui/button";
-import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import { cn } from "../lib/utils";
-import { RatingGrid } from "./review-rating-grid";
+import { DecisionControl } from "./decision-control";
 import { useRatingStore, type RatingController } from "./use-reference-ratings";
-import { REFERENCE_REJECTION_REASON_CODES, type ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
 
 export type ReviewChoice = "accept" | "reject";
 
@@ -31,96 +27,6 @@ export type ReviewCardDecision = {
   reasonCode: ReferenceRejectionReasonCode | null;
 };
 
-const REASON_LABELS: Record<ReferenceRejectionReasonCode, string> = {
-  out_of_scope: "Out of scope",
-  policy_exclusion: "Policy exclusion",
-  duplicate: "Duplicate",
-  low_quality: "Low quality",
-  unavailable: "Unavailable",
-  provenance: "Provenance",
-  other: "Other",
-};
-
-const CHOICE_LABEL: Record<ReviewChoice, string> = { accept: "Accept", reject: "Reject" };
-
-function percent(confidence: number | null): string | null {
-  return confidence === null ? null : `${Math.round(confidence * 100)}%`;
-}
-
-/**
- * The Cyclotron's read-only row: its Accept or Reject highlighted with its confidence, and a check or cross once a person has answered.
- * Shared by the review card and by every list that shows a suggestion before a decision.
- */
-export function CyclotronRow({ decided = null, prediction }: { decided?: ReviewChoice | null; prediction: CardPrediction }) {
-  const matched = decided && prediction.state === "ready" ? prediction.choice === decided : null;
-  return (
-    <div className="space-y-2" data-review-row="cyclotron">
-      <div className="flex items-center gap-3">
-        <span className="w-20 shrink-0 text-sm font-semibold">Cyclotron</span>
-        {prediction.state === "ready" ? (
-          <div className="flex flex-1 gap-2">
-            {(["accept", "reject"] as const).map((choice) => {
-              const predicted = prediction.state === "ready" && prediction.choice === choice;
-              const verdict = predicted && matched !== null ? (matched ? "match" : "miss") : null;
-              return (
-                <span
-                  className={cn(
-                    "inline-flex min-h-10 flex-1 items-center justify-center gap-1.5 rounded-md border px-3 text-sm",
-                    predicted ? "border-foreground bg-muted font-semibold" : "border-dashed text-muted-foreground",
-                    verdict === "match" && "border-green-700 bg-green-100 text-green-950",
-                    verdict === "miss" && "border-red-700 bg-red-100 text-red-950",
-                  )}
-                  data-cyclotron-choice={choice}
-                  data-predicted={predicted || undefined}
-                  data-verdict={verdict ?? undefined}
-                  key={choice}
-                >
-                  {verdict === "match" ? <CircleCheckIcon aria-hidden="true" className="size-4" /> : null}
-                  {verdict === "miss" ? <CircleXIcon aria-hidden="true" className="size-4" /> : null}
-                  {CHOICE_LABEL[choice]}
-                  {predicted && percent(prediction.confidence) ? <small className="text-xs font-normal">{percent(prediction.confidence)}</small> : null}
-                  {verdict ? <span className="sr-only">{verdict === "match" ? ", matches your answer" : ", differs from your answer"}</span> : null}
-                </span>
-              );
-            })}
-          </div>
-        ) : (
-          <p className="text-sm text-muted-foreground" data-cyclotron-state={prediction.state}>
-            {prediction.state === "loading" ? "Loading…" : prediction.state === "error" ? "Prediction unavailable" : "No prediction"}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** The two answers, large enough to tap: Accept and Reject, the chosen one filled and checked (never colour alone). */
-export function ChoiceButtons({ chosen, disabled = false, onChoose }: { chosen: ReviewChoice | null; disabled?: boolean; onChoose: (choice: ReviewChoice) => void }) {
-  return (
-    <div className="flex flex-1 gap-2">
-      {(["accept", "reject"] as const).map((choice) => {
-        const on = chosen === choice;
-        return (
-          <Button
-            aria-disabled={disabled ? true : undefined}
-            aria-pressed={on}
-            className="min-h-14 flex-1 text-base"
-            data-review-choice={choice}
-            key={choice}
-            onClick={() => onChoose(choice)}
-            type="button"
-            variant={on ? (choice === "accept" ? "default" : "destructive") : "outline"}
-          >
-            {on ? <CheckIcon aria-hidden="true" className="size-5" /> : null}
-            {CHOICE_LABEL[choice]}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-/** A reference's relevance decision in the card's own vocabulary. */
 export function predictionFromDecision(decision: { label: string; positiveLabel: string | null; confidence: number | null }): CardPrediction {
   return { state: "ready", choice: decision.label === (decision.positiveLabel ?? "include") ? "accept" : "reject", confidence: decision.confidence };
 }
@@ -181,10 +87,8 @@ export function ReviewCard({
   const store = ratings ?? local;
   const item = store.get(itemId);
   const note = item.note ?? initialNote;
-  const reason = item.reasonCode !== undefined ? item.reasonCode : initialReason;
   const chosen = item.pending ?? decided;
   const choose = (choice: ReviewChoice) => { if (!disabledReason) store.choose(itemId, choice); };
-  const chooseReason = (code: ReferenceRejectionReasonCode) => { if (!disabledReason) store.setReason(itemId, code); };
   const commitNote = () => { if (!disabledReason) store.commitNote(itemId); };
 
   // Desktop shortcuts: A accepts, R rejects. Never while typing.
@@ -222,53 +126,23 @@ export function ReviewCard({
         ) : null}
       </header>
 
-      <RatingGrid
+      <DecisionControl
         answer={chosen}
         decided={decided}
         disabled={Boolean(disabledReason)}
         disabledReason={disabledReason}
         feedback={item.feedback}
+        needsReason={item.askReason}
         onChoose={choose}
+        onReasonChange={(text) => store.setNote(itemId, text)}
+        onReasonCommit={commitNote}
         prediction={prediction}
+        reason={note}
+        reasonRequiredFor="reject"
         size="large"
         surface="card"
       />
 
-      <label className="block text-sm font-medium">
-        Why? (optional)
-        <AutoGrowTextarea
-          aria-label="Why? (optional)"
-          className="mt-1 block min-h-20 w-full rounded-[var(--feed-radius-lg,10px)] bg-[var(--feed-control)] p-3 text-base font-normal outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
-          onBlur={commitNote}
-          onChange={(event) => store.setNote(itemId, event.target.value)}
-          placeholder="Say what made this an easy yes or a clear no. Your note teaches the Cyclotron."
-          value={note}
-        />
-      </label>
-
-      {chosen === "reject" ? (
-        <div className="space-y-2" data-review-reasons>
-          <p className="text-sm font-medium">Reason for rejecting</p>
-          <div className="flex flex-wrap gap-2">
-            {REFERENCE_REJECTION_REASON_CODES.map((code) => (
-              <button
-                aria-disabled={disabledReason ? true : undefined}
-                aria-pressed={reason === code}
-                className={cn("inline-flex min-h-10 items-center gap-1.5 rounded-[var(--feed-radius-pill,8px)] px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", reason === code ? "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]" : "bg-[var(--feed-control)]")}
-                data-review-reason={code}
-                key={code}
-                onClick={() => chooseReason(code)}
-                type="button"
-              >
-                {reason === code ? <CheckIcon aria-hidden="true" className="size-4" /> : null}
-                {REASON_LABELS[code]}
-              </button>
-            ))}
-          </div>
-          {!reason && !note.trim() ? <p className="text-sm text-muted-foreground">Choose a reason, or say why above, to save your Reject.</p> : null}
-        </div>
-      ) : null}
-
       {children}
 
       {onArchive ? (

package/components/story-reporting-trail-client.ts

@@ -4,7 +4,7 @@ import { generateClient } from "aws-amplify/data";
 import type { Schema } from "../amplify/data/resource";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
 import { createLocalPreviewReportingTrail, createLocalPreviewStoriesForReference } from "../lib/local-preview-seed";
-import { EMPTY_STORY_REPORTING_TRAIL, referencesByRole, siteNameOf, type ReferenceStory, type StoryReportingTrail, type TrailAssignment, type TrailAttachment, type TrailReference, type TrailThread, type TrailVersion } from "../lib/story-reporting-trail";
+import { EMPTY_STORY_REPORTING_TRAIL, referencesByRole, siteNameOf, stageMovesOf, type ReferenceStory, type StoryReportingTrail, type TrailAssignment, type TrailAttachment, type TrailReference, type TrailThread, type TrailVersion } from "../lib/story-reporting-trail";
 import { configureAmplifyClient } from "./amplify-client-provider";
 
 type GraphqlResponse = { data?: Record<string, { items?: Record<string, unknown>[] | null; nextToken?: string | null } | null> | null; errors?: { message?: string }[] | null };
@@ -89,7 +89,7 @@ export async function loadStoryReportingTrail(lineageId: string, itemId: string,
   configureAmplifyClient();
   const client = generateClient<Schema>() as unknown as GraphqlClient;
   const [versionRows, assignmentRows, attachmentRows, relationRows] = await Promise.all([
-    listAll(client, "listItemsByLineageAndVersion", "id versionNumber versionState status stage headline title changeReason versionCreatedBy versionCreatedAt updatedAt", ", $lineageId: ID!", ", lineageId: $lineageId", { lineageId }).catch(() => []),
+    listAll(client, "listItemsByLineageAndVersion", "id versionNumber versionState status stage headline title changeReason versionCreatedBy versionCreatedAt updatedAt metadata", ", $lineageId: ID!", ", lineageId: $lineageId", { lineageId }).catch(() => []),
     listAll(client, "listAssignmentsByItemLineageAndCreatedAt", "id title assignmentTypeKey status assigneeKey summary createdAt", ", $itemLineageId: ID!", ", itemLineageId: $itemLineageId", { itemLineageId: lineageId }).catch(() => []),
     listAll(client, "listModelAttachmentsByOwnerRoleAndSortKey", "id role filename mediaType byteSize", ", $ownerId: ID!", ", ownerId: $ownerId", { ownerId: itemId }).catch(() => []),
     listAll(client, "listSemanticRelations", "id predicate subjectKind subjectLineageId objectKind objectId objectLineageId metadata", ", $filter: ModelSemanticRelationFilterInput", ", filter: $filter", { filter: { or: [{ subjectLineageId: { eq: lineageId } }, { objectLineageId: { eq: lineageId } }] } }).catch(() => []),
@@ -124,5 +124,6 @@ export async function loadStoryReportingTrail(lineageId: string, itemId: string,
     };
   })));
   const attachments: TrailAttachment[] = attachmentRows.map(row => ({ id: String(row.id), role: text(row.role), filename: text(row.filename), mediaType: text(row.mediaType), byteSize: typeof row.byteSize === "number" ? row.byteSize : null }));
-  return { ...EMPTY_STORY_REPORTING_TRAIL, versions, assignments, threads, references, attachments };
+  const latestRow = [...versionRows].sort((left, right) => Number(right.versionNumber ?? 0) - Number(left.versionNumber ?? 0))[0];
+  return { ...EMPTY_STORY_REPORTING_TRAIL, versions, assignments, threads, references, attachments, stageMoves: stageMovesOf(latestRow?.metadata) };
 }

package/components/story-reporting-trail.tsx

@@ -91,6 +91,14 @@ export function StoryReportingTrailView({ citedKeys = [], demo = false, focusedR
           </li>)}
       </ol>
     </TrailSection>
+    {trail.stageMoves.length > 0 && <TrailSection count={trail.stageMoves.length} title="Stage moves">
+      <ol className="story-trail-list" data-story-trail-stage-moves>
+        {[...trail.stageMoves].reverse().map(move => <li key={`${move.at}-${move.to}`}>
+          <div className="story-trail-row"><strong>{move.from ?? "start"} → {move.to}</strong>{move.by && <span className="story-trail-chip">{move.by}</span>}<span className="story-trail-meta">{formatTimestamp(move.at)}</span></div>
+          {move.reason && <p className="story-trail-meta">{move.reason}</p>}
+        </li>)}
+      </ol>
+    </TrailSection>}
     <TrailSection count={trail.versions.length} title="Draft versions">
       <ol className="story-trail-list">
         {trail.versions.map((version, versionIndex) => <li key={version.id}>