@anthusai/papyrus 5.57.0 → 5.59.0

package/components/conversation-thread.tsx

@@ -1,25 +1,29 @@
 "use client";
 
-import { Loader2Icon, MessageSquarePlusIcon, ReplyIcon, TriangleAlertIcon, CornerDownRightIcon } from "lucide-react";
+import { BanIcon, CheckIcon, Loader2Icon, MessageSquarePlusIcon, MessagesSquareIcon, PencilIcon, ReplyIcon, Trash2Icon, TriangleAlertIcon, CornerDownRightIcon, XIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { buildConversationTree, conversationAge, conversationAuthorName, type ConversationMessage } from "../lib/conversation";
+import { latestMessages } from "../lib/conversation-feed";
+import { buildConversationTree, canDeleteMessage, canEditMessage, conversationAge, messageAuthorName, type ConversationMessage, type ConversationViewer } from "../lib/conversation";
 import { cn } from "../lib/utils";
 import { AutoGrowTextarea } from "./ui/auto-grow-textarea";
 import type { ConversationState } from "./use-conversation";
 
-/** Flat pill buttons, like the feed's: a tone, never an outline. */
-const PILL = "inline-flex min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50";
-const PILL_PRIMARY = cn(PILL, "bg-[var(--primary)] text-[var(--primary-foreground)]");
-const PILL_QUIET = cn(PILL, "text-muted-foreground hover:text-foreground");
+/** The decision control's register: caption labels, md corners, a tone and never an outline. */
+const LABEL = "font-[family-name:var(--font-sans)] text-[10px] font-extrabold tracking-[0.07em] uppercase";
+const PILL = "inline-flex min-h-9 items-center justify-center gap-1.5 rounded-[var(--feed-radius-md,16px)] px-3.5 text-sm font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring disabled:opacity-[var(--feed-quiet,0.6)]";
+const PILL_PRIMARY = cn(PILL, "bg-[var(--primary)] font-semibold text-[var(--primary-foreground)]");
+const PILL_QUIET = cn(PILL, "text-muted-foreground hover:bg-[var(--feed-control)]/70 hover:text-foreground");
 
 /**
  * A box for writing a Message. The text clears the moment you post, so the Message shows at once; if the save fails the text comes
  * back (unless you have typed something new) with the reason, and nothing you wrote is lost.
  */
-function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label, onCancel, onSubmit, placeholder }: {
+export function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label, onCancel, onSubmit, placeholder, postBlockedReason }: {
   autoFocus?: boolean;
   buttonLabel: string;
   disabledReason?: string | null;
+  /** Something else the post needs first (a title): the box stays open for writing, the button waits, and the reason is said in words. */
+  postBlockedReason?: string | null;
   icon: "post" | "reply";
   label: string;
   onCancel?: () => void;
@@ -29,11 +33,11 @@ function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label,
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
   const Icon = icon === "post" ? MessageSquarePlusIcon : ReplyIcon;
-  const canPost = !disabledReason && draft.trim().length > 0;
+  const canPost = !disabledReason && !postBlockedReason && draft.trim().length > 0;
 
   async function submit() {
     const text = draft.trim();
-    if (!text || disabledReason) return;
+    if (!text || disabledReason || postBlockedReason) return;
     setDraft("");
     setError(null);
     try {
@@ -50,7 +54,7 @@ function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label,
       <AutoGrowTextarea
         aria-label={label}
         autoFocus={autoFocus}
-        className="block min-h-16 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"
+        className="block min-h-16 w-full rounded-[var(--feed-radius-md,16px)] border-0 bg-[var(--feed-control)] px-3 py-2 text-sm font-normal leading-5 outline-none placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring"
         disabled={Boolean(disabledReason)}
         onChange={(event) => setDraft(event.target.value)}
         onKeyDown={(event) => { if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) { event.preventDefault(); void submit(); } }}
@@ -64,6 +68,7 @@ function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label,
         </p>
       ) : null}
       {disabledReason ? <p className="text-sm text-muted-foreground">{disabledReason}</p> : null}
+      {postBlockedReason && draft.trim() ? <p className="text-sm text-muted-foreground" data-conversation-blocked>{postBlockedReason}</p> : null}
       <div className="flex flex-wrap items-center gap-2">
         <button className={PILL_PRIMARY} data-conversation-post={icon} disabled={!canPost} onClick={() => void submit()} type="button">
           <Icon aria-hidden="true" className="size-4" />
@@ -75,23 +80,82 @@ function Composer({ autoFocus = false, buttonLabel, disabledReason, icon, label,
   );
 }
 
-function MessageBody({ answers, message, now, onReply, replying, tone }: {
+type Mode = "view" | "editing" | "confirming";
+
+function MessageBody({ answers, authorNames, message, now, onDelete, onEdit, onReply, replying, tone, viewer }: {
   answers?: string | null;
+  authorNames?: ReadonlyMap<string, string>;
   message: ConversationMessage;
   now: number;
+  onDelete?: (id: string) => Promise<void>;
+  onEdit?: (id: string, body: string) => Promise<void>;
   onReply: () => void;
   replying: boolean;
   tone: "root" | "reply";
+  viewer?: ConversationViewer;
 }) {
+  const [mode, setMode] = useState<Mode>("view");
+  const [draft, setDraft] = useState(message.content);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const canEdit = Boolean(onEdit) && canEditMessage(viewer, message);
+  const canDelete = Boolean(onDelete) && canDeleteMessage(viewer, message);
+  const frame = cn("space-y-1.5 rounded-[var(--feed-radius-md,16px)] p-3", tone === "root" ? "bg-[var(--feed-control)]" : "bg-[var(--feed-footer)]");
+
+  if (message.deleted) {
+    return (
+      <div className={frame} data-conversation-message={message.id} data-conversation-deleted="true">
+        <p className="flex items-center gap-1.5 text-sm text-muted-foreground" data-conversation-content>
+          <BanIcon aria-hidden="true" className="size-4" />
+          Message deleted
+        </p>
+      </div>
+    );
+  }
+
+  const stop = () => { setMode("view"); setError(null); setDraft(message.content); };
+  async function save() {
+    const text = draft.trim();
+    if (!text) { setError("A message cannot be empty."); return; }
+    if (text === message.content.trim()) { stop(); return; }
+    setBusy(true);
+    setError(null);
+    try {
+      await onEdit!(message.id, text);
+      setMode("view");
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : "The message could not be saved.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function confirmDelete() {
+    setBusy(true);
+    setError(null);
+    try {
+      await onDelete!(message.id);
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : "The message could not be deleted.");
+      setBusy(false);
+    }
+  }
+  const failure = error ? (
+    <p className="flex items-start gap-1.5 text-sm text-destructive" data-conversation-action-error role="alert">
+      <TriangleAlertIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+      <span>{mode === "editing" ? `Not saved: ${error} Your text is kept here.` : `Not deleted: ${error}`}</span>
+    </p>
+  ) : null;
+
   return (
-    <div className={cn("space-y-1.5 rounded-[var(--feed-radius-lg,10px)] p-3", tone === "root" ? "bg-[var(--feed-control)]" : "bg-[var(--feed-footer)]")} data-conversation-message={message.id} data-conversation-pending={message.pending || undefined}>
+    <div className={frame} data-conversation-message={message.id} data-conversation-pending={message.pending || undefined}>
       <p className="flex flex-wrap items-center gap-x-2 text-sm">
-        <span className="font-semibold" data-conversation-author>{conversationAuthorName(message.authorLabel)}</span>
+        <span className="font-semibold" data-conversation-author>{messageAuthorName(message, authorNames)}</span>
         <span className="text-xs text-muted-foreground" data-conversation-age>
           {message.pending ? (
             <span className="inline-flex items-center gap-1"><Loader2Icon aria-hidden="true" className="size-3 animate-spin" />Sending</span>
           ) : conversationAge(message.createdAt, now)}
         </span>
+        {message.editedAt && !message.pending ? <span className="text-xs text-muted-foreground" data-conversation-edited>edited {conversationAge(message.editedAt, now) === "now" ? "just now" : `${conversationAge(message.editedAt, now)} ago`}</span> : null}
       </p>
       {answers ? (
         <p className="flex items-center gap-1 text-xs text-muted-foreground" data-conversation-answers>
@@ -99,12 +163,58 @@ function MessageBody({ answers, message, now, onReply, replying, tone }: {
           In reply to {answers}
         </p>
       ) : null}
-      <p className="whitespace-pre-wrap break-words text-base" data-conversation-content>{message.content}</p>
-      {!message.pending ? (
-        <button aria-expanded={replying} className={cn(PILL_QUIET, "-ml-3")} data-conversation-reply={message.id} onClick={onReply} type="button">
-          <ReplyIcon aria-hidden="true" className="size-4" />
-          Reply
-        </button>
+      {mode === "editing" ? (
+        <div className="space-y-2" data-conversation-editing>
+          <AutoGrowTextarea
+            aria-label="Edit your message"
+            autoFocus
+            className="block min-h-16 w-full rounded-[var(--feed-radius-md,16px)] border-0 bg-[var(--feed-card)] px-3 py-2 text-sm font-normal leading-5 outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => { if (event.key === "Escape") stop(); else if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) { event.preventDefault(); void save(); } }}
+            value={draft}
+          />
+          {failure}
+          <div className="flex flex-wrap gap-2">
+            <button className={PILL_PRIMARY} data-conversation-edit-save disabled={busy || !draft.trim()} onClick={() => void save()} type="button">
+              {busy ? <Loader2Icon aria-hidden="true" className="size-4 animate-spin" /> : <CheckIcon aria-hidden="true" className="size-4" />}Save
+            </button>
+            <button className={PILL_QUIET} data-conversation-edit-cancel disabled={busy} onClick={stop} type="button"><XIcon aria-hidden="true" className="size-4" />Cancel</button>
+          </div>
+        </div>
+      ) : (
+        <p className="whitespace-pre-wrap break-words text-sm leading-5" data-conversation-content>{message.content}</p>
+      )}
+      {mode === "confirming" ? (
+        <div className="space-y-2" data-conversation-confirm>
+          <p className="flex items-center gap-1.5 text-sm font-medium"><Trash2Icon aria-hidden="true" className="size-4" />Delete this message?</p>
+          {failure}
+          <div className="flex flex-wrap gap-2">
+            <button className={cn(PILL, "bg-[var(--feed-card)] font-semibold text-destructive")} data-conversation-delete-confirm disabled={busy} onClick={() => void confirmDelete()} type="button">
+              {busy ? <Loader2Icon aria-hidden="true" className="size-4 animate-spin" /> : <Trash2Icon aria-hidden="true" className="size-4" />}Delete
+            </button>
+            <button className={PILL_QUIET} data-conversation-delete-keep disabled={busy} onClick={stop} type="button"><XIcon aria-hidden="true" className="size-4" />Keep</button>
+          </div>
+        </div>
+      ) : null}
+      {mode === "view" && !message.pending ? (
+        <div className="flex flex-wrap items-center gap-x-1">
+          <button aria-expanded={replying} className={cn(PILL_QUIET, "-ml-3")} data-conversation-reply={message.id} onClick={onReply} type="button">
+            <ReplyIcon aria-hidden="true" className="size-4" />
+            Reply
+          </button>
+          {canEdit ? (
+            <button className={PILL_QUIET} data-conversation-edit={message.id} onClick={() => { setDraft(message.content); setMode("editing"); }} type="button">
+              <PencilIcon aria-hidden="true" className="size-4" />
+              Edit
+            </button>
+          ) : null}
+          {canDelete ? (
+            <button className={PILL_QUIET} data-conversation-delete={message.id} onClick={() => setMode("confirming")} type="button">
+              <Trash2Icon aria-hidden="true" className="size-4" />
+              Delete
+            </button>
+          ) : null}
+        </div>
       ) : null}
     </div>
   );
@@ -114,24 +224,37 @@ function MessageBody({ answers, message, now, onReply, replying, tone }: {
  * The Messages of one conversation, replies nested one level under their top-level Message, and a box to add another. It knows
  * nothing about where the Messages come from: the caller loads them and saves a post.
  */
-export function ConversationThread({ disabledReason = null, error = null, heading = "Messages", messages, now, onPost, onRetry, state = "ready" }: {
+export function ConversationThread({ authorNames, disabledReason = null, error = null, heading = "Messages", hideHeading = false, latest, messages, now, onDelete, onEdit, onPost, onRetry, state = "ready", viewer }: {
+  /** Display names by author profile id. */
+  authorNames?: ReadonlyMap<string, string>;
   disabledReason?: string | null;
   error?: string | null;
   heading?: string;
+  /** Keep the heading for screen readers only (the Messages page labels the card itself). */
+  hideHeading?: boolean;
+  /** Show only the newest this-many top-level messages (with their replies), and say how many are held back. */
+  latest?: number;
   messages: ReadonlyArray<ConversationMessage>;
   now: number;
+  /** Without these (or without a viewer) no Message offers Edit or Delete. */
+  onDelete?: (messageId: string) => Promise<void>;
+  onEdit?: (messageId: string, body: string) => Promise<void>;
   onPost: (body: string, parentMessageId: string | null) => Promise<void>;
   onRetry?: () => void;
   state?: ConversationState;
+  viewer?: ConversationViewer;
 }) {
-  const tree = useMemo(() => buildConversationTree(messages), [messages]);
+  const fullTree = useMemo(() => buildConversationTree(messages, (message) => messageAuthorName(message, authorNames)), [messages, authorNames]);
+  const [showAll, setShowAll] = useState(false);
+  const { shown: tree, hidden: hiddenRoots } = latestMessages(fullTree, latest ?? Number.MAX_SAFE_INTEGER, showAll);
+  const hiddenCount = hiddenRoots ? messages.length - tree.reduce((sum, root) => sum + 1 + root.replies.length, 0) : 0;
   const [replyingTo, setReplyingTo] = useState<string | null>(null);
-  const authorOf = (id: string) => conversationAuthorName(messages.find((message) => message.id === id)?.authorLabel);
+  const authorOf = (id: string) => { const found = messages.find((message) => message.id === id); return found ? messageAuthorName(found, authorNames) : "Someone"; };
   const toggleReply = (id: string) => setReplyingTo((current) => (current === id ? null : id));
 
   return (
     <section aria-label={heading} className="space-y-3" data-conversation-thread>
-      <h3 className="text-sm font-medium">{heading}</h3>
+      <h3 className={cn(LABEL, "text-muted-foreground", hideHeading && "sr-only")}>{heading}</h3>
       {state === "loading" ? <p className="flex items-center gap-1.5 text-sm text-muted-foreground" data-conversation-loading><Loader2Icon aria-hidden="true" className="size-4 animate-spin" />Loading messages</p> : null}
       {state === "error" ? (
         <p className="flex flex-wrap items-center gap-2 text-sm text-destructive" role="alert">
@@ -141,15 +264,21 @@ export function ConversationThread({ disabledReason = null, error = null, headin
         </p>
       ) : null}
       {state === "ready" && !tree.length ? <p className="text-sm text-muted-foreground" data-conversation-empty>No messages yet. Write down what this made you think.</p> : null}
+      {hiddenCount > 0 ? (
+        <button className={cn(PILL_QUIET, "w-full bg-[var(--feed-control)]/45")} data-conversation-show-all onClick={() => setShowAll(true)} type="button">
+          <MessagesSquareIcon aria-hidden="true" className="size-4" />
+          Show all {messages.length} messages
+        </button>
+      ) : null}
       <ul className="space-y-3">
         {tree.map((root) => (
           <li className="space-y-2" key={root.message.id}>
-            <MessageBody message={root.message} now={now} onReply={() => toggleReply(root.message.id)} replying={replyingTo === root.message.id} tone="root" />
+            <MessageBody authorNames={authorNames} message={root.message} now={now} onDelete={onDelete} onEdit={onEdit} onReply={() => toggleReply(root.message.id)} replying={replyingTo === root.message.id} tone="root" viewer={viewer} />
             {root.replies.length || replyingTo === root.message.id ? (
               <ul className="ml-4 space-y-2" data-conversation-replies>
                 {root.replies.map((reply) => (
                   <li key={reply.message.id}>
-                    <MessageBody answers={reply.answers} message={reply.message} now={now} onReply={() => toggleReply(reply.message.id)} replying={replyingTo === reply.message.id} tone="reply" />
+                    <MessageBody answers={reply.answers} authorNames={authorNames} message={reply.message} now={now} onDelete={onDelete} onEdit={onEdit} onReply={() => toggleReply(reply.message.id)} replying={replyingTo === reply.message.id} tone="reply" viewer={viewer} />
                     {replyingTo === reply.message.id ? (
                       <div className="mt-2">
                         <Composer autoFocus buttonLabel="Reply" disabledReason={disabledReason} icon="reply" label={`Reply to ${authorOf(reply.message.id)}`} onCancel={() => setReplyingTo(null)} onSubmit={(body) => onPost(body, reply.message.id)} placeholder={`Reply to ${authorOf(reply.message.id)}…`} />

package/components/conversations-memory-source.ts

@@ -0,0 +1,83 @@
+import type { MessageThreadRecord } from "../lib/category-repository";
+import { NO_VIEWER, canDeleteMessage, canEditMessage, conversationPreviewLine, threadMetadataWithLastAuthor, type ConversationMessage, type ConversationViewer } from "../lib/conversation";
+import type { ConversationReferenceView, ConversationStoryView, ConversationsSource } from "./conversations-source";
+
+export type MemoryConversation = { thread: MessageThreadRecord; messages: ConversationMessage[] };
+
+/** A source that keeps everything in memory: the demo newsroom (starting empty) and the tests (starting with fixtures). */
+export function createMemoryConversationsSource(authorLabel: string, seed: {
+  conversations?: MemoryConversation[];
+  references?: Record<string, ConversationReferenceView>;
+  stories?: Record<string, ConversationStoryView>;
+  pageSize?: number;
+  /** Who is looking. A Message they post carries their sub. */
+  viewer?: ConversationViewer;
+  /** The viewer's own profile id, recorded on what they post. */
+  viewerProfileId?: string;
+  /** Display names by profile id. */
+  profiles?: Record<string, string>;
+} = {}): ConversationsSource & { conversations: MemoryConversation[] } {
+  const conversations = [...(seed.conversations ?? [])];
+  const pageSize = seed.pageSize ?? 20;
+  const viewer = seed.viewer ?? NO_VIEWER;
+  const find = (messageId: string) => {
+    for (const entry of conversations) {
+      const message = entry.messages.find((candidate) => candidate.id === messageId);
+      if (message) return { entry, message };
+    }
+    throw new Error("That message is not here.");
+  };
+  let started = 0;
+  return {
+    authorLabel,
+    conversations,
+    loadThreads: async (threadKind, nextToken) => {
+      const all = conversations.map((entry) => entry.thread).filter((thread) => thread.threadKind === threadKind).sort((left, right) => right.updatedAt.localeCompare(left.updatedAt));
+      const start = nextToken ? Number(nextToken) : 0;
+      return { items: all.slice(start, start + pageSize), nextToken: start + pageSize < all.length ? String(start + pageSize) : null };
+    },
+    loadViewer: async () => viewer,
+    loadAuthors: async (ids) => new Map(ids.filter((id) => seed.profiles?.[id]).map((id) => [id, seed.profiles![id]])),
+    edit: async (messageId, body) => {
+      const { entry, message } = find(messageId);
+      if (!canEditMessage(viewer, message)) throw new Error("Only the author can edit a message.");
+      const edited = { ...message, content: body.trim(), editedAt: new Date().toISOString() };
+      entry.messages = entry.messages.map((candidate) => (candidate.id === messageId ? edited : candidate));
+      return edited;
+    },
+    remove: async (messageId) => {
+      const { entry, message } = find(messageId);
+      if (!canDeleteMessage(viewer, message)) throw new Error("Only the author or an admin can delete a message.");
+      const removed = { ...message, content: "", deleted: true, deletedAt: new Date().toISOString() };
+      entry.messages = entry.messages.map((candidate) => (candidate.id === messageId ? removed : candidate));
+      return removed;
+    },
+    loadMessages: async (threadId) => [...(conversations.find((entry) => entry.thread.id === threadId)?.messages ?? [])],
+    post: async ({ thread, body, parentMessageId }) => {
+      const entry = conversations.find((candidate) => candidate.thread.id === thread.id);
+      if (!entry) throw new Error("That conversation is not here.");
+      const sequenceNumber = Math.max(0, ...entry.messages.map((message) => message.sequenceNumber)) + 1;
+      const message: ConversationMessage = { id: `${thread.id}-m${sequenceNumber}`, parentMessageId, authorLabel, authorSub: viewer.sub, authorUserProfileId: seed.viewerProfileId ?? null, content: body.trim(), createdAt: new Date().toISOString(), sequenceNumber };
+      entry.messages.push(message);
+      entry.thread = { ...entry.thread, messageCount: entry.messages.length, lastMessageAt: message.createdAt, updatedAt: message.createdAt, summary: conversationPreviewLine(message.content), metadata: threadMetadataWithLastAuthor(entry.thread.metadata, authorLabel) };
+      return message;
+    },
+    loadThread: async (threadId) => conversations.find((entry) => entry.thread.id === threadId)?.thread ?? null,
+    rename: async (thread, title) => {
+      const entry = conversations.find((candidate) => candidate.thread.id === thread.id);
+      if (!entry) throw new Error("That conversation is not here.");
+      entry.thread = { ...entry.thread, title: title.trim() };
+      return entry.thread;
+    },
+    start: async (title, body) => {
+      started += 1;
+      const now = new Date().toISOString();
+      const thread: MessageThreadRecord = { id: `message-thread-conversation-new-${started}`, threadKind: "conversation", status: "active", title: title.trim(), createdBySub: viewer.sub, summary: conversationPreviewLine(body), metadata: threadMetadataWithLastAuthor(null, authorLabel), createdByLabel: authorLabel, messageCount: 1, lastMessageAt: now, createdAt: now, updatedAt: now };
+      const message: ConversationMessage = { id: `${thread.id}-m1`, parentMessageId: null, authorLabel, authorSub: viewer.sub, authorUserProfileId: seed.viewerProfileId ?? null, content: body.trim(), createdAt: now, sequenceNumber: 1 };
+      conversations.push({ thread, messages: [message] });
+      return { thread, message };
+    },
+    loadReferences: async (ids) => new Map(ids.filter((id) => seed.references?.[id]).map((id) => [id, seed.references![id]])),
+    loadStories: async (ids) => new Map(ids.filter((id) => seed.stories?.[id]).map((id) => [id, seed.stories![id]])),
+  };
+}

package/components/conversations-network-source.ts

@@ -0,0 +1,52 @@
+import { referencePreviewsByLineage } from "../lib/reference-preview";
+import {
+  appendConversationMessage,
+  deleteConversationMessage,
+  editConversationMessage,
+  loadConversationThread,
+  loadConversationThreadMessages,
+  loadConversationViewer,
+  loadUserProfileNames,
+  loadConversationThreadPage,
+  loadReferenceAttachmentsForLineageId,
+  loadReferenceRecordByLineageId,
+  loadStoryHeaders,
+  renameConversationThread,
+  startUnattachedConversation,
+} from "./news-desk-taxonomy-client";
+import type { ConversationReferenceView, ConversationsSource } from "./conversations-source";
+
+const PAGE_SIZE = 20;
+
+/** The newsroom's own source: the MessageThread and Message models. A Reference that cannot be read is left out, and its header shows only the thread's own title. */
+export function createNetworkConversationsSource(authorLabel: string): ConversationsSource {
+  return {
+    authorLabel,
+    loadThreads: (threadKind, nextToken) => loadConversationThreadPage(threadKind, nextToken, PAGE_SIZE),
+    loadMessages: loadConversationThreadMessages,
+    loadViewer: loadConversationViewer,
+    loadAuthors: loadUserProfileNames,
+    edit: editConversationMessage,
+    remove: (messageId, moderate) => deleteConversationMessage(messageId, moderate),
+    post: async ({ thread, body, parentMessageId }) => {
+      const anchor = thread.primaryAnchorLineageId && (thread.primaryAnchorKind === "reference" || thread.primaryAnchorKind === "item")
+        ? { kind: thread.primaryAnchorKind, lineageId: thread.primaryAnchorLineageId, title: thread.title } as const
+        : { kind: "none" } as const;
+      return (await appendConversationMessage({ anchor, body, parentMessageId, thread })).message;
+    },
+    loadThread: loadConversationThread,
+    rename: renameConversationThread,
+    start: startUnattachedConversation,
+    loadReferences: async (lineageIds) => {
+      const views = new Map<string, ConversationReferenceView>();
+      await Promise.all([...new Set(lineageIds)].map(async (lineageId) => {
+        try {
+          const [reference, attachments] = await Promise.all([loadReferenceRecordByLineageId(lineageId), loadReferenceAttachmentsForLineageId(lineageId).catch(() => [])]);
+          if (reference) views.set(lineageId, { reference, preview: referencePreviewsByLineage(attachments).get(lineageId) });
+        } catch { /* left out */ }
+      }));
+      return views;
+    },
+    loadStories: loadStoryHeaders,
+  };
+}

package/components/conversations-page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+import { ConversationsView } from "./conversations-view";
+import { createMemoryConversationsSource } from "./conversations-memory-source";
+import { createNetworkConversationsSource } from "./conversations-network-source";
+
+/** The Messages page: every conversation, from the backend (or kept in memory in the demo). */
+export function ConversationsPage({ authorLabel, demo }: { authorLabel: string; demo: boolean }) {
+  const router = useRouter();
+  const source = useMemo(() => (demo ? createMemoryConversationsSource(authorLabel) : createNetworkConversationsSource(authorLabel)), [authorLabel, demo]);
+  return <ConversationsView demo={demo} onNavigate={(href) => router.push(href)} source={source} />;
+}

package/components/conversations-source.ts

@@ -0,0 +1,36 @@
+import type { MessageThreadRecord, ReferenceRecord } from "../lib/category-repository";
+import type { ConversationMessage, ConversationViewer } from "../lib/conversation";
+import type { PagedThreads } from "../lib/conversation-feed";
+import type { ReferencePreview } from "../lib/reference-preview";
+
+/** A Reference as the Messages page shows it: the record and the page's preview picture, when it has one. */
+export type ConversationReferenceView = { reference: ReferenceRecord; preview: ReferencePreview | undefined };
+export type ConversationStoryView = { title: string; stage: string | null };
+
+/**
+ * Where the Messages page reads and writes. The newsroom's is in conversations-network-source.ts; the tests give it an in-memory one.
+ * Every read is a page or a batch, so a page of conversations never costs one request per card per render.
+ */
+export type ConversationsSource = {
+  authorLabel: string;
+  /** One page of the conversation threads of one kind, newest activity first. */
+  loadThreads: (threadKind: string, nextToken: string | null) => Promise<PagedThreads<MessageThreadRecord>>;
+  loadMessages: (threadId: string) => Promise<ConversationMessage[]>;
+  /** Who is looking: their sub and whether they are an admin. Decides which Messages show Edit and Delete. */
+  loadViewer: () => Promise<ConversationViewer>;
+  /** Display names by profile id, in one request for a whole conversation. Profiles that cannot be read are simply absent. */
+  loadAuthors: (profileIds: string[]) => Promise<Map<string, string>>;
+  /** The author changes their own Message's text; rejects with the reason when the API refuses. */
+  edit: (messageId: string, body: string) => Promise<ConversationMessage>;
+  /** A soft delete: the Message stays, marked deleted. */
+  remove: (messageId: string, moderate: boolean) => Promise<ConversationMessage>;
+  post: (input: { thread: MessageThreadRecord; body: string; parentMessageId: string | null }) => Promise<ConversationMessage>;
+  /** One thread by id, for a linked address whose thread is not on the pages read so far. Null when there is none. */
+  loadThread: (threadId: string) => Promise<MessageThreadRecord | null>;
+  /** Gives the conversation a new title; rejects with the reason when it cannot be saved. */
+  rename: (thread: MessageThreadRecord, title: string) => Promise<MessageThreadRecord>;
+  /** A new conversation about nothing but itself, with its own title and first message. */
+  start: (title: string, body: string) => Promise<{ thread: MessageThreadRecord; message: ConversationMessage }>;
+  loadReferences: (lineageIds: string[]) => Promise<Map<string, ConversationReferenceView>>;
+  loadStories: (lineageIds: string[]) => Promise<Map<string, ConversationStoryView>>;
+};