@anthusai/papyrus 1.4.0-next.4 → 1.4.0-next.6

package/components/priming-proof-page.tsx

@@ -4,15 +4,24 @@ import {
   type PrimingProofReport,
 } from "../lib/priming-proof-report";
 
-function ProofMethod({ heldOutSize, teachingSource }: { heldOutSize: number | null; teachingSource: string | null }) {
+function ProofMethod({ heldOutSize, teachingSource, design }: { heldOutSize: number | null; teachingSource: string | null; design: string | null }) {
   return (
     <section aria-labelledby="priming-proof-method" className="space-y-2 text-sm leading-relaxed">
       <h2 id="priming-proof-method" className="text-base font-semibold uppercase tracking-wide">How the number is made</h2>
-      <p>
-        Editors already decided which candidate sources belong in this publication. A fixed, balanced sample of those
-        decisions{heldOutSize === null ? "" : ` (${heldOutSize} sources)`} is frozen as the held-out set and never used
-        for teaching. A classifier that always gives the same answer agrees on half of it.
-      </p>
+      {design === null ? (
+        <p>
+          Editors already decided which candidate sources belong in this publication. A fixed, balanced sample of those
+          decisions{heldOutSize === null ? "" : ` (${heldOutSize} sources)`} is frozen as the held-out set and never used
+          for teaching. A classifier that always gives the same answer agrees on half of it.
+        </p>
+      ) : (
+        <p>
+          Editors already decided which candidate sources belong in this publication
+          {heldOutSize === null ? "" : `, ${heldOutSize} of them`}. Design: {design}. No source is ever judged by a
+          classifier that was taught from that same source. The two outcomes are not equally common, so read agreement
+          beside precision and recall: a classifier that always gives the majority answer would still agree often.
+        </p>
+      )}
       <p>
         Editors teach the classifier with labels: their other reviews of candidate sources, and sources they paste,
         check after Papyrus extracts them, and mark publish or reject.
@@ -33,7 +42,7 @@ export function PrimingProofPage({ report }: { report: PrimingProofReport | null
           <h1 className="text-3xl font-bold">Does teaching the classifier work?</h1>
           <p className="text-muted-foreground">No approved proof run has been published for this publication yet.</p>
         </header>
-        <ProofMethod heldOutSize={null} teachingSource={null} />
+        <ProofMethod heldOutSize={null} teachingSource={null} design={null} />
       </main>
     );
   }
@@ -84,7 +93,7 @@ export function PrimingProofPage({ report }: { report: PrimingProofReport | null
           </table>
         </div>
       </section>
-      <ProofMethod heldOutSize={report.heldOut.size} teachingSource={report.priming.source} />
+      <ProofMethod heldOutSize={report.heldOut.size} teachingSource={report.priming.source} design={report.heldOut.design ?? null} />
       <p className="break-all text-xs text-muted-foreground">
         Held-out fingerprint {report.heldOut.fingerprint}
         {report.priming.fingerprint ? ` · labels fingerprint ${report.priming.fingerprint}` : ""}

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