@anthusai/papyrus 1.10.0 → 1.12.0

package/components/prospectus-account-chooser.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Check } from "lucide-react";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { LOCAL_PREVIEW_TENANTS, getLocalPreviewTenantId, setLocalPreviewTenantId } from "../lib/local-preview-tenant";
+import { loadProspectusAccountState, selectProspectusAccount, type ProspectusAccountState } from "../lib/prospectus-account-client";
+
+function previewAccountState(): ProspectusAccountState {
+  return {
+    status: "signedIn",
+    publishingAccounts: LOCAL_PREVIEW_TENANTS.map(tenant => ({ accountId: tenant.accountId, name: tenant.name, role: tenant.role })),
+    selectedAccountId: getLocalPreviewTenantId(),
+    cyclotronLabAccess: true,
+  };
+}
+
+const ACCOUNT_STATE_EVENT = "papyrus:prospectus-account-state";
+
+function summaryOf(state: ProspectusAccountState): string | null {
+  if (state.status !== "signedIn") return null;
+  const selected = state.publishingAccounts.find(account => account.accountId === state.selectedAccountId);
+  return selected ? `${selected.name ?? selected.accountId} · ${roleLabel(selected.role)}` : "Choose an account";
+}
+
+const roleLabel = (role: string) => role.replace(/_/g, " ");
+
+/** The signed-in person's current publishing account as "Name · role", or null when the site has no Prospectus accounts. */
+export function useProspectusAccountSummary(): string | null {
+  const [summary, setSummary] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    const returnPath = `${window.location.pathname}${window.location.search}`;
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath)).then(loaded => {
+      if (!cancelled) setSummary(summaryOf(loaded));
+    });
+    const onChange = (event: Event) => setSummary(summaryOf((event as CustomEvent<ProspectusAccountState>).detail));
+    window.addEventListener(ACCOUNT_STATE_EVENT, onChange);
+    return () => { cancelled = true; window.removeEventListener(ACCOUNT_STATE_EVENT, onChange); };
+  }, []);
+  return summary;
+}
+
+/**
+ * The publishing account the signed-in person is acting as. It appears only on sites that have Prospectus
+ * accounts configured; a site with its own user pool never shows it. Choosing an account records the choice
+ * in the sign-in session and reloads so every page reads the new account.
+ */
+export function ProspectusAccountChooser() {
+  const [state, setState] = useState<ProspectusAccountState>({ status: "unavailable" });
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    const returnPath = `${window.location.pathname}${window.location.search}`;
+    (isLocalPreviewEnabled() ? Promise.resolve(previewAccountState()) : loadProspectusAccountState(returnPath))
+      .then(loaded => { if (!cancelled) setState(loaded); });
+    return () => { cancelled = true; };
+  }, []);
+  if (state.status === "unavailable") return null;
+  if (state.status === "signedOut") {
+    return <div className="organizer-account-chooser" data-prospectus-account-chooser="signed-out">
+      <a className="organizer-account-chooser-link" href={state.signInUrl}>Sign in with Prospectus</a>
+    </div>;
+  }
+  const choose = async (accountId: string) => {
+    if (accountId === state.selectedAccountId || pending) return;
+    setPending(accountId); setError(null);
+    if (isLocalPreviewEnabled()) {
+      setLocalPreviewTenantId(accountId);
+      window.location.reload();
+      return;
+    }
+    const result = await selectProspectusAccount(accountId);
+    setPending(null);
+    if ("error" in result) { setError(result.error); return; }
+    window.location.reload();
+  };
+  return <div className="organizer-account-chooser" data-prospectus-account-chooser="signed-in">
+    <p className="organizer-account-chooser-heading">Publishing account</p>
+    {state.publishingAccounts.length === 0
+      ? <p className="organizer-account-chooser-note">No publishing accounts yet.</p>
+      : <ul role="listbox" aria-label="Publishing account">
+        {state.publishingAccounts.map(account => {
+          const selected = account.accountId === state.selectedAccountId;
+          return <li key={account.accountId} role="presentation">
+            <button aria-selected={selected} data-selected={selected || undefined} disabled={pending !== null} onClick={() => { void choose(account.accountId); }} role="option" type="button">
+              <span><strong>{account.name ?? account.accountId}</strong><small>{roleLabel(account.role)}</small></span>
+              {selected ? <Check size={14} aria-label="Selected" /> : null}
+            </button>
+          </li>;
+        })}
+      </ul>}
+    {!state.selectedAccountId && state.publishingAccounts.length > 0 ? <p className="organizer-account-chooser-note">Choose the account you are working as.</p> : null}
+    {state.cyclotronLabAccess ? <p className="organizer-account-chooser-note" data-cyclotron-lab-access>Cyclotron lab access is on for you.</p> : null}
+    {error ? <p className="organizer-account-chooser-note" role="alert">{error}</p> : null}
+  </div>;
+}

package/components/reference-cyclotron-status.tsx

@@ -48,14 +48,14 @@ export function ReferenceCyclotronStatus({
     <section aria-label="Relevance cyclotron" className="space-y-2" data-reference-cyclotron-status>
       <CyclotronStatusView status={status} />
       {stale ? (
-        <p className="text-xs text-muted-foreground" data-reference-cyclotron-status-stale>
+        <p className="text-xs text-foreground" data-reference-cyclotron-status-stale>
           <span aria-hidden="true">⚠ </span>
           Snapshot from {Math.round(ageHours)} hours ago; the next sweep refreshes it.
         </p>
       ) : null}
       <button
         aria-expanded={open}
-        className="text-xs text-muted-foreground underline underline-offset-4"
+        className="text-xs text-foreground underline underline-offset-4"
         onClick={() => setOpen((value) => !value)}
         type="button"
       >
@@ -75,7 +75,7 @@ export function ReferenceCyclotronStatus({
               }}
             >
               <label className="flex flex-col gap-1">
-                <span className="text-xs text-muted-foreground">Review rate for confident decisions</span>
+                <span className="text-xs text-foreground">Review rate for confident decisions</span>
                 <select aria-label="Manual review rate" onChange={(event) => setRate(Number(event.target.value))} value={rate}>
                   {RATE_CHOICES.map((choice) => (
                     <option key={choice} value={choice}>{Math.round(choice * 100)}%</option>
@@ -83,7 +83,7 @@ export function ReferenceCyclotronStatus({
                 </select>
               </label>
               <label className="flex flex-col gap-1">
-                <span className="text-xs text-muted-foreground">For</span>
+                <span className="text-xs text-foreground">For</span>
                 <select aria-label="How long the manual rate lasts" onChange={(event) => setDays(Number(event.target.value))} value={days}>
                   {DAY_CHOICES.map((choice) => (
                     <option key={choice} value={choice}>{choice} day{choice === 1 ? "" : "s"}</option>
@@ -96,7 +96,7 @@ export function ReferenceCyclotronStatus({
                   Clear manual rate
                 </button>
               ) : null}
-              <p className="basis-full text-xs text-muted-foreground">
+              <p className="basis-full text-xs text-foreground">
                 Low-confidence decisions and the random audit share are always reviewed.
               </p>
               {message ? <p className="basis-full text-xs" role="status">{message}</p> : null}

package/components/reference-cyclotron-suggestion.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import {
+  curationForSuggestionChoice,
+  type DelegatedCuration,
+  provenanceSummary,
+  suggestionConfidenceWords,
+  type SuggestionChoice,
+} from "../lib/cyclotron-suggestions";
+import type { RelevanceCuration, RelevanceDecisionView } from "../lib/relevance-decisions";
+
+const RULE_BUTTON_CLASS =
+  "border border-foreground px-3 py-1 text-sm font-semibold text-foreground underline-offset-4 hover:underline disabled:cursor-not-allowed disabled:opacity-100 disabled:line-through";
+
+/** UTC and fixed-format so server and browser render the same words. */
+export function formatSuggestionTime(instant: string | null): string {
+  if (!instant) return "time not recorded";
+  const parsed = new Date(instant);
+  if (Number.isNaN(parsed.getTime())) return "time not recorded";
+  return `${parsed.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+
+/** The one-line suggestion in a queue row. Never worded as a decision. */
+export function ReferenceSuggestionRowLine({
+  decision,
+  referenceLineageId,
+}: {
+  decision: RelevanceDecisionView;
+  referenceLineageId: string;
+}) {
+  return (
+    <p className="mt-1 text-xs text-foreground" data-reference-suggestion-row={referenceLineageId}>
+      <span className="font-semibold">Suggestion:</span> {decision.label}, {suggestionConfidenceWords(decision)}
+    </p>
+  );
+}
+
+/**
+ * The detail's Suggestion block. Agree and Overrule go through the ordinary
+ * accept and reject actions; nothing changes until an editor clicks.
+ */
+export function ReferenceSuggestionBlock({
+  decision,
+  disabled,
+  onCurate,
+  referenceLineageId,
+  statusLabel,
+  settled,
+}: {
+  decision: RelevanceDecisionView;
+  disabled?: boolean;
+  onCurate?: (curation: RelevanceCuration) => void;
+  referenceLineageId: string;
+  statusLabel: string;
+  settled: boolean;
+}) {
+  const choose = (choice: SuggestionChoice) => onCurate?.(curationForSuggestionChoice(decision, choice));
+  const suggestsAccept = decision.positiveLabel !== null && decision.label === decision.positiveLabel;
+  return (
+    <section aria-label="Suggestion" className="space-y-2 border-y border-foreground py-3" data-reference-suggestion={referenceLineageId}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-foreground">Suggestion</h3>
+      <p className="text-sm text-foreground">
+        The cyclotron suggests <span className="font-semibold">{decision.label}</span> ({suggestionConfidenceWords(decision)}).
+      </p>
+      <p className="text-xs text-foreground" data-reference-suggestion-notice>
+        A suggestion never changes the status until an editor acts. This reference is {statusLabel.toLowerCase()}.
+      </p>
+      {!settled && onCurate ? (
+        <div className="flex flex-wrap gap-2">
+          <button
+            className={RULE_BUTTON_CLASS}
+            data-reference-suggestion-agree
+            disabled={disabled}
+            onClick={() => choose("agree")}
+            type="button"
+          >
+            Agree ({suggestsAccept ? "accept" : "reject"})
+          </button>
+          <button
+            className={RULE_BUTTON_CLASS}
+            data-reference-suggestion-overrule
+            disabled={disabled}
+            onClick={() => choose("overrule")}
+            type="button"
+          >
+            Overrule ({suggestsAccept ? "reject" : "accept"})
+          </button>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+/** The expandable "How this suggestion was made" block, from the recorded provenance. */
+export function ReferenceSuggestionProvenance({ decision }: { decision: RelevanceDecisionView }) {
+  const summary = provenanceSummary(decision);
+  return (
+    <details className="text-sm text-foreground" data-reference-suggestion-provenance>
+      <summary className="cursor-pointer font-semibold underline-offset-4 hover:underline">How this suggestion was made</summary>
+      {summary ? (
+        <ul className="mt-2 space-y-1">
+          <li>{summary.teachingLabelsSentence}.</li>
+          <li>{summary.primingExamplesSentence}.</li>
+          <li>Doctrine fingerprint {summary.doctrineShortHash ?? "not recorded"}.</li>
+          <li>Model {summary.modelVersion ?? "version not recorded"}.</li>
+          <li>Decided {formatSuggestionTime(summary.decidedAt)}.</li>
+        </ul>
+      ) : (
+        <p className="mt-2">This suggestion was made before the cyclotron recorded how. Only its model version and confidence are known.</p>
+      )}
+    </details>
+  );
+}
+
+/** Shown only when the latest curation of the reference was made by a signed-in person. */
+export function CountsAsTrainingLabelNote({ referenceLineageId }: { referenceLineageId: string }) {
+  return (
+    <p className="border-l-2 border-foreground pl-2 text-xs font-semibold text-foreground" data-reference-training-label={referenceLineageId}>
+      Counts as a training label: an editor made this decision, so the cyclotron learns from it.
+    </p>
+  );
+}
+
+/**
+ * Shown on a record an agent decided for a person under a delegation. The
+ * backend stamps it human, so it counts as that person's training label.
+ */
+export function DelegatedCurationNote({ delegated, referenceLineageId }: { delegated: DelegatedCuration; referenceLineageId: string }) {
+  return (
+    <section aria-label="Delegated decision" className="space-y-1 border-l-2 border-foreground pl-2 text-sm text-foreground" data-reference-delegated-curation={referenceLineageId}>
+      <p className="font-semibold">
+        Decided by {delegated.agent} on behalf of {delegated.person ?? "a person"}
+      </p>
+      {delegated.instruction ? <blockquote className="italic">&ldquo;{delegated.instruction}&rdquo;</blockquote> : null}
+      <p className="text-xs">Delegation {delegated.delegationShortId || "id not recorded"}.</p>
+      <p className="text-xs font-semibold" data-reference-training-label={referenceLineageId}>
+        {delegated.countsAsTrainingLabel
+          ? `Counts as a training label: the record is stamped as ${delegated.person ?? "the person"}'s own decision, so the cyclotron learns from it.`
+          : "Does not count as a training label."}
+      </p>
+    </section>
+  );
+}

package/components/reference-live-agreement.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  agreementStripState,
+  formatPercentage,
+  dailyCapWords,
+  loopStateWords,
+  type AgreementStripMeasurement,
+  type ShadowAgreement,
+} from "../lib/cyclotron-suggestions";
+import { formatSuggestionTime } from "./reference-cyclotron-suggestion";
+
+function MeasurementFigures({ measurement }: { measurement: AgreementStripMeasurement }) {
+  const figures: Array<[string, string]> = [
+    ["Agreement", formatPercentage(measurement.agreement)],
+    ["Precision", formatPercentage(measurement.precision)],
+    ["Recall", formatPercentage(measurement.recall)],
+    ["Comparisons", String(measurement.comparisons)],
+  ];
+  return (
+    <dl className="flex flex-wrap gap-x-6 gap-y-1">
+      {figures.map(([name, value]) => (
+        <div key={name}>
+          <dt className="text-xs font-semibold uppercase tracking-wide text-foreground">{name}</dt>
+          <dd className="text-base font-semibold text-foreground">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/**
+ * Live agreement at the top of References: how often the cyclotron's
+ * suggestions matched what editors then decided. Hidden without a payload.
+ */
+export function ReferenceLiveAgreement({ agreement }: { agreement: ShadowAgreement | null }) {
+  const state = agreementStripState(agreement);
+  if (state.kind === "hidden") return null;
+  return (
+    <section aria-label="Live agreement" className="shrink-0 space-y-2 border-y border-foreground py-3" data-reference-live-agreement={state.kind}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-foreground">Live agreement</h3>
+      {state.loop ? (
+        <p className="text-sm text-foreground" data-reference-live-agreement-loop>
+          <span className="font-semibold">{loopStateWords(state.loop)}</span>
+          {" · "}Last sweep {formatSuggestionTime(state.loop.lastSweepAt)}
+          {" · "}{dailyCapWords(state.loop)}
+        </p>
+      ) : null}
+      {state.stopReasonSentence ? (
+        <p className="text-sm font-semibold text-foreground" data-reference-live-agreement-stopped>{state.stopReasonSentence}</p>
+      ) : null}
+      {state.kind === "not_enough" ? (
+        <p className="text-sm text-foreground" data-reference-live-agreement-not-enough>
+          Not enough comparisons yet: {state.measurement.comparisons} of {state.needed} editor decisions have followed a suggestion. Figures appear at {state.needed}.
+        </p>
+      ) : <MeasurementFigures measurement={state.measurement} />}
+      <p className="text-xs text-foreground">
+        Suggestions compared with the decisions editors made afterwards. Computed {formatSuggestionTime(agreement?.computedAt ?? null)}.
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "../amplify/data/resource";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { createLocalPreviewReportingTrail } from "../lib/local-preview-seed";
+import { EMPTY_STORY_REPORTING_TRAIL, 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 };
+type GraphqlClient = { graphql: (options: Record<string, unknown>) => Promise<GraphqlResponse> };
+
+const USER_POOL = "userPool";
+const PAGE_LIMIT = 200;
+
+async function listAll(client: GraphqlClient, field: string, selection: string, variableDeclarations: string, fieldArguments: string, variables: Record<string, unknown>): Promise<Record<string, unknown>[]> {
+  const rows: Record<string, unknown>[] = [];
+  let nextToken: string | null = null;
+  do {
+    const response: GraphqlResponse = await client.graphql({
+      query: `query ($limit: Int, $nextToken: String${variableDeclarations}) { ${field}(limit: $limit, nextToken: $nextToken${fieldArguments}) { items { ${selection} } nextToken } }`,
+      variables: { ...variables, limit: PAGE_LIMIT, nextToken },
+      authMode: USER_POOL,
+    });
+    if (response.errors?.length) throw new Error(response.errors.map(error => error.message ?? "GraphQL error").join("; "));
+    const connection = response.data?.[field];
+    rows.push(...((connection?.items ?? []).filter(Boolean) as Record<string, unknown>[]));
+    nextToken = connection?.nextToken ?? null;
+  } while (nextToken);
+  return rows;
+}
+
+const text = (value: unknown): string | null => typeof value === "string" ? value : null;
+
+function parseMetadata(value: unknown): Record<string, unknown> {
+  if (typeof value === "string") {
+    try { const parsed = JSON.parse(value); return typeof parsed === "object" && parsed ? parsed as Record<string, unknown> : {}; } catch { return {}; }
+  }
+  return typeof value === "object" && value ? value as Record<string, unknown> : {};
+}
+
+async function getReference(client: GraphqlClient, referenceId: string): Promise<Record<string, unknown> | null> {
+  try {
+    const response = await client.graphql({ query: "query ($id: ID!) { getReference(id: $id) { id title sourceUri } }", variables: { id: referenceId }, authMode: USER_POOL });
+    return (response.data?.getReference as unknown as Record<string, unknown> | null) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** Reads the whole reporting trail of one story from the backend; the local preview serves a snapshot instead. */
+export async function loadStoryReportingTrail(lineageId: string, itemId: string): Promise<StoryReportingTrail> {
+  if (isLocalPreviewEnabled()) return createLocalPreviewReportingTrail(lineageId);
+  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, "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(() => []),
+  ]);
+  const versions: TrailVersion[] = versionRows.map(row => ({
+    id: String(row.id), versionNumber: Number(row.versionNumber ?? 0), versionState: text(row.versionState), status: text(row.status), stage: text(row.stage),
+    headline: text(row.headline) ?? text(row.title), changeReason: text(row.changeReason), versionCreatedBy: text(row.versionCreatedBy), versionCreatedAt: text(row.versionCreatedAt), updatedAt: text(row.updatedAt),
+  })).sort((left, right) => right.versionNumber - left.versionNumber);
+  const assignments: TrailAssignment[] = await Promise.all(assignmentRows.map(async row => {
+    const eventRows = await listAll(client, "listAssignmentEventsByAssignmentAndCreatedAt", "id eventType fromStatus toStatus actorLabel note createdAt", ", $assignmentId: ID!", ", assignmentId: $assignmentId", { assignmentId: row.id }).catch(() => []);
+    return {
+      id: String(row.id), title: String(row.title ?? ""), assignmentTypeKey: String(row.assignmentTypeKey ?? ""), status: String(row.status ?? ""), assigneeKey: text(row.assigneeKey), summary: text(row.summary), createdAt: String(row.createdAt ?? ""),
+      events: eventRows.map(event => ({ id: String(event.id), eventType: String(event.eventType ?? ""), fromStatus: text(event.fromStatus), toStatus: text(event.toStatus), actorLabel: text(event.actorLabel), note: text(event.note), createdAt: String(event.createdAt ?? "") })),
+    };
+  }));
+  const anchorFilters = [{ primaryAnchorLineageId: { eq: lineageId } }, ...assignments.map(assignment => ({ primaryAnchorId: { eq: assignment.id } }))];
+  const threadRows = await listAll(client, "listMessageThreads", "id title threadKind summary", ", $filter: ModelMessageThreadFilterInput", ", filter: $filter", { filter: { or: anchorFilters } }).catch(() => []);
+  const threads: TrailThread[] = await Promise.all(threadRows.map(async row => {
+    const messageRows = await listAll(client, "listMessagesByThreadAndSequence", "id messageKind authorLabel summary content createdAt sequenceNumber", ", $threadId: ID!", ", threadId: $threadId", { threadId: row.id }).catch(() => []);
+    return { id: String(row.id), title: text(row.title), threadKind: text(row.threadKind), summary: text(row.summary), messages: messageRows.map(message => ({ id: String(message.id), sequenceNumber: typeof message.sequenceNumber === "number" ? message.sequenceNumber : null, messageKind: text(message.messageKind), authorLabel: text(message.authorLabel), summary: text(message.summary), content: text(message.content), createdAt: String(message.createdAt ?? "") })) };
+  }));
+  const referenceRelations = relationRows.filter(relation => relation.predicate === "uses_evidence" && relation.subjectLineageId === lineageId && relation.objectKind === "reference");
+  const references: TrailReference[] = await Promise.all(referenceRelations.map(async relation => {
+    const metadata = parseMetadata(relation.metadata);
+    const referenceRow = await getReference(client, String(relation.objectId));
+    return {
+      relationId: String(relation.id), predicate: String(relation.predicate ?? ""), referenceId: String(relation.objectId), referenceLineageId: text(relation.objectLineageId),
+      title: text(referenceRow?.title), sourceUri: text(referenceRow?.sourceUri),
+      role: metadata.role === "cited" ? "cited" as const : "consulted" as const, note: text(metadata.note), citationKey: text(metadata.citationKey), addedBy: text(metadata.addedBy), addedAt: text(metadata.addedAt),
+    };
+  }));
+  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 };
+}

package/components/story-reporting-trail.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { storyMessageFeed, storyReportingTrailIsEmpty, type StoryReportingTrail, type TrailReference } from "../lib/story-reporting-trail";
+import { loadStoryReportingTrail } from "./story-reporting-trail-client";
+
+const timestampFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+function formatTimestamp(value: string | null | undefined): string {
+  if (!value) return "";
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? value : timestampFormat.format(parsed);
+}
+
+function ReferenceSummary({ citedKeys, demo, focused, reference }: { citedKeys: readonly string[]; demo: boolean; focused: boolean; reference: TrailReference }) {
+  return <>
+    <div className="story-trail-row">
+      <strong>{reference.title ?? reference.referenceId}</strong>
+      <span className="story-trail-chip" data-story-trail-reference-role={reference.role}>{reference.role === "cited" ? "Cited" : "Consulted"}</span>
+      {reference.citationKey && citedKeys.includes(reference.citationKey) && <span className="story-trail-chip">In the text</span>}
+    </div>
+    <div className="story-trail-meta">{[reference.addedBy && `added by ${reference.addedBy}`, formatTimestamp(reference.addedAt), reference.citationKey && `citation key ${reference.citationKey}`].filter(Boolean).join(" · ")}</div>
+    {reference.note && <p data-story-trail-reference-summary={focused ? "focused" : undefined}>{reference.note}</p>}
+    {reference.sourceUri && <div className="story-trail-meta">{reference.sourceUri}</div>}
+    {reference.referenceLineageId && <Link href={getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(reference.referenceLineageId)}`, demo)}>Open the full reference page</Link>}
+  </>;
+}
+
+function TrailSection({ count, children, title }: { count: number; children: React.ReactNode; title: string }) {
+  return <section className="story-trail-section" data-story-trail-section={title.toLowerCase()}>
+    <h3>{title} <small>{count}</small></h3>
+    {count ? children : <p className="story-trail-empty">None recorded.</p>}
+  </section>;
+}
+
+/**
+ * The messages and references of one story: draft versions, the assignments and agent events that did the work,
+ * notes and packets, the references behind it, and attached files. Container queries lay the sections out
+ * in one column in a narrow Board panel and side by side on a wide page.
+ */
+export function StoryReportingTrailView({ citedKeys = [], demo = false, focusedReferenceId = null, itemId, lineageId, onOpenVersion, onShowReference, view = "messages" }: { citedKeys?: readonly string[]; demo?: boolean; focusedReferenceId?: string | null; itemId: string; lineageId: string | null | undefined; onOpenVersion?: (versionId: string) => void; onShowReference?: (referenceId: string) => void; view?: "messages" | "references" }) {
+  const [trail, setTrail] = useState<StoryReportingTrail | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setTrail(null); setError(null);
+    loadStoryReportingTrail(lineageId || itemId, itemId)
+      .then(loaded => { if (!cancelled) setTrail(loaded); })
+      .catch((reason: unknown) => { if (!cancelled) setError(reason instanceof Error ? reason.message : "Could not load the reporting trail."); });
+    return () => { cancelled = true; };
+  }, [itemId, lineageId]);
+  if (error) return <p role="alert" className="story-trail-empty">{error}</p>;
+  if (!trail) return <p className="story-trail-empty">Loading the reporting trail…</p>;
+  const messageFeed = storyMessageFeed(trail);
+  if (view === "references") return <div className="story-trail" data-story-trail data-story-trail-view="references">
+    <TrailSection count={trail.references.length} title="References">
+      <ul className="story-trail-list" data-story-references-list>
+        {trail.references.map(reference => <li data-story-reference-entry={reference.referenceId} data-story-reference-focused={reference.referenceId === focusedReferenceId ? "true" : undefined} key={reference.relationId} ref={reference.referenceId === focusedReferenceId ? node => node?.scrollIntoView({ block: "nearest" }) : undefined}>
+          <ReferenceSummary citedKeys={citedKeys} demo={demo} focused={reference.referenceId === focusedReferenceId} reference={reference} />
+        </li>)}
+      </ul>
+    </TrailSection>
+  </div>;
+  return <div className="story-trail" data-story-trail data-story-trail-view="messages">
+    {storyReportingTrailIsEmpty(trail) && <p className="story-trail-empty">No messages have been recorded for this story yet. Notes and packets, the work done on it, its draft versions and the references behind it appear here as agents and editors work on it.</p>}
+    <TrailSection count={messageFeed.length} title="Messages">
+      <ol className="story-trail-list" data-story-trail-feed>
+        {messageFeed.map(entry => entry.entryKind === "reference"
+          ? <li data-story-trail-feed-reference={entry.reference.referenceId} key={entry.id}>
+            <div className="story-trail-row"><span className="story-trail-chip">Reference found</span><span className="story-trail-meta">{formatTimestamp(entry.createdAt)}</span></div>
+            <ReferenceSummary citedKeys={citedKeys} demo={demo} focused={false} reference={entry.reference} />
+            {onShowReference && <button className="newsroom-article-link-button" data-story-trail-show-reference={entry.reference.referenceId} onClick={() => onShowReference(entry.reference.referenceId)} type="button">Show in the References list</button>}
+          </li>
+          : <li key={entry.id}>
+            <div className="story-trail-row"><strong>{entry.authorLabel ?? "Unknown author"}</strong>{entry.messageKind && <span className="story-trail-chip">{entry.messageKind.replace(/_/g, " ")}</span>}<span className="story-trail-meta">{formatTimestamp(entry.createdAt)}</span></div>
+            {entry.summary && <p><strong>{entry.summary}</strong></p>}
+            {entry.content && <details className="story-trail-message" open={messageFeed.length <= 3}><summary>Show the message</summary><pre>{entry.content}</pre></details>}
+          </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}>
+          <div className="story-trail-row"><strong>Version {version.versionNumber}</strong>{versionIndex === 0 && <span className="story-trail-chip">Latest</span>}<span className="story-trail-chip">{version.versionState ?? "draft"}</span>{version.stage && <span className="story-trail-chip">{version.stage}</span>}</div>
+          <div className="story-trail-meta">{[formatTimestamp(version.versionCreatedAt ?? version.updatedAt), version.versionCreatedBy, version.changeReason].filter(Boolean).join(" · ")}</div>
+          {onOpenVersion
+            ? <button className="newsroom-article-link-button" data-story-trail-open-version={version.versionNumber} onClick={() => onOpenVersion(version.id)} type="button">{versionIndex === 0 ? "Open the latest version" : "Open this older version (read-only)"}</button>
+            : <Link href={getNewsroomNavHref(`/newsroom/articles/${encodeURIComponent(version.id)}`, demo)}>{versionIndex === 0 ? "Open the latest version" : "Open this older version (read-only)"}</Link>}
+        </li>)}
+      </ol>
+    </TrailSection>
+    <TrailSection count={trail.assignments.length} title="Work">
+      <ol className="story-trail-list">
+        {trail.assignments.map(assignment => <li key={assignment.id}>
+          <div className="story-trail-row"><strong>{assignment.title}</strong> <span className="story-trail-chip">{assignment.status}</span></div>
+          <div className="story-trail-meta">{[assignment.assignmentTypeKey, assignment.assigneeKey, formatTimestamp(assignment.createdAt)].filter(Boolean).join(" · ")}</div>
+          {assignment.summary && <p>{assignment.summary}</p>}
+          {assignment.events.length > 0 && <ol className="story-trail-events">
+            {assignment.events.map(event => <li key={event.id}>
+              <span className="story-trail-meta">{formatTimestamp(event.createdAt)}</span> {event.eventType}{event.toStatus ? ` → ${event.toStatus}` : ""}{event.actorLabel ? ` by ${event.actorLabel}` : ""}{event.note ? `: ${event.note}` : ""}
+            </li>)}
+          </ol>}
+          <Link href={getNewsroomNavHref(`/newsroom/assignments/${encodeURIComponent(assignment.id)}`, demo)}>Open assignment</Link>
+        </li>)}
+      </ol>
+    </TrailSection>
+    <TrailSection count={trail.attachments.length} title="Files">
+      <ul className="story-trail-list">
+        {trail.attachments.map(attachment => <li key={attachment.id}><strong>{attachment.filename ?? attachment.id}</strong> <span className="story-trail-meta">{[attachment.role, attachment.mediaType].filter(Boolean).join(" · ")}</span></li>)}
+      </ul>
+    </TrailSection>
+  </div>;
+}